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
Showing only changes of commit 2aef77e711 - Show all commits

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>
</figure>
</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>
<body>

1
style/colors.css
View File

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

62
style/main.css
View File

@ -70,6 +70,38 @@
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 */
@media (max-width: 900px) {
.main .top-infocard {
@ -101,7 +133,7 @@
}
}
/*Top-cards*/
/* Top-cards */
@media (max-width: 1150px) {
.main .top-cards {
@ -122,13 +154,29 @@
}
}
/* Banner-desktop / Banner-mobile*/
/* Middle card*/
@media (max-width: 720px) {
.main-banner .banner-desktop {
display: none;
@media (max-width: 768px) {
.main .middle-cards {
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;
font-family: "Inter", sans-serif;
}
body {
background-color: var(--bg-light-gray);
}