Adiciona definitvamente os middle banners desktop
This commit is contained in:
parent
49d4c1fd1e
commit
07550a6618
Before Width: | Height: | Size: 234 KiB After Width: | Height: | Size: 234 KiB |
Before Width: | Height: | Size: 215 KiB After Width: | Height: | Size: 215 KiB |
Before Width: | Height: | Size: 318 KiB After Width: | Height: | Size: 318 KiB |
@ -70,7 +70,7 @@ body {
|
||||
.top-cards {
|
||||
background: #FFFFFF;
|
||||
grid-template-columns: repeat(3, max-content);
|
||||
padding: 90px 0 0;
|
||||
padding: 90px 0 80px;
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
justify-content: center;
|
||||
@ -92,6 +92,19 @@ body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.middle-banner {
|
||||
background-color: #E0E0E0;
|
||||
width: 1920px;
|
||||
max-height: 530px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.middle-banner-image {
|
||||
width: 100%;
|
||||
max-width: 566px;
|
||||
margin: 62px 18px 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 414px) {
|
||||
.main-banner-desktop {
|
||||
display: none;
|
||||
@ -128,6 +141,22 @@ body {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 36px 26px;
|
||||
}
|
||||
|
||||
.middle-banner {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, max-content);
|
||||
}
|
||||
|
||||
.middle-banner-image {
|
||||
max-width: 177px;
|
||||
height: 178px;
|
||||
}
|
||||
|
||||
.middle-banner-image-ex {
|
||||
max-width: 368px;
|
||||
height: 372px;
|
||||
display: grid;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 415px) {
|
||||
@ -139,12 +168,6 @@ body {
|
||||
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
||||
.top-cards {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 36px 26px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 415px) and (max-width: 767px) {
|
||||
.main-banner-desktop {
|
||||
display: none;
|
||||
padding: 30px 28px;
|
||||
}
|
||||
}
|
@ -67,6 +67,15 @@
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="middle-banner">
|
||||
<div class="middle banners">
|
||||
<img class="middle-banner-image" src="./assets/images/middle-banner-01.png" alt="Primeiro banner do Meio" />
|
||||
<img class="middle-banner-image middle-banner" src="./assets/images/middle-banner-02.png" alt="Segundo banner do meio" />
|
||||
<img class="middle-banner-image middle-banner-image-ex" src="./assets/images/middle-banner-03.png" alt="Terceiro banner do meio" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
Loading…
Reference in New Issue
Block a user