Adiciona definitvamente os middle banners desktop

This commit is contained in:
Yan Pecanha Garriga 2022-10-10 15:09:40 -03:00
parent 49d4c1fd1e
commit 07550a6618
5 changed files with 40 additions and 8 deletions

View File

Before

Width:  |  Height:  |  Size: 234 KiB

After

Width:  |  Height:  |  Size: 234 KiB

View File

Before

Width:  |  Height:  |  Size: 215 KiB

After

Width:  |  Height:  |  Size: 215 KiB

View File

Before

Width:  |  Height:  |  Size: 318 KiB

After

Width:  |  Height:  |  Size: 318 KiB

View File

@ -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;
}
}

View File

@ -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>