diff --git a/assets/imagens/middle-banner-01.png b/assets/imagens/middle-banner-01.png new file mode 100644 index 0000000..3fd3851 Binary files /dev/null and b/assets/imagens/middle-banner-01.png differ diff --git a/assets/imagens/middle-banner-02.png b/assets/imagens/middle-banner-02.png new file mode 100644 index 0000000..b8b9043 Binary files /dev/null and b/assets/imagens/middle-banner-02.png differ diff --git a/assets/imagens/middle-banner-03.png b/assets/imagens/middle-banner-03.png new file mode 100644 index 0000000..babc07d Binary files /dev/null and b/assets/imagens/middle-banner-03.png differ diff --git a/assets/styles/main.css b/assets/styles/main.css index be213c7..f64f9e6 100644 --- a/assets/styles/main.css +++ b/assets/styles/main.css @@ -151,6 +151,25 @@ body } +.middle-banner +{ + display: flex; + justify-content: center; + background: #E0E0E0; +} + +.middle-banner-top, .middle-banner-bottom +{ + display: flex; + margin: 60px 0 -60px; +} + +.middle-banner-img +{ + max-width: 530px; + margin: 0 20px; + +} @@ -159,6 +178,22 @@ body + + + + +@media screen and (max-width: 300px) +{ + .top-infocard-title + { + line-height: 30px !important; + font-size: 24px !important; + } +} + + + + @media screen and (max-width: 414px) { .main-banner-desktop, @@ -186,7 +221,8 @@ body .top-infocard-text { - width: 357px; + max-width: 357px; + width: 100%; padding: 72px 28px 65px; } @@ -256,4 +292,143 @@ body { max-width: 280px; } +} + +@media screen and (max-width: 1700px) +{ + .middle-banner-img +{ + max-width: 450px; + margin: 0 20px; +} +} + +@media screen and (max-width: 1600px) +{ +.middle-banner-top, .middle-banner-bottom +{ + display: flex; + margin: 60px 0 -60px; +} + +.middle-banner-img +{ + max-width: 430px; + margin: 0 20px; + +} + +} + +@media screen and (max-width: 1400px) +{ + +.middle-banner-img +{ + max-width: 330px; + margin: 0 20px; + +} + +} + +@media screen and (max-width: 1200px) +{ +.middle-banner-img +{ + max-width: 280px; + margin: 0 15px; + +} + +} + +@media screen and (max-width: 920px) +{ + +.middle-banner-img +{ + max-width: 200px; + margin: 0 15px; + +} + +} + +@media screen and (max-width: 680px) +{ + .middle-banner +{ + padding: 32px 0; + flex-direction: column; +} + +.middle-banner-top, .middle-banner-bottom +{ + display: flex; + margin: 0; + justify-content: center; +} + +.middle-banner-img +{ + max-width: 240px; + margin: 0 14px; + +} + +.middle-banner-bottom .middle-banner-img +{ + max-width: 510px; + margin: 20px 0; +} + +} + +@media screen and (max-width: 540px) { + .middle-banner-img +{ + max-width: 218px; + margin: 0 7px; + +} + +.middle-banner-bottom .middle-banner-img +{ + max-width: 450px; + margin: 20px 0; +} + +} + +@media screen and (max-width: 480px) { + .middle-banner-img +{ + max-width: 170px; + margin: 0 7px; + +} + +.middle-banner-bottom .middle-banner-img +{ + max-width: 350px; + margin: 20px 0; +} + +} + +@media screen and (max-width: 375px) { + .middle-banner-img +{ + max-width: 120px; + margin: 0 7px; + +} + +.middle-banner-bottom .middle-banner-img +{ + max-width: 260px; + margin: 20px 0; +} + } \ No newline at end of file diff --git a/index.html b/index.html index 353c2c3..4be7bc5 100644 --- a/index.html +++ b/index.html @@ -73,6 +73,19 @@ +
+ +
+ Banner do Meio + Banner do Meio +
+ +
+ Banner do Meio +
+ +
+