diff --git a/css/layout/main.css b/css/layout/main.css index 1723a67..a0a1fa1 100644 --- a/css/layout/main.css +++ b/css/layout/main.css @@ -30,9 +30,11 @@ max-width: 1092px; width: 100%; height: 435px; - display: flex; - justify-content: space-around; + display: grid; + grid-template-columns: repeat(3, 1fr); + justify-content: center; align-items: center; + gap: 20px; position: relative; margin: auto; } @@ -49,7 +51,6 @@ max-width: 350.33px; height: 100%; max-height: 287.95px; - /* padding: 26px; */ background: #FFFFFF; box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); display: flex; @@ -57,12 +58,15 @@ align-items: center; flex-direction: column; margin: 0px auto; + padding: 27px; } .first-card p, .second-card p, .three-card p { - width: 299px; + max-width: 299px; + width: 100%; + height: 100%; text-align: center; - margin: 27px 0; + margin-top: 14px; } .banner-desktop, .banner-mobile { @@ -107,7 +111,6 @@ width: 367px; text-align: center; margin-top: 14px; - margin-bottom: 66px; } .content-text-final { @@ -185,9 +188,9 @@ .content-card-container { width: 100%; height: 894px; - flex-direction: column; + grid-template-columns: repeat(1, 1fr); justify-content: space-around; - + margin: 0 30px; } .banner-desktop { @@ -204,8 +207,9 @@ width: 100%; max-width: 368px; height: 100%; - max-height: 332px; + min-height: 332px; padding: 32px; + } @@ -218,18 +222,23 @@ width: 100%; max-width: 367px; height: 100%; - margin: 14px auto; + margin-top: 14px; } .grid-container { width: 100%; - height: 1394px; + height: 100%; + min-height: 1394px; } .content-text-final { flex-direction: column; } + .text-final-container { + padding: 0 14px; + } + .content-text-final img { width: 100%; max-width: 414px; diff --git a/index.html b/index.html index 47714a7..7fdb71c 100644 --- a/index.html +++ b/index.html @@ -81,7 +81,7 @@
-
+

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum. Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis.