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

feat: Cria lista cards

Browse Source
This commit is contained in:
ThiagoDuutra 2022-10-10 15:45:26 -03:00
parent 32c10690ee
commit 1617c56d45
7 changed files with 93 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/imgs/coin-card.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
assets/imgs/shop-card.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 962 B

BIN
assets/imgs/shopping-bag-card.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

23
index.html
View File

@ -30,6 +30,29 @@
</div> </div>
<img class="infocard-img" src="assets/imgs/img-center.png" alt="Banner inforcard" /> <img class="infocard-img" src="assets/imgs/img-center.png" alt="Banner inforcard" />
</div> </div>
<div class="top-cards">
<figure class="top-card">
<img class="card-img" src="assets/imgs/shop-card.png" alt="Primeira imagem shop card" />
<figcaption class="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod
enim non
dui fringilla interdum.</figcaption>
</figure>
<figure class="top-card">
<img class="card-img" src="assets/imgs/shopping-bag-card.png" alt="Segunda imagem shop card" />
<figcaption class="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod
enim non
dui fringilla interdum.</figcaption>
</figure>
<figure class="top-card">
<img class="card-img" src="assets/imgs/coin-card.png" alt="Terceira imagem shop card" />
<figcaption class="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod
enim non
dui fringilla interdum.</figcaption>
</figure>
</div>
</main> </main>
<body> <body>

2
style/colors.css
View File

@ -1,3 +1,5 @@
:root { :root {
--black: #000; --black: #000;
--white: #fff;
--bg-light-gray: #e5e5e5;
} }

72
style/main.css
View File

@ -12,7 +12,7 @@
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
padding: 73px 0; padding: 73px 0 178px;
} }
.main .container-infocard-text { .main .container-infocard-text {
@ -40,15 +40,37 @@
line-height: 24px; line-height: 24px;
} }
@media (max-width: 720px) { .main .top-cards {
.main-banner .banner-desktop { display: grid;
display: none; grid-template-columns: repeat(3, max-content);
} gap: 21px;
.main-banner .banner-mobile { align-items: center;
display: block; justify-content: center;
} padding-bottom: 80px;
} }
.main .top-card {
display: flex;
align-items: center;
flex-direction: column;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
padding: 26px 26px 34px;
background-color: var(--white);
}
.main .card-img {
display: block;
margin-bottom: 26px;
}
.main .card-description {
max-width: 300px;
text-align: center;
line-height: 24px;
font-size: 16px;
}
/* Top-infocard */
@media (max-width: 900px) { @media (max-width: 900px) {
.main .top-infocard { .main .top-infocard {
padding: 73px 29px 90px; padding: 73px 29px 90px;
@ -70,9 +92,43 @@
.main .infocard-description { .main .infocard-description {
text-align: center; text-align: center;
} }
}
@media (max-width: 414px) {
.main .infocard-img { .main .infocard-img {
max-width: 244px; max-width: 244px;
width: 100%; width: 100%;
} }
} }
/*Top-cards*/
@media (max-width: 1150px) {
.main .top-cards {
grid-template-columns: repeat(2, 1fr);
padding: 0 26px;
}
.main .card-3 {
grid-column-start: 1;
grid-column-end: 3;
}
}
@media (max-width: 768px) {
.main .top-cards {
grid-template-columns: 1fr;
padding: 36px 26px;
}
}
/* Banner-desktop / Banner-mobile*/
@media (max-width: 720px) {
.main-banner .banner-desktop {
display: none;
}
.main-banner .banner-mobile {
display: block;
}
}

4
style/reset.css
View File

@ -4,3 +4,7 @@
box-sizing: border-box; box-sizing: border-box;
font-family: "Inter", sans-serif; font-family: "Inter", sans-serif;
} }
body {
background-color: var(--bg-light-gray);
}