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

Adicionando icones no rodapé

Browse Source
This commit is contained in:
Victor Cardoso de Souza 2022-10-09 13:00:32 -03:00
parent 5991b4c4a9
commit 655f6b69ad
5 changed files with 56 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assest/facebook-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 287 B

BIN
assest/instagram-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 490 B

BIN
assest/youtube-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 346 B

23
index.html
View File

@ -92,7 +92,7 @@
<section class="bottom-infocard"> <section class="bottom-infocard">
<img class="bottom-infocard-image" src="./assest/bottom-inforcard-image.png" alt="Banner do infocard de baixo"> <img class="bottom-infocard-image" src="./assest/bottom-inforcard-image.png" alt="Banner do infocard de baixo">
<div class="bottom-infocard-text"> <div class="bottom-infocard-text">
<h2 class="bottom-infocard-title">Lorem ipsum dolor sit amet</h2> <h2 class="bottom-infocard-title">Lorem ipsum dolor sit amet</h2>
<p class="bottom-infocard-description"> <p class="bottom-infocard-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum.
@ -103,5 +103,26 @@
</section> </section>
</main> </main>
<footer class="page-footer">
<ul class="footer-icons">
<li class="footer-icon">
<a href="#" target="_blank">
<img src="./assest/instagram-icon.png" alt="icone do Instagram"/>
</a>
</li>
<li class="footer-icon">
<a href="#" target="_blank">
<img src="./assest/facebook-icon.png" alt="icone do Facebook"/>
</a>
</li>
<li class="footer-icon">
<a href="#" target="_blank">
<img src="./assest/youtube-icon.png" alt="icon do Youtube"/>
</a>
</li>
</ul>
<p class="footer-text">Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-0</p>
</footer>
</body> </body>
</html> </html>

34
main.css
View File

@ -155,6 +155,30 @@ body {
line-height: 24px; line-height: 24px;
} }
.page-footer {
display: flex;
flex-direction: column;
align-items: center;
padding: 38px 0 ;
background-color: #000000;
}
.footer-icons {
list-style: none;
display: flex;
}
.footer-icon {
margin: 0 8px;
margin-bottom: 16px;
}
.footer-text {
font-size: 10px;
line-height: 12px;
text-transform: uppercase;
color: #BDBDBD;
}
@media screen and (max-width: 414px) { @media screen and (max-width: 414px) {
.main-banner-desktop, .middle-banner-desktop { .main-banner-desktop, .middle-banner-desktop {
@ -187,6 +211,16 @@ body {
.bottom-card-description { .bottom-card-description {
font-size: 14px; font-size: 14px;
} }
.page-footer {
margin-bottom: 26px;
text-align: center;
}
.footer-text {
max-width: 280px;
text-align: center;
}
} }
@media screen and (max-width:992px) { @media screen and (max-width:992px) {