Style services section of home page

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) {

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);
 }

resources/views/home.blade.php

@@ -16,7 +16,7 @@
 			<a class='register-btn' href="/register">Register Now</a>
 		</div>
 	</div>
-	<section class="about-us">
+	<div class='blue-background'><section class="about-us">
 		<p>
 		We're a social media content promoter based in Canada, helping
 		entertainers and brands perfect their marketing campaigns through
@@ -27,15 +27,70 @@
 		</p>
 	</section>
 	<section class='services-cards'>
-		<h2>Our Services</h2>
-		<div class="cards">
-		<div class="card">Amet vero est sunt suscipit</div>
-		<div class="card">Consectetur consequatur aliquam.</div>
-		<div class="card">Sit Adipisicing asperiores culpa excepturi</div>
-		<div class="card">Dolor adipisci quos distinctio?</div>
-		</div>
+	<h2>Our Services</h2>
+	<div class="cards">
+	<div class="card">
+	<img src="/images/youtube.svg" alt="youtube-icon">
+	<h3>Youtube</h3>
+	<ul>
+		<li>Elit odit voluptas unde ex adipisicing! Nulla</li>
+		<li>Ipsum quibusdam magni laboriosam sit.</li>
+		<li>Adipisicing nisi porro voluptatum excepturi repudiandae Corrupti quam</li>
+		<li>Elit repellat consequuntur.</li>
+	</ul>
+	</div>
+	<div class="card">
+	<img src="/images/spotify.svg" alt="spotify-icon">
+	<h3>Spotify</h3>
+	<ul>
+		<li>Elit odit voluptas unde ex adipisicing! Nulla</li>
+		<li>Ipsum quibusdam magni laboriosam sit.</li>
+		<li>Adipisicing nisi porro voluptatum excepturi repudiandae Corrupti quam</li>
+		<li>Elit repellat consequuntur.</li>
+	</ul>
+	</div>
+	<div class="card">
+	<img src="/images/twitter.svg" alt="twitter-icon">
+	<h3>Twitter</h3>
+	<ul>
+		<li>Elit odit voluptas unde ex adipisicing! Nulla</li>
+		<li>Ipsum quibusdam magni laboriosam sit.</li>
+		<li>Adipisicing nisi porro voluptatum excepturi repudiandae Corrupti quam</li>
+		<li>Elit repellat consequuntur.</li>
+	</ul>
+	</div>
+		
+		</div></div>
+	</section>
+	<section class='features-info'>
+	<h2>Why we're the best</h2>
+	<img src="/images/circle.svg" class="circle-prop"></img>
+	<div class="card">Amet officiis obcaecati et porro!</div>
+		<div class="card">Dolor minus corporis labore error.</div>
+		<div class="card">Ipsum nesciunt facilis veniam eos.</div>
+		<div class="card">Ipsum adipisicing blanditiis magnam quasi sunt?</div>
+		<div class="card">Sit quod nulla minima dignissimos itaque.</div>
+		<div class="card">Sit quod nulla minima dignissimos itaque.</div>
+	</section>
+	<section class='faq'>
+		<h2>A User-Friendly Control Panel</h2>
+		<div class="card">Amet officiis obcaecati et porro!</div>
+		<div class="card">Dolor minus corporis labore error.</div>
+		<div class="card">Ipsum nesciunt facilis veniam eos.</div>
+		<div class="card">Ipsum adipisicing blanditiis magnam quasi sunt?</div>
+		<div class="card">Sit quod nulla minima dignissimos itaque.</div>
+		<div class="card">Sit quod nulla minima dignissimos itaque.</div>
+	</section>
+	<section class='faq'>
+		<h2>Why Buy Views and Engagements?</h2>
+		<div class="card">Amet officiis obcaecati et porro!</div>
+		<div class="card">Dolor minus corporis labore error.</div>
+		<div class="card">Ipsum nesciunt facilis veniam eos.</div>
+		<div class="card">Ipsum adipisicing blanditiis magnam quasi sunt?</div>
+		<div class="card">Sit quod nulla minima dignissimos itaque.</div>
+		<div class="card">Sit quod nulla minima dignissimos itaque.</div>
 	</section>
-	<section class='formal-font faq'>
+	<section class='faq'>
 		<h2>FAQ</h2>
 		<div class="card">Amet officiis obcaecati et porro!</div>
 		<div class="card">Dolor minus corporis labore error.</div>