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

fix: Modifica layout top-card/middle-card

Browse Source
This commit is contained in:
ThiagoDuutra 2022-10-12 07:47:04 -03:00
parent 6fc0054b71
commit 202a1f2181
2 changed files with 39 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
index.html
View File

@ -72,39 +72,39 @@
</figure> </figure>
</div> </div>
<div class="bottom-cards"> </div>
<figure class="container-bottom-cards">
<img class="bottom-img-card" src="assets/imgs/money-card-bottom.png"
alt="Primeiro card da parte de baixo" />
<figcaption class="bottom-description">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.</figcaption>
</figure>
<figure class="container-bottom-cards"> <div class="bottom-cards">
<img class="bottom-img-card" src="assets/imgs/coin-card-bottom.png" <figure class="container-bottom-cards">
alt="Segundo card da parte de baixo" /> <img class="bottom-img-card" src="assets/imgs/money-card-bottom.png"
<figcaption class="bottom-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras alt="Primeiro card da parte de baixo" />
euismod enim non dui fringilla interdum. Lorem ipsum dolor <figcaption class="bottom-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption> euismod enim non dui fringilla interdum. Lorem ipsum dolor
</figure> sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption>
</figure>
<figure class="container-bottom-cards"> <figure class="container-bottom-cards">
<img class="bottom-img-card" src="assets/imgs/laptop-card-bottom.png" <img class="bottom-img-card" src="assets/imgs/coin-card-bottom.png" alt="Segundo card da parte de baixo" />
alt="Terceiro card da parte de baixo" /> <figcaption class="bottom-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
<figcaption class="bottom-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor
euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption>
sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption> </figure>
</figure>
<figure class="container-bottom-cards"> <figure class="container-bottom-cards">
<img class="bottom-img-card" src="assets/imgs/phone-card-bottom.png" <img class="bottom-img-card" src="assets/imgs/laptop-card-bottom.png"
alt="Primeiro card da parte de baixo" /> alt="Terceiro card da parte de baixo" />
<figcaption class="bottom-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras <figcaption class="bottom-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
euismod enim non dui fringilla interdum. Lorem ipsum dolor euismod enim non dui fringilla interdum. Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption> sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption>
</figure> </figure>
</div>
<figure class="container-bottom-cards">
<img class="bottom-img-card" src="assets/imgs/phone-card-bottom.png"
alt="Primeiro card da parte de baixo" />
<figcaption class="bottom-description">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.</figcaption>
</figure>
</div> </div>
<section class="bottom-infocards"> <section class="bottom-infocards">

17
style/main.css
View File

@ -46,6 +46,7 @@
justify-content: center; justify-content: center;
width: 100%; width: 100%;
gap: 21px; gap: 21px;
margin-bottom: 50px;
} }
.main .top-card { .main .top-card {
@ -75,8 +76,7 @@
} }
.main .container-middle-cards { .main .container-middle-cards {
display: grid; display: flex;
grid-template-columns: repeat(3, 1fr);
gap: 39px; gap: 39px;
justify-content: center; justify-content: center;
position: relative; position: relative;
@ -237,14 +237,9 @@
.main .container-middle-cards { .main .container-middle-cards {
padding: 0 23px; padding: 0 23px;
} }
}
@media (max-width: 768px) {
.main .middle-cards {
margin-top: 44px;
}
.main .container-middle-cards { .main .container-middle-cards {
display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
column-gap: 14px; column-gap: 14px;
margin-bottom: 80px; margin-bottom: 80px;
@ -258,6 +253,12 @@
} }
} }
@media (max-width: 768px) {
.main .middle-cards {
margin-top: 44px;
}
}
@media (max-width: 480px) { @media (max-width: 480px) {
.main .second-img-banner { .main .second-img-banner {
grid-area: 1/1; grid-area: 1/1;