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

Criar o footer desktop e mobile #2

Merged
naianfelix merged 1 commits from naianfelix into main 2022-10-08 21:52:00 +00:00
Conversation 0 Commits 1 Files Changed 5 +82
5 changed files with 82 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
assets/images/facebook-icon.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="14" height="24" viewBox="0 0 14 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.9993 0.0049936L9.88701 0C6.39049 0 4.13088 2.31828 4.13088 5.90643V8.62969H1.00164C0.731238 8.62969 0.512268 8.84891 0.512268 9.11932V13.065C0.512268 13.3354 0.731487 13.5544 1.00164 13.5544H4.13088V23.5106C4.13088 23.781 4.34985 24 4.62026 24H8.70303C8.97343 24 9.1924 23.7808 9.1924 23.5106V13.5544H12.8512C13.1216 13.5544 13.3406 13.3354 13.3406 13.065L13.3421 9.11932C13.3421 8.98948 13.2904 8.86514 13.1988 8.77326C13.1071 8.68138 12.9823 8.62969 12.8525 8.62969H9.1924V6.32115C9.1924 5.21157 9.45681 4.64829 10.9022 4.64829L12.9988 4.64755C13.2689 4.64755 13.4879 4.42833 13.4879 4.15817V0.494367C13.4879 0.224462 13.2692 0.00549296 12.9993 0.0049936Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 790 B

5
assets/images/instagram-icon.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.3766 0H6.62295C2.97106 0 0 3.095 0 6.89906V18.1008C0 21.905 2.97106 24.9999 6.62295 24.9999H17.3766C21.0288 24.9999 23.9999 21.9049 23.9999 18.1008V6.89906C24 3.095 21.0288 0 17.3766 0ZM21.8706 18.1008C21.8706 20.6819 19.8547 22.7817 17.3768 22.7817H6.62295C4.1452 22.7819 2.12938 20.6819 2.12938 18.1008V6.89906C2.12938 4.31806 4.1452 2.21811 6.62295 2.21811H17.3766C19.8545 2.21811 21.8705 4.31806 21.8705 6.89906V18.1008H21.8706Z" fill="white"/>
<path d="M11.9999 6.05847C8.58993 6.05847 5.81577 8.94822 5.81577 12.5003C5.81577 16.0522 8.58993 18.9418 11.9999 18.9418C15.4099 18.9418 18.1841 16.0522 18.1841 12.5003C18.1841 8.94822 15.4099 6.05847 11.9999 6.05847ZM11.9999 16.7236C9.76421 16.7236 7.94515 14.829 7.94515 12.5002C7.94515 10.1711 9.76407 8.27643 11.9999 8.27643C14.2358 8.27643 16.0547 10.1711 16.0547 12.5002C16.0547 14.829 14.2356 16.7236 11.9999 16.7236Z" fill="white"/>
<path d="M18.4435 4.17761C18.0333 4.17761 17.6303 4.35062 17.3405 4.65377C17.0494 4.95543 16.882 5.37539 16.882 5.80422C16.882 6.23173 17.0495 6.65154 17.3405 6.95468C17.6301 7.25635 18.0333 7.43084 18.4435 7.43084C18.8552 7.43084 19.2569 7.25635 19.548 6.95468C19.839 6.65154 20.0051 6.23158 20.0051 5.80422C20.0051 5.37539 19.839 4.95543 19.548 4.65377C19.2584 4.35062 18.8552 4.17761 18.4435 4.17761Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

3
assets/images/youtube-icon.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.98 5.34C22.329 4.182 21.6225 3.969 20.184 3.888C18.747 3.7905 15.1335 3.75 12.003 3.75C8.8665 3.75 5.2515 3.7905 3.816 3.8865C2.3805 3.969 1.6725 4.1805 1.0155 5.34C0.345 6.4965 0 8.4885 0 11.9955C0 11.9985 0 12 0 12C0 12.003 0 12.0045 0 12.0045V12.0075C0 15.4995 0.345 17.5065 1.0155 18.651C1.6725 19.809 2.379 20.019 3.8145 20.1165C5.2515 20.2005 8.8665 20.25 12.003 20.25C15.1335 20.25 18.747 20.2005 20.1855 20.118C21.624 20.0205 22.3305 19.8105 22.9815 18.6525C23.658 17.508 24 15.501 24 12.009C24 12.009 24 12.0045 24 12.0015C24 12.0015 24 11.9985 24 11.997C24 8.4885 23.658 6.4965 22.98 5.34ZM9 16.5V7.5L16.5 12L9 16.5Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 759 B

45
assets/styles/main.css
View File

@ -145,6 +145,38 @@ body {
.bottom-infocard-description { .bottom-infocard-description {
line-height: 24px; line-height: 24px;
font-size: 16px; font-size: 16px;
}
.page-footer {
flex-direction: column;
align-items: center;
display: flex;
padding: 38px 0;
background: #000000;
}
.footer-icons {
display: flex;
list-style: none;
margin-bottom: 16px;
}
.footer-icon {
margin: 0 8px;
}
.footer-text {
text-transform: uppercase;
font-family: 'Inter';
font-weight: 400;
font-size: 10px;
color: #BDBDBD;
} }
@media screen and (max-width: 414px) { @media screen and (max-width: 414px) {
@ -181,8 +213,21 @@ body {
font-size: 14px; font-size: 14px;
} }
.page-footer {
padding-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) {
.top-infocard { .top-infocard {
flex-direction: column; flex-direction: column;

26
index.html
View File

@ -100,5 +100,31 @@
</div> </div>
</section> </section>
</main> </main>
<footer class="page-footer">
<ul class="footer-icons">
<li class="footer-icon">
<a href="#" target="_blank">
<img src="assets/images/instagram-icon.svg" alt="ícone do Instagram">
</a>
</li>
<li class="footer-icon">
<a href="#" target="_blank">
<img src="assets/images/facebook-icon.svg" alt="ícone do Facebook">
</a>
</li>
<li class="footer-icon">
<a href="#" target="_blank">
<img src="assets/images/youtube-icon.svg" alt="ícone do 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>
</html> </html>