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

feat:adiciona responsividade ao inforcard de baixo

Browse Source
This commit is contained in:
Gabriel Bernardini 2022-10-13 19:53:20 -03:00
parent cb1e390ca4
commit c7e76e0483
2 changed files with 70 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
assets/style/main.css
View File

@ -116,11 +116,52 @@ body {
width: 100%;
}
.infocards-bottom {
display: grid;
justify-content: center;
grid-template-columns: repeat(4,432px);
gap: 16px;
padding: 192px 72px 0 72px;
}
.infocard-bottom {
height: 332px;
background: #FFFFFF;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
}
.infocards-bottom-image {
margin: 0 auto;
display: block;
padding-top: 35px;
}
.infocards-bottom-text {
font-size: 16px;
line-height: 24px;
text-align: center;
padding-top: 15px;
}
@media screen and (min-width: 769px) and (max-width: 1270px) {
.second-infocard {
grid-template-columns: repeat(2, 350px);
}
.infocards-bottom {
display: grid;
grid-template-columns: repeat(2, 368px);
max-width: 368px;
width: 100%;
align-items: center;
justify-content: center;
margin: 0 auto;
}
}
@media screen and (max-width:768px){
@ -180,10 +221,36 @@ body {
}
.infocards-bottom {
display: grid;
grid-template-columns: repeat(1, 368px);
max-width: 368px;
width: 100%;
align-items: center;
justify-content: center;
margin: 0 auto;
}
.infocards-bottom-text {
font-size: 14px;
max-width: 302px;
margin: 0 auto;
}
}
@media screen and (max-width: 415px) {
.image-main-desktop {
content: url(../imagem/banner-main-mobile.png);
}
.infocards-bottom {
display: grid;
grid-template-columns: repeat(1, max-content);
max-width: 368px;
width: 100%;
align-items: center;
justify-content: center;
margin: 0 auto;
}
}

2
index.html
View File

@ -105,7 +105,7 @@
</figure>
<figure class="infocard-bottom">
<img class="infocards-bottom-image" src="assets/imagem/bottom-loja.svg" alt="Icone de uma loja" />
<img class="infocards-bottom-image" src="assets/imagem/bottom-celular.svg" alt="Icone de um calular" />
<figcaption class="infocards-bottom-text">
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.