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 body images da pagina #4

Merged
ThiagoDutraSampaioLeite merged 1 commits from feature/landingPage into main 2022-10-11 12:43:45 +00:00
Conversation 0 Commits 1 Files Changed 10 +75 -11
10 changed files with 75 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/imgs/middle-banner-mobile1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
assets/imgs/middle-banner-mobile2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
assets/imgs/middle-banner-mobile3png.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 171 KiB

BIN
assets/imgs/middle-card1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 236 KiB

BIN
assets/imgs/middle-card2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 213 KiB

BIN
assets/imgs/middle-card3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 317 KiB

19
index.html
View File

@ -53,6 +53,25 @@
dui fringilla interdum.</figcaption> dui fringilla interdum.</figcaption>
</figure> </figure>
</div> </div>
<div class="middle-cards">
<div class="container-middle-cards">
<figure class="middle-banner">
<img class="middle-card-img middle-card-img-desktop" src="assets/imgs/middle-card1.png"
alt="Primeira imagem principal">
</figure>
<figure class="middle-banner second-img-banner">
<img class="middle-card-img middle-card-img-desktop" src="assets/imgs/middle-card2.png"
alt="Segunda imagem principal">
</figure>
<figure class="middle-banner">
<img class="middle-card-img middle-card-img-desktop" src="assets/imgs/middle-card3.png"
alt="Terceira imagem principal">
</figure>
</div>
</div>
</main> </main>
<body> <body>

1
style/colors.css
View File

@ -2,4 +2,5 @@
--black: #000; --black: #000;
--white: #fff; --white: #fff;
--bg-light-gray: #e5e5e5; --bg-light-gray: #e5e5e5;
--middlebg-gray: #e0e0e0;
} }

62
style/main.css
View File

@ -70,6 +70,38 @@
font-size: 16px; font-size: 16px;
} }
.main .middle-cards {
background: var(--middlebg-gray);
}
.main .container-middle-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 39px;
justify-content: center;
position: relative;
top: 62px;
margin-bottom: 129px;
padding: 0 72px;
}
.main .middle-card-img {
width: 100%;
}
/* --------------------------------------- */
/* Banner-desktop / Banner-mobile*/
@media (max-width: 720px) {
.main-banner .banner-desktop {
display: none;
}
.main-banner .banner-mobile {
display: block;
}
}
/* Top-infocard */ /* Top-infocard */
@media (max-width: 900px) { @media (max-width: 900px) {
.main .top-infocard { .main .top-infocard {
@ -101,7 +133,7 @@
} }
} }
/*Top-cards*/ /* Top-cards */
@media (max-width: 1150px) { @media (max-width: 1150px) {
.main .top-cards { .main .top-cards {
@ -122,13 +154,29 @@
} }
} }
/* Banner-desktop / Banner-mobile*/ /* Middle card*/
@media (max-width: 720px) { @media (max-width: 768px) {
.main-banner .banner-desktop { .main .middle-cards {
display: none; margin-top: 44px;
} }
.main-banner .banner-mobile {
display: block; .main .container-middle-cards {
grid-template-columns: repeat(2, 1fr);
column-gap: 14px;
margin-bottom: 80px;
top: 32px;
row-gap: 24px;
padding: 0 23px;
}
.main .middle-banner:last-child {
grid-column-end: span 2;
}
}
@media (max-width: 480px) {
.main .second-img-banner {
grid-area: 1/1;
} }
} }

4
style/reset.css
View File

@ -4,7 +4,3 @@
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);
}