carloswinter/practice-time-landing-page-carloseduardowinter
1
0
Fork 0
forked from M3-Academy/practice-time-landing-page
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Adiciona o Footer

Browse Source
This commit is contained in:
Wynther Wynther 2022-10-07 17:51:31 -03:00
parent 2f2342a405
commit aa122c1fd0
6 changed files with 57 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
img/M3 Academy - Landing Page.zip Normal file
View File

Binary file not shown.

BIN
img/fblogo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 261 B

BIN
img/iglogo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 492 B

BIN
img/ytlogo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 350 B

26
index.html
View File

@ -16,6 +16,7 @@
<header class="header">
<img src="./img/Logo M3 [branco] (4) 1.png" alt="M3 Logo" />
</header>
<main>
<section class="banner">
<img
src="./img/desktop banner.png" alt="Banner principal" class="banner-desktop"/>
@ -83,5 +84,30 @@
Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.</p>
</div>
</section>
</main>
<footer class="footer">
<div>
<ul class="footer-icons">
<li>
<a href="#" target="_blank">
<img src="./img/iglogo.png" alt="Ícone do Instagram">
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="./img/fblogo.png" alt="Ícone do Facebook">
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="./img/ytlogo.png" alt="Ícone do Youtube">
</a>
</li>
</ul>
</div>
<p class="footer-desc">
Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00
</p>
</footer>
</body>
</html>

31
styles.css
View File

@ -146,6 +146,29 @@ body{
font-size: 32px;
font: 600;
}
.footer{
display: flex;
flex-direction: column;
align-items: center;
background: #000000;
padding:38px;
}
.footer-desc{
text-transform: uppercase;
list-style: 12px;
font-size: 10px;
color: #bdbdbd;
}
.footer-icons{
display: flex;
list-style: none;
margin-bottom: 16px;
}
.footer-icons li{
margin: 0 8px;
}
@media screen and (max-width: 414px) {
.banner-desktop,
.middle-banner-desktop{
@ -169,6 +192,14 @@ body{
grid-template-columns: 1fr;
gap:16px;
}
.footer{
padding-bottom: 26px;
}
.footer-desc{
max-width: 280px;
text-align: center;
}
}
@media screen and (max-width: 992px) {