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 {
|
.top-cards {
|
||||||
background: #FFFFFF;
|
background: #FFFFFF;
|
||||||
grid-template-columns: repeat(3, max-content);
|
grid-template-columns: repeat(3, max-content);
|
||||||
padding: 90px 0 0;
|
padding: 90px 0 80px;
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -92,6 +92,19 @@ body {
|
|||||||
text-align: center;
|
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) {
|
@media screen and (max-width: 414px) {
|
||||||
.main-banner-desktop {
|
.main-banner-desktop {
|
||||||
display: none;
|
display: none;
|
||||||
@ -128,6 +141,22 @@ body {
|
|||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
padding: 36px 26px;
|
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) {
|
@media screen and (min-width: 415px) {
|
||||||
@ -139,12 +168,6 @@ body {
|
|||||||
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
||||||
.top-cards {
|
.top-cards {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
padding: 36px 26px;
|
padding: 30px 28px;
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 415px) and (max-width: 767px) {
|
|
||||||
.main-banner-desktop {
|
|
||||||
display: none;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
@ -67,6 +67,15 @@
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</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>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
Loading…
Reference in New Issue
Block a user