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

Fix(home): Medidas adaptaveis Footer redes sociais logos e Bottom cards

Browse Source
This commit is contained in:
Rhayllon Daudt 2022-10-13 12:56:05 -03:00
parent 03b456408a
commit 89cb6dd2be
2 changed files with 23 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
assets/styles/main.css
View File

@ -122,7 +122,7 @@ body{
grid-template-columns: repeat(4, 23%); grid-template-columns: repeat(4, 23%);
gap: 16px; gap: 16px;
justify-content: center; justify-content: center;
padding: 0 0 108px; margin: 0 0 108px;
} }
.bottom-card{ .bottom-card{
@ -131,18 +131,20 @@ body{
align-items: center; align-items: center;
background: #FFFFFF; background: #FFFFFF;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
gap: 15px;
padding: 36px 32px 65px;
} }
.bottom-card-image{ .bottom-card-image{
display: block; display: block;
padding: 36px 164px 0; width: 24%;
height: 100%;
} }
.bottom-card-description{ .bottom-card-description{
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
text-align: center; text-align: center;
padding: 16px 32px 66px;
} }
.bottom-section{ .bottom-section{
@ -187,8 +189,11 @@ body{
background: #000000; background: #000000;
} }
.page-footer-conent{ .page-footer-content{
display: flex;
flex-direction: column;
width: 21%; width: 21%;
align-items: center;
} }
.footer-icons{ .footer-icons{
@ -196,10 +201,13 @@ body{
list-style: none; list-style: none;
margin-bottom: 16px; margin-bottom: 16px;
justify-content: center; justify-content: center;
gap: 16px;
width: 100%;
} }
.footer-icon{ .footer-link{
margin: 0 8px; display: flex;
width: 6%;
} }
.footer-text{ .footer-text{

16
index.html
View File

@ -113,6 +113,7 @@
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p> </p>
</div> </div>
<div class="bottom-card"> <div class="bottom-card">
<img class="bottom-card-image" src="./assets/images/bottom-card-04.png" alt="Imagem 4" /> <img class="bottom-card-image" src="./assets/images/bottom-card-04.png" alt="Imagem 4" />
@ -121,6 +122,7 @@
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p> </p>
</div> </div>
</section> </section>
<section class="bottom-section"> <section class="bottom-section">
@ -141,22 +143,22 @@
</section> </section>
<footer class="page-footer"> <footer class="page-footer">
<div class="page-footer-conent"> <div class="page-footer-content">
<ul class="footer-icons"> <ul class="footer-icons">
<li class="footer-icon"> <li>
<a href="#" target="_blank"> <a class="footer-link" href="#" target="_blank">
<img src="./assets/images/icon-instagram.png" alt="Icone do Instgram"> <img src="./assets/images/icon-instagram.png" alt="Icone do Instgram">
</a> </a>
</li> </li>
<li class="footer-icon"> <li>
<a href="#" target="_blank"> <a class="footer-link" href="#" target="_blank">
<img src="./assets/images/icon-facebook.png" alt="Icone do Facebook"> <img src="./assets/images/icon-facebook.png" alt="Icone do Facebook">
</a> </a>
</li> </li>
<li class="footer-icon"> <li>
<a href="#" target="_blank"> <a class="footer-link" href="#" target="_blank">
<img src="./assets/images/icon-youtube.png" alt="Icone do Youtube"> <img src="./assets/images/icon-youtube.png" alt="Icone do Youtube">
</a> </a>
</li> </li>