forked from M3-Academy/practice-time-landing-page
Cria o footer desktop mobile, telas grandes
This commit is contained in:
parent
a09ecf6414
commit
7456534f36
3
assets/images/facebook-icon.svg
Normal file
3
assets/images/facebook-icon.svg
Normal 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="M17.9993 0.0049936L14.887 0C11.3905 0 9.13088 2.31828 9.13088 5.90643V8.62969H6.00164C5.73124 8.62969 5.51227 8.84891 5.51227 9.11932V13.065C5.51227 13.3354 5.73149 13.5544 6.00164 13.5544H9.13088V23.5106C9.13088 23.781 9.34985 24 9.62026 24H13.703C13.9734 24 14.1924 23.7808 14.1924 23.5106V13.5544H17.8512C18.1216 13.5544 18.3406 13.3354 18.3406 13.065L18.3421 9.11932C18.3421 8.98948 18.2904 8.86514 18.1988 8.77326C18.1071 8.68138 17.9823 8.62969 17.8525 8.62969H14.1924V6.32115C14.1924 5.21157 14.4568 4.64829 15.9022 4.64829L17.9988 4.64755C18.2689 4.64755 18.4879 4.42833 18.4879 4.15817V0.494367C18.4879 0.224462 18.2692 0.00549296 17.9993 0.0049936Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 787 B |
5
assets/images/instagram-icon.svg
Normal file
5
assets/images/instagram-icon.svg
Normal 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="M12 6.05835C8.58996 6.05835 5.8158 8.9481 5.8158 12.5002C5.8158 16.0521 8.58996 18.9417 12 18.9417C15.4099 18.9417 18.1841 16.0521 18.1841 12.5002C18.1841 8.9481 15.4099 6.05835 12 6.05835ZM12 16.7235C9.76424 16.7235 7.94518 14.8289 7.94518 12.5C7.94518 10.171 9.7641 8.27631 12 8.27631C14.2358 8.27631 16.0547 10.171 16.0547 12.5C16.0547 14.8289 14.2357 16.7235 12 16.7235Z" fill="white"/>
|
||||
<path d="M18.4435 4.17749C18.0332 4.17749 17.6302 4.3505 17.3405 4.65364C17.0493 4.95531 16.882 5.37527 16.882 5.8041C16.882 6.23161 17.0495 6.65142 17.3405 6.95456C17.6301 7.25622 18.0332 7.43072 18.4435 7.43072C18.8552 7.43072 19.2569 7.25622 19.5479 6.95456C19.8389 6.65142 20.005 6.23146 20.005 5.8041C20.005 5.37527 19.8389 4.95531 19.5479 4.65364C19.2583 4.3505 18.8552 4.17749 18.4435 4.17749Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
3
assets/images/youtube-icon.svg
Normal file
3
assets/images/youtube-icon.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 759 B |
@ -147,6 +147,28 @@ body {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.page-footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: #000000;
|
||||
padding: 38px 0;
|
||||
}
|
||||
|
||||
.footer-icons {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
margin-bottom: 16px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
text-transform: uppercase;
|
||||
line-height: 12px;
|
||||
font-size: 10px;
|
||||
color: #BDBDBD;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 340px) {
|
||||
.top-card {
|
||||
padding: 22px 0 20px;
|
||||
@ -252,10 +274,22 @@ body {
|
||||
line-height: 24px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.page-footer {
|
||||
padding-bottom: 26px;
|
||||
}
|
||||
|
||||
.footer-text-desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footer-text-mobile {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.main-banner-mobile, .middle-banner-mobile {
|
||||
.main-banner-mobile, .middle-banner-mobile, .footer-text-mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -349,4 +383,22 @@ body {
|
||||
line-height: 48px;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.page-footer {
|
||||
padding: 76px 0;
|
||||
}
|
||||
|
||||
.footer-icons {
|
||||
margin-bottom: 32px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.footer-icon-image {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
line-height: 24px;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
31
index.html
31
index.html
@ -130,5 +130,36 @@
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="page-footer">
|
||||
<ul class="footer-icons">
|
||||
<li class="footer-icon">
|
||||
<figure>
|
||||
<a href="https://www.instagram.com/m3.ecommerce/" target="_blank"><img class="footer-icon-image" src="./assets/images/instagram-icon.svg" alt="Ícone do Instagram"/></a>
|
||||
</figure>
|
||||
</li>
|
||||
|
||||
<li class="footer-icon">
|
||||
<figure>
|
||||
<a href="https://pt-br.facebook.com/digitalm3/" target="_blank"><img class="footer-icon-image" src="./assets/images/facebook-icon.svg" alt="Ícone do Facebook"/></a>
|
||||
</figure>
|
||||
</li>
|
||||
|
||||
<li class="footer-icon">
|
||||
<figure>
|
||||
<a href="https://www.youtube.com/channel/UCW4o86gZG_ceA8CmHltXeXA" target="_blank"><img class="footer-icon-image" src="./assets/images/youtube-icon.svg" alt="Ícone do YouTube"/></a>
|
||||
</figure>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p class="footer-text footer-text-desktop">
|
||||
Copyright © 2020 - Loja Comércio Eletrônico | CNPJ: 000.000.000/0001-00
|
||||
</p>
|
||||
|
||||
<p class="footer-text footer-text-mobile" >
|
||||
Copyright © 2020 - Loja Comércio Eletrônico <br>
|
||||
CNPJ: 000.000.000/0001-00
|
||||
</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user