Gabriel_Lehmann/challenge-landing-page-gabriel-lehmann
1
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: added middle-banner

Browse Source
This commit is contained in:
Gabriel Ferreira Lehmann 2022-10-11 12:17:57 -03:00
parent 0944037b7e
commit e9133f5294
5 changed files with 20 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/Rectangle 13.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 236 KiB

BIN
assets/Rectangle 16.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 213 KiB

BIN
assets/Rectangle 17.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 317 KiB

5
index.html
View File

@ -59,5 +59,10 @@
</p>
</div>
</section>
<section class="middle-banner">
<img src="./assets/Rectangle 13.png" alt="macbook fechando de frente">
<img src="./assets/Rectangle 16.png" alt="macbook fechando de cima">
<img src="./assets/Rectangle 17.png" alt="macbook fechando de lado">
</section>
</body>
</html>

15
style.css
View File

@ -89,6 +89,21 @@ header{
text-align: center;
}
.middle-banner{
background-color: #E0E0E0;
display: grid;
grid-template-columns: repeat(3, max-content);
gap: 39px;
padding: 0 72px;
justify-content: center;
position: relative;
}
.middle-banner img{
bottom: -60px;
max-width: 100%;
}
/* Banner pincipal mobile */
@media screen and (max-width:768px) {