136 lines
2.9 KiB
Vue
136 lines
2.9 KiB
Vue
<script setup></script>
|
|
|
|
<template>
|
|
<footer>
|
|
<img class="logo" src="@images/logo-kreis_3.png">
|
|
<div class="contact-info">
|
|
<h5>{{ $t('footer.contact')}}</h5>
|
|
<p>Si está interesado o tiene alguna pregunta, ¡contáctenos!</p>
|
|
<p class="emails">
|
|
<a href="mailto:info@Tayronafoods.com" class="email"><i class="email-icon"></i>info@Tayronafoods.com</a>
|
|
<a href="mailto:info@Tayronafoods.com" class="email"><i class="email-icon"></i>info@Tayronafoods.com</a>
|
|
<a href="mailto:info@Tayronafoods.com" class="email"><i class="email-icon"></i>info@Tayronafoods.com</a>
|
|
</p>
|
|
<p class="phone"><i class="phone-icon"></i>+49(0)176 321 368 59</p>
|
|
<p class="phone"><i class="phone-icon"></i>+49(0)152 549 389 62</p>
|
|
<p class="rss">
|
|
<a href="#"><i class="facebook-icon"></i></a>
|
|
<a href="#"><i class="instagram-icon"></i></a>
|
|
<a href="#"><i class="youtube-icon"></i></a>
|
|
<a href="#"><i class="twitter-icon"></i></a>
|
|
</p>
|
|
<p class="links">
|
|
<a href="#">Impressum</a>
|
|
<a href="#">Datenschutz</a>
|
|
<a href="#">AGB</a>
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
footer {
|
|
position: relative;
|
|
color: #fff;
|
|
height: 492px;
|
|
background-color: #442808;
|
|
background-image: url('@images/footer_coffee.png');
|
|
background-blend-mode: overlay;
|
|
}
|
|
|
|
h5 {
|
|
font-weight: 500;
|
|
padding-top: 72px;
|
|
font-size: 20px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
p {
|
|
margin-bottom: 12px;
|
|
|
|
&.links {
|
|
margin-top: 58px;
|
|
|
|
a {
|
|
margin-right: 200px;
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: #fff;
|
|
}
|
|
|
|
@mixin icon($url) {
|
|
display: inline-block;
|
|
background-image: url($url);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: contain;
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
.logo {
|
|
position: absolute;
|
|
top: 29px;
|
|
left: 92px;
|
|
width: 168px;
|
|
height: 161px;
|
|
}
|
|
|
|
.contact-info {
|
|
text-align: center;;
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
|
|
.emails {
|
|
padding: 0;
|
|
.email {
|
|
|
|
margin-right: 16px;
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
&-icon {
|
|
@include icon('@images/email.svg');
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.phone-icon {
|
|
@include icon('@images/phone.svg');
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.rss a {
|
|
margin-right: 24px;
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.facebook-icon {
|
|
@include icon('@images/facebook.svg');
|
|
}
|
|
|
|
.youtube-icon {
|
|
@include icon('@images/youtube.svg');
|
|
}
|
|
|
|
.instagram-icon {
|
|
@include icon('@images/instagram.svg');
|
|
}
|
|
|
|
.twitter-icon {
|
|
@include icon('@images/twitter.svg');
|
|
}
|
|
}
|
|
</style> |