173 lines
4.0 KiB
Vue
173 lines
4.0 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>{{ $t('footer.message')}}</p>
|
|
<p class="emails">
|
|
<a href="mailto:info@tayronafoods.com" class="email"><i class="email-icon"></i>info@tayronafoods.com</a>
|
|
<a href="mailto:alejandro@tayronafoods.com" class="email"><i class="email-icon"></i>alejandro@tayronafoods.com</a>
|
|
<a href="mailto:jose@tayronafoods.com" class="email"><i class="email-icon"></i>jose@tayronafoods.com</a>
|
|
</p>
|
|
<div class="phones">
|
|
<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>
|
|
</div>
|
|
<p class="rss">
|
|
<a href="https://www.facebook.com/profile.php?id=100093464946416"><i class="facebook-icon"></i></a>
|
|
<a href="https://instagram.com/tayrona_foods?igshid=NTc4MTIwNjQ2YQ=="><i class="instagram-icon"></i></a>
|
|
</p>
|
|
<!-- <p class="rss">
|
|
<a href="#"><i class="youtube-icon"></i></a>
|
|
<a href="#"><i class="twitter-icon"></i></a>
|
|
</p> -->
|
|
<p class="links">
|
|
<router-link class="link" to="/impressum">{{ $t('footer.impressum')}}</router-link>
|
|
<router-link class="link" to="/dataprotection">{{ $t('footer.dataprotection') }}</router-link>
|
|
<router-link class="link" to="/agb">{{ $t('footer.agb') }}</router-link>
|
|
<!-- <a href="https://tayronafoods.com/impressum">{{ $t('footer.impressum')}}</a>
|
|
<a href="https://tayronafoods.com/datenschutz">{{ $t('footer.dataprotection')}}</a>
|
|
<a href="https://tayronafoods.com/agb">{{ $t('footer.agb')}}</a> -->
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
footer {
|
|
position: relative;
|
|
color: #fff;
|
|
background-color: #442808;
|
|
background-image: url('@images/footer_coffee.png');
|
|
background-blend-mode: overlay;
|
|
background-position: bottom;
|
|
padding-bottom: 36px;
|
|
}
|
|
|
|
h5 {
|
|
font-weight: 400;
|
|
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: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.logo {
|
|
position: absolute;
|
|
top: 29px;
|
|
left: 92px;
|
|
width: 168px;
|
|
height: 161px;
|
|
}
|
|
|
|
.contact-info {
|
|
text-align: center;;
|
|
flex-direction: column;
|
|
font-size: 16px;
|
|
font-weight: 200;
|
|
|
|
.phones {
|
|
margin-top: 24px;
|
|
}
|
|
|
|
.emails {
|
|
padding: 0;
|
|
.email {
|
|
|
|
margin-right: 16px;
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
&-icon {
|
|
@include icon('@images/email.svg');
|
|
margin-right: 4px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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');
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 767px) {
|
|
|
|
h5 {
|
|
padding-top: 16px;
|
|
}
|
|
.contact-info {
|
|
.emails {
|
|
display: grid;
|
|
gap: 8px;
|
|
flex-direction: column;
|
|
}
|
|
|
|
p.links {
|
|
margin-top: 58px;
|
|
|
|
a {
|
|
margin-right: 20px;
|
|
font-size: 80%;
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |