diff --git a/images/icons/Beschichtung_icon.svg b/images/icons/Beschichtung_icon.svg new file mode 100644 index 0000000..9f59614 --- /dev/null +++ b/images/icons/Beschichtung_icon.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/images/icons/Kontakt_icon.svg b/images/icons/Kontakt_icon.svg new file mode 100644 index 0000000..2205afc --- /dev/null +++ b/images/icons/Kontakt_icon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/images/icons/Service_icon.svg b/images/icons/Service_icon.svg new file mode 100644 index 0000000..c461e72 --- /dev/null +++ b/images/icons/Service_icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/images/icons/clock.svg b/images/icons/clock.svg new file mode 100644 index 0000000..d5bc866 --- /dev/null +++ b/images/icons/clock.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/images/icons/fahrzeuge_icon.svg b/images/icons/fahrzeuge_icon.svg new file mode 100644 index 0000000..d14c9c4 --- /dev/null +++ b/images/icons/fahrzeuge_icon.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/images/icons/felge.svg b/images/icons/felge.svg new file mode 100644 index 0000000..d435c3d --- /dev/null +++ b/images/icons/felge.svg @@ -0,0 +1,3 @@ + + + diff --git a/scss/includes/_main.scss b/scss/includes/_main.scss index 16a22cf..554b720 100644 --- a/scss/includes/_main.scss +++ b/scss/includes/_main.scss @@ -3,7 +3,7 @@ body { width:100%; height:100%; overflow-x: hidden; - background-color: #f8fcff; + background-color: $bodybg; font-family: 'BarlowCondensed'; font-size: 16px; color: $copyblue; @@ -27,11 +27,7 @@ body { } header { - #menucontainer { - background-color: #03223e; - min-height: 50px; - } - + .contact { .whatsapp{ @@ -48,6 +44,21 @@ body { margin-right: 20px; } } + + .clock { + margin-right: 20px; + &:before{ + content:' '; + display: inline-block; + background-image: url('../images/icons/clock.svg'); + background-size: 17.1px 17.1px; + background-repeat: no-repeat; + width:17px; + height:17px; + vertical-align: text-bottom; + margin-right: 5px; + } + } } } diff --git a/scss/includes/_menu.scss b/scss/includes/_menu.scss new file mode 100644 index 0000000..eeaabf2 --- /dev/null +++ b/scss/includes/_menu.scss @@ -0,0 +1,48 @@ +#menucontainer { + background-color: #03223e; + min-height: 50px; + + ul { + display: flex; + list-style: none; + padding: 0; + li { + padding:0; + + a{ + color:white; + font-size: 17px; + padding:30px 45px; + display: block; + } + + &.car { + a{ + &:before{ + content:' '; + display: inline-block; + background-image: url('../images/icons/fahrzeuge_icon.svg'); + background-size: 25.8px 14.9px; + background-repeat: no-repeat; + width: 26px; + height: 26px; + /* vertical-align: sub; */ + margin-right: 10px; + line-height: 26px; + vertical-align: middle; + position: relative; + top: 3px; + } + } + } + + &.orange { + a{ + border-bottom:8px solid $orange; + } + } + + + } + } +} diff --git a/scss/includes/_variables.scss b/scss/includes/_variables.scss index 82d93a5..e9a4a49 100644 --- a/scss/includes/_variables.scss +++ b/scss/includes/_variables.scss @@ -1 +1,6 @@ -$copyblue:#062b4d; \ No newline at end of file +$bodybg:#f8fcff; +$copyblue:#062b4d; +$orange:#e8a422; +$green:#89b459; +$red:#ea612e; +$blue:#245861; diff --git a/scss/styles.css b/scss/styles.css index 9212f36..ece0545 100644 --- a/scss/styles.css +++ b/scss/styles.css @@ -38,10 +38,6 @@ body a { body a:hover { text-decoration: underline; } -body header #menucontainer { - background-color: #03223e; - min-height: 50px; -} body header .contact .whatsapp { padding-left: 20px; } @@ -55,4 +51,55 @@ body header .contact .whatsapp:before { height: 17px; vertical-align: text-bottom; margin-right: 20px; +} +body header .contact .clock { + margin-right: 20px; +} +body header .contact .clock:before { + content: " "; + display: inline-block; + background-image: url("../images/icons/clock.svg"); + background-size: 17.1px 17.1px; + background-repeat: no-repeat; + width: 17px; + height: 17px; + vertical-align: text-bottom; + margin-right: 5px; +} + +#menucontainer { + background-color: #03223e; + min-height: 50px; +} +#menucontainer ul { + display: flex; + list-style: none; + padding: 0; +} +#menucontainer ul li { + padding: 0; +} +#menucontainer ul li a { + color: white; + font-size: 17px; + padding: 30px 45px; + display: block; +} +#menucontainer ul li.car a:before { + content: " "; + display: inline-block; + background-image: url("../images/icons/fahrzeuge_icon.svg"); + background-size: 25.8px 14.9px; + background-repeat: no-repeat; + width: 26px; + height: 26px; + /* vertical-align: sub; */ + margin-right: 10px; + line-height: 26px; + vertical-align: middle; + position: relative; + top: 3px; +} +#menucontainer ul li.orange a { + border-bottom: 8px solid #e8a422; } \ No newline at end of file diff --git a/scss/styles.scss b/scss/styles.scss index dfd753c..4c3f5e0 100644 --- a/scss/styles.scss +++ b/scss/styles.scss @@ -1,5 +1,6 @@ @import 'includes/fonts'; @import 'includes/variables'; @import 'includes/main'; +@import 'includes/menu'; diff --git a/template-parts/header/contact.php b/template-parts/header/contact.php index 732a8c1..f41451c 100644 --- a/template-parts/header/contact.php +++ b/template-parts/header/contact.php @@ -3,4 +3,8 @@

Wir beraten Sie gerne:

02761/ 82870

+
+

Mo.-Fr.:
Sa.:

+

08:00 - 17:00 Uhr
09:00 - 12:00 Uhr

+
\ No newline at end of file diff --git a/template-parts/header/header.php b/template-parts/header/header.php index d200ad9..df796b8 100644 --- a/template-parts/header/header.php +++ b/template-parts/header/header.php @@ -1,7 +1,7 @@ \ No newline at end of file diff --git a/template-parts/header/menu.php b/template-parts/header/menu.php index e6868c6..e69de29 100644 --- a/template-parts/header/menu.php +++ b/template-parts/header/menu.php @@ -1,3 +0,0 @@ - 'mainmenu', 'menu_id'=>'mainmenu', 'container' => false, 'menu_class' => 'mleft')); -?> \ No newline at end of file