diff --git a/assets/css/styles.css b/assets/css/styles.css index 445e3b0..c578811 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -1,8 +1,12 @@ +/*= =*\ += PAGE HEADER = +\*= =*/ + .page-header { - width: 100%; display: flex; - justify-content: center; align-items: center; + justify-content: center; + width: 100%; padding: 28px 0 29px 0; } @@ -10,17 +14,22 @@ display: block; } + +/*= SECTION =*\ += INFORMATION = +\*= =*/ + .information { - max-width: 1215px; - margin: 0 auto; - padding: 5.25rem 1.625rem 5.875rem 2rem; display: flex; align-items: center; justify-content: center; + max-width: 1215px; + margin: 0 auto; + padding: 5.25rem 1.625rem 5.875rem 2rem; } -.information { - --grid-space: 5.4375rem 7.75rem; +.information-container { + --hs-grid-space: 5.4375rem 7.75rem; } .information-subtitle { @@ -28,21 +37,68 @@ } .information-title { - font-weight: 500; margin-bottom: 19px; + font-weight: 500; +} + +.information-image { + width: 239px; + height: 239px; +} + +/*= SECTION =*\ += SERVICES = +\*= =*/ + +.services { + padding: 2.5rem 2rem; +} + +.services-container { + --hs-flow-space: 37px; + + max-width: 1090px; + margin: 0 auto; +} + +.services-card { + padding: 2.5rem 1.625rem 1.625rem; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); +} + + +/*= =*\ += COMPOSITION = +\*= =*/ +.sm-wrapper { + display: flex; + gap: var(--hs-grid-space); +} + +.flow *+* { + margin-top: var(--hs-flow-space); +} + +.grid-col-md-3 { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--hs-grid-space); } /*= =*\ = UTILS = \*= =*/ -.sm-wrapper { + +.box-center-column { display: flex; + align-items: center; + justify-content: center; + flex-direction: column; } .center { align-items: center; justify-content: center; - gap: var(--grid-space); } .text-upper { @@ -57,6 +113,14 @@ background-color: var(--bg-clr-black); } +.bg-white { + background-color: var(--bg-clr-white); +} + +.bg-gray-50 { + background-color: var(--bg-clr-gray-50); +} + .bg-blue-gradient-180 { background-color: var(--gradient-blue-180); } @@ -67,10 +131,16 @@ } } +@media screen and (max-width:1024px) { + .grid-col-md-3 { + grid-template-columns: 1fr; + } +} + @media screen and (min-width: 769px) { .information { - padding: 5rem 0 5.875px 0; + padding: 5rem 0 5.875rem 0; } .information-title { @@ -80,6 +150,16 @@ .information-subtitle { font-size: 2rem; } + + + + .services-container { + --hs-flow-space: 26px; + } + + .services { + padding: 4.625rem 2rem; + } } @media screen and (max-width: 414px) { @@ -101,4 +181,9 @@ .hero-image-mobile { display: none; } + + .information-image { + width: 315px; + height: 315px; + } } \ No newline at end of file diff --git a/index.html b/index.html index f365286..71c7f1d 100644 --- a/index.html +++ b/index.html @@ -39,6 +39,37 @@ + +
+
+
+ + +

+ 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. +

+
+
+