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

71
assets/style/main.css
View File

@ -116,14 +116,55 @@ body {
width: 100%; 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) { @media screen and (min-width: 769px) and (max-width: 1270px) {
.second-infocard { .second-infocard {
grid-template-columns: repeat(2, 350px); 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) { @media screen and (max-width:768px){
.first-infocard-title { .first-infocard-title {
font-size: 28px; font-size: 28px;
line-height: 34px; line-height: 34px;
@ -179,11 +220,37 @@ body {
column-gap: 14px; column-gap: 14px;
} }
.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) { @media screen and (max-width: 415px) {
.image-main-desktop { .image-main-desktop {
content: url(../imagem/banner-main-mobile.png); 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>
<figure class="infocard-bottom"> <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"> <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. 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.