feat: adiciona footer

This commit is contained in:
Vitor Soares 2022-10-12 18:12:12 -03:00
parent 894c22edf6
commit 35f10388ec
2 changed files with 69 additions and 1 deletions

View File

@ -182,6 +182,32 @@ body {
text-align: center;
}
/*Adiciona footer*/
.page-footer {
display: flex;
flex-direction: column;
align-items: center;
padding: 38px 0;
background: #000000;
}
.footer-icons {
display: flex;
list-style: none;
margin-bottom: 16px;
}
.footer-icon {
margin: 0 8px;
}
.footer-text {
font-size: 10px;
line-height: 12px;
text-transform: uppercase;
color: #BDBDBD;
}
/*Media Querie*/
@media screen and (max-width: 414px) {
.main-banner {
@ -229,6 +255,15 @@ body {
.bottom-infocard-description {
padding: 0 30px 0;
}
.page-footer {
padding-bottom: 26px;
}
.footer-text {
max-width: 280px;
text-align: center;
}
}
@media screen and (max-width: 992px) {
@ -290,4 +325,10 @@ body {
.top-cards {
grid-template-columns: repeat(2, max-content);
}
}
@media screen and (min-width: 2500px) {
.footer-text {
font-size: 16px;
}
}

View File

@ -136,6 +136,33 @@
<img class="bottom-infocard-image" src="assets/imagens/bottom-banner-desktop.png" alt="Banner Infocard Inferior" />
</section>
</main>
<!--Adiciona footer-->
<footer class="page-footer">
<ul class="footer-icons">
<li class="footer-icon">
<a href="#" target="_blank">
<img src="assets/imagens/instagram-icon.svg" alt="Ícone do Instagram" />
</a>
</li>
<li class="footer-icon">
<a href="#" target="_blank">
<img src="assets/imagens/facebook-icon.svg" alt="Ícone do Facebook" />
</a>
</li>
<li class="footer-icon">
<a href="#" target="_blank">
<img src="assets/imagens/youtube-icon.svg" alt="Ícone do YouTube" />
</a>
</li>
</ul>
<p class="footer-text">
Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00
</p>
</footer>
</main>
</body>
</html>