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

feat: cria banners meio

Browse Source
This commit is contained in:
Robson Tito de Paula Ferreira 2022-10-13 21:31:25 -03:00
parent 63e162c0d6
commit 92f7916c4b
3 changed files with 40 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/png/banner middle background.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

31
assets/styles/main.css
View File

@ -68,6 +68,7 @@ body {
display: flex;
width: 100%;
grid-template-columns: repeat(3, max-content);
flex-wrap: wrap;
justify-content: center;
gap: 20px;
background: #f0f0f0;
@ -92,14 +93,40 @@ body {
font-size: 16px;
}
.middle-banner {
width: 100%;
height: 530px;
left: 0px;
top: 1989px;
}
.display-grid {
display:grid;
width: 100%;
background: #E0E0E0;
}
.middle-banner-desktop {
position:relative;
text-align: center;
width: 32%;
bottom: 320px;
left: 2%;
}
@media screen and (max-width:414px) {
.main-banner-desktop {
display: none;
padding: 84px 30px 158px;
}
}
@media screen and (min-width:415px) {
.main-banner-mobile {
display: none;}
display: none;
padding: 84px 30px 158px;
}
}

11
index.html
View File

@ -68,6 +68,17 @@
</p>
</figure>
</div>
<div>
<figure>
<img class="middle-banner" src="/assets/images/png/banner middle background.png" alt="banner-background-middle">
</figure>
</div>
</section class="display-grid">
<img class="middle banner middle-banner-desktop" src="/assets/images/png/middle banner 1.png" alt="banner do meio 1">
<img class="middle banner middle-banner-desktop" src="/assets/images/png/middle banner 2.png" alt="banner do meio 2">
<img class="middle banner middle-banner-desktop" src="/assets/images/png/middle banner 3.png" alt="banner do meio 3">
<section>
</section>
</main>
</body>