Skip to content

Commit

Permalink
update on menu and partnerbanner
Browse files Browse the repository at this point in the history
  • Loading branch information
Bjorn Zschernack committed Nov 13, 2023
1 parent 6cfa462 commit 4a50086
Show file tree
Hide file tree
Showing 8 changed files with 886 additions and 3 deletions.
8 changes: 7 additions & 1 deletion front-page.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,11 @@
<?php get_template_part('template-parts/posts/postgrid'); ?>
</div>
</div>

<div class="row">
<div class="col-12">
<?php the_content(); ?>
</div>
</div>
<div class="row">
<div class="col-12">
<?php get_template_part('template-parts/posts/about'); ?>
Expand All @@ -20,6 +24,8 @@
</div>
</div>



</div>


Expand Down
589 changes: 589 additions & 0 deletions images/yellow_sidebar.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/yellow_sidebar.webp
View file
Binary file not shown.
12 changes: 11 additions & 1 deletion includes/shortcodes.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,14 @@ function getServiceBar($atts){
return $content;
}

add_shortcode( 'servicebar', 'getServiceBar' );
add_shortcode( 'servicebar', 'getServiceBar' );


function getPartnerBanner($atts){
ob_start();
$content .= get_template_part('template-parts/shortcodes/partnerbanner','',$atts);
$content .= ob_get_clean();
return $content;
}

add_shortcode( 'partnerbanner', 'getPartnerBanner' );
88 changes: 88 additions & 0 deletions scss/includes/_content.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,4 +62,92 @@
#about-banner{
min-height:100px;
box-shadow: 0 33px 36px 0 rgba(93, 108, 123, 0.08);
}

#partner-banner {
height:500px;
box-shadow: 0 33px 36px 0 rgba(93, 108, 123, 0.08);
background-image: url('../images/yellow_sidebar.webp');
background-position: left;
background-size: contain;
background-repeat: no-repeat;

}

.banner-paragraph{
font-size: 16px;font-weight: normal;
font-stretch: condensed;
font-style: normal;
line-height: 1.56;
letter-spacing: 0.32px;
text-align: left;
color: #062b4d;
margin-top: 25px;
}

.image-bg{
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
}

.banner-button {


font-family: BarlowBold;
font-size: 18px;
font-weight: 600;
font-stretch: condensed;
font-style: normal;
line-height: normal;
letter-spacing: 0.36px;
text-decoration: underline;
color: $darkblue;margin-top: 25px;

}

.content-40 {
width: 40%;
}

.content-60 {
width: 60%;
}
.badgeline{
font-size: 15px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: left;
color: #062b4d;

&:before{
content: " ";
width: 35px;
height: 5px;
margin: 7.8px 16.3px 30.2px 0;
background-color: #e8a422;
display: inline-block;
vertical-align: text-top;
}
}


h2 {
&.content-h2 {
text-align: center;
margin-top:80px;
margin-bottom: 40px;
&:after{
content: " ";
width: 35px;
height: 5px;
margin: 7.8px 16.3px 30.2px 0;
background-color: #e8a422;
display: block;
margin: auto;
}
}
}
42 changes: 41 additions & 1 deletion scss/includes/_menu.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,10 @@
content:' ';
display: inline-block;
}

&:hover{
text-decoration: none;
}
}

&.car {
Expand Down Expand Up @@ -111,24 +115,60 @@
&.orange {
a{
border-bottom:8px solid $orange;

}

background-size: 100% 1px;
background-image: repeating-linear-gradient($orange,$orange 22px, $orange 22px, $orange 44px);
background-repeat: no-repeat;
background-position: bottom;
transition: all .3s ease-in-out;
&:hover{
background-size: 100% 100%;
}


}
&.green {
a{
border-bottom:8px solid $green;

}

background-size: 100% 1px;
background-image: repeating-linear-gradient($green,$green 22px, $green 22px, $green 44px);
background-repeat: no-repeat;
background-position: bottom;
transition: all .3s ease-in-out;
&:hover{
background-size: 100% 100%;
}
}
&.red {
a{
border-bottom:8px solid $red;
}
background-size: 100% 1px;
background-image: repeating-linear-gradient($red,$red 22px, $red 22px, $red 44px);
background-repeat: no-repeat;
background-position: bottom;
transition: all .3s ease-in-out;
&:hover{
background-size: 100% 100%;
}
}
&.blue {
a{
border-bottom:8px solid $blue;
}
background-size: 100% 1px;
background-image: repeating-linear-gradient($blue,$blue 22px, $blue 22px, $blue 44px);
background-repeat: no-repeat;
background-position: bottom;
transition: all .3s ease-in-out;
&:hover{
background-size: 100% 100%;
}
}
}
@media(max-width:1200px)
Expand Down
126 changes: 126 additions & 0 deletions scss/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,9 @@ body header .contact .clock:before {
content: " ";
display: inline-block;
}
#menucontainer ul li a:hover {
text-decoration: none;
}
#menucontainer ul li.car a:before {
background-image: url("../images/icons/fahrzeuge_icon.svg");
background-size: 25.8px 14.9px;
Expand All @@ -162,18 +165,58 @@ body header .contact .clock:before {
background-size: 25.8px 14.9px;
}
@media (min-width: 1201px) {
#menucontainer ul li.orange {
background-size: 100% 1px;
background-image: repeating-linear-gradient(#e8a422, #e8a422 22px, #e8a422 22px, #e8a422 44px);
background-repeat: no-repeat;
background-position: bottom;
transition: all 0.3s ease-in-out;
}
#menucontainer ul li.orange a {
border-bottom: 8px solid #e8a422;
}
#menucontainer ul li.orange:hover {
background-size: 100% 100%;
}
#menucontainer ul li.green {
background-size: 100% 1px;
background-image: repeating-linear-gradient(#89b459, #89b459 22px, #89b459 22px, #89b459 44px);
background-repeat: no-repeat;
background-position: bottom;
transition: all 0.3s ease-in-out;
}
#menucontainer ul li.green a {
border-bottom: 8px solid #89b459;
}
#menucontainer ul li.green:hover {
background-size: 100% 100%;
}
#menucontainer ul li.red {
background-size: 100% 1px;
background-image: repeating-linear-gradient(#ea612e, #ea612e 22px, #ea612e 22px, #ea612e 44px);
background-repeat: no-repeat;
background-position: bottom;
transition: all 0.3s ease-in-out;
}
#menucontainer ul li.red a {
border-bottom: 8px solid #ea612e;
}
#menucontainer ul li.red:hover {
background-size: 100% 100%;
}
#menucontainer ul li.blue {
background-size: 100% 1px;
background-image: repeating-linear-gradient(#245861, #245861 22px, #245861 22px, #245861 44px);
background-repeat: no-repeat;
background-position: bottom;
transition: all 0.3s ease-in-out;
}
#menucontainer ul li.blue a {
border-bottom: 8px solid #245861;
}
#menucontainer ul li.blue:hover {
background-size: 100% 100%;
}
}
@media (max-width: 1200px) {
#menucontainer ul li {
Expand Down Expand Up @@ -300,6 +343,89 @@ body header .contact .clock:before {
box-shadow: 0 33px 36px 0 rgba(93, 108, 123, 0.08);
}

#partner-banner {
height: 500px;
box-shadow: 0 33px 36px 0 rgba(93, 108, 123, 0.08);
background-image: url("../images/yellow_sidebar.webp");
background-position: left;
background-size: contain;
background-repeat: no-repeat;
}

.banner-paragraph {
font-size: 16px;
font-weight: normal;
font-stretch: condensed;
font-style: normal;
line-height: 1.56;
letter-spacing: 0.32px;
text-align: left;
color: #062b4d;
margin-top: 25px;
}

.image-bg {
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
}

.banner-button {
font-family: BarlowBold;
font-size: 18px;
font-weight: 600;
font-stretch: condensed;
font-style: normal;
line-height: normal;
letter-spacing: 0.36px;
text-decoration: underline;
color: #03223e;
margin-top: 25px;
}

.content-40 {
width: 40%;
}

.content-60 {
width: 60%;
}

.badgeline {
font-size: 15px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: left;
color: #062b4d;
}
.badgeline:before {
content: " ";
width: 35px;
height: 5px;
margin: 7.8px 16.3px 30.2px 0;
background-color: #e8a422;
display: inline-block;
vertical-align: text-top;
}

h2.content-h2 {
text-align: center;
margin-top: 80px;
margin-bottom: 40px;
}
h2.content-h2:after {
content: " ";
width: 35px;
height: 5px;
margin: 7.8px 16.3px 30.2px 0;
background-color: #e8a422;
display: block;
margin: auto;
}

#servicebar {
box-shadow: 0 33px 36px 0 rgba(93, 108, 123, 0.08);
background: white;
Expand Down
24 changes: 24 additions & 0 deletions template-parts/shortcodes/partnerbanner.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<div class="w-100 bg-white mt-5 ps-5" id="partner-banner">
<div class="d-flex h-100">

<div class="partner-content content-40 h-100 d-flex justify-content-center flex-column px-5">
<div class="badgeline">Ihr Partner wenn’s ums Auto geht</div>

<?php if(isset($args['headline'])) : ?>
<h2 class="text-start"><?php echo $args['headline']; ?></h2>
<?php endif; ?>

<?php if(isset($args['teaser'])) : ?>
<p class="banner-paragraph"><?php echo $args['teaser']; ?></p>
<?php endif; ?>
<?php if(isset($args['url'])) : ?>
<a class="banner-button" href="<?php echo $args['url']; ?>">Mehr über uns</a>
<?php endif; ?>

</div>

<?php if(isset($args['img'])) : ?>
<div class="partner-content content-60 image-bg p-0" style="background-image:url('<?php echo $args['img']; ?>')"></div>
<?php endif; ?>
</div>
</div>

0 comments on commit 4a50086

Please sign in to comment.