diff --git a/index.html b/index.html index 25a9fe9..b58f795 100644 --- a/index.html +++ b/index.html @@ -35,20 +35,26 @@ Imagem da main Mobile
-
- Imagem do primeiro card do meio -

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+
+ Imagem do primeiro card do meio +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+
+ +
+ Imagem do segundo card do meio +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+
+ +
+ Imagem do terceiro card do meio +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+
+ +
- - -
- -
- - \ No newline at end of file diff --git a/main.css b/main.css index 817027f..b3afc99 100644 --- a/main.css +++ b/main.css @@ -24,7 +24,11 @@ body { .main-banner { width: 100%; - display: block; + display: block; +} + +.main-image-desktop { + margin-bottom: 180px; } .middle-information { @@ -60,20 +64,62 @@ body { margin-bottom: 28px; } -@media screen and (max-width: 414px) { - .main-banner-desktop, .main-image-desktop { - display: none; - } +.middle-cards { + display: flex; + justify-content: center; + gap: 22px; + + } -@media screen and (min-width:415px ) { +.middle-card { + display: flex; + flex-direction: column; + align-items: center; + max-width: 18%; + background-color:#FFFFFF; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); + padding: 36px 26px 28px; + +} + +.middle-card-image { + display: block; + margin-bottom: 26px; +} + +.middle-card-description { + font-size: 16px; + line-height: 24px; + text-align: center; + } + + + + + + + + + + + + + + +@media screen and (min-width: 1025px) { + .main-banner-mobile, .main-image-mobile { display: none; - } } - @media screen and (max-width:1024px) { - +} + + /* @media screen and (max-width:1024px) { + .main-banner-desktop, .main-image-desktop { + display: none; + } + .middle-text { width: 100%; max-width: 112%; @@ -95,4 +141,4 @@ body { } } - + */