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

6
index.html
View File

@ -72,6 +72,8 @@
</figure> </figure>
</div> </div>
</div>
<div class="bottom-cards"> <div class="bottom-cards">
<figure class="container-bottom-cards"> <figure class="container-bottom-cards">
<img class="bottom-img-card" src="assets/imgs/money-card-bottom.png" <img class="bottom-img-card" src="assets/imgs/money-card-bottom.png"
@ -82,8 +84,7 @@
</figure> </figure>
<figure class="container-bottom-cards"> <figure class="container-bottom-cards">
<img class="bottom-img-card" src="assets/imgs/coin-card-bottom.png" <img class="bottom-img-card" src="assets/imgs/coin-card-bottom.png" alt="Segundo card da parte de baixo" />
alt="Segundo 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>
@ -105,7 +106,6 @@
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> </div>
</div>
<section class="bottom-infocards"> <section class="bottom-infocards">
<div class="bottom-infocard-text"> <div class="bottom-infocard-text">

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;