diff --git a/_assets/css/main.css b/_assets/css/main.css index fc2ccd1..294e6c0 100644 --- a/_assets/css/main.css +++ b/_assets/css/main.css @@ -27,7 +27,6 @@ body { } .infocard { - border: #00c8ff 1px solid; margin: 73px 25%; justify-content: center; @@ -58,7 +57,6 @@ body { } .pc-icon { - border: #00c8ff 1px solid; display: flex; flex-direction: column; align-items: center; @@ -68,7 +66,6 @@ body { } .pc-icon-image { - border: #00c8ff 1px solid; width: 315px; } @@ -85,7 +82,7 @@ body { } .card { - width: 350px; + max-width: 350px; display: flex; flex-direction: column; align-items: center; @@ -138,7 +135,7 @@ body { .infocard-description { padding-top: 19px; font-size: 16px; - line-height: 24px; + line-height: 24px; text-align: center; } @@ -147,16 +144,44 @@ body { } .pc-icon-image { - border: #00c8ff 1px solid; width: 58%; } + + .cards-wrapper { + display: flex; + flex-direction: column; + align-items: center; + padding-top: 91px; + padding-bottom: 80px; + } + + .card { + padding: 35px 26px 28px; + background: #FFFFFF; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); + } + + .card-description { + font-weight: 400; + font-size: 16px; + line-height: 24px; + margin-top: 27px; + } } -@media screen and (min-width: 415px) and (max-width: 1024px){ + + + + + + + +@media screen and (min-width: 415px) and (max-width: 1200px){ .top-banner-image-mobile { display: none; + } .infocard { @@ -179,15 +204,52 @@ body { text-align: center; } .pc-icon { - margin-top: 65px; - margin-bottom: 91px; + margin-top: 65px 0 91px; + } + + .pc-icon-image { + width: 58%; + } + + .cards-wrapper { + display: flex; + flex-direction: column; + align-items: center; + padding-top: 91px; + padding-bottom: 80px; + } + + .card { + padding: 35px 26px 28px; + background: #FFFFFF; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); + } + + .card-description { + font-weight: 400; + font-size: 16px; + line-height: 24px; + margin-top: 27px; } } + + + + + + + + + + @media screen and (min-width: 1024px) and (max-width: 2500px){ .top-banner-image-mobile { display: none; } -} \ No newline at end of file +} + + + diff --git a/index.html b/index.html index d76b443..90417ff 100644 --- a/index.html +++ b/index.html @@ -31,6 +31,7 @@ Top Banner +

Lorem ipsum

@@ -43,6 +44,7 @@
+
Card Image 1 @@ -64,7 +66,6 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
-