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

feat(index): Adicionado os 3 banners do meio desktop e mobile

Browse Source
This commit is contained in:
Wellington Duarte Santos 2022-10-11 14:58:31 -03:00
parent defc970a75
commit dd436e0d6d
5 changed files with 66 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/mid-banner-01.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 234 KiB

BIN
assets/mid-banner-02.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 215 KiB

BIN
assets/mid-banner-03.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 318 KiB

44
css/style.css
View File

@ -96,6 +96,29 @@ body{
margin: 28px 26px;
}
/*** MID BANNER ***/
.mid-banners{
background: #E0E0E0;
margin-top: 80px;
padding: 0 72px;
}
.mid-banner-wrapper{
display: grid;
grid-template-columns: repeat(3, 30%);
gap: 40px;
justify-content: center;
position: relative;
bottom: -62px;
}
.mid-banner-image{
display: block;
width: 100%;
}
@media screen and (max-width: 1024px){
/*** MAIN BANNER ***/
.main-banner-desktop{
@ -141,6 +164,23 @@ body{
font-size: 16px;
line-height: 24px;
}
/*** MID BANNER ***/
.mid-banners{
padding: 0 24px 0;
}
.mid-banner-wrapper{
width: 100%;
grid-template-columns: repeat(2, 45%);
gap: 0;
column-gap: 14px;
row-gap: 24px;
bottom: -32px;
}
.mid-banner-3{
grid-area: 2 / 1 /span 2/ span 2;
}
}
@ -151,3 +191,7 @@ body{
}
}
/*** 2500 px ***/
@media (min-width: 2500px){
}

22
index.html
View File

@ -87,6 +87,28 @@
</figcaption>
</div>
</div>
<!-- MID BANNERS -->
<div class="mid-banners">
<!-- WRAPPER -->
<div class="mid-banner-wrapper">
<!-- MID BANNER 01 -->
<figure class="mid-banner-image">
<img src="./assets/mid-banner-01.png" alt="Banner do meio - imagem de um notebook" class="mid-banner-image">
</figure>
<!-- MID BANNER 02 -->
<figure class="mid-banner-image">
<img src="./assets/mid-banner-02.png" alt="Banner do meio - imagem de um notebook" class="mid-banner-image">
</figure>
<!-- MID BANNER 03 -->
<figure class="mid-banner-image mid-banner-3">
<img src="./assets/mid-banner-03.png" alt="Banner do meio - imagem de um notebook" class="mid-banner-image">
</figure>
</div>
</div>
</body>