From 427fca30a761a061ba5349f7157703d8fa2fcd7c Mon Sep 17 00:00:00 2001 From: Immanuel Onyeka Date: Wed, 14 Apr 2021 18:44:38 -0400 Subject: [PATCH] Style services section of home page --- resources/scss/_vars.scss | 24 ++-------- resources/scss/main.scss | 86 ++++++++++++++++++++++++++++++++-- resources/views/home.blade.php | 73 +++++++++++++++++++++++++---- 3 files changed, 151 insertions(+), 32 deletions(-) diff --git a/resources/scss/_vars.scss b/resources/scss/_vars.scss index 03e83bd..9eae1b1 100644 --- a/resources/scss/_vars.scss +++ b/resources/scss/_vars.scss @@ -8,26 +8,10 @@ $theme-colors: ( "light-blue": #a4bfd9, "blue-alternate": #1877f2, "orange": #ec9f05 , - "primary": #e2e2e7, - "fade-grey": #828287, - "light-grey": #f0f0f0, - 'link-grey': #525257, - 'h2': black, - 'p': #424242, - "col3": #eee, - "col1": #ffffff, - "col4": #434547, - "col5": #2a2c2d, - "nav": #feca1d, - "nav-light": #ffda01, - "nav2": #daa520, - 'blk': #000, - 'navy-blue': #3e4b75, - 'pale-yellow': #f8ebc2, - 'lightGrey': #fafafc, - 'formGrey': #3b3f44, - 'special_blue': #6573ff, - 'indigo': #6610f2 + "brand-orange": #ec9f05 , + "grey": #e6ebf1, + "faded-text": #425466, + "faded-text2": #6c757d, ); @function getColor($col) { diff --git a/resources/scss/main.scss b/resources/scss/main.scss index aa463fb..9ecddce 100644 --- a/resources/scss/main.scss +++ b/resources/scss/main.scss @@ -20,13 +20,39 @@ html body { margin: 0; } +section { + padding-top: 3em; + padding-bottom: 3em; +} h1 { color: white; } +h2 { + color: vars.getColor("brand-orange"); +} + h2, h3 { - color: black; - font-family: "PatuaOne"; + text-align: center; +} + +h4 { + color: vars.getColor("faded-text2"); + text-transform: uppercase; +} + +ul { + color: vars.getColor("faded-text"); + list-style-type: none; + padding: 0; +} + +li { + &:before { + content: url("/images/green-check.svg"); + margin-right: 4px; + } + padding-bottom: 8px; } a { @@ -194,27 +220,81 @@ form.login .login-btn { } } +div.blue-background { + background-image: url("/images/polka-dots.png"); + background-size: 350px; + background-color: #0d324d; +} + section.about-us { - margin: 70px 0; + padding: 70px 0; } section.about-us p { max-width: 600px; margin-left: auto; margin-right: auto; + border-top: 2px solid vars.getColor("grey"); + // border-bottom: 2px solid vars.getColor("grey"); + padding: 15px; + background-color: #0d324d; + color: white; } +section.services-cards { + // margin-bottom: 0; + background-color: lightgrey; + padding-bottom: 4em; + background: linear-gradient(to bottom right, transparent 0%, transparent 50%, #e9e9e9 50%, #e9e9e9 100%); +} section.services-cards .cards{ display: flex; + margin-top: 2em; + justify-content: space-between; + max-width: 950px; + margin-left: auto; + margin-right: auto; + text-align: center; } section.services-cards h2 { text-align: center; + padding: 10px; + margin-top: 0; + padding-top: 30px; + color: white; } section.services-cards .card { width: 280px; + height: 350px; margin-left: 20px; margin-right: 20px; + padding: 18px 9px; + // border: 2px solid grey; + border-radius: 4px; + background: white; + box-shadow: 7px 10px 8px rgb(156 166 175 / 22%); + transition: transform 0.2s; + &:hover { + transform: translateY(-20px); + } + +} + +section.services-cards img { + width: 50px; + height: 50px; +} + +section.features-info { + min-height: 40em; + background: radial-gradient(ellipse at left, #777, #111); +} +img.circle-prop { + height: 35em; + // width: 50em; + position: absolute; + transform: translateX(-10em); } diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php index 1586c98..b903117 100644 --- a/resources/views/home.blade.php +++ b/resources/views/home.blade.php @@ -16,7 +16,7 @@ Register Now -
+

We're a social media content promoter based in Canada, helping entertainers and brands perfect their marketing campaigns through @@ -27,15 +27,70 @@

-

Our Services

-
-
Amet vero est sunt suscipit
-
Consectetur consequatur aliquam.
-
Sit Adipisicing asperiores culpa excepturi
-
Dolor adipisci quos distinctio?
-
+

Our Services

+
+
+ youtube-icon +

Youtube

+
    +
  • Elit odit voluptas unde ex adipisicing! Nulla
    • +
  • Ipsum quibusdam magni laboriosam sit.
    • +
  • Adipisicing nisi porro voluptatum excepturi repudiandae Corrupti quam
    • +
  • Elit repellat consequuntur.
    • +
+
+
+ spotify-icon +

Spotify

+
    +
  • Elit odit voluptas unde ex adipisicing! Nulla
    • +
  • Ipsum quibusdam magni laboriosam sit.
    • +
  • Adipisicing nisi porro voluptatum excepturi repudiandae Corrupti quam
    • +
  • Elit repellat consequuntur.
    • +
+
+
+ twitter-icon +

Twitter

+
    +
  • Elit odit voluptas unde ex adipisicing! Nulla
    • +
  • Ipsum quibusdam magni laboriosam sit.
    • +
  • Adipisicing nisi porro voluptatum excepturi repudiandae Corrupti quam
    • +
  • Elit repellat consequuntur.
    • +
+
+ +
+
+
+

Why we're the best

+ +
Amet officiis obcaecati et porro!
+
Dolor minus corporis labore error.
+
Ipsum nesciunt facilis veniam eos.
+
Ipsum adipisicing blanditiis magnam quasi sunt?
+
Sit quod nulla minima dignissimos itaque.
+
Sit quod nulla minima dignissimos itaque.
+
+
+

A User-Friendly Control Panel

+
Amet officiis obcaecati et porro!
+
Dolor minus corporis labore error.
+
Ipsum nesciunt facilis veniam eos.
+
Ipsum adipisicing blanditiis magnam quasi sunt?
+
Sit quod nulla minima dignissimos itaque.
+
Sit quod nulla minima dignissimos itaque.
+
+
+

Why Buy Views and Engagements?

+
Amet officiis obcaecati et porro!
+
Dolor minus corporis labore error.
+
Ipsum nesciunt facilis veniam eos.
+
Ipsum adipisicing blanditiis magnam quasi sunt?
+
Sit quod nulla minima dignissimos itaque.
+
Sit quod nulla minima dignissimos itaque.
-
+

FAQ

Amet officiis obcaecati et porro!
Dolor minus corporis labore error.