ETA/WebETA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add: register & recovery password

Browse Source
This commit is contained in:
Alexandro Uc Santos
2023-11-18 19:58:42 -06:00
commit afa8e1983b
37 changed files with 2730 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/components/Footer.vue Normal file
View File

@@ -0,0 +1,99 @@
<template>
<div class="footer">
<div class="d-flex justify-content-between">
<div class="social-media">
<div class="circle-btn">
<i class="fa-brands fa-facebook"></i>
</div>
<div class="circle-btn">
<i class="fa-brands fa-instagram"></i>
</div>
<div class="circle-btn">
<i class="fa-brands fa-x-twitter"></i>
</div>
<div class="circle-btn">
<i class="fa-brands fa-tiktok"></i>
</div>
<div class="circle-btn">
<i class="fa-brands fa-linkedin"></i>
</div>
</div>
<div class="d-flex flex-column">
<a class="btn-links mb-1" href="">Aviso de privacidad</a>
<a class="btn-links" href="">Terminos y condiciones</a>
</div>
</div>
<h4 class="copy"><i class="fa fa-copyright" aria-hidden="true"></i> 2023 ETA VIAPORTE | TODOS LOS DERECHOS RESERVADOS</h4>
</div>
</template>
<style scoped>
.footer {
width: 100%;
padding: 36px 100px;
background-color: #303030;
display: flex;
flex-direction: column;
}
.social-media{
display: flex;
}
.copy{
padding-top: 32px;
color: #FFF;
opacity: 0.2;
justify-content: center;
margin: 0 auto;
font-size: 22px;
font-weight: 400;
}
.circle-btn{
cursor: pointer;
margin: 0px 5px;
display: flex;
border-radius: 13px;
border: none;
background-color: #000;
color: #FFF;
padding: 15px;
justify-content: center;
align-items: center;
}
.btn-links {
font-size: 16px;
font-weight: 500;
color: rgb(85, 85, 223);
text-decoration: none;
}
.circle-btn i{
font-size: 30px;
}
@media (max-width: 768px) {
.footer {
width: 100%;
padding: 32px 24px;
background-color: #303030;
display: flex;
flex-direction: column;
}
.circle-btn {
padding: 8px;
margin: 0px 2px;
}
.circle-btn i{
font-size: 18px;
}
.btn-links {
font-size: 12px;
font-weight: 400;
}
.copy{
font-size: 16px;
font-weight: 400;
text-align: center;
}
}
</style>