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

WIP atualiza a responsividade da página

Browse Source
This commit is contained in:
Guilherme Carvalho da Rosa 2022-10-13 17:16:10 -03:00
parent 344dfd3078
commit 7342bc217f
2 changed files with 25 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
assets/style/main.css
View File

@ -102,6 +102,14 @@ body {
bottom: -62px;
}
.middle-cards-2 {
display: flex;
flex-direction: row;
justify-content: center;
gap: 40px;
}
.middle-cards {
background: #E0E0E0;
margin-bottom: 190px;
@ -300,9 +308,15 @@ body {
bottom: -32px;
}
.middle-cards-2 {
max-width: 566px;
gap: 14px;
}
.middle-cards {
margin-bottom: 112px;
}
}
@media screen and (max-width: 1024px) {
@ -327,10 +341,6 @@ body {
text-align: center;
}
.bottom-infocard {
display: flex;
flex-direction: column-reverse;

20
index.html
View File

@ -61,17 +61,19 @@
<section class="middle-cards">
<div class="middle-cards-wrapper">
<div class="middle-card">
<img class="middle-card-image" src="./assets/images/middle-card-image-01.png" alt="">
<div class="middle-cards-2">
<div class="middle-card">
<img class="middle-card-image" src="./assets/images/middle-card-image-01.png" alt="">
</div>
<div class="middle-card">
<img class="middle-card-image" src="./assets/images/middle-card-image-02.png" alt="">
</div>
</div>
<div class="middle-card">
<img class="middle-card-image" src="./assets/images/middle-card-image-02.png" alt="">
</div>
<div class="middle-card">
<img class="middle-card-image" src="./assets/images/middle-card-image-03.png" alt="">
</div>
<div class="middle-card">
<img class="middle-card-image" src="./assets/images/middle-card-image-03.png" alt="">
</div>
</div>
</section>