diff --git a/assets/images/bottom-card-image-01.png b/assets/images/bottom-card-image-01.png new file mode 100644 index 0000000..656f073 Binary files /dev/null and b/assets/images/bottom-card-image-01.png differ diff --git a/assets/images/bottom-card-image-02.png b/assets/images/bottom-card-image-02.png new file mode 100644 index 0000000..e9414fd Binary files /dev/null and b/assets/images/bottom-card-image-02.png differ diff --git a/assets/images/bottom-card-image-03.png b/assets/images/bottom-card-image-03.png new file mode 100644 index 0000000..66be1e8 Binary files /dev/null and b/assets/images/bottom-card-image-03.png differ diff --git a/assets/images/bottom-card-image-04.png b/assets/images/bottom-card-image-04.png new file mode 100644 index 0000000..2013cf8 Binary files /dev/null and b/assets/images/bottom-card-image-04.png differ diff --git a/assets/styles/style.css b/assets/styles/style.css index 3f9e3fe..145d55b 100644 --- a/assets/styles/style.css +++ b/assets/styles/style.css @@ -63,8 +63,6 @@ body { } .top-infocard-image { - width: 315px; - height: 315px; margin-top: 73px; } @@ -83,7 +81,7 @@ body { justify-content: center; background: #FFFFFF; box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); - padding: 26px 26px 34px; + padding: 35px 26px 34px; max-width: 350px; } @@ -111,7 +109,6 @@ body { .middle-image { display: flex; position: relative; - width: 566px; bottom: -62px; } @@ -120,8 +117,32 @@ body { display: block; } -.bottom-middle { - padding: 191px 0 0; +.bottom-card { + display: flex; + align-items: center; + justify-content: center; + gap: 16px; + padding: 192px 72px 108px; +} + +.bottom-cards { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); + padding: 35px 26px 34px; +} + +.bottom-middle-description { + font-weight: 400; + font-size: 16px; + line-height: 24px; + text-align: center; +} + +.bottom-middle-image-cards { + display: block; } @media screen and (max-width: 414px) { @@ -147,6 +168,7 @@ body { align-items: center; justify-content: center; } + .top-cards { display: flex; flex-direction: column; @@ -154,27 +176,14 @@ body { } .middle-images { - display: grid; - grid-template-columns: repeat(2, 1fr); - align-items: center; - justify-content: center; - border: 1px solid black; - width: 414px; + display: flex; + flex-wrap: wrap; + padding: 32px 23px 0; } .middle-image { - border: 1px solid black; - width: 177px; } - #image-bottom-image-dm { - display: flex; - justify-content: center; - align-items: center; - width: 368px; - } - - } @media screen and (max-width: 992px) { @@ -183,7 +192,7 @@ body { text-align: center; justify-content: center; flex-direction: column; - padding: 73px 29px 65px; + padding: 73px 28px 65px; } .top-infocard-text { @@ -192,11 +201,17 @@ body { .top-infocard-subtitle { font-size: 20px; + line-height: 24px; } .top-infocard-title { font-size: 28px; - line-height: 1; + line-height: 34px; + } + + .top-infocard-description { + line-height: 24px; + font-size: 16px; } .top-infocard-image { @@ -205,6 +220,7 @@ body { } } + @media screen and (min-width: 769px) and (max-width: 1200px) { .top-infocard, .top-cards { display: flex; diff --git a/index.html b/index.html index 9d11fb2..b674fd7 100644 --- a/index.html +++ b/index.html @@ -81,15 +81,43 @@ Segunda imagem do meio -
+
Terceira imagem do meio - Terceira imagem do meio + Terceira imagem do meio
-
+
+
+ Primeiro card do topo +

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

+
+ +
+ +

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

+
+ +
+ +

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

+
+ +
+ +

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

+
+