Inhaltliche Anpassung des Footers
This commit is contained in:
akarl
parent
57936a79b8
commit
f39c8e5875
@ -4,94 +4,120 @@ footer {
|
||||
display: none; } }
|
||||
|
||||
@media screen and (min-width: 48em) {
|
||||
|
||||
.footer-ribbon {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
&:after {
|
||||
clear: both;
|
||||
content: '';
|
||||
display: table; }
|
||||
.img--area {
|
||||
width: calc(~'50% - 400px');
|
||||
height: 150px;
|
||||
.wbn--foot-img{
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
&.wbn-gabel {
|
||||
width: 28px;
|
||||
background: url("@{baseUrlIcon}gabel.svg") bottom center no-repeat; }
|
||||
&.wbn-loeffel {
|
||||
margin-left: 5px;
|
||||
width: 28px;
|
||||
background: url("@{baseUrlIcon}loeffel.svg") center 36px no-repeat; }
|
||||
&.wbn-messer {
|
||||
margin-left: 5px;
|
||||
width: 18px;
|
||||
background: url("@{baseUrlIcon}messer.svg") bottom center no-repeat; }
|
||||
&.wbn-pfannenwender {
|
||||
margin-left: 40px;
|
||||
width: 48px;
|
||||
background: url("@{baseUrlIcon}pfannenwender.svg") bottom center no-repeat; }
|
||||
&.wbn-kanne {
|
||||
margin-left: 40px;
|
||||
width: 84px;
|
||||
background: url("@{baseUrlIcon}kanne.svg") bottom center no-repeat; }
|
||||
&.wbn-mikrowelle {
|
||||
margin-left: 40px;
|
||||
width: 142px;
|
||||
background: url("@{baseUrlIcon}mikrowelle.svg") bottom center no-repeat; }
|
||||
&.wbn-mixer {
|
||||
margin-right: 40px;
|
||||
width: 75px;
|
||||
background: url("@{baseUrlIcon}mixer.svg") bottom center no-repeat; }
|
||||
&.wbn-toaster {
|
||||
margin-right: 40px;
|
||||
width: 120px;
|
||||
background: url("@{baseUrlIcon}toaster.svg") center 61px no-repeat; }
|
||||
&.wbn-wein {
|
||||
margin-right: 5px;
|
||||
width: 59px;
|
||||
background: url("@{baseUrlIcon}wein.svg") center 53px no-repeat; }
|
||||
&.wbn-sekt {
|
||||
margin-right: 40px;
|
||||
width: 46px;
|
||||
background: url("@{baseUrlIcon}sekt.svg") center 47px no-repeat; }
|
||||
&.wbn-tasse {
|
||||
width: 82px;
|
||||
background: url("@{baseUrlIcon}tasse.svg") bottom center no-repeat; } } }
|
||||
.left--box,
|
||||
.right--box {
|
||||
float: left; }
|
||||
.center--box {
|
||||
float: left;
|
||||
width: 800px;
|
||||
height: 150px;
|
||||
.first--headline {
|
||||
margin-top: 35px;
|
||||
font-size: 35px; }
|
||||
.second--headline {
|
||||
font-size: 17.8px; }
|
||||
footer {
|
||||
.footer-ribbon {
|
||||
display: block;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
&:after {
|
||||
clear: both;
|
||||
content: '';
|
||||
display: table; }
|
||||
.img--area {
|
||||
width: calc(~'50% - 400px');
|
||||
height: 150px;
|
||||
.wbn--foot-img{
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
&.wbn-gabel {
|
||||
width: 28px;
|
||||
background: url("@{baseUrlIcon}gabel.svg") bottom center no-repeat; }
|
||||
&.wbn-loeffel {
|
||||
margin-left: 5px;
|
||||
width: 28px;
|
||||
background: url("@{baseUrlIcon}loeffel.svg") center 36px no-repeat; }
|
||||
&.wbn-messer {
|
||||
margin-left: 5px;
|
||||
width: 18px;
|
||||
background: url("@{baseUrlIcon}messer.svg") bottom center no-repeat; }
|
||||
&.wbn-pfannenwender {
|
||||
margin-left: 40px;
|
||||
width: 48px;
|
||||
background: url("@{baseUrlIcon}pfannenwender.svg") bottom center no-repeat; }
|
||||
&.wbn-kanne {
|
||||
margin-left: 40px;
|
||||
width: 84px;
|
||||
background: url("@{baseUrlIcon}kanne.svg") bottom center no-repeat; }
|
||||
&.wbn-mikrowelle {
|
||||
margin-left: 40px;
|
||||
width: 142px;
|
||||
background: url("@{baseUrlIcon}mikrowelle.svg") bottom center no-repeat; }
|
||||
&.wbn-mixer {
|
||||
margin-right: 40px;
|
||||
width: 75px;
|
||||
background: url("@{baseUrlIcon}mixer.svg") bottom center no-repeat; }
|
||||
&.wbn-toaster {
|
||||
margin-right: 40px;
|
||||
width: 120px;
|
||||
background: url("@{baseUrlIcon}toaster.svg") center 61px no-repeat; }
|
||||
&.wbn-wein {
|
||||
margin-right: 5px;
|
||||
width: 59px;
|
||||
background: url("@{baseUrlIcon}wein.svg") center 53px no-repeat; }
|
||||
&.wbn-sekt {
|
||||
margin-right: 40px;
|
||||
width: 46px;
|
||||
background: url("@{baseUrlIcon}sekt.svg") center 47px no-repeat; }
|
||||
&.wbn-tasse {
|
||||
width: 82px;
|
||||
background: url("@{baseUrlIcon}tasse.svg") bottom center no-repeat; } } }
|
||||
.left--box,
|
||||
.right--box {
|
||||
float: left; }
|
||||
.center--box {
|
||||
float: left;
|
||||
width: 800px;
|
||||
height: 150px;
|
||||
.first--headline {
|
||||
margin-top: 35px;
|
||||
font-size: 35px; }
|
||||
.second--headline {
|
||||
font-size: 17.8px; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer--top-wrapper {
|
||||
background: @brand-footer;
|
||||
.container {
|
||||
.footer--top-wrapper {
|
||||
background: @brand-footer;
|
||||
color: #fff;
|
||||
a, .column--headline {
|
||||
color: #fff; } } }
|
||||
.footer--bottom-wrapper {
|
||||
border-top: 2px solid #fff;
|
||||
background: @brand-payment;
|
||||
.container {
|
||||
.container {
|
||||
background: @brand-footer;
|
||||
color: #fff;
|
||||
a, .column--headline {
|
||||
color: #fff; } } }
|
||||
.footer--bottom-wrapper {
|
||||
border-top: 2px solid #fff;
|
||||
background: @brand-payment;
|
||||
color: #fff;
|
||||
a, .column--headline {
|
||||
color: #fff; } } }
|
||||
.container {
|
||||
background: @brand-payment;
|
||||
color: #fff;
|
||||
a, .column--headline {
|
||||
color: #fff; } } }
|
||||
|
||||
.footer-main .footer--column {
|
||||
width: 33%;
|
||||
}
|
||||
&.footer-main {
|
||||
.footer--column {
|
||||
width: 33%;
|
||||
.border--headline {
|
||||
margin: 0 0 20px 0;
|
||||
padding: 0;
|
||||
span {
|
||||
display: block;
|
||||
width: 60px;
|
||||
height: 5px;
|
||||
background: #fff; } }
|
||||
.footer--phone-link {
|
||||
font-weight: 300;
|
||||
display: block;
|
||||
padding-left: 30px;
|
||||
&:before {
|
||||
content: 'Telefon'; } }
|
||||
.footer--mail-link {
|
||||
display: block;
|
||||
padding-left: 30px;
|
||||
&:before {
|
||||
content: 'Kuvert'; } }
|
||||
.footer--address-link {
|
||||
display: block;
|
||||
padding-left: 30px;
|
||||
&:before {
|
||||
content: 'Haus'; } }
|
||||
} } }
|
||||
}
|
||||
@ -1,24 +1,11 @@
|
||||
{namespace name="frontend/index/menu_footer"}
|
||||
|
||||
{* Service hotline *}
|
||||
{block name="frontend_index_footer_column_service_hotline"}
|
||||
<div class="footer--column column--hotline is--first block">
|
||||
{block name="frontend_index_footer_column_service_hotline_headline"}
|
||||
<div class="column--headline">{s name="sFooterServiceHotlineHead"}{/s}</div>
|
||||
{/block}
|
||||
|
||||
{block name="frontend_index_footer_column_service_hotline_content"}
|
||||
<div class="column--content">
|
||||
<p class="column--desc">{s name="sFooterServiceHotline"}{/s}</p>
|
||||
</div>
|
||||
{/block}
|
||||
</div>
|
||||
{/block}
|
||||
|
||||
{* Service Links *}
|
||||
{block name="frontend_index_footer_column_service_menu"}
|
||||
<div class="footer--column column--menu block">
|
||||
{block name="frontend_index_footer_column_service_menu_headline"}
|
||||
<div class="column--headline">{s name="sFooterShopNavi1"}{/s}</div>
|
||||
<div class="column--headline cds--upper">{s name="sFooterShopNavi1"}{/s}</div>
|
||||
<div class="border--headline"><span></span></div>
|
||||
{/block}
|
||||
|
||||
{block name="frontend_index_footer_column_service_menu_content"}
|
||||
@ -56,10 +43,31 @@
|
||||
</div>
|
||||
{/block}
|
||||
|
||||
{* Service hotline *}
|
||||
{block name="frontend_index_footer_column_service_hotline"}
|
||||
<div class="footer--column column--hotline is--first block">
|
||||
{block name="frontend_index_footer_column_service_hotline_headline"}
|
||||
<div class="column--headline cds--upper">{s name="sFooterServiceHotlineHead"}{/s}</div>
|
||||
<div class="border--headline"><span></span></div>
|
||||
{/block}
|
||||
|
||||
{block name="frontend_index_footer_column_service_hotline_content"}
|
||||
<div class="column--content">
|
||||
<p class="column--desc">
|
||||
{s name="sFooterServiceHotline"}{/s}
|
||||
{s name="sFooterEmail"}{/s}
|
||||
{s name="sFooterAdress"}{/s}
|
||||
</p>
|
||||
</div>
|
||||
{/block}
|
||||
</div>
|
||||
{/block}
|
||||
|
||||
{block name="frontend_index_footer_column_information_menu"}
|
||||
<div class="footer--column column--menu block">
|
||||
{block name="frontend_index_footer_column_information_menu_headline"}
|
||||
<div class="column--headline">{s name="sFooterShopNavi2"}{/s}</div>
|
||||
<div class="column--headline cds--upper">{s name="sFooterShopNavi2"}{/s}</div>
|
||||
<div class="border--headline"><span></span></div>
|
||||
{/block}
|
||||
|
||||
{block name="frontend_index_footer_column_information_menu_content"}
|
||||
@ -97,54 +105,13 @@
|
||||
{/block}
|
||||
|
||||
{block name="frontend_index_footer_column_newsletter"}
|
||||
<div style="clear:both;"></div>
|
||||
<div class="footer--column column--newsletter is--last block">
|
||||
{block name="frontend_index_footer_column_newsletter_headline"}
|
||||
<div class="column--headline">{s name="sFooterNewsletterHead"}{/s}</div>
|
||||
<div class="column--headline cds--upper">{s name="sFooterNewsletterHead"}{/s}</div>
|
||||
<div class="border--headline"><span></span></div>
|
||||
{/block}
|
||||
|
||||
{block name="frontend_index_footer_column_newsletter_content"}
|
||||
<div class="column--content" data-newsletter="true">
|
||||
<p class="column--desc">
|
||||
{s name="sFooterNewsletter"}{/s}
|
||||
</p>
|
||||
|
||||
{block name="frontend_index_footer_column_newsletter_form"}
|
||||
<form class="newsletter--form" action="{url controller='newsletter'}" method="post">
|
||||
<input type="hidden" value="1" name="subscribeToNewsletter" />
|
||||
|
||||
{block name="frontend_index_footer_column_newsletter_form_field_wrapper"}
|
||||
<div class="content">
|
||||
{block name="frontend_index_footer_column_newsletter_form_field"}
|
||||
<input type="email" aria-label="{s name="IndexFooterNewsletterValue"}{/s}" name="newsletter" class="newsletter--field" placeholder="{s name="IndexFooterNewsletterValue"}{/s}" />
|
||||
{if {config name="newsletterCaptcha"} !== "nocaptcha"}
|
||||
<input type="hidden" name="redirect">
|
||||
{/if}
|
||||
{/block}
|
||||
|
||||
{block name="frontend_index_footer_column_newsletter_form_submit"}
|
||||
<button type="submit" aria-label="{s name='IndexFooterNewsletterSubmit'}{/s}" class="newsletter--button btn">
|
||||
<i class="icon--mail"></i> <span class="button--text">{s name='IndexFooterNewsletterSubmit'}{/s}</span>
|
||||
</button>
|
||||
{/block}
|
||||
</div>
|
||||
{/block}
|
||||
|
||||
{* Data protection information *}
|
||||
{block name="frontend_index_footer_column_newsletter_privacy"}
|
||||
{if {config name=ACTDPRTEXT} || {config name=ACTDPRCHECK}}
|
||||
{$hideCheckbox=false}
|
||||
|
||||
{* If a captcha is active, the user has to accept the privacy statement on the newsletter page *}
|
||||
{if {config name=newsletterCaptcha} !== "nocaptcha"}
|
||||
{$hideCheckbox=true}
|
||||
{/if}
|
||||
|
||||
{include file="frontend/_includes/privacy.tpl" hideCheckbox=$hideCheckbox}
|
||||
{/if}
|
||||
{/block}
|
||||
</form>
|
||||
{/block}
|
||||
</div>
|
||||
{/block}
|
||||
{block name="frontend_index_footer_column_newsletter_content"}{/block}
|
||||
</div>
|
||||
{/block}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user