initial commit
This commit is contained in:
María
@@ -1,212 +1,297 @@
|
||||
<template>
|
||||
<div>
|
||||
<hr />
|
||||
<div>
|
||||
<img class="bolsa" src="@/assets/img/footer-bolsa.svg" alt="" />
|
||||
</div>
|
||||
<hr />
|
||||
<div class="social">
|
||||
<a href="https://www.facebook.com/coceta" target="_blank">
|
||||
<img
|
||||
class="social-logo"
|
||||
src="@/assets/img/footer-facebook.svg"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
<a href="https://twitter.com/Coopsdetrabajo" target="_blank">
|
||||
<img class="social-logo" src="@/assets/img/footer-twitter.svg" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="organization">
|
||||
<div class="organization-image-container">
|
||||
<img
|
||||
class="organization-image"
|
||||
src="@/assets/img/footer-coceta.svg"
|
||||
alt=""
|
||||
/>
|
||||
<footer>
|
||||
<div class="footer-container">
|
||||
<div class="media-container">
|
||||
<img src="/assets/img/logo-consumo-cuidado.png" alt="Kit-ECO.SOCIAL Logo" class="logo-kit">
|
||||
|
||||
<p>Síguenos y entérate de los próximos eventos, novedades y recursos.</p>
|
||||
<ul class="social-list">
|
||||
<li class="social-item">
|
||||
<NuxtLink to="#" class="social-link">
|
||||
<img src="/assets/img/instagram.svg" alt="Instagram" />
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li class="social-item">
|
||||
<NuxtLink to="#" class="social-link">
|
||||
<img src="/assets/img/facebook.svg" alt="Facebook" />
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li class="social-item">
|
||||
<NuxtLink to="#" class="social-link">
|
||||
<img src="/assets/img/linkedin.svg" alt="LinkedIn" />
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li class="social-item">
|
||||
<NuxtLink to="#" class="social-link">
|
||||
<img src="/assets/img/x.svg" alt="X-Twitter" />
|
||||
</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
|
||||
<div class="footer-links">
|
||||
<div class="footer-column">
|
||||
<h3>Herramientas</h3>
|
||||
<ul>
|
||||
<li><NuxtLink to="/es/consumo-cuidado">Consumo Cuidado</NuxtLink></li>
|
||||
<li><NuxtLink to="/es/aula-virtual">Aula Virtual</NuxtLink></li>
|
||||
<li><NuxtLink to="/es/iguales">Iguales</NuxtLink></li>
|
||||
<li><NuxtLink to="/es/objetivo2030">Objetivo 2030</NuxtLink></li>
|
||||
<li><NuxtLink to="/es/certifica-t">Certifica-T</NuxtLink></li>
|
||||
<li><NuxtLink to="/es/enlazados">Enlazados</NuxtLink></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-column">
|
||||
<h3>Enlaces rápidos</h3>
|
||||
<ul>
|
||||
<li><a href="#">Nosotras</a></li>
|
||||
<li><a href="#">Contactanos</a></li>
|
||||
<li><a href="#">Términos y condiciones</a></li>
|
||||
<li><a href="#">Política de privacidad</a></li>
|
||||
<li><a href="#">Aviso legal</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="organization-image-container">
|
||||
<img
|
||||
class="organization-image"
|
||||
src="@/assets/img/footer-ministerio.svg"
|
||||
alt=""
|
||||
/>
|
||||
|
||||
<div class="footer-logos">
|
||||
<h3>Proyecto financiado por:</h3>
|
||||
<div class="logos-grid">
|
||||
<img src="/assets/img/uelogo 1.png" alt="Unión Europea">
|
||||
<img src="/assets/img/logotipo_ministerio.png" alt="Gobierno de España">
|
||||
<img src="/assets/img/logotipo_PRTR.png" alt="Plan de Recuperación">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<ul class="link-list">
|
||||
<li>
|
||||
<small>2021 La Tienda.Coop</small>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://coceta.coop/" class="footer-link" target="_blank">
|
||||
<small>Coceta</small>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<NuxtLink to="/page/terminos">
|
||||
<small>Términos y condiciones</small>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<NuxtLink to="/page/legal">
|
||||
<small>Política de privacidad</small>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<NuxtLink to="/page/cookies">
|
||||
<small>Cookies</small>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a
|
||||
href="http://enreda.coop/"
|
||||
class="footer-link enreda"
|
||||
target="_blank"
|
||||
>
|
||||
<small
|
||||
><mark class="highlight">Sitio desarrollado por Enreda</mark></small
|
||||
>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="made-by">
|
||||
<p><span>{{ year }}</span> © kit-ECO.SOCIAL | Diseñado y desarrollado por Enreda Coop</p>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCurrentYear } from "@/utils/dates.js";
|
||||
export default {
|
||||
name: 'Footer',
|
||||
}
|
||||
computed: {
|
||||
year() {
|
||||
return getCurrentYear();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
hr {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.bolsa {
|
||||
width: 50px;
|
||||
height: auto;
|
||||
margin: 4.375rem auto;
|
||||
display: block;
|
||||
@include mobile {
|
||||
width: 35px;
|
||||
margin: 3rem auto;
|
||||
}
|
||||
}
|
||||
.social {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 3.125rem auto;
|
||||
&-logo {
|
||||
height: 1.25rem;
|
||||
margin: auto 1.875rem;
|
||||
footer {
|
||||
background: linear-gradient($color-button, $color-bg-dark-2);
|
||||
display: flex;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 3rem;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
border-top-left-radius: 1.5rem;
|
||||
border-top-right-radius: 1.5rem;
|
||||
color: white;
|
||||
@media (min-width: 768px) {
|
||||
padding-left: 2rem;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.organization {
|
||||
.footer-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4rem;
|
||||
justify-content: space-between;
|
||||
@media (min-width: 768px) {
|
||||
gap: 3rem;
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
flex-direction: row;
|
||||
gap: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.media-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
@media (min-width: 768px) {
|
||||
align-items: flex-start;
|
||||
width: 33.333333%;
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
width: 16.666667%;
|
||||
}
|
||||
|
||||
logo-kit {
|
||||
height: 15px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
@media (min-width: 768px) {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.made-by {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
&-image {
|
||||
width: 18rem;
|
||||
margin: 3.125rem;
|
||||
@include mobile {
|
||||
width: 6rem;
|
||||
margin: 0.8rem;
|
||||
border-top: 1px solid white;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.social-list {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.social-item {
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
border-radius: 9999px;
|
||||
border: 1px solid white;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: white;
|
||||
color: var(--background-dark);
|
||||
}
|
||||
}
|
||||
|
||||
.social-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
width: 66.6667%;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 50%;
|
||||
|
||||
h3 {
|
||||
font-weight: 600; // font-semibold
|
||||
font-size: 1.125rem; // text-lg
|
||||
margin-bottom: 1.5rem; // mb-6
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
|
||||
li {
|
||||
margin-bottom: 0.75rem; // space-y-3
|
||||
|
||||
a,
|
||||
.nuxt-link {
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
font-weight: 600; // hover:font-semibold
|
||||
text-decoration: underline; // para "Enlaces rápidos"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dot {
|
||||
height: 3px;
|
||||
width: 3px;
|
||||
background-color: #bbb;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: 7px;
|
||||
.footer-logos {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
@include mobile {
|
||||
height: 2px;
|
||||
width: 2px;
|
||||
margin: 5px;
|
||||
@media (min-width: 768px) {
|
||||
align-items: flex-end;
|
||||
width: 33.3333%; // md:w-1/3
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
width: 50%; // lg:w-1/2
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-weight: 600;
|
||||
font-size: 1.125rem;
|
||||
margin-bottom: 1rem; // mb-4
|
||||
}
|
||||
|
||||
.logos-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: 0.75rem 0; // gap-y-3
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
height: 3rem; // h-12
|
||||
grid-column: span 12;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
margin-left: auto;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
height: 3.5rem; // h-14
|
||||
}
|
||||
|
||||
&:nth-child(1),
|
||||
&:nth-child(2) {
|
||||
grid-column: span 6;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
grid-column: span 12;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.link-list {
|
||||
font-family: 'Noto Sans';
|
||||
font-size: $xs;
|
||||
color: $color-grey-darker;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: nowrap;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 3.125rem;
|
||||
a {
|
||||
text-decoration: none;
|
||||
list-style-type: none;
|
||||
|
||||
@include mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
flex-direction: row;
|
||||
font-size: $xxs;
|
||||
}
|
||||
|
||||
& small {
|
||||
margin: auto 1.25rem;
|
||||
text-align: center;
|
||||
color: $color-grey-darker;
|
||||
:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
li:nth-child(1):after,
|
||||
li:nth-child(2):after,
|
||||
li:nth-child(3):after,
|
||||
li:nth-child(4):after,
|
||||
li:nth-child(5):after {
|
||||
color: $color-grey-darker;
|
||||
content: '|';
|
||||
margin: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
.enreda {
|
||||
padding: 1.25em;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background: $color-greylighter;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
cursor: pointer;
|
||||
color: $color-light;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user