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>
</div>
<div class="bottom-cards">
<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>
</div>
<figure class="container-bottom-cards">
<img class="bottom-img-card" src="assets/imgs/coin-card-bottom.png"
alt="Segundo 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 class="bottom-cards">
<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">
<img class="bottom-img-card" src="assets/imgs/laptop-card-bottom.png"
alt="Terceiro 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">
<img class="bottom-img-card" src="assets/imgs/coin-card-bottom.png" alt="Segundo 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">
<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>
<figure class="container-bottom-cards">
<img class="bottom-img-card" src="assets/imgs/laptop-card-bottom.png"
alt="Terceiro 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">
<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>
<section class="bottom-infocards">

17
style/main.css
View File

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