diff --git a/assets/styles/main.css b/assets/styles/main.css index 1ad8f7e..0aa538e 100644 --- a/assets/styles/main.css +++ b/assets/styles/main.css @@ -97,30 +97,34 @@ body{ padding: 0 7.4%; } -.middle-images-section{ +.middle-images-section-desktop{ width: 100%; background: #E0E0E0; } -.middle-images-wrapper{ +.middle-images-wrapper-desktop{ display: flex; justify-content: center; position: relative; bottom: -62px; } -.middle-images{ +.middle-images-desktop{ display: flex; width: 90%; justify-content: center; gap: 2%; } -.middle-image{ +.middle-image-desktop{ width: 33.3%; display: block; } +.middle-images-section-mobile{ + display: none; +} + .bottom-cards{ padding: 10.1% 0 5.7% 0; display: flex; @@ -262,6 +266,58 @@ body{ width: 85.5%; margin-bottom: 7.7%; } + .middle-image-desktop{ + display: none; + } + .middle-images-section-mobile{ + display: flex; + margin-bottom: 16.9%; + padding-bottom: 10.9%; + width: 100%; + background: #E0E0E0; + } + .middle-images-wrapper-mobile{ + display: flex; + justify-content: center; + position: relative; + bottom: -32px; + } + .middle-images-mobile{ + display: flex; + justify-content: center; + gap: 3.5%; + flex-wrap: wrap; + } + .middle-image-mobile{ + width: 42.76%; + height: 32.8%; + } + .middle-image-mobile2{ + margin-top: 1%; + width: 89%; + height: 71.6%; + } + .bottom-cards{ + flex-direction: column; + align-items: center; + } + .bottom-card{ + width: 84.6%; + margin-bottom: 3.8%; + } + .bottom-card-images{ + padding-bottom: 3.5%; + } + .bottom-card-image{ + width: 100%; + padding-top: 29%; + } + .bottom-card-description{ + font-size: 14px; + width: 86.2%; + margin: 0 0 14%; + padding: 0 12px; + } } @media screen and (min-width: 1025px){ diff --git a/index.html b/index.html index effc185..e49e857 100644 --- a/index.html +++ b/index.html @@ -66,16 +66,26 @@ -
-
-
- Primeira Imagem Middle - Segunda Imagem Middle - Terceira Imagem Middle +
+
+
+ Primeira Imagem Middle + Segunda Imagem Middle + Terceira Imagem Middle
+
+
+
+ Segunda Imagem Middle + Primeira Imagem Middle + Terceira Imagem Middle +
+
+
+