Adiciona middle banner

This commit is contained in:
carloswinter 2022-10-09 01:09:10 -03:00
parent 98828ee4ec
commit c042bc7166
5 changed files with 70 additions and 0 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 232 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 212 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 318 KiB

View File

@ -83,6 +83,39 @@ body{
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
} }
.middle{
background: #E0E0E0;
}
.middle-wrapper{
display: flex;
align-items: center;
position: relative;
justify-content: center;
top:62px;
width: 100%;
}
.gridimg{
margin:0 72px;
display: grid;
flex-wrap:nowrap;
grid-template-columns: 1fr 1fr 1fr;
gap:39px;
width: 100%;
}
.middle-img1{
display: block;
width: 100%;
}
.middle-img2{
display: block;
width: 100%;
}
.middle-img3{
display: block;
width: 100%;
}
@media screen and (max-width: 1439px){ @media screen and (max-width: 1439px){
.topinfo-texts{ .topinfo-texts{
@ -126,7 +159,32 @@ body{
min-width: 0; min-width: 0;
} }
.middle-wrapper{
} }
.gridimg{
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(1, 1fr);
grid-row-gap: 24px;
grid-column-gap: 14px;
width: 100%;
margin:32px 23px;
}
.middle-img1{
width: 100%;
grid-area: 1 / 3 / 2 / 5;
}
.middle-img2{
width: 100%;
grid-area: 1 / 1 / 2 / 3;
}
.middle-img3{
width: 100%;
grid-area: 2 / 1 / 3 / 5;
}
}
@media screen and (min-width: 2500px){ @media screen and (min-width: 2500px){
.topinfo-subtitle{ .topinfo-subtitle{
font-size: 64px; font-size: 64px;

View File

@ -56,6 +56,18 @@
</div> </div>
</div> </div>
</section> </section>
<main class="middle">
<section>
<div class="middle-wrapper">
<div class="gridimg">
<img src="./assets/images/img/middlenote1.png" class="middle-img1" alt="Primeiro notebook meio">
<img src="./assets/images/img/middlenote2.png" class="middle-img2" alt="Segundo notebook meio">
<img src="./assets/images/img/middlenote3.png" class="middle-img3" alt="Terceiro notebook meio">
</div>
</div>
</section>
</main>
</body> </body>
</html> </html>