Services
--
-
-
-
-
Service Heading
-- Dolor ad velit illum adipisicing laborum! Unde assumenda corporis dolore iure earum Sit ipsum exercitationem nisi dolore a repellendus! Nostrum accusamus laborum in sapiente velit Recusandae facere esse et natus. -
-- Sit minima sapiente quidem ipsam animi? Nesciunt officiis amet facilis repellat nulla maiores? Deleniti debitis reprehenderit est magni modi Veniam cumque officia quas ex veniam Voluptates molestias eaque dolorem ratione -
++diff --git a/src/css/main.css b/src/css/main.css index d00ae34..5708072 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -158,6 +158,7 @@ html.is-animating .transition-fade { } .footer__social-list { + font-size: 3em; justify-content: center; } @@ -172,16 +173,6 @@ html.is-animating .transition-fade { } } -.social-icon { - display: block; - width: 3em; - height: 3em; - background-color: var(--accent-secondary-700); - opacity: 0.9; - margin: 0 0.25em; - border-radius: 50%; -} - // hero .hero-bg { @@ -191,7 +182,58 @@ html.is-animating .transition-fade { // services .services-bg { - background-color: var(--accent-primary-100); + color: var(--neutral-300); + background-color: var(--primary-700); +} + +.service-list { + flex-wrap: wrap; + justify-content: space-between; +} + +.service { + flex: 0 0 100%; + text-align: center; + margin-bottom: 2.5rem; + + &:last-child { + margin-bottom: 0; + } + + @media (min-width: $bp-m) { + flex: 0 0 calc(50% - 2.5rem); + } + + @media (min-width: $bp-l) { + flex: 0 0 calc(25% - 2.5rem); + } +} + +.service__header { + display: inline-block; + width: 7em; + height: 7em; + margin-bottom: 1.25rem; +} + +.service__img { + width: 100%; + height: auto; + border-radius: 50%; +} + +.service__heading { + margin-bottom: 0.125em; +} + +.service__body { + @media (min-width: $bp-s) { + font-size: 0.9em; + } +} + +.service__social-list { + font-size: 2em; } // contact @@ -210,4 +252,14 @@ html.is-animating .transition-fade { background-color: var(--color-bg); } +.social-icon { + display: block; + width: 1em; + height: 1em; + background-color: var(--accent-secondary-700); + opacity: 0.9; + margin: 0 0.25em; + border-radius: 50%; +} + // vim:set filetype=scss:Services
+-
+
-
+
-
+
-
+
+
-
+
Service Heading One
+Service Sub-Heading
+
+ -
+
+ Dolor ad velit illum adipisicing laborum! Unde assumenda corporis dolore iure earum Sit ipsum exercitationem nisi dolore a repellendus! Nostrum accusamus laborum in sapiente velit Recusandae facere esse et natus. +
++ Deleniti debitis reprehenderit est magni modi Veniam cumque officia quas ex veniam Voluptates molestias eaque dolorem ratione. +
+
+ - + + +
- -
+
-
-
Service Heading
-- Elit rem consequatur magnam magnam et voluptatem laborum? Maxime recusandae assumenda ratione ratione nisi laudantium! Recusandae accusantium eaque dolorum corporis quod. Excepturi provident commodi adipisci distinctio voluptatibus. Nulla ullam vitae. -
-- Consectetur provident modi corporis reprehenderit incidunt? Vel illo dolor minima excepturi accusamus nostrum? Illo dignissimos aliquid perspiciatis corrupti possimus fuga. Reiciendis excepturi commodi voluptatum molestias magnam Accusantium totam illo harum -
+ -
+
-
+
-
+
+
-
+
Service Heading Two
+Service Sub-Heading
+
+ -
+
+ Dolor ad velit illum adipisicing laborum! Unde assumenda corporis dolore iure earum Sit ipsum exercitationem nisi dolore a repellendus! Nostrum accusamus laborum in sapiente velit Recusandae facere esse et natus. +
++ Dolor ad velit illum adipisicing laborum! Unde assumenda corporis dolore iure earum Sit ipsum exercitationem nisi dolore a repellendus! Nostrum accusamus laborum in sapiente velit Recusandae facere esse et natus. +
++ Deleniti debitis reprehenderit est magni modi Veniam cumque officia quas ex veniam Voluptates molestias eaque dolorem ratione. +
+
+ - + + +
- -
+
-
-
Service Heading
-- Amet illo expedita facere nihil vero, ab Deserunt doloremque commodi error aperiam laborum. Placeat omnis possimus est ipsam voluptas. Incidunt officia atque nisi dicta voluptates laborum Iusto exercitationem tempora dicta. -
-- Amet architecto praesentium cumque delectus exercitationem Repudiandae facere quia sed id inventore? Vel tempore fugit iusto ab magnam. Consequatur iure ex temporibus odio ab eligendi dolore? Dignissimos ipsum non sit -
+ -
+
-
+
-
+
+
-
+
Service Heading Three
+Service Sub-Heading
+
+ -
+
+ Deleniti debitis reprehenderit est magni modi Veniam cumque officia quas ex veniam Voluptates molestias eaque dolorem ratione. +
+
+ - + + +
- -
+
-
-
Service Heading
-- Ipsum perferendis perspiciatis velit ut commodi accusantium Dignissimos quisquam quam voluptatum perspiciatis optio? Beatae molestiae quisquam esse ut cum? Ab praesentium ad eius recusandae nisi. Laudantium eos minima ex quod? -
-- Lorem nisi facilis corrupti sunt nihil! Ipsum soluta possimus expedita commodi expedita. Reprehenderit sed fugit hic amet maxime velit? Repellat saepe quasi iure laborum quasi. Pariatur dolorem reprehenderit laboriosam dolorum -
+ -
+
-
+
-
+
+
-
+
Service Heading Four
+Service Sub-Heading
+
+ -
+
+ Dolor ad velit illum adipisicing laborum! Unde assumenda corporis dolore iure earum Sit ipsum exercitationem nisi dolore a repellendus! Nostrum accusamus laborum in sapiente velit Recusandae facere esse et natus. +
++ Deleniti debitis reprehenderit est magni modi Veniam cumque officia quas ex veniam Voluptates molestias eaque dolorem ratione. +
+
+ - + + +
-
+
-
+