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

<feat>[adição dos cards]: adição tanto desktop quanto mobile

Browse Source
This commit is contained in:
Gabriel Ferraz Nogueira 2022-10-10 17:39:38 -03:00
parent fcdc6dd3d0
commit 979985a834
2 changed files with 58 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
assets/styles/main.css
View File

@ -28,7 +28,7 @@ body{
display: flex;
flex-direction: column;
align-items: center;
padding: 73px 0;
padding: 73px 0 0;
}
.top-inforcard-subtitle{
text-align: center;
@ -56,6 +56,32 @@ body{
width: 16%;
min-width: 239px;
}
.top-cards{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 21px;
justify-content: center;
padding: 178px 20%;
}
.top-card{
display: flex;
flex-direction: column;
align-items: center;
padding: 26px 26px 36px;
background: #FFF;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
}
.top-card-image{
display: block;
min-width: 5vw;
margin-bottom: 30px;
}
.top-card-description{
font-weight: 400;
font-size: 16px;
line-height: 24px;
text-align: center;
}
@media screen and (min-width: 2500px) {
.page-header{
@ -64,7 +90,7 @@ body{
}
@media screen and (max-width: 1024px) {
@media screen and (max-width: 1025px) {
.main-banner-desktop{
display: none;
}
@ -84,10 +110,25 @@ body{
max-width: 86%;
padding: 0 0 73px;
}
.top-cards{
padding: 90px 7%;
}
}
@media screen and (max-width: 992px){
.top-infocard-image{
width: 34%;
}
/* top-cards */
.top-cards{
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 540px) {
.top-cards{
grid-template-columns: 1fr;
padding: 90px 26px 80px;
gap: 24px;
}
}

15
index.html
View File

@ -44,6 +44,21 @@
<img class="top-infocard-image" src="./assets/imagens/top-infocard-image.png" alt="Imagem do infocard do topo"/>
</section>
<section class="top-cards">
<figure class="top-card card-1">
<img class="top-card-image" src="./assets/imagens/top-card-image-1.svg" alt="Primeira card do topo"/>
<figcaption class="top-card-description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>
</figure>
<figure class="top-card card-2">
<img class="top-card-image" src="./assets/imagens/top-card-image-2.svg" alt="Primeira card do topo"/>
<figcaption class="top-card-description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>
</figure>
<figure class="top-card card-3">
<img class="top-card-image" src="./assets/imagens/top-card image-3.svg" alt="Primeira card do topo"/>
<figcaption class="top-card-description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>
</figure>
</section>
</main>
</body>
</html>