diff --git a/assets/images/top-card-image-01.svg b/assets/images/top-card-image-01.svg new file mode 100644 index 0000000..c38d0e3 --- /dev/null +++ b/assets/images/top-card-image-01.svg @@ -0,0 +1,13 @@ + diff --git a/assets/images/top-card-image-02.svg b/assets/images/top-card-image-02.svg new file mode 100644 index 0000000..2040b41 --- /dev/null +++ b/assets/images/top-card-image-02.svg @@ -0,0 +1,12 @@ + diff --git a/assets/images/top-card-image-03.svg b/assets/images/top-card-image-03.svg new file mode 100644 index 0000000..463bc1d --- /dev/null +++ b/assets/images/top-card-image-03.svg @@ -0,0 +1,6 @@ + diff --git a/assets/styles/main.css b/assets/styles/main.css index 00f44fb..4d01e3e 100644 --- a/assets/styles/main.css +++ b/assets/styles/main.css @@ -20,7 +20,7 @@ body { display: block; } -.main-banner{ +.main-banner { width: 100%; } @@ -54,6 +54,52 @@ body { font-size: 16px; } +.top-cards { + display: grid; + grid-template-columns: repeat(3, max(350px)); + gap: 20px; + justify-content: center; + padding: 74px 0; + background: #F0F0F0; +} + +.top-card { + display: flex; + flex-direction: column; + align-items: center; + padding: 36px 0 26px; + background: #FFFFFF; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); +} + +.top-card-image { + display: block; + margin-bottom: 26px; +} + +.top-card-description { + max-width: 85%; + text-align: center; + font-size: 16px; + line-height: 24px; +} + +@media screen and (max-width: 340px) { + .top-card { + padding: 22px 0 20px; + } + + .top-card-image { + margin-bottom: 16px; + max-width: 30%; + } + + .top-card-description { + font-size: 14px; + line-height: 22px; + } +} + @media screen and (max-width: 1024px) { .main-banner-desktop { display: none; @@ -79,9 +125,18 @@ body { } .top-infocard-image { - width: 100%; max-width: 240px; } + + .top-cards { + grid-template-columns: 1fr; + padding: 36px 26px; + justify-items: center; + } + + .top-card { + max-width: 350px; + } } @media screen and (min-width: 1025px) { @@ -90,6 +145,12 @@ body { } } +@media screen and (min-width: 1025px) and (max-width: 1200px) { + .top-cards { + grid-template-columns: repeat(3, max(300px)); + } +} + @media screen and (min-width: 2500px) { .top-infocard-subtitle { font-size: 64px; @@ -105,7 +166,27 @@ body { } .top-infocard-image { - width: 100%; - min-width: 800px; + width: 800px; } -} \ No newline at end of file + + .top-cards { + grid-template-columns: repeat(3, max(700px)); + gap: 30px; + padding: 148px 0; + } + + .top-card { + padding: 72px 0 52px; + } + + .top-card-image { + margin-bottom: 52px; + width: 100%; + max-width: 200px; + } + + .top-card-description { + font-size: 32px; + line-height: 48px; + } +} \ No newline at end of file diff --git a/index.html b/index.html index 7dde639..bacf465 100644 --- a/index.html +++ b/index.html @@ -45,6 +45,33 @@ + +