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
+
+ - Elit odit voluptas unde ex adipisicing! Nulla
+ - Ipsum quibusdam magni laboriosam sit.
+ - Adipisicing nisi porro voluptatum excepturi repudiandae Corrupti quam
+ - Elit repellat consequuntur.
+
+
+
+
+
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
+
+ - 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.
-