feat(home): footer concluido.

This commit is contained in:
Luiz Felipe Silva 2022-11-09 16:58:48 -03:00
parent aa767901e9
commit c6c6ee3175
2 changed files with 66 additions and 5 deletions

View File

@ -121,5 +121,33 @@
</div> </div>
</section> </section>
</main> </main>
<footer class="footer">
<div class="media-social">
<ul class="media-list">
<li class="media">
<a href="#" target="_blank">
<img src="./src/assets/svg/instagram.svg" alt="Instagram">
</a>
</li>
<li class="media">
<a href="#" target="_blank">
<img src="./src/assets/svg/facebook.svg" alt="Facebook">
</a>
</li>
<li class="media">
<a href="#" target="_blank">
<img src="./src/assets/svg/youtube.svg" alt="YouTube">
</a>
</li>
</ul>
</div>
<p>
Copyright © 2020 - Loja Comércio Eletrônico | CNPJ: 000.000.000/0001-00
</p>
</footer>
</body> </body>
</html> </html>

View File

@ -169,6 +169,37 @@ header {
flex-wrap: wrap; flex-wrap: wrap;
} }
/* FOOTER */
.footer {
background-color: #000;
height: 128px;
padding: 38px 0;
}
.media-social {
display: flex;
justify-content: center;
}
.media-list {
display: flex;
list-style: none;
}
.media {
margin: 0 8px 17px 8px;
}
.footer p {
font-size: 10px;
font-weight: 400;
line-height: 12px;
color: #BDBDBD;
text-transform: uppercase;
text-align: center;
}
/* RESPONSIVIDADE -> NOTEBOOK */ /* RESPONSIVIDADE -> NOTEBOOK */
@media screen and (min-width: 993px) and (max-width: 1280px) { @media screen and (min-width: 993px) and (max-width: 1280px) {
@ -195,6 +226,12 @@ header {
.section3 { .section3 {
grid-template-columns: repeat(2, max-content); grid-template-columns: repeat(2, max-content);
} }
.text-card h2 {
font-weight: 600;
font-size: 32px;
line-height: 20px;
}
} }
@media screen and (min-width: 769px) and (max-width: 992px) { @media screen and (min-width: 769px) and (max-width: 992px) {
@ -242,11 +279,7 @@ header {
padding: 0 26px; padding: 0 26px;
} }
.text-card h2 {
font-weight: 600;
font-size: 32px;
line-height: 20px;
}
.text-card p { .text-card p {
font-size: 16px; font-size: 16px;