new
This commit is contained in:
commit
1d8da2b6dd
824 changed files with 76366 additions and 0 deletions
788
assets/scss/_common.scss
Normal file
788
assets/scss/_common.scss
Normal file
|
|
@ -0,0 +1,788 @@
|
|||
ul {
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
img{
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
a,
|
||||
a:focus,
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-size: 18px;
|
||||
border-color: $color-primary;
|
||||
padding: 20px 40px;
|
||||
text-align: left;
|
||||
color: darken( $light, 50.98);
|
||||
}
|
||||
|
||||
.navbar-toggle .icon-bar {
|
||||
background: $color-primary;
|
||||
}
|
||||
|
||||
input[type="email"],
|
||||
input[type="password"],
|
||||
input[type="text"],
|
||||
input[type="tel"] {
|
||||
box-shadow: none;
|
||||
height: 45px;
|
||||
outline: none;
|
||||
font-size: 14px;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
border: 1px solid $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.form-control {
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
border: 1px solid $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.slick-slide {
|
||||
outline: 0
|
||||
}
|
||||
|
||||
|
||||
// Button Style
|
||||
|
||||
.btn-main {
|
||||
background: $color-primary;
|
||||
color: $white;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
letter-spacing: 1px;
|
||||
padding: 20px 20px;
|
||||
|
||||
text-transform: uppercase;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
@include transition (all, 0.2s, ease);
|
||||
|
||||
&.btn-icon {
|
||||
i {
|
||||
font-size: 16px;
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color-primary, 100%);
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.btn-solid-border {
|
||||
border: 2px solid $white;
|
||||
background: transparent;
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
background: whitesmoke;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.btn-transparent {
|
||||
@extend .btn-main;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
color: $color-primary;
|
||||
|
||||
&:hover {
|
||||
background: transparent;
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-large {
|
||||
padding: 20px 45px;
|
||||
|
||||
&.btn-icon {
|
||||
i {
|
||||
font-size: 16px;
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-small {
|
||||
@extend .btn-main;
|
||||
padding: 10px 25px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.btn-round {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.btn-round-full {
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
|
||||
.btn.active:focus,
|
||||
.btn:active:focus,
|
||||
.btn:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.mt-10 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.mt-20 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.mt-30 {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.mt-40 {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.mt-50 {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.btn:focus {
|
||||
color: darken( $light, 10.9);
|
||||
}
|
||||
|
||||
.w-100 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.margin-0 {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
/* preloader */
|
||||
|
||||
.preloader {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: $white;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.bg-shadow {
|
||||
background-color: $white;
|
||||
box-shadow: 0 16px 24px rgba(0, 0, 0, .08);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.bg-gray {
|
||||
background: $light;
|
||||
}
|
||||
|
||||
.bg-primary {
|
||||
background: $color-primary;
|
||||
}
|
||||
|
||||
.bg-primary-dark {
|
||||
background: darken($color-primary, 10%);
|
||||
}
|
||||
|
||||
.bg-primary-darker {
|
||||
background: darken($color-primary, 20%);
|
||||
|
||||
}
|
||||
|
||||
.bg-dark {
|
||||
background: #202122;
|
||||
}
|
||||
|
||||
|
||||
.section {
|
||||
padding: 10px 0;
|
||||
|
||||
@include tablet {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.section-sm {
|
||||
padding: 70px 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 20px 0 30px;
|
||||
|
||||
h2 {
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 20px;
|
||||
|
||||
@include tablet {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-transform: uppercase;
|
||||
font-weight: 400;
|
||||
margin: 0px;
|
||||
padding: 10px 0px;
|
||||
font-size: 3em; /* Standard Schriftgröße für h2 */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 1.5em; /* Kleinere Schriftgröße für mobile Geräte */
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
font-size: 1.2em; /* Noch kleinere Schriftgröße für sehr kleine Geräte */
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-style: italic;
|
||||
color: darken($light, 57.64);
|
||||
font-family: $font-secondary;
|
||||
font-size: 1em; /* Standard Schriftgröße für p */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 0.9em; /* Kleinere Schriftgröße für mobile Geräte */
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
font-size: 0.8em; /* Noch kleinere Schriftgröße für sehr kleine Geräte */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 30px;
|
||||
|
||||
@include mobile-xs {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.page-title {
|
||||
height: auto; /* Höhe basierend auf Inhalt */
|
||||
padding: 85px 0;
|
||||
@extend .overly;
|
||||
|
||||
.block {
|
||||
text-align: center;
|
||||
|
||||
h1 {
|
||||
color: $white;
|
||||
font-weight: 200;
|
||||
letter-spacing: 0.5em;
|
||||
margin-top: 20;
|
||||
margin-bottom: 10;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.heading {
|
||||
padding-bottom: 60px;
|
||||
text-align: center;
|
||||
|
||||
h2 {
|
||||
color: $black;
|
||||
font-size: 30px;
|
||||
line-height: 40px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 18px;
|
||||
line-height: 40px;
|
||||
color: lighten( $black, 16.078);
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.page-wrapper {
|
||||
padding: 70px 0;
|
||||
|
||||
@include tablet {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// Social Media Icons
|
||||
.social-media-icons {
|
||||
ul {
|
||||
li {
|
||||
display: inline-block;
|
||||
|
||||
a {
|
||||
font-size: 18px;
|
||||
color: lighten( $black, 20 );
|
||||
display: inline-block;
|
||||
padding: 7px 12px;
|
||||
color: $white;
|
||||
|
||||
}
|
||||
|
||||
.twitter {
|
||||
background: #00aced;
|
||||
}
|
||||
|
||||
.facebook {
|
||||
background: #3b5998;
|
||||
padding: 7px 18px;
|
||||
}
|
||||
|
||||
.googleplus {
|
||||
background: #dd4b39;
|
||||
}
|
||||
|
||||
.dribbble {
|
||||
background: #ea4c89;
|
||||
}
|
||||
|
||||
.instagram {
|
||||
background: #bc2a8d;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.dropdown-slide {
|
||||
position: static;
|
||||
|
||||
.open>a,
|
||||
.open>a:focus,
|
||||
.open>a:hover {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&.full-width {
|
||||
.dropdown-menu {
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .dropdown-menu {
|
||||
display: none;
|
||||
opacity: 1;
|
||||
display: block;
|
||||
transform: translate(0px, 0px);
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
color: darken( $light, 50.98);
|
||||
transform: translateY(0px);
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
border-radius: 0;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
position: absolute;
|
||||
padding: 15px;
|
||||
border: 1px solid #ebebeb;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
position: absolute;
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: visibility 0.2s, opacity 0.2s, transform 500ms cubic-bezier(0.43, 0.26, 0.11, 0.99);
|
||||
|
||||
@include mobile {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.commonSelect {
|
||||
margin-left: 10px;
|
||||
padding-right: 6px;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: '\f3d0';
|
||||
font-family: $font-icon;
|
||||
position: absolute;
|
||||
right: -4px;
|
||||
top: 4px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
select {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
padding: 0;
|
||||
height: auto;
|
||||
color: lighten( $black, 33.3 );
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabCommon {
|
||||
.nav-tabs {
|
||||
border-bottom: 0;
|
||||
margin-bottom: 10px;
|
||||
|
||||
li {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
li.active a {
|
||||
background-color: $color-primary;
|
||||
border: 1px solid $color-primary;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
a {
|
||||
border-radius: 0;
|
||||
background: $light;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid transparent;
|
||||
background: $color-primary;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
padding: 20px;
|
||||
border: 1px solid $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.commonAccordion {
|
||||
.panel {
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
|
||||
.panel-heading {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
position: relative;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
padding: 10px 10px;
|
||||
}
|
||||
|
||||
a:before {
|
||||
color: lighten( $black, 33.3 );
|
||||
content: "\f209";
|
||||
position: absolute;
|
||||
right: 25px;
|
||||
font-family: $font-icon;
|
||||
}
|
||||
|
||||
a.collapsed:before {
|
||||
content: "\f217";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.commonAccordion-2 {
|
||||
@extend .commonAccordion;
|
||||
}
|
||||
|
||||
|
||||
.list-circle {
|
||||
padding-left: 20px;
|
||||
|
||||
li {
|
||||
list-style-type: circle;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.play-icon {
|
||||
border: 1px solid $border-color;
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50px;
|
||||
font-size: 30px;
|
||||
|
||||
i {
|
||||
line-height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.alert-common {
|
||||
border-radius: 0;
|
||||
border-width: 2px;
|
||||
|
||||
i {
|
||||
margin: 0 5px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-solid {
|
||||
background: transparent;
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
.buttonPart {
|
||||
li {
|
||||
@include mobile {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.overly {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(42, 68, 71, 0.5); /* Helleres Overlay */
|
||||
opacity: 0.3; /* Weniger Opazität */
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.owl-dots .owl-dot.active span,
|
||||
.owl-theme .owl-dots .owl-dot:hover span {
|
||||
background: $color-primary !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#success,
|
||||
#error {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sticky-top {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
@include desktop {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
span.cloaked-e-mail:before {
|
||||
content: attr(data-domain) "\0040" attr(data-user);
|
||||
unicode-bidi: bidi-override;
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.row .no-float {
|
||||
display: table-cell;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
/* copy from here */
|
||||
.scrolldown {
|
||||
--color: white;
|
||||
--sizeX: 30px;
|
||||
--sizeY: 50px;
|
||||
position: relative;
|
||||
width: var(--sizeX);
|
||||
height: var(--sizeY);
|
||||
margin-left: calc(50% - var(--sizeX) / 2); /* Korrigiert für Zentrierung */
|
||||
margin-top: 100px;
|
||||
border: calc(var(--sizeX) / 10) solid var(--color);
|
||||
border-radius: 50px;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.scrolldown::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
left: 50%;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
margin-left: -3px;
|
||||
background-color: var(--color);
|
||||
border-radius: 100%;
|
||||
animation: scrolldown-anim 2s infinite;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0px -5px 3px 1px #ffffff66;
|
||||
}
|
||||
|
||||
@keyframes scrolldown-anim {
|
||||
0% {
|
||||
opacity: 0;
|
||||
height: 6px;
|
||||
}
|
||||
40% {
|
||||
opacity: 1;
|
||||
height: 10px;
|
||||
}
|
||||
80% {
|
||||
transform: translate(0, 20px);
|
||||
height: 10px;
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
height: 3px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.chevrons {
|
||||
padding: 6px 0 0 0;
|
||||
margin-left: -3px; /* Überprüfen, ob dies benötigt wird */
|
||||
margin-top: 48px;
|
||||
width: 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.chevrondown {
|
||||
margin-top: -6px;
|
||||
position: relative;
|
||||
border: solid var(--color);
|
||||
border-width: 0 3px 3px 0;
|
||||
display: inline-block;
|
||||
padding: 0; /* Stellt sicher, dass kein zusätzliches Padding hinzugefügt wird */
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.chevrondown:nth-child(odd) {
|
||||
animation: pulse 500ms ease infinite alternate;
|
||||
}
|
||||
|
||||
.chevrondown:nth-child(even) {
|
||||
animation: pulse 500ms ease infinite alternate 250ms;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
/*copy until here */
|
||||
|
||||
.logo-up {
|
||||
margin-top: -50px; /* Adjust the value as needed */
|
||||
}
|
||||
|
||||
|
||||
.section-title1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px; /* Abstand zwischen Icon und Titel */
|
||||
}
|
||||
|
||||
.title-icon1 {
|
||||
width: 10px; /* Breite des Icons */
|
||||
height: 10px; /* Höhe automatisch anpassen */
|
||||
}
|
||||
|
||||
.why-title1 {
|
||||
margin: 0; /* Entfernt zusätzliche Ränder */
|
||||
}
|
||||
78
assets/scss/_main.scss
Normal file
78
assets/scss/_main.scss
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
#wrapper-work {
|
||||
overflow: hidden;
|
||||
padding-top: 100px;
|
||||
|
||||
ul {
|
||||
li {
|
||||
width: 50%;
|
||||
float: left;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.items-text {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: $white;
|
||||
background: rgba(0, 0, 0, 0.60);
|
||||
padding-left: 44px;
|
||||
padding-top: 140px;
|
||||
|
||||
h2 {
|
||||
padding-bottom: 28px;
|
||||
padding-top: 75px;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 75px;
|
||||
height: 3px;
|
||||
background: $white;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
padding-top: 30px;
|
||||
font-size: 16px;
|
||||
line-height: 27px;
|
||||
font-weight: 300;
|
||||
padding-right: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*--
|
||||
features-work Start
|
||||
--*/
|
||||
|
||||
#features-work {
|
||||
padding-top: 50px;
|
||||
padding-bottom: 75px;
|
||||
|
||||
.block {
|
||||
ul {
|
||||
li {
|
||||
width: 19%;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
padding: 40px 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
26
assets/scss/_media-query.scss
Normal file
26
assets/scss/_media-query.scss
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
/*=== MEDIA QUERY ===*/
|
||||
@mixin mobile-xs {
|
||||
@media(max-width: 400px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@mixin mobile {
|
||||
@media(max-width: 480px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@mixin tablet {
|
||||
@media(max-width: 768px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@mixin desktop {
|
||||
@media(max-width: 992px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@mixin large-desktop {
|
||||
@media(max-width: 1200px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
54
assets/scss/_mixins.scss
Normal file
54
assets/scss/_mixins.scss
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
// Transition
|
||||
@mixin transition($what: all, $time: 0.2s, $how: ease-in-out) {
|
||||
-webkit-transition: $what $time $how;
|
||||
-moz-transition: $what $time $how;
|
||||
-ms-transition: $what $time $how;
|
||||
-o-transition: $what $time $how;
|
||||
transition: $what $time $how;
|
||||
}
|
||||
|
||||
@mixin transition-multi($x...){
|
||||
-webkit-transition: $x;
|
||||
-moz-transition: $x;
|
||||
-ms-transition: $x;
|
||||
-o-transition: $x;
|
||||
transition: $x;
|
||||
}
|
||||
|
||||
// Transform
|
||||
@mixin transform($transforms) {
|
||||
-moz-transform: $transforms;
|
||||
-o-transform: $transforms;
|
||||
-ms-transform: $transforms;
|
||||
-webkit-transform: $transforms;
|
||||
transform: $transforms;
|
||||
}
|
||||
|
||||
// rotate
|
||||
@mixin rotate ($deg) {
|
||||
@include transform(rotate(#{$deg}deg));
|
||||
}
|
||||
|
||||
// scale
|
||||
@mixin scale($scale) {
|
||||
@include transform(scale($scale));
|
||||
}
|
||||
|
||||
// translate
|
||||
@mixin translate ($x, $y) {
|
||||
@include transform(translate($x, $y));
|
||||
}
|
||||
|
||||
// skew
|
||||
@mixin skew ($x, $y) {
|
||||
@include transform(skew(#{$x}deg, #{$y}deg));
|
||||
}
|
||||
|
||||
//transform origin
|
||||
@mixin transform-origin ($origin) {
|
||||
moz-transform-origin: $origin;
|
||||
-o-transform-origin: $origin;
|
||||
-ms-transform-origin: $origin;
|
||||
-webkit-transform-origin: $origin;
|
||||
transform-origin: $origin;
|
||||
}
|
||||
87
assets/scss/_typography.scss
Normal file
87
assets/scss/_typography.scss
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
// Fonts
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: local('Open Sans'), local('OpenSans'), url('/static/fonts/OpenSans-SemiboldItalic.woff2') format('woff2');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans Semibold';
|
||||
src: local('Open Sans Semibold'), local('OpenSansSemibold'), url('/static/fonts/OpenSans-Semibold.woff2') format('woff2');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// Using Variables for Font Families
|
||||
$font-primary: 'Open Sans', sans-serif;
|
||||
$font-secondary: 'Open Sans Semibold', sans-serif;
|
||||
|
||||
|
||||
|
||||
body {
|
||||
line-height: 1.5;
|
||||
font-family: $font-primary;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: $font-secondary;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: $h1;
|
||||
|
||||
@include tablet {
|
||||
font-size: $h1-md;
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
font-size: $h2;
|
||||
}
|
||||
|
||||
@include mobile-xs {
|
||||
font-size: $h2-md;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: $h2;
|
||||
|
||||
@include mobile {
|
||||
font-size: $h2-sm;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: $h3;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: $h4;
|
||||
}
|
||||
|
||||
p {
|
||||
color: darken( $light, 49.41);
|
||||
font-size: $font-size;
|
||||
font-family: $font-secondary;
|
||||
}
|
||||
305
assets/scss/custom.scss
Normal file
305
assets/scss/custom.scss
Normal file
|
|
@ -0,0 +1,305 @@
|
|||
// Add your custom code
|
||||
|
||||
.title-custom {
|
||||
color: #046e6e;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-justify {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Reduziert den Abstand zwischen den Sections */
|
||||
section {
|
||||
margin-bottom: 0px; /* Anpassung nach Bedarf */
|
||||
}
|
||||
|
||||
/* Zusätzliche optionale Stile für eine bessere Darstellung */
|
||||
#welcome.section, #service.section {
|
||||
padding-top: 90px; /* Anpassung nach Bedarf */
|
||||
padding-bottom: 4px; /* Anpassung nach Bedarf */
|
||||
}
|
||||
|
||||
.text-justify {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 22px; /* Standard Schriftgröße */
|
||||
line-height: 1.5;
|
||||
padding-top: 90px; /* Anpassung nach Bedarf */
|
||||
padding-bottom: 1px; /* Anpassung nach Bedarf */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 18px; /* Kleinere Schriftgröße für Tablets */
|
||||
padding-top: 70px; /* Anpassung nach Bedarf */
|
||||
padding-bottom: 1px; /* Anpassung nach Bedarf */
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
font-size: 16px; /* Noch kleinere Schriftgröße für Handys */
|
||||
padding-top: 50px; /* Anpassung nach Bedarf */
|
||||
padding-bottom: 1px; /* Anpassung nach Bedarf */
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.facts .fact-item {
|
||||
padding: 15px; /* Abstand um die Bilder */
|
||||
}
|
||||
|
||||
|
||||
|
||||
.facts .fact-item {
|
||||
padding: 15px; /* Abstand um die Bilder */
|
||||
}
|
||||
|
||||
.fact-image {
|
||||
height: 250px; /* Einheitliche Höhe für alle Bilder */
|
||||
width: auto; /* Breite automatisch anpassen, um das Seitenverhältnis beizubehalten */
|
||||
object-fit: contain; /* Bild innerhalb der festgelegten Höhe zuschneiden, um das Seitenverhältnis beizubehalten */
|
||||
border-radius: 8px; /* Abgerundete Ecken für die Bilder */
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
|
||||
}
|
||||
|
||||
.custom-background {
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.service-arrow .block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.service-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.service-icon {
|
||||
margin-right: 15px; /* Abstand nach Bedarf anpassen */
|
||||
}
|
||||
|
||||
.service-image {
|
||||
margin-left: 15px; /* Abstand nach Bedarf anpassen */
|
||||
}
|
||||
|
||||
.service-image img {
|
||||
max-width: 150px; /* Maximale Breite des Bildes anpassen */
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
.bg-service1 {
|
||||
background-color: #8bcfd6; /* Beispielhafte Farbe für primary-dark */
|
||||
}
|
||||
.bg-service2 {
|
||||
background-color: #6baeb5; /* Beispielhafte Farbe für primary-dark */
|
||||
}
|
||||
.bg-service3 {
|
||||
background-color: #8bcfd6; /* Beispielhafte Farbe für primary-dark */
|
||||
}
|
||||
.bg-service4 {
|
||||
background-color: #6baeb5; /* Beispielhafte Farbe für primary-dark */
|
||||
}
|
||||
.bg-service5 {
|
||||
background-color: #8bcfd6; /* Beispielhafte Farbe für primary-dark */
|
||||
}
|
||||
.bg-service6 {
|
||||
background-color: #6baeb5; /* Beispielhafte Farbe für primary-dark */
|
||||
}
|
||||
.bg-service7 {
|
||||
background-color: #8bcfd6; /* Beispielhafte Farbe für primary-dark */
|
||||
}
|
||||
.bg-service8 {
|
||||
background-color: #6baeb5; /* Beispielhafte Farbe für primary-dark */
|
||||
}
|
||||
|
||||
.fixed-width {
|
||||
width: 1200px; /* Feste Breite, die du anpassen kannst */
|
||||
height: auto; /* Höhe wird automatisch angepasst, um das Seitenverhältnis beizubehalten */
|
||||
}
|
||||
|
||||
.service-arrow .block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px; /* Optional: Padding hinzufügen */
|
||||
border-radius: 100px; /* Optional: Abgerundete Ecken hinzufügen */
|
||||
color: #8a0909; /* Optional: Textfarbe auf Weiß setzen */
|
||||
}
|
||||
|
||||
.service-icon {
|
||||
margin-right: 0px; /* Abstand nach Bedarf anpassen */
|
||||
}
|
||||
|
||||
.service-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.service-image {
|
||||
margin-left: 0px; /* Abstand nach Bedarf anpassen */
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.fixed-text {
|
||||
width: 600px; /* Feste Breite für den Text */
|
||||
margin-right: 15px; /* Optional: Abstand nach Bedarf anpassen */
|
||||
}
|
||||
|
||||
.service-image img {
|
||||
max-width: 600px; /* Maximale Breite des Bildes anpassen */
|
||||
height: auto;
|
||||
margin: 0; /* Entfernt zusätzliche Margins */
|
||||
padding: 0; /* Entfernt zusätzliches Padding */
|
||||
border: none; /* Entfernt jegliche Standardrahmen */
|
||||
display: block; /* Verhindert zusätzliche Ränder bei inline-block-Elementen */
|
||||
}
|
||||
|
||||
.page-title::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #ffffff; /* Weiß als Hintergrundfarbe */
|
||||
z-index: -1; /* Sicherstellen, dass es hinter dem Inhalt liegt */
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.service-grid {
|
||||
display: grid;
|
||||
gap: 20px; /* 40px Abstand sowohl horizontal als auch vertikal */
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
/* => Standard: 3 Spalten für größere Bildschirme */
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.service-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
/* => mittlere Screens: nur 2 Spalten */
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.service-grid {
|
||||
grid-template-columns: 1fr;
|
||||
/* => kleine Screens: 1 Spalte */
|
||||
}
|
||||
}
|
||||
|
||||
/* Ab hier das Zoom-/Overlay-Setup (identisch wie vorher) */
|
||||
.service-item-fixed {
|
||||
width: 100%;
|
||||
height: auto; /* Oder "auto" falls die Höhe flexibel sein soll */
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 10px; /* Abgerundete Ecken */
|
||||
}
|
||||
|
||||
.zoom-wrap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.service-item-fixed:hover .zoom-wrap {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.zoom-wrap a {
|
||||
display: block; /* Stellt sicher, dass der Link das gesamte umschlossene Element abdeckt */
|
||||
text-decoration: none; /* Entfernt die Unterstreichung des Links */
|
||||
color: inherit; /* Erbt die Textfarbe, um sicherzustellen, dass der Linktext stilistisch passt */
|
||||
}
|
||||
|
||||
.zoom-wrap img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Das "dunkle Overlay" */
|
||||
.zoom-wrap .overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: rgba(0, 0, 0, 0.3); /* dunkler Schleier (30% schwarz) */
|
||||
z-index: 1; /* Overlay unter dem Text, aber über dem Bild */
|
||||
pointer-events: auto; /* Stellt sicher, dass das Overlay klickbar ist */
|
||||
}
|
||||
|
||||
.overlay-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #fff;
|
||||
font-size: 2.3em;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
|
||||
z-index: 2; /* Höher als das Overlay */
|
||||
}
|
||||
|
||||
|
||||
.my-container {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.gif-background {
|
||||
background-image: url('/images/BackgroundAnimation.svg'); /* Pfad zu Ihrem GIF */
|
||||
background-size: cover; /* Deckt den gesamten Hintergrund ab */
|
||||
background-position: center -220px; /* Positioniert das GIF oben in der Mitte */
|
||||
background-repeat: no-repeat; /* Verhindert die Wiederholung des GIFs */
|
||||
position: relative; /* Stellt sicher, dass das Overlay korrekt positioniert wird */
|
||||
}
|
||||
|
||||
.gif-background::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(255, 255, 255, 0.8); /* Weißer Overlay mit 70% Deckkraft */
|
||||
pointer-events: none; /* Stellt sicher, dass das Overlay keine Interaktionen blockiert */
|
||||
}
|
||||
|
||||
.custom-image {
|
||||
width: 100px;
|
||||
height: auto;
|
||||
max-width: 70%;
|
||||
}
|
||||
26
assets/scss/modal.scss
Normal file
26
assets/scss/modal.scss
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
@mixin modal($centerWidth, $windowWidth) {
|
||||
|
||||
@include var(background-color, dark1);
|
||||
@include var(color, light1);
|
||||
|
||||
z-index: 1001;
|
||||
box-shadow: $cm-box-shadow-dark-md;
|
||||
|
||||
width: 100%;
|
||||
max-height: 98%;
|
||||
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
|
||||
position: fixed;
|
||||
overflow: auto;
|
||||
|
||||
@media (min-width: $centerWidth) {
|
||||
@include var(border-radius, border-radius);
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
max-width: $windowWidth;
|
||||
height: auto;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
188
assets/scss/style.scss
Normal file
188
assets/scss/style.scss
Normal file
|
|
@ -0,0 +1,188 @@
|
|||
// Color Variables
|
||||
{{ with site.Params.variables }}
|
||||
$color-primary: {{.color_primary | default "#fff"}};
|
||||
$color-secondary: {{.color_secondary | default "#0AA8A7"}};
|
||||
$text-color: {{.text_color | default "#777"}};
|
||||
$text-dark: {{.text_dark | default "#222"}};
|
||||
$text-light: {{.text_light | default "#737373"}};
|
||||
$body-bg: {{.body_color | default "#fff"}};
|
||||
$border-color: {{.border_color | default "#ECECEC"}};
|
||||
$black: {{.black | default "#000"}};
|
||||
$white: {{.white | default "#fff"}};
|
||||
$light: {{.light | default "#EDF6F5"}};
|
||||
|
||||
|
||||
// Font Variables
|
||||
$font-size: {{.font_size | default "16px"}};
|
||||
$font-scale: {{.font_scale | default "1.25"}};
|
||||
$font-primary: '{{replace (replaceRE ":[ital,]*[ital@]*[wght@]*[0-9,;]+" "" .font_primary | default "Lato") "+" " "}}', {{.font_primary_type | default "sans-serif"}};
|
||||
$font-secondary: '{{replace (replaceRE ":[ital,]*[ital@]*[wght@]*[0-9,;]+" "" .font_secondary | default "Lato") "+" " "}}', {{.font_secondary_type | default "sans-serif"}};
|
||||
$font-tertiary: '{{replace (replaceRE ":[ital,]*[ital@]*[wght@]*[0-9,;]+" "" .font_tertiary | default "Dosis") "+" " "}}', {{.font_tertiary_type | default "sans-serif"}};
|
||||
$font-quaternary: '{{replace (replaceRE ":[ital,]*[ital@]*[wght@]*[0-9,;]+" "" .font_quaternary | default "Edu") "+" " "}}', {{.font_quaternary_type | default "sans-serif"}};
|
||||
|
||||
$font-icon: '{{.font_icon | default "Font Awesome 5 Free"}}';
|
||||
{{ end }}
|
||||
|
||||
$h1: 80px;
|
||||
$h1-md: 34px;
|
||||
$h2: 28px;
|
||||
$h2-md: 26px;
|
||||
$h2-sm: 22px;
|
||||
$h3: 20px;
|
||||
$h4: 25px;
|
||||
|
||||
@import 'mixins.scss';
|
||||
|
||||
@import 'media-query.scss';
|
||||
|
||||
@import 'typography.scss';
|
||||
|
||||
@import 'common.scss';
|
||||
|
||||
@import 'main.scss';
|
||||
|
||||
@import 'templates/_header.scss';
|
||||
|
||||
@import 'templates/_navigation.scss';
|
||||
|
||||
@import 'templates/_slider.scss';
|
||||
|
||||
@import 'templates/_call-to-action.scss';
|
||||
|
||||
@import 'templates/_service.scss';
|
||||
|
||||
@import 'templates/_feature.scss';
|
||||
|
||||
@import 'templates/_portfolio.scss';
|
||||
|
||||
@import 'templates/_testimonial.scss';
|
||||
|
||||
@import 'templates/_contact.scss';
|
||||
|
||||
@import 'templates/_pricing.scss';
|
||||
|
||||
@import 'templates/_products.scss';
|
||||
|
||||
@import 'templates/_single-product.scss';
|
||||
|
||||
@import 'templates/_clients.scss';
|
||||
|
||||
@import 'templates/_about.scss';
|
||||
|
||||
@import 'templates/_instagram.scss';
|
||||
|
||||
@import 'templates/_user-dashboard.scss';
|
||||
|
||||
@import 'templates/_single-post.scss';
|
||||
|
||||
@import 'templates/_backgrounds.scss';
|
||||
|
||||
@import 'templates/_blog-sidebar.scss';
|
||||
|
||||
@import 'templates/_blog.scss';
|
||||
|
||||
@import 'templates/_coming-soon.scss';
|
||||
|
||||
@import 'templates/_shopping.scss';
|
||||
|
||||
@import 'templates/_404.scss';
|
||||
|
||||
@import 'templates/_message-sent.scss';
|
||||
|
||||
@import 'templates/_footer.scss';
|
||||
|
||||
@import 'custom.scss';
|
||||
|
||||
|
||||
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
|
||||
/* 1) Die .logo-container bekommt 80% Breite => 10% links und 10% rechts frei */
|
||||
.logo-container {
|
||||
width: 80%;
|
||||
margin: 0 auto; /* Zentriert sich, lässt links und rechts je 10% Platz */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 20px; /* Abstand zwischen Frame 1 & Frame 2 */
|
||||
}
|
||||
|
||||
/* 2) Frame 1 (40%) und Frame 2 (60%) */
|
||||
.frame1 {
|
||||
flex: 0 0 40%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.frame2 {
|
||||
flex: 0 0 60%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 3) Banner-Logos selbst: Standard erst auf opacity:0, Animation blendet sie ein */
|
||||
.banner-logo {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* 4) ANIMATIONEN */
|
||||
/* Frame 1 – Move-In: Wir animieren gezielt das Bild */
|
||||
.frame1 .banner-logo {
|
||||
animation: moveIn 1s forwards;
|
||||
}
|
||||
/* Frame 2 – Fade-In: Wir animieren gezielt das Bild */
|
||||
.frame2 .banner-logo {
|
||||
animation: moveIn 1s 0.5s forwards;
|
||||
}
|
||||
|
||||
/* Keyframes */
|
||||
@keyframes moveIn {
|
||||
from {
|
||||
transform: translateX(50px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* 5) TITEL-FADE-IN (optional) */
|
||||
.fade-in-title {
|
||||
opacity: 0;
|
||||
animation: fadeTitle 1.5s forwards 1s;
|
||||
}
|
||||
@keyframes fadeTitle {
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
/* 6) (Optional) Responsive unter 768px => Frames untereinander */
|
||||
@media (max-width: 768px) {
|
||||
.logo-container {
|
||||
flex-direction: column;
|
||||
width: 90%; /* Mehr Platz, Bilder untereinander */
|
||||
}
|
||||
.frame1, .frame2 {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
33
assets/scss/templates/_404.scss
Normal file
33
assets/scss/templates/_404.scss
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
.page-404 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: calc(100vh - (100px + 205px));
|
||||
@include desktop {
|
||||
min-height: calc(100vh - (90px + 205px));
|
||||
}
|
||||
text-align: center;
|
||||
h1 {
|
||||
font-size: 300px;
|
||||
font-weight: bold;
|
||||
@include tablet {
|
||||
font-size: 150px;
|
||||
}
|
||||
@include mobile {
|
||||
font-size: 130px;
|
||||
}
|
||||
@include mobile-xs {
|
||||
font-size: 90px;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
text-transform:uppercase;
|
||||
font-size: 20px;
|
||||
letter-spacing: 4px;
|
||||
font-weight: bold;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.btn-main {
|
||||
margin-top: 40px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
}
|
||||
58
assets/scss/templates/_about.scss
Normal file
58
assets/scss/templates/_about.scss
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
.about{
|
||||
.block{
|
||||
h2 {
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
padding-top: 30px;
|
||||
padding-bottom: 50px;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
p {
|
||||
padding-top: 20px;
|
||||
line-height:28px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.about-img {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
transition: opacity 0.5s ease-out;
|
||||
}
|
||||
|
||||
.hover-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease-out;
|
||||
}
|
||||
|
||||
&:hover .hover-img {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:hover img {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.section-title {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
34
assets/scss/templates/_backgrounds.scss
Normal file
34
assets/scss/templates/_backgrounds.scss
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
.bg-1 {
|
||||
position: relative;
|
||||
background-size: contain; /* Verkleinert das Bild, sodass es komplett sichtbar ist */
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
|
||||
@include large-desktop {
|
||||
background-attachment: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-1::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: inherit;
|
||||
opacity: 0.2; /* Setzt die Opazität, um das Bild blasser darzustellen */
|
||||
z-index: -1; /* Stellt sicher, dass der Inhalt vor dem Hintergrundbild liegt */
|
||||
}
|
||||
|
||||
|
||||
.bg-2 {
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
background-attachment: fixed;
|
||||
background-color: #185b63;
|
||||
@include large-desktop {
|
||||
background-attachment: unset;
|
||||
}
|
||||
}
|
||||
130
assets/scss/templates/_blog-sidebar.scss
Normal file
130
assets/scss/templates/_blog-sidebar.scss
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
.widget {
|
||||
margin-bottom: 65px;
|
||||
|
||||
@include tablet {
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
.widget-title {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 15px;
|
||||
font-size: 16px;
|
||||
color: lighten( $black, 20 );
|
||||
font-weight: 500;
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
|
||||
// Latest Posts
|
||||
&.widget-latest-post {
|
||||
.media {
|
||||
.media-object {
|
||||
width: 100px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.media-heading {
|
||||
a {
|
||||
color: $black;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 12px;
|
||||
color: darken( $light, 47.45);
|
||||
}
|
||||
}
|
||||
|
||||
@include desktop {
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
//end Latest Posts
|
||||
|
||||
// Categories
|
||||
&.widget-category {
|
||||
ul {
|
||||
li {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
|
||||
a {
|
||||
color: lighten( $black, 50.3 );
|
||||
padding: 10px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
@include transition-multi (padding 0.3s ease, border 0.3s ease);
|
||||
|
||||
&:before {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $color-primary;
|
||||
padding-left: 25px;
|
||||
}
|
||||
|
||||
&:active {
|
||||
padding-left: 24px;
|
||||
border: 1px solid $color-primary;
|
||||
border-radius: 30px;
|
||||
@include transition (padding, 0s);
|
||||
}
|
||||
}
|
||||
|
||||
a.current {
|
||||
color: $white;
|
||||
background: $color-primary;
|
||||
border: 1px solid $color-primary;
|
||||
border-radius: 30px;
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// end Categories
|
||||
|
||||
// Tags
|
||||
&.widget-tag {
|
||||
ul {
|
||||
li {
|
||||
margin-bottom: 10px;
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
|
||||
a {
|
||||
color: lighten( $black, 50.3 );
|
||||
display: inline-block;
|
||||
padding: 8px 15px;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 30px;
|
||||
font-size: 14px;
|
||||
@include transition-multi (background-color 0.3s ease, border 0.3s ease, color 0.1s ease);
|
||||
|
||||
&:hover {
|
||||
color: $color-primary;
|
||||
background: rgba($color-primary, 0.3);
|
||||
border: 1px solid rgba($color-primary, 0.3);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: $color-primary;
|
||||
border: 1px solid $color-primary;
|
||||
background: $white;
|
||||
@include transition (background-color, 0.1s, ease);
|
||||
}
|
||||
}
|
||||
|
||||
a.current {
|
||||
color: $white;
|
||||
background: $color-primary;
|
||||
border: 1px solid $color-primary;
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// end Tags
|
||||
}
|
||||
145
assets/scss/templates/_blog.scss
Normal file
145
assets/scss/templates/_blog.scss
Normal file
|
|
@ -0,0 +1,145 @@
|
|||
/*=================================================================
|
||||
Latest Posts
|
||||
==================================================================*/
|
||||
|
||||
.blog {
|
||||
background: darken( $light, 1.17);
|
||||
}
|
||||
|
||||
.post {
|
||||
background: $white;
|
||||
margin-bottom: 55px;
|
||||
|
||||
@include tablet {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.post-media {
|
||||
&.post-thumb {
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.post-media-audio {
|
||||
iframe {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-title {
|
||||
margin-top: 25px;
|
||||
text-transform: uppercase;
|
||||
|
||||
a {
|
||||
color: $color-primary;
|
||||
|
||||
&:hover {
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
font-size: 13px;
|
||||
margin-top: 10px;
|
||||
|
||||
ul {
|
||||
li {
|
||||
display: inline-block;
|
||||
color: lighten( $black, 56.47 );
|
||||
margin-right: 20px;
|
||||
font-size: 12px;
|
||||
letter-spacing: .5px;
|
||||
|
||||
a {
|
||||
color: lighten( $black, 56.47 );
|
||||
|
||||
&:hover {
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-author {
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
.post-content {
|
||||
margin-top: 20px;
|
||||
|
||||
p {
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
ul {
|
||||
font-size: 15px;
|
||||
padding: 10px 20px;
|
||||
font-family: $font-primary;
|
||||
list-style: circle;
|
||||
}
|
||||
ol {
|
||||
font-size: 15px;
|
||||
padding: 10px 20px;
|
||||
font-family: $font-primary;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin-top: 20px;
|
||||
font-size: 18px;
|
||||
border-color: $color-primary;
|
||||
padding: 10px 20px;
|
||||
text-align: left;
|
||||
color: darken( $light, 50.98);
|
||||
}
|
||||
|
||||
.btn-main {
|
||||
padding: 10px 20px;
|
||||
margin: 15px 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-pagination {
|
||||
margin: 0px;
|
||||
|
||||
@include desktop {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
>li {
|
||||
margin: 0 2px;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
|
||||
>a {
|
||||
color: $black;
|
||||
@include transition (all, 0.3s, ease);
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
background: $color-primary;
|
||||
border: 1px solid $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
&.active>a {
|
||||
background: $color-primary !important;
|
||||
border: 1px solid $color-primary !important;
|
||||
}
|
||||
}
|
||||
|
||||
>li:first-child>a,
|
||||
>li:last-child>a {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
74
assets/scss/templates/_call-to-action.scss
Normal file
74
assets/scss/templates/_call-to-action.scss
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
.call-to-action {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding: 70px 10px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
|
||||
@include tablet {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.7); /* Adjust the color and opacity as needed */
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.container, .row, .col-md-12, .block {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #ffffff;
|
||||
margin: 0px;
|
||||
padding: 20px 0px;
|
||||
text-shadow:
|
||||
-1px -1px 0 #000,
|
||||
1px -1px 0 #000,
|
||||
-1px 1px 0 #000,
|
||||
1px 1px 0 #000; /* Black contour */
|
||||
}
|
||||
|
||||
|
||||
p {
|
||||
color: #ffffff;
|
||||
font-size: 20px;
|
||||
text-shadow:
|
||||
-1px -1px 0 #000,
|
||||
1px -1px 0 #000,
|
||||
-1px 1px 0 #000,
|
||||
1px 1px 0 #000; /* Black contour */
|
||||
}
|
||||
.btn-main {
|
||||
padding: 15px 35px;
|
||||
font-size: 20px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
text-shadow:
|
||||
-1px -1px 0 #000,
|
||||
1px -1px 0 #000,
|
||||
-1px 1px 0 #000,
|
||||
1px 1px 0 #000; /* Black contour */
|
||||
}
|
||||
}
|
||||
|
||||
.overlay-dark {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.4); // oder 0.6 oder 0.7
|
||||
z-index: 1;
|
||||
}
|
||||
.call-to-action .container {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
14
assets/scss/templates/_clients.scss
Normal file
14
assets/scss/templates/_clients.scss
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
.clients-logo-section{
|
||||
padding-top: 30px;
|
||||
padding-bottom: 75px;
|
||||
.clients-logo-img{
|
||||
padding: 0px 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.clients-logo {
|
||||
img {
|
||||
width: auto!important;
|
||||
padding:20px;
|
||||
}
|
||||
}
|
||||
130
assets/scss/templates/_coming-soon.scss
Normal file
130
assets/scss/templates/_coming-soon.scss
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
.coming-soon {
|
||||
background: url("../images/backgrounds/coming-soon.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
color: $white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@include mobile-xs {
|
||||
padding: 50px 0;
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
padding: 50px 0;
|
||||
}
|
||||
|
||||
height:100vh;
|
||||
|
||||
.block {
|
||||
h1 {
|
||||
line-height: 65px;
|
||||
font-size: 55px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0;
|
||||
|
||||
@include mobile-xs {
|
||||
font-size: 40px;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
font-size: 40px;
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
color: $white;
|
||||
margin-top: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.count-down {
|
||||
margin-top: 50px;
|
||||
|
||||
.syotimer-cell {
|
||||
width: 25%;
|
||||
padding: 15px;
|
||||
display: inline-block;
|
||||
|
||||
@include mobile-xs {
|
||||
width: 50%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
background:rgba(101, 94, 122, 0.48);
|
||||
|
||||
.syotimer-cell__value {
|
||||
font-size: 80px;
|
||||
line-height: 80px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
font-weight: bold;
|
||||
|
||||
@include mobile-xs {
|
||||
font-size: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.syotimer-cell__unit {
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
li {
|
||||
@include tablet {
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
@include mobile-xs {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: ":";
|
||||
font-size: 20pt;
|
||||
opacity: 0.7;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&:before {
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div:after {
|
||||
content: " "attr(data-interval-text);
|
||||
font-size: 20px;
|
||||
font-weight: normal;
|
||||
text-transform: capitalize;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.copyright-text {
|
||||
font-size: 12px;
|
||||
|
||||
a {
|
||||
color: $white;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
113
assets/scss/templates/_contact.scss
Normal file
113
assets/scss/templates/_contact.scss
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
.contact-form {
|
||||
padding-top: 70px;
|
||||
padding-bottom: 35px;
|
||||
|
||||
.block {
|
||||
.form-group {
|
||||
padding-bottom: 15px;
|
||||
margin: 0px;
|
||||
|
||||
.form-control {
|
||||
background: darken( $light, 0.392);
|
||||
height: 60px;
|
||||
border: 1px solid #EEF2F6;
|
||||
box-shadow: none;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group-2 {
|
||||
margin-bottom: 13px;
|
||||
|
||||
textarea {
|
||||
background: darken( $light, 0.392);
|
||||
height: 135px;
|
||||
border: 1px solid #EEF2F6;
|
||||
box-shadow: none;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group-h {
|
||||
display: none;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
background: lighten( $black, 27.84);
|
||||
border: none;
|
||||
color: $white;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.address-block {
|
||||
margin-bottom: 20px;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
padding-left: 0px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
font-size: 25px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.social-icons {
|
||||
margin-top: 40px;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
i {
|
||||
color: #2C2C2C;
|
||||
margin-right: 25px;
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.contact-box {
|
||||
padding-top: 35px;
|
||||
padding-bottom: 58px;
|
||||
|
||||
.block {
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: 300;
|
||||
color: #000;
|
||||
font-size: 28px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: lighten( $black, 36.07);
|
||||
display: block;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
66
assets/scss/templates/_counter.scss
Normal file
66
assets/scss/templates/_counter.scss
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
/*=================================================================
|
||||
Item counter section
|
||||
==================================================================*/
|
||||
|
||||
.counter {
|
||||
padding: 100px 0;
|
||||
|
||||
.counter-title {
|
||||
margin-bottom: 50px;
|
||||
|
||||
h2 {
|
||||
color: $black;
|
||||
margin-bottom: 20px;
|
||||
font-size: 42px;
|
||||
font-weight: 600;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: lighten( $black, 33.3 );
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.counters-item {
|
||||
padding-bottom: 30px;
|
||||
color: lighten( $black, 26.6 );
|
||||
position: relative;
|
||||
|
||||
&.kill-border:before {
|
||||
background: none;
|
||||
}
|
||||
|
||||
&:before {
|
||||
background: darken( $light, 7.843137254901947);
|
||||
content: "";
|
||||
margin-top: -27.5px;
|
||||
height: 55px;
|
||||
width: 1px;
|
||||
position: absolute;
|
||||
right: -15px;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
>div {
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline;
|
||||
font-size: 35px;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 40px;
|
||||
display: inline-block;
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 17px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
35
assets/scss/templates/_feature.scss
Normal file
35
assets/scss/templates/_feature.scss
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
.feature {
|
||||
background: url("../img/feature-bg.jpg");
|
||||
background-position: 50% 94px;
|
||||
display: block;
|
||||
position: relative;
|
||||
background-attachment: fixed;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
padding: 100px 0;
|
||||
|
||||
@include large-desktop {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
background-attachment: unset;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0px;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: darken( $light, 41.37);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.btn-view-works {
|
||||
background: lighten( $black, 42.35 );
|
||||
color: $white;
|
||||
padding: 10px 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
42
assets/scss/templates/_footer.scss
Normal file
42
assets/scss/templates/_footer.scss
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
.footer {
|
||||
background: darken( $light, 1.5);
|
||||
min-height: 205px;
|
||||
text-align: center;
|
||||
padding-top: 67px;
|
||||
p {
|
||||
font-size: 13px;
|
||||
line-height: 25px;
|
||||
color: lighten( $black, 56.86274509803921 );
|
||||
}
|
||||
a {
|
||||
color: lighten( $black, 34.9 );
|
||||
}
|
||||
.footer-menu {
|
||||
padding-bottom: 25px;
|
||||
ul {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
li {
|
||||
display: inline-block;
|
||||
padding: 0px 20px;
|
||||
a {
|
||||
display: inline-block;
|
||||
color: lighten( $black, 28.6 );
|
||||
&:hover {
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.copyright {
|
||||
a {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
37
assets/scss/templates/_header.scss
Normal file
37
assets/scss/templates/_header.scss
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
/*--
|
||||
Header Start
|
||||
--*/
|
||||
|
||||
header {
|
||||
min-height: 100px;
|
||||
@include desktop {
|
||||
min-height: 90px;
|
||||
}
|
||||
background: $white;
|
||||
padding: 20px 0;
|
||||
.navbar {
|
||||
margin-bottom: 0px;
|
||||
border: 0px;
|
||||
}
|
||||
.navbar-brand {
|
||||
padding-top: 5px;
|
||||
}
|
||||
.navbar-default {
|
||||
background: none;
|
||||
border: 0px;
|
||||
.navbar-nav {
|
||||
padding-top: 10px;
|
||||
li {
|
||||
a {
|
||||
color: lighten( $black, 20 );
|
||||
padding: 10px 26px;
|
||||
font-size: 15px;
|
||||
font
|
||||
&:hover {
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
22
assets/scss/templates/_impressum.scss
Normal file
22
assets/scss/templates/_impressum.scss
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
.table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.table td {
|
||||
vertical-align: top;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.col-1 {
|
||||
width: 30%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
width: 70%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
24
assets/scss/templates/_instagram.scss
Normal file
24
assets/scss/templates/_instagram.scss
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
.instagram-feed {
|
||||
a {
|
||||
margin:6px;
|
||||
margin-right: 10px;
|
||||
display: inline-block;
|
||||
margin-bottom: 10px;
|
||||
width: 23.5%;
|
||||
@include tablet {
|
||||
width: 49%;
|
||||
margin:3px;
|
||||
}
|
||||
@include mobile {
|
||||
width: 100%;
|
||||
margin:3px;
|
||||
}
|
||||
&:hover img {
|
||||
filter: grayscale(10);
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
36
assets/scss/templates/_message-sent.scss
Normal file
36
assets/scss/templates/_message-sent.scss
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
.page-message-sent {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: calc(100vh - (100px + 205px));
|
||||
@include desktop {
|
||||
min-height: calc(100vh - (90px + 205px));
|
||||
}
|
||||
text-align: center;
|
||||
h1 {
|
||||
font-size: 50px;
|
||||
font-weight: bold;
|
||||
@include mobile {
|
||||
font-size: 40px;
|
||||
}
|
||||
@include mobile-xs {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
text-transform:uppercase;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 1px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.btn-main {
|
||||
margin-top: 40px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
img {
|
||||
width: 50%;
|
||||
max-height: 200px;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
156
assets/scss/templates/_navigation.scss
Normal file
156
assets/scss/templates/_navigation.scss
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
.navigation {
|
||||
background: $white;
|
||||
padding: 20px 0;
|
||||
|
||||
.navbar {
|
||||
margin-bottom: 0px;
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background: none;
|
||||
border: 0px;
|
||||
|
||||
.navbar-nav {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
|
||||
a {
|
||||
color: #7b7b7b;
|
||||
padding: 10px 15px;
|
||||
|
||||
font : {
|
||||
weight: 500;
|
||||
size: 14px;
|
||||
}
|
||||
|
||||
text-transform:uppercase;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $black;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
a.current {
|
||||
color: $black;
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
a.current-parent {
|
||||
color: $black;
|
||||
}
|
||||
|
||||
select {
|
||||
margin: 10px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.current > .dropdown-toggle {
|
||||
color: $black;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
left: -5px;
|
||||
box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.08);
|
||||
width: 250px; /* Setzen Sie hier die gewünschte Breite */
|
||||
|
||||
a {
|
||||
text-transform: none;
|
||||
font-weight: normal;
|
||||
color: darken( $light, 47.45);
|
||||
padding: 10px 20px;
|
||||
@include transition-multi (color 0.1s ease, padding 0.3s ease);
|
||||
|
||||
&:hover {
|
||||
background: $color-primary;
|
||||
color: $white;
|
||||
padding-left: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
a.current {
|
||||
padding-left: 25px;
|
||||
color: $white;
|
||||
background: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav .open>a {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
// Change Bootstrap's default navbar collapse breakpoint of 768px to 992px (=desktop); source: https://silvawebdesigns.com/how-to-change-the-bootstrap-navbar-breakpoint/
|
||||
@include desktop {
|
||||
.navbar-header {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.navbar-left,
|
||||
.navbar-right {
|
||||
float: none !important;
|
||||
}
|
||||
|
||||
.navbar-toggle {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.navbar-collapse {
|
||||
border-top: 1px solid transparent;
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.navbar-fixed-top {
|
||||
top: 0;
|
||||
border-width: 0 0 1px;
|
||||
}
|
||||
|
||||
.navbar-collapse.collapse {
|
||||
display: none!important;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
float: none!important;
|
||||
margin-top: 7.5px;
|
||||
}
|
||||
|
||||
.navbar-nav > li {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.navbar-nav > li > a {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.collapse {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.collapse.in {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#select-language {
|
||||
border: none; /* Kein Rahmen */
|
||||
outline: none; /* Kein Umriss */
|
||||
box-shadow: none; /* Kein Schatten */
|
||||
background: transparent; /* Hintergrund transparent, falls gewünscht */
|
||||
-webkit-appearance: none; /* Entfernt das Standard-Dropdown-Aussehen */
|
||||
-moz-appearance: none; /* Entfernt das Standard-Dropdown-Aussehen */
|
||||
appearance: textfield; /* Entfernt das Standard-Dropdown-Aussehen */
|
||||
padding: 0px 2px; /* Passen Sie das Padding an */
|
||||
height: 100%; /* Höhe anpassen */
|
||||
}
|
||||
121
assets/scss/templates/_portfolio.scss
Normal file
121
assets/scss/templates/_portfolio.scss
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
.portfolio-work {
|
||||
padding: 80px 0;
|
||||
|
||||
.block {
|
||||
.portfolio-menu {
|
||||
text-align: center;
|
||||
|
||||
.btn-group {
|
||||
margin-bottom: 40px;
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
border: 1px solid $border-color;
|
||||
padding: 8px 25px;
|
||||
cursor: pointer;
|
||||
font-size: 15px;
|
||||
color: lighten( $black, 20 );
|
||||
outline: 0;
|
||||
background: $white;
|
||||
margin: 2px;
|
||||
border-radius: 0;
|
||||
@include transition (all, 0.3s, ease);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.portfolio {
|
||||
&-item {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.portfolio-hover {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.portfolio-content {
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-hover {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba(60, 55, 55, 0.5);
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: .3s ease;
|
||||
}
|
||||
|
||||
&-content {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-40%);
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
transition: inherit;
|
||||
|
||||
* {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
transition: .2s ease;
|
||||
|
||||
i {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
&.h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// Portfolio Single Page
|
||||
.portfolio-single-page {
|
||||
.project-details {
|
||||
h4 {
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px dashed $border-color;
|
||||
}
|
||||
|
||||
span {
|
||||
color: lighten( $black, 51.3 );
|
||||
width: 180px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: lighten( $black, 19.2 );
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
ul {
|
||||
li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
51
assets/scss/templates/_pricing.scss
Normal file
51
assets/scss/templates/_pricing.scss
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
/*=================================================================
|
||||
Pricing section
|
||||
==================================================================*/
|
||||
|
||||
.pricing-table {
|
||||
.pricing-item {
|
||||
padding: 40px 20px;
|
||||
background: $white;
|
||||
box-shadow: 0 8px 15px 0 rgba(5, 57, 106, .06);
|
||||
|
||||
a.btn-main {
|
||||
text-transform: uppercase;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
li {
|
||||
font-weight: 400;
|
||||
padding: 6px 0;
|
||||
color: darken( $light, 57.64);
|
||||
|
||||
i {
|
||||
margin-right: 6px;
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.price-title {
|
||||
padding: 30px 0 20px;
|
||||
|
||||
>h3 {
|
||||
font-weight: 700;
|
||||
margin: 0 0 5px;
|
||||
font-size: 15px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
>p {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: $color-primary;
|
||||
font-size: 50px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
223
assets/scss/templates/_products.scss
Normal file
223
assets/scss/templates/_products.scss
Normal file
|
|
@ -0,0 +1,223 @@
|
|||
// Products
|
||||
.product-item {
|
||||
margin-bottom: 30px;
|
||||
|
||||
.product-thumb {
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.bage {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
background: $black;
|
||||
color: $white;
|
||||
font-size: 12px;
|
||||
padding: 4px 12px;
|
||||
font-weight: 300;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&:before {
|
||||
transition: .3s all;
|
||||
opacity: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.preview-meta {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: 0.2s;
|
||||
transform: translateY(10px);
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
|
||||
a,
|
||||
span {
|
||||
background: $white;
|
||||
padding: 10px 16px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: 18px;
|
||||
|
||||
&:hover {
|
||||
background: $color-primary;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .product-thumb {
|
||||
&:before {
|
||||
opacity: 1;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .preview-meta {
|
||||
opacity: 1;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
.product-content {
|
||||
text-align: center;
|
||||
|
||||
h4 {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 6px;
|
||||
|
||||
a {
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.product-modal {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
text-align: center;
|
||||
padding: 0 !important;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
margin-right: -4px;
|
||||
}
|
||||
|
||||
&.fade .modal-dialog {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
.close {
|
||||
width: 50px;
|
||||
float: none;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
z-index: 9;
|
||||
top: 20px;
|
||||
font-size: 30px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
width: 900px;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
|
||||
@include mobile {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
|
||||
.modal-body {
|
||||
padding: 30px;
|
||||
|
||||
.modal-image {
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.product-short-details {
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
font-size: 22px;
|
||||
font-weight: 400;
|
||||
|
||||
a {
|
||||
color: $black;
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-price {
|
||||
font-size: 30px;
|
||||
margin: 20px 0;
|
||||
|
||||
@include mobile {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-main {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.btn-transparent {
|
||||
color: lighten( $black, 26.6 );
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.product-shorting {
|
||||
margin-bottom: 30px;
|
||||
span {
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// sidebar scss
|
||||
.product-category {
|
||||
ul {
|
||||
padding-left: 15px;
|
||||
|
||||
li {
|
||||
margin-bottom: 4px;
|
||||
|
||||
a {
|
||||
color: darken( $light, 57.64);
|
||||
|
||||
&:hover {
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
213
assets/scss/templates/_service.scss
Normal file
213
assets/scss/templates/_service.scss
Normal file
|
|
@ -0,0 +1,213 @@
|
|||
.service {
|
||||
text-align: center;
|
||||
padding: 90px 0;
|
||||
|
||||
@include tablet {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.service-item {
|
||||
padding-bottom: 30px;
|
||||
|
||||
i {
|
||||
font-size: 50px;
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
img.service-icon {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
h4 {
|
||||
padding-top: 15px;
|
||||
margin: 0;
|
||||
margin-top: 10px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
p {
|
||||
padding-top: 10px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dark-service {
|
||||
.title {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.service-item {
|
||||
padding-bottom: 30px;
|
||||
text-align: center;
|
||||
|
||||
i {
|
||||
color: $white;
|
||||
font-size: 40px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
img.service-icon {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
h4 {
|
||||
color: $white;
|
||||
padding-top: 15px;
|
||||
margin: 0;
|
||||
margin-top: 10px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
p {
|
||||
padding-top: 10px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.service-about {
|
||||
p {
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.service-arrow {
|
||||
.block {
|
||||
padding: 70px 30px;
|
||||
|
||||
i {
|
||||
font-size: 45px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.service-list {
|
||||
.block {
|
||||
padding: 30px;
|
||||
margin-bottom: 20px;
|
||||
background: $white;
|
||||
}
|
||||
}
|
||||
|
||||
h2, h3 {
|
||||
margin-bottom: 10px; /* Passe den Wert nach Bedarf an */
|
||||
}
|
||||
|
||||
.center-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.responsive-container {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.responsive-image {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
position: relative;
|
||||
padding: 100px 0;
|
||||
@extend .overly;
|
||||
|
||||
.block {
|
||||
text-align: center;
|
||||
|
||||
h1 {
|
||||
color: #5f5c5c; /* Passe die Textfarbe an, um auf dem weißen Hintergrund sichtbar zu sein */
|
||||
font-weight: 200;
|
||||
letter-spacing: 0.5em;
|
||||
margin-top: 20px;
|
||||
margin-bottom: -60px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #000; /* Passe die Textfarbe an, um auf dem weißen Hintergrund sichtbar zu sein */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-title::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #ffffff; /* Weiß als Hintergrundfarbe */
|
||||
z-index: -1; /* Sicherstellen, dass es hinter dem Inhalt liegt */
|
||||
}
|
||||
|
||||
.service-arrow .block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: nowrap; /* Keine Umbrüche, damit die Inhalte nebeneinander bleiben */
|
||||
}
|
||||
|
||||
.service-arrow .service-image {
|
||||
flex: 0 0 auto;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.service-arrow .service-image img {
|
||||
max-width: 600px; /* Maximale Breite des Bildes */
|
||||
width: 100%; /* Bild soll sich an den Container anpassen */
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.service-arrow .service-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.service-arrow .block {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.service-arrow .service-image {
|
||||
margin-left: 0;
|
||||
margin-top: 20px;
|
||||
width: 100%; /* Bild auf volle Breite setzen bei kleinen Bildschirmen */
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.service-title {
|
||||
color: #273544; /* Setze die gewünschte Farbe für die Titel der Dienste */
|
||||
}
|
||||
|
||||
.service-description {
|
||||
color: #990505; /* Setze die gewünschte Farbe für die Beschreibungen der Dienste */
|
||||
}
|
||||
236
assets/scss/templates/_shopping.scss
Normal file
236
assets/scss/templates/_shopping.scss
Normal file
|
|
@ -0,0 +1,236 @@
|
|||
.shopping {
|
||||
.widget-title {
|
||||
font-weight: 400;
|
||||
border-bottom: 1px solid $border-color;
|
||||
padding-bottom: 15px;
|
||||
margin-bottom: 15px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.checkout {
|
||||
.block {
|
||||
padding: 15px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
// Checkout Page
|
||||
.checkout-form {
|
||||
.form-group {
|
||||
position: relative;
|
||||
margin-bottom: 8px;
|
||||
|
||||
label {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
left: 15px;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
color: #888;
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
opacity: 1 !important;
|
||||
width: 85px;
|
||||
}
|
||||
|
||||
input {
|
||||
border-radius: 0;
|
||||
display: block;
|
||||
padding: 6px 10px 5px 100px;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.checkout-country-code {
|
||||
.form-group {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.form-group:first-child {
|
||||
width: calc(45% - 2px);
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.form-group:last-child {
|
||||
width: calc(55% - 2px);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.shopping.cart {
|
||||
.product-list {
|
||||
.table {
|
||||
.cart-amount {
|
||||
th {
|
||||
background: $light;
|
||||
padding: 10px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
>tbody>tr>td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.product-info {
|
||||
a {
|
||||
margin-left: 10px;
|
||||
color: $black;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.product-remove {
|
||||
color: #c7254e;
|
||||
}
|
||||
}
|
||||
|
||||
.account-details {
|
||||
margin-top: 30px;
|
||||
|
||||
legend {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.btn-pay {
|
||||
margin: 20px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.product-checkout-details {
|
||||
.product-card {
|
||||
>a {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.price {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.media-object {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: lighten( $black, 33.3 );
|
||||
}
|
||||
|
||||
.remove {
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.discount-code {
|
||||
border-top: 1px solid $border-color;
|
||||
border-bottom: 1px solid $border-color;
|
||||
margin: 20px 0 10px;
|
||||
padding: 10px 0;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
font-weight: 400;
|
||||
color: lighten( $black, 33.3 );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.summary-prices {
|
||||
border-style: solid;
|
||||
border-color: $border-color;
|
||||
border-width: 0px 0 1px 0;
|
||||
padding-bottom: 10px;
|
||||
|
||||
li {
|
||||
padding: 5px 0;
|
||||
|
||||
span+span {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.summary-total {
|
||||
margin-top: 5px;
|
||||
|
||||
>span {
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
span+span {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.verified-icon {
|
||||
margin-top: 25px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// End Checkout Page
|
||||
|
||||
|
||||
// purchase confirmation page
|
||||
.purchase-confirmation {
|
||||
.purchase-confirmation-details {
|
||||
padding: 20px;
|
||||
border: 1px solid $border-color;
|
||||
|
||||
.table {
|
||||
margin: 0;
|
||||
color: lighten( $black, 26.6 );
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Empty Cart
|
||||
.empty-cart {
|
||||
.block {
|
||||
i {
|
||||
font-size: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.success-msg {
|
||||
.block {
|
||||
i {
|
||||
font-size: 40px;
|
||||
background: $color-secondary;
|
||||
color: $white;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 100px;
|
||||
display: inline-block;
|
||||
line-height: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
249
assets/scss/templates/_single-post.scss
Normal file
249
assets/scss/templates/_single-post.scss
Normal file
|
|
@ -0,0 +1,249 @@
|
|||
/*=================================================================
|
||||
Single Blog Page
|
||||
==================================================================*/
|
||||
.post.post-single {
|
||||
border: none;
|
||||
margin-bottom: 0px;
|
||||
|
||||
.post-title {
|
||||
margin-top: 0px;
|
||||
|
||||
@include tablet {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.post-thumb {
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.post-sub-heading {
|
||||
border-bottom: 1px solid $border-color;
|
||||
padding-bottom: 20px;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
font-size: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.post-social-share {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.post-comments {
|
||||
margin: 30px 0;
|
||||
|
||||
.media {
|
||||
margin-top: 20px;
|
||||
|
||||
>.pull-left {
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-author {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0px;
|
||||
font-weight: 500;
|
||||
|
||||
a {
|
||||
color: $color-primary;
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
time {
|
||||
margin: 0 0 5px;
|
||||
display: inline-block;
|
||||
color: darken( $light, 47.45);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.comment-button {
|
||||
color: $color-primary;
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
font-size: 12px;
|
||||
|
||||
i {
|
||||
margin-right: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-excerpt {
|
||||
h3 {
|
||||
a {
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 30px;
|
||||
}
|
||||
|
||||
blockquote.quote-post {
|
||||
margin: 20px 0;
|
||||
|
||||
p {
|
||||
line-height: 30px;
|
||||
font-size: 20px;
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.single-blog {
|
||||
background-color: #fff;
|
||||
margin-bottom: 50px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.blog-subtitle {
|
||||
font-size: 15px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
margin-bottom: 25px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.next-prev {
|
||||
border-bottom: 1px solid $border-color;
|
||||
border-top: 1px solid $border-color;
|
||||
margin: 20px 0;
|
||||
padding: 25px 0;
|
||||
|
||||
a {
|
||||
color: $black;
|
||||
|
||||
&:hover {
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.prev-post i {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.next-post i {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.social-profile {
|
||||
ul {
|
||||
li {
|
||||
margin: 0 10px 0 0;
|
||||
display: inline-block;
|
||||
|
||||
a {
|
||||
color: lighten( $black, 33.92 );
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
|
||||
i {
|
||||
&:hover {
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comments-section {
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
||||
|
||||
.author-about {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.post-author {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.post-author>img {
|
||||
border: 1px solid $border-color;
|
||||
max-width: 120px;
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.comment-list {
|
||||
ul {
|
||||
margin-top: 20px;
|
||||
|
||||
li {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.comment-wrap {
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 1px;
|
||||
margin-left: 20px;
|
||||
padding: 10px;
|
||||
position: relative;
|
||||
|
||||
.author-avatar {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.media {
|
||||
.media-heading {
|
||||
font-size: 14px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
a {
|
||||
color: $color-primary;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-meta {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.comment-reply-form {
|
||||
margin-top: 80px;
|
||||
|
||||
input,
|
||||
textarea {
|
||||
height: 35px;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
border: 1px solid $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
textarea,
|
||||
.btn-main {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
308
assets/scss/templates/_single-product.scss
Normal file
308
assets/scss/templates/_single-product.scss
Normal file
|
|
@ -0,0 +1,308 @@
|
|||
.single-product {
|
||||
padding: 60px 0 40px;
|
||||
|
||||
.breadcrumb {
|
||||
background: transparent;
|
||||
|
||||
li {
|
||||
color: $black;
|
||||
font-weight: 200;
|
||||
|
||||
a {
|
||||
color: $black;
|
||||
font-weight: 200;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-pagination {
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 8px;
|
||||
|
||||
&+li:before {
|
||||
padding: 0 8px 0 0;
|
||||
color: #ccc;
|
||||
content: "/\00a0";
|
||||
}
|
||||
|
||||
a {
|
||||
color: $black;
|
||||
font-weight: 200;
|
||||
|
||||
i {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.single-product-slider {
|
||||
.carousel {
|
||||
.carousel-inner {
|
||||
.carousel-caption {
|
||||
text-shadow: none;
|
||||
text-align: left;
|
||||
top: 20%;
|
||||
bottom: auto;
|
||||
|
||||
h1 {
|
||||
font-size: 50px;
|
||||
font-weight: 100;
|
||||
color: $black;
|
||||
}
|
||||
|
||||
p {
|
||||
width: 50%;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.btn-main {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-control {
|
||||
bottom: auto;
|
||||
background: $white;
|
||||
width: 6%;
|
||||
padding: 10px 0;
|
||||
|
||||
i {
|
||||
font-size: 40px;
|
||||
text-shadow: none;
|
||||
color: lighten( $black, 33.3 );
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-indicators li {
|
||||
img {
|
||||
height: auto;
|
||||
width: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-control.right,
|
||||
.carousel-control.left {
|
||||
background-image: none;
|
||||
top: 40%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.single-product-slider .carousel-indicators {
|
||||
margin: 10px 0 0;
|
||||
overflow: auto;
|
||||
position: static;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
li {
|
||||
background-color: transparent;
|
||||
-webkit-border-radius: 0;
|
||||
border-radius: 0;
|
||||
display: inline-block;
|
||||
height: auto;
|
||||
margin: 0 !important;
|
||||
width: auto;
|
||||
|
||||
&.active img {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:hover img {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.single-product-details {
|
||||
.color-swatches {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
width: 100px;
|
||||
color: $black;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.swatch-violet {
|
||||
background-color: #8da1cd;
|
||||
}
|
||||
|
||||
.swatch-black {
|
||||
background-color: $black;
|
||||
}
|
||||
|
||||
.swatch-cream {
|
||||
background-color: #e6e2d6;
|
||||
}
|
||||
}
|
||||
|
||||
.product-size {
|
||||
margin-top: 20px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
width: 100px;
|
||||
color: $black;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
display: inline-block;
|
||||
width: 130px;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
color: $black;
|
||||
font-size: 12px;
|
||||
border: 1px solid darken( $light, 7.843137254901947);
|
||||
border-radius: 0px;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.product-category {
|
||||
margin-top: 20px;
|
||||
|
||||
>span {
|
||||
width: 100px;
|
||||
color: $black;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
ul {
|
||||
width: 140px;
|
||||
display: inline-block;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-quantity {
|
||||
margin-top: 20px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
>span {
|
||||
width: 100px;
|
||||
color: $black;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.product-quantity-slider {
|
||||
width: 140px;
|
||||
display: inline-block;
|
||||
|
||||
input {
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.input-group-btn:first-child>.btn,
|
||||
.p-quantity .input-group-btn:first-child>.btn-group {
|
||||
margin-right: -2px;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.bootstrap-touchspin .input-group-btn-vertical {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
width: 1%;
|
||||
vertical-align: middle;
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.bootstrap-touchspin .input-group-btn-vertical>.btn {
|
||||
display: block;
|
||||
float: none;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding: 8px 10px;
|
||||
margin-left: -1px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up {
|
||||
border-radius: 0;
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
|
||||
.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down {
|
||||
margin-top: -2px;
|
||||
border-radius: 0;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
.bootstrap-touchspin .input-group-btn-vertical i {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 5px;
|
||||
font-size: 9px;
|
||||
font-weight: normal;
|
||||
}
|
||||
57
assets/scss/templates/_slider.scss
Normal file
57
assets/scss/templates/_slider.scss
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
.slider {
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
background-position: center center;
|
||||
padding: 170px 0 200px;
|
||||
position: relative;
|
||||
min-height: 1000px; /* Adjust based on your design needs */
|
||||
@include large-desktop {
|
||||
background-attachment: unset;
|
||||
padding: 150px 0;
|
||||
}
|
||||
|
||||
.block {
|
||||
color: darken( $light, 8.4);
|
||||
text-align: center;
|
||||
|
||||
h1 {
|
||||
font-weight: 100;
|
||||
font-size: 45px;
|
||||
line-height: 1.33em;
|
||||
letter-spacing: 0.2em;
|
||||
padding-bottom: 15px;
|
||||
text-transform: uppercase;
|
||||
|
||||
@include tablet {
|
||||
font-size: 35px;
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
@include mobile-xs {
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 30px;
|
||||
color: darken( $light, 95.09803921568627);
|
||||
font-size: 25px;
|
||||
line-height: 1.5em;
|
||||
font-weight: 300;
|
||||
|
||||
@include mobile {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
.btn {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
92
assets/scss/templates/_testimonial.scss
Normal file
92
assets/scss/templates/_testimonial.scss
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
.testimonial {
|
||||
padding: 100px 0;
|
||||
|
||||
@include tablet {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.counter-box {
|
||||
li {
|
||||
width: 50%;
|
||||
float: left;
|
||||
text-align: center;
|
||||
margin: 30px 0 30px;
|
||||
|
||||
@include tablet {
|
||||
margin-top: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.testimonial-carousel {
|
||||
border: 1px solid $border-color;
|
||||
padding: 24px;
|
||||
|
||||
i {
|
||||
font-size: 35px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: $font-secondary;
|
||||
line-height: 28px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.user {
|
||||
img {
|
||||
padding-bottom: 0px;
|
||||
border-radius: 500px;
|
||||
width: 80px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: $font-primary;
|
||||
padding-bottom: 0;
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
color: lighten( $black, 22.54 );
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.owl-carousel .owl-pagination div {
|
||||
border: 1px solid #1D1D1D;
|
||||
border-radius: 500px;
|
||||
display: inline-block;
|
||||
height: 10px;
|
||||
margin-right: 15px;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.owl-carousel .owl-pagination div.active {
|
||||
background: lighten( $black, 36.07);
|
||||
font-size: 30px;
|
||||
display: inline-block;
|
||||
border: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.counter-box {
|
||||
i {
|
||||
font-size: 35px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
span {
|
||||
color: lighten( $black, 33.3 );
|
||||
}
|
||||
}
|
||||
71
assets/scss/templates/_user-dashboard.scss
Normal file
71
assets/scss/templates/_user-dashboard.scss
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
.dashboard-menu {
|
||||
.active {
|
||||
background: $color-primary;
|
||||
color: $white;
|
||||
border: 1px solid $color-primary;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 0;
|
||||
margin: 0 3px;
|
||||
|
||||
a {
|
||||
padding: 10px 20px;
|
||||
border: 1px solid $border-color;
|
||||
|
||||
@include tablet {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
padding: 10px 5px;
|
||||
}
|
||||
|
||||
@include mobile-xs {
|
||||
padding: 10px 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-wrapper {
|
||||
border: 1px solid $border-color;
|
||||
margin-top: 30px;
|
||||
padding: 20px;
|
||||
|
||||
h2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.user-img {
|
||||
width: 120px;
|
||||
border-radius: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-user-profile {
|
||||
.user-img {
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.user-profile-list {
|
||||
margin-top: 30px;
|
||||
padding-left: 30px;
|
||||
|
||||
li {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: bold;
|
||||
margin-right: 5px;
|
||||
width: 100px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
140
assets/scss/why-amperion.scss
Normal file
140
assets/scss/why-amperion.scss
Normal file
|
|
@ -0,0 +1,140 @@
|
|||
/* 1) Container, z. B. 80% Seitenbreite */
|
||||
.my-container {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
padding: 40px 0; /* Abstand oben & unten */
|
||||
}
|
||||
|
||||
/* 2) Überschriften zentrieren, falls du kein .text-center in Bootstrap verwendest */
|
||||
.why-title {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.why-subtitle {
|
||||
font-size: 1.2rem;
|
||||
color: #666;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
/* 3) Warum-Blocks (linke + rechte Spalte) */
|
||||
.why-block p {
|
||||
text-align: justify;
|
||||
margin-bottom: 40px; /* Abstand zwischen einzelnen Blöcken */
|
||||
}
|
||||
|
||||
.why-block h4 {
|
||||
margin: 100px 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 4) Icon + Logo-Größen anpassen */
|
||||
.why-icon {
|
||||
width: 50px; /* Iconbreite */
|
||||
height: auto;
|
||||
|
||||
margin: 200px;
|
||||
}
|
||||
|
||||
.why-logo {
|
||||
max-width: 500px; /* Logo in der Mitte */
|
||||
height: auto;
|
||||
margin-top: 100px; /* Verschiebt das Logo um 100px nach unten */
|
||||
|
||||
}
|
||||
|
||||
/* 5) Optional: Falls du Bootstrap .text-center nicht verwendest, kannst du hier:
|
||||
.why-title, .why-subtitle, .why-block, .why-logo {
|
||||
text-align: center;
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
|
||||
.section-title1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px; /* Abstand zwischen Icon und Titel */
|
||||
}
|
||||
|
||||
|
||||
|
||||
.why-title1 {
|
||||
margin: 0; /* Entfernt zusätzliche Ränder */
|
||||
}
|
||||
|
||||
.icon-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.col-icon {
|
||||
width: 10px;
|
||||
flex: 0 0 10px;
|
||||
max-width: 10px;
|
||||
}
|
||||
|
||||
.col-heading {
|
||||
width: 100px; /* Beispiel: 100px für die Überschrift */
|
||||
flex: 0 0 100px;
|
||||
max-width: 100px;
|
||||
|
||||
white-space: nowrap; /* verhindert Zeilenumbruch */
|
||||
|
||||
}
|
||||
|
||||
|
||||
.why-icon1 {
|
||||
width: 10px; /* Breite des Icons */
|
||||
height: auto; /* Höhe automatisch anpassen */
|
||||
}
|
||||
|
||||
.heading-text {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.why-block h4 {
|
||||
margin: 0; /* Entfernt zusätzliche Ränder */
|
||||
}
|
||||
|
||||
.section-title1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px; /* Abstand zwischen Icon und Titel */
|
||||
}
|
||||
|
||||
.title-icon1 {
|
||||
width: 30px; /* Breite des Icons */
|
||||
height: auto; /* Höhe automatisch anpassen */
|
||||
}
|
||||
|
||||
.why-title1 {
|
||||
margin: 0; /* Entfernt zusätzliche Ränder */
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.col-md-4.text-center .why-logo {
|
||||
margin-top: 100px !important; /* Erzwingt die Anwendung der Verschiebung */
|
||||
}
|
||||
|
||||
|
||||
/* Fügt einen Abstand unterhalb des "Why Amperion"-Abschnitts hinzu */
|
||||
.why-amperion {
|
||||
margin-bottom: 400px; /* Passen Sie den Wert nach Bedarf an */
|
||||
}
|
||||
|
||||
/* Alternativ: Fügt einen Abstand oberhalb des "About"-Abschnitts hinzu */
|
||||
.about {
|
||||
margin-top: 800px; /* Passen Sie den Wert nach Bedarf an */
|
||||
}
|
||||
|
||||
.col-fixed {
|
||||
width: 10px;
|
||||
flex: 0 0 10px;
|
||||
max-width: 10px;
|
||||
}
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue