ThiagoDutraSampaioLeite/challenge-landing-page-thiago-dutra
1
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Cria footer da landing page

Browse Source
This commit is contained in:
ThiagoDuutra 2022-10-12 08:20:59 -03:00
parent 202a1f2181
commit 4b6c2266a4
7 changed files with 66 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/imgs/footer-face.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 287 B

BIN
assets/imgs/footer-insta.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 492 B

BIN
assets/imgs/footer-yt.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 346 B

27
index.html
View File

@ -125,10 +125,35 @@
<img class="bottom-infocard-img bottom-infocard-img-mobile" src="assets/imgs/bottom-inforcard-mobile.png"
alt="Banner infocard mobile">
</figure>
</section>
</main>
<footer class="footer">
<ul class="container-footer-icons">
<li class="footer-icon">
<a href="#" target="_blank">
<img src="assets/imgs/footer-insta.png" alt="Icone instagram">
</a>
</li>
<li class="footer-icon">
<a href="#" target="_blank">
<img src="assets/imgs/footer-face.png" alt="Icone facebook">
</a>
</li>
<li class="footer-icon">
<a href="#" target="_blank">
<img src="assets/imgs/footer-yt.png" alt="Icone youtube">
</a>
</li>
</ul>
<p class="footer-text">
Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00
</p>
</footer>
<body>
</body>

1
style/colors.css
View File

@ -3,4 +3,5 @@
--white: #fff;
--bg-light-gray: #e5e5e5;
--middlebg-gray: #e0e0e0;
--letter-footer: #bdbdbd;
}

38
style/footer.css Normal file
View File

@ -0,0 +1,38 @@
.footer {
display: flex;
align-items: center;
text-align: center;
background: var(--black);
flex-direction: column;
padding: 38px 0;
max-width: 100%;
}
.container-footer-icons {
display: flex;
list-style: none;
margin-bottom: 16px;
gap: 16px;
}
.footer-icon {
width: 20%;
}
.footer-text {
color: var(--letter-footer);
font-size: 10px;
line-height: 12px;
text-transform: uppercase;
}
@media (max-width: 414px) {
.footer {
max-width: 100%;
padding: 32px 77px;
}
.footer-text {
width: 63%;
}
}

1
style/style.css
View File

@ -3,3 +3,4 @@
@import url("colors.css");
@import url("header.css");
@import url("main.css");
@import url("footer.css");