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

feature/footer #1

Merged
Gabriel_Bernardini merged 13 commits from feature/footer into main 2022-10-13 23:26:59 +00:00
Conversation 0 Commits 13 Files Changed 21 +70 -3
2 changed files with 70 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit c7e76e0483 - Show all commits

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.