forked from M3-Academy/challenge-landing-page
Cria footer desktop, mobile e telas 4k
This commit is contained in:
parent
6bbf1ee112
commit
1643cd3e1b
BIN
assets/img/footer-face-logo.png
Normal file
BIN
assets/img/footer-face-logo.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 262 B |
BIN
assets/img/footer-insta-logo.png
Normal file
BIN
assets/img/footer-insta-logo.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 490 B |
BIN
assets/img/footer-youtube-logo.png
Normal file
BIN
assets/img/footer-youtube-logo.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 346 B |
@ -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%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
22
index.html
22
index.html
@ -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>
|
Loading…
Reference in New Issue
Block a user