From c55794e29feac46986d2f6131ce8ed2dbf3926c8 Mon Sep 17 00:00:00 2001 From: rayelliott Date: Tue, 31 Mar 2020 17:34:15 +0000 Subject: [PATCH] add service styles --- site/layouts/partials/services.html | 144 ++++++++++++++++++++-------- src/css/main.css | 74 +++++++++++--- 2 files changed, 168 insertions(+), 50 deletions(-) diff --git a/site/layouts/partials/services.html b/site/layouts/partials/services.html index 0fd1527..ce699a0 100644 --- a/site/layouts/partials/services.html +++ b/site/layouts/partials/services.html @@ -1,46 +1,112 @@
-
-

Services

-
    -
  • - SERVICE IMAGE -

    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 -

    +
    +

    Services

    +
      +
    • +
        +
      • + SERVICE IMAGE +
        • +
      • +

        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 IMAGE -

      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 IMAGE +
        • +
      • +

        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 IMAGE -

      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 IMAGE +
        • +
      • +

        Service Heading Three

        +

        Service Sub-Heading

        +
        • +
      • +

        + Deleniti debitis reprehenderit est magni modi Veniam cumque officia quas ex veniam Voluptates molestias eaque dolorem ratione. +

        +
        • +
      • + +
        • +
      • -
    • - SERVICE IMAGE -

      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 IMAGE +
        • +
      • +

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

        +
        • +
      • + +
        • +
    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: