diff --git a/assets/image/bottom-banner-mobile.png b/assets/image/bottom-banner-mobile.png new file mode 100644 index 0000000..f4e55c5 Binary files /dev/null and b/assets/image/bottom-banner-mobile.png differ diff --git a/assets/image/bottom-banner.png b/assets/image/bottom-banner.png new file mode 100644 index 0000000..c4b49fc Binary files /dev/null and b/assets/image/bottom-banner.png differ diff --git a/assets/styles/main.css b/assets/styles/main.css index 2d274ab..ec990a6 100644 --- a/assets/styles/main.css +++ b/assets/styles/main.css @@ -111,7 +111,7 @@ body { gap: 40px; justify-content: center; position: relative; - bottom: -62px; + top: 32px; } @@ -150,21 +150,48 @@ body { padding: 28px 26px 28px 26px; max-width: 300px; } - -@media screen and (max-width: 414px) { - - .main-banner { - content: url('../image/main-banner-mobile.png'); - - } - .header-logo { - padding: 24px 0 33px; - } - - +.bottom-infocard { + margin-top: 108px; + padding: 32px; } - @media screen and (max-width: 768px) { +.bottom-infocard-title { + font-weight: 600; + font-size: 32px; + line-height: 39px; + text-align: center; +} + +.bottom-infocard-description { + font-weight: 400; + font-size: 16px; + line-height: 24px; + max-width: 550px; + text-align: center; + margin: 0 auto; + padding-bottom: 50px; +} + +.bottom-infocard-image { + display: flex; + justify-content: center; + width: 100%; + margin-bottom: 116px; +} + +.bottom-infocard-image img { + max-width: 1360px; + width: 100%; +} + + +@media screen and (min-width: 769px) and (max-width: 1200px) { + .top-cards,.bottom-cards { + grid-template-columns: repeat(2, max-content); + } +} + +@media screen and (max-width: 768px) { .top-infocard-subtitle { font-size: 20px; line-height: 24px; @@ -188,11 +215,10 @@ body { grid-template-columns: 1fr; padding: 0 32px; } - - .middle-banner { - padding: 0 23px; - } + .middle-banner { + padding: 0 23px; + } .middle-banner-image-wrapper { display: grid; grid-area: auto; @@ -202,7 +228,9 @@ body { "b a" "c c"; column-gap: 14px; - row-gap: 24px; + row-gap: 24px; + width: 90%; + margin: 0 32px; } .middle-banner-image img { @@ -213,39 +241,71 @@ body { .middle-banner-image.a { grid-area: a; width: 100%; + } .middle-banner-image.b { grid-area: b; width: 100%; + + } .middle-banner-image.c { grid-area: c; width: 100%; - } + + + } + .bottom-cards { grid-template-columns: 1fr; padding: 0 32px; margin-top: 190px; - } + + + .bottom-infocard-text { + padding: 0 32px; + } + + .bottom-infocard-title { + font-size: 24px; + } + + .bottom-image { + content: url('../image/bottom-banner-mobile.png'); + width: 100%; + } + + + .bottom-infocard { + display: flex; + flex-direction: column-reverse; + padding: 0; + } + + .bottom-infocard-image { + margin-bottom: 50px; + } + + + } +@media screen and (max-width: 414px) { - + .main-banner { + content: url('../image/main-banner-mobile.png'); + + } + .header-logo { + padding: 24px 0 33px; + } +} @media screen and (max-width: 290px) { .top-infocard-title { font-size: 26px; } -} - -@media screen and (min-width: 769px) and (max-width: 1200px) { - .top-cards { - grid-template-columns: repeat(2, max-content); - } - .bottom-cards { - grid-template-columns: repeat(2, max-content); - } -} +} \ No newline at end of file diff --git a/index.html b/index.html index 3fc8582..f2771d8 100644 --- a/index.html +++ b/index.html @@ -81,32 +81,45 @@
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. + Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.
+