Cria o footer desktop e mobile

This commit is contained in:
Manuela Luana Schumacker Tavares 2022-10-07 19:48:24 -03:00
parent 29ef7b30a2
commit 303d36e996
5 changed files with 59 additions and 0 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 287 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 492 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 350 B

View File

@ -148,6 +148,30 @@ body{
line-height: 24px; line-height: 24px;
} }
.page-footer{
display: flex;
flex-direction: column;
align-items: center;
padding: 38px 0;
background: #000000;
}
.footer-icons{
display: flex;
list-style: none;
margin-bottom: 16px;
}
.footer-icon{
margin: 0 8px;
}
.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, .main-banner-desktop,
.middle-banner-desktop{ .middle-banner-desktop{
@ -181,6 +205,15 @@ body{
.bottom-cards-descripition{ .bottom-cards-descripition{
font-size: 14px; font-size: 14px;
} }
.page-footer{
padding-bottom: 26px;
}
.footer-text{
max-width: 280px;
text-align: center;
}
} }
@media screen and (max-width: 992px) { @media screen and (max-width: 992px) {

View File

@ -107,5 +107,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.png" alt="Icone do Instagram"/>
</a>
</li>
<li class="footer-icon">
<a href="#" target="_blank">
<img src="./assets/images/facebook-icon.png" alt=" Icone do Facebook"/>
</a>
</li>
<li class="footer-icon">
<a href="#" target="_blank">
<img src="./assets/images/youtube-icon.png" alt="Icone 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>