feat(home): cria footer desktop e mobile

This commit is contained in:
Andrea Matsunaga 2022-10-13 00:14:48 -03:00
parent 3fc1646794
commit 8c151fada7
5 changed files with 58 additions and 0 deletions

View File

@ -123,6 +123,32 @@
<img class="lower-section-image lower-section-image-desktop" src="./src/assets/img/lower-section-image-desktop.png" alt="Imagem Principal da Seção Inferior" /> <img class="lower-section-image lower-section-image-desktop" src="./src/assets/img/lower-section-image-desktop.png" alt="Imagem Principal da Seção Inferior" />
<img class="lower-section-image lower-section-image-mobile" src="./src/assets/img/lower-section-image-mobile.png" alt="Imagem Principal da Seção Inferior" /> <img class="lower-section-image lower-section-image-mobile" src="./src/assets/img/lower-section-image-mobile.png" alt="Imagem Principal da Seção Inferior" />
</section> </section>
<footer class="page-footer">
<ul class="footer-icons">
<li class="footer-icon">
<a href="#" target="_blank">
<img src="./src/assets/img/instagram-icon.png" alt="Ícone do Instagram" />
</a>
</li>
<li class="footer-icon">
<a href="#" target="_blank">
<img src="./src/assets/img/facebook-icon.png" alt="Ícone do Facebook" />
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="./src/assets/img/youtube-icon.png" 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>
</main> </main>
</body> </body>
</html> </html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 297 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 493 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 348 B

View File

@ -201,6 +201,30 @@ body {
display: block; display: block;
} }
/* ----- FOOTER ----- */
.page-footer {
display: flex;
flex-direction: column;
align-items: center;
padding: 38px 0;
background: #000000;
}
.footer-icons {
display: flex;
gap: 22px;
list-style: none;
margin-bottom: 16px;
}
.footer-text {
text-align: center;
text-transform: uppercase;
line-height: 12px;
font-size: 10px;
color: #BDBDBD;
}
/* ----- RESPONSIVIDADE ----- */ /* ----- RESPONSIVIDADE ----- */
@media screen and (min-width: 2500px) { @media screen and (min-width: 2500px) {
@ -373,6 +397,14 @@ body {
grid-area: image; grid-area: image;
display: block; display: block;
} }
.page-footer {
padding: 32px 0;
}
.footer-text {
max-width: 64%;
}
} }
@media screen and (max-width: 320px) { @media screen and (max-width: 320px) {