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

feat: Adiciona cards centrais mobile

Browse Source
This commit is contained in:
Saulo Klein Nery 2022-10-11 16:46:13 -03:00
parent ec37b1d9e6
commit e383803ec5
2 changed files with 17 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -94,11 +94,11 @@
<img class="middle-card-image" src="./assets/svgs/middle-card-image01.svg" alt="Imagem do Primeiro Card Central"> <img class="middle-card-image" src="./assets/svgs/middle-card-image01.svg" alt="Imagem do Primeiro Card Central">
</figure> </figure>
<figure> <figure id="middle-card02">
<img class="middle-card-image" src="./assets/svgs/middle-card-image02.svg" alt="Imagem do Segundo Card Central"> <img class="middle-card-image" src="./assets/svgs/middle-card-image02.svg" alt="Imagem do Segundo Card Central">
</figure> </figure>
<figure> <figure id="middle-card03">
<img class="middle-card-image" src="./assets/svgs/middle-card-image03.svg" alt="Imagem do Terceiro Card Central"> <img class="middle-card-image" src="./assets/svgs/middle-card-image03.svg" alt="Imagem do Terceiro Card Central">
</figure> </figure>
</div> </div>

15
styles/main.css
View File

@ -154,6 +154,21 @@ body{
.top-card{ .top-card{
min-width: 85%; min-width: 85%;
} }
.middle-card-images-wrapper{
grid-template-columns: repeat(2, 43%);
column-gap: 14px;
row-gap: 23px;
bottom: -32px;
}
#middle-card02{
order: -1;
}
#middle-card03{
grid-area: 2/1/2/3;
}
} }
@media screen and (min-width: 1025px){ @media screen and (min-width: 1025px){