complete version1

Author: Cardoso-topdev

package-lock.json

@@ -9,6 +9,7 @@
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "history": "^5.0.0",
+    "netlify-cli": "^3.4.7",
     "node-sass": "^4.14.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",

package.json

@@ -209,7 +209,7 @@ a:focus, .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:acti
 	opacity: 0.7;
 }
 .intro-text {
-	padding-top: 250px;
+	padding-top: 200px;
 	padding-bottom: 200px;
 	padding-right: 0;
 }
@@ -285,12 +285,12 @@ a:focus, .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:acti
 	transform: translate(-50%);
 }
 #about .onboard .hLine::after {
-	width: 81%;
+	width: 80%;
   content: "";
   position: absolute;
   top: 22.5px;
-  left: 71.5%;
-  border: 2px dashed #16005C;
+  left: 72%;
+  border: 1px dashed #16005C;
   transform: translate(-50%);
 }
 /* Services Section */
@@ -364,6 +364,7 @@ a:focus, .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:acti
 	background-size: cover;
 	background-repeat: no-repeat;
 	padding-bottom: 15px;
+	background-size: 100%, 100%;
 }
 #portfolio .img-fun {
 	position: absolute;
@@ -657,12 +658,12 @@ color: #777;
 	width: 100%;
 }
 .onboard .hLine:after {
-	width: 85%;
+	width: 83%;
 	content: "";
 	position: absolute;
 	top: 22.5px;
-	left: 72.5%;
-	border: 2px dashed #16005C;
+	left: 73%;
+	border: 1px dashed #16005C;
 	transform: translate(-50%);
 }
 .onboard .line:after {

public/css/style.css

@@ -48,4 +48,12 @@ function main() {
 
 
 }
-main();
+main();
+
+$(document).scroll(function() {
+  if($(window).scrollTop() > 100){
+    $("#menu").addClass("show-background");
+  }else if($(window).scrollTop() < 100){
+    $("#menu").removeClass("show-background");
+  }
+});

public/img/Illustration-2.png

@@ -8,11 +8,26 @@
   height: 40vmin;
   pointer-events: none;
 }
-
-.link-btns{
-  display: flex;
-  flex-direction: column;
-  min-width: 175px;
+#footer{
+  img{
+    @include mq('phablet', max) {
+      width: 70%;
+    }
+  }
+  .link-wrapper{
+    height: 145px;
+    .link-btns{
+      display: flex;
+      flex-direction: column;
+      min-width: 175px;
+      top: 50%;
+      position: absolute;
+      transform: translate(0, -50%);
+      @include mq('tablet-wide', max) {
+        position: relative;
+      }
+    }
+  }
 }
 
 .normal-desc {
@@ -93,6 +108,12 @@
   }
 }
 
+@include mq('tablet-small', max) {
+  h1, h2{
+    font-size: 28px!important;
+  }
+}
+
 .form-item{
   input, textarea{
     border-radius: 15px;
@@ -106,23 +127,6 @@
     }
   }
 }
-.onboard .circle{
-  margin-left: 117px;
-}
-.onboard .line{
-	height: 550px;
-}
-@include mq('desktop', max) {
-  .onboard .circle{
-    margin-left: 92px;
-  }
-  .onboard .line{
-    height: 452px;
-    &.first-line{
-      height: 480px;
-    }
-  }
-}
 
 #features, .faq-container{
   .intro-image-transparency, .intro-image{
@@ -151,6 +155,15 @@
       margin-top: -200px!important;
       .credit_card1-bk{
         top: 413px;
+        width: 80%;
+      }
+    }
+  }
+  @include mq('tablet', max) {
+    .img-container{
+      margin-top: -200px!important;
+      .credit_card1-bk{
+        top: 50vw;
       }
     }
   }
@@ -171,45 +184,17 @@
   }
 }
 
-#services {
-  margin-left: 20px;
-  .credit_card3-bk{
-    top: 80px;
-    left: -15px;
-  }
-  @include mq('tablet-wide', max) {
-    .content-wrapper{
-      display: flex;
-      flex-direction: column-reverse;
-      .img-container{
-        margin-top: -400px!important;
-        .credit_card3-bk{
-          top: 537px;
-        }
-      }
-    }
-  }
+#menu{
+  position: fixed;
+  margin-bottom: -20px;
 }
 
-#portfolio{
-  .download-section{
-    height: 350px;
-    padding-top: 20px;
-  }
-  .img-fun{
-    top: 0;
-  }
-  @include mq('desktop', max) {
-    .download-section{
-      padding-top: 0;
-    }
-    .left-section{
-      width: 300px;
-    }
-  }
-  @include mq('tablet', max) {
-    .img-fun{
-      top: -20px;
-    }
-  }
+p{
+  position: relative;
+}
+
+@include mq('phablet', max) {
+  img.intro-hero{
+    width: 80%!important;
+  } 
 }

public/img/about-sale-circle-bk.png

@@ -8,10 +8,11 @@ const Footer = () => <div>
         <img src="img/logo.png" alt="" />
         <p className="copyright">© 2019 Chore, a Marc Barnes Corp. | Patent Pending </p>
       </div>
-      <div className="col-xs-12 col-md-2 col-md-offset-1 link-btns">
-        <Link to="./privacy" className="list">Chore Privacy</Link>
-        <Link to='./agreement' className="list">Terms and Conditions</Link>
-        <Link to='./fee' className="list">Fees</Link>
+      <div className="col-xs-12 col-md-2 col-md-offset-1 link-wrapper">
+        <div className="link-btns">
+          <Link to="./privacy" className="list">Chore Privacy</Link>
+          <Link to='./agreement' className="list">Terms and Conditions</Link>
+        </div>
       </div>
     </div>
   </div>

public/img/user3.png

@@ -29,9 +29,6 @@ const Navigation = props => <nav id="menu" className="navbar navbar-default navb
         <li>
           <a href="/#features" className={props.isColorWhite ? "page-scroll color-white" : "page-scroll"}>How it works</a>
         </li>
-        <li>
-          <a href="/fee" className={props.isColorWhite ? "page-scroll color-white" : "page-scroll"}>Pricing</a>
-        </li>
         <li>
           <a href="/contactus#faq" className={props.isColorWhite ? "page-scroll color-white" : "page-scroll"}>FAQ</a>
         </li>