Cria footer desktop, mobile e telas 4k

This commit is contained in:
Leonardo Pereira Rocha 2022-10-13 01:53:24 -03:00
parent 6bbf1ee112
commit 1643cd3e1b
5 changed files with 96 additions and 2 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 262 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 490 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 346 B

View File

@ -173,11 +173,46 @@ body{
margin-bottom: 50px;
}
.final-card-image-desktop{
.final-photo-desktop{
width: 70%;
margin-bottom: 116px;
}
footer{
background: #000000;
color: #BDBDBD;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.footer-text{
font-size: 10px;
line-height: 12px;
text-transform: uppercase;
margin-bottom: 38px;
}
.footer-logo{
margin-top: 38px;
margin-bottom: 16px;
}
a {
text-decoration: none;
}
.logo1
{
padding-right: 21px;
}
.logo3
{
padding-left: 21px;
}
@media screen and (max-width:992px) {
@ -221,11 +256,21 @@ body{
.main-banner-desktop, .final-photo-desktop{
display: none;
}
.main-banner-mobile, .final-photo-mobile{
display: block;
max-width: 100%;
}
.final-photo-mobile{
margin-bottom: 50px;
}
.footer-text{
font-size: 10px;
line-height: 12px;
max-width: 261px;
text-align: center;
}
}
@media screen and (max-width:768px){
@ -313,5 +358,32 @@ body{
padding: 573px 0;
}
.final-card-info{
max-width: 1050px;
}
.final-card-text{
font-size: 48px;
line-height: 72px;
margin-bottom: 150px;
}
.final-card-title{
font-size: 72px;
line-height: 87px;
}
.footer-text{
font-size: 30px;
line-height: 36px;
text-transform: uppercase;
margin-bottom: 38px;
max-width: 1200px;
}
.logo-header{
width: 300%;
}
}

View File

@ -130,5 +130,27 @@
<img class="final-photo-desktop" src="./assets/img/final-photo-desktop.png" alt="Banner final da pagina" />
</section>
<footer>
<div class="footer-logo">
<a href="https://instagram.com" target="_blank">
<img class="logo1" src="./assets/img/footer-insta-logo.png" alt="Logo do Instagram" />
</a>
<a href="https://facebook.com" target="_blank">
<img class="logo2" src="./assets/img/footer-face-logo.png" alt="Logo do Facebook" />
</a>
<a href="https://youtube.com" target="_blank">
<img class="logo3"src="./assets/img/footer-youtube-logo.png" alt="Logo do Youtube" />
</a>
</div>
<p class="footer-text">
Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00
</p>
</footer>
</body>
</html>