refactor

index.html

@@ -123,10 +123,10 @@
     <section id="pitch">
       <div class="container-fluid">
         <div class="row">
-          <div class="col-md-3 p-0 ps-md-5">
+          <div class="col-md-3 p-0">
             <img class="" src="macboard.jpg" alt="">
           </div>
-          <div class="col-md-9 p-5 pd-15 txt-lt">
+          <div class="col-md-9 p-5 mt-md-15vh txt-lt">
             <h4 class="display-4">🐈 Lorem ipsum dolor sit amet consectetur adipisicing elit.</h4>
             <p class="fs-4">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis molestias eius asperiores vel, reprehenderit eveniet ipsa esse veritatis similique, veniam animi aperiam sunt! Autem.</p>
             <p class="fs-4">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis molestias eius asperiores vel, reprehenderit eveniet ipsa esse veritatis similique, veniam animi aperiam sunt! Autem.</p>
@@ -134,8 +134,8 @@
         </div>
       </div>
     </section>
-    <section id="reviews" class="container-fluid">
+    <section id="reviews" class="container-fluid bg-dgry">
-      <div class="row p-3 p-md-5 full-height">
+      <div class="row p-3 p-md-5 full-height mh-40vh">
         <div class="col-md-4 my-2 my-md-0 order-md-1">
           <div class="card full-height sq bg-grey txt-lt">
             <div class="card-body text-center">
@@ -165,11 +165,11 @@
     </section>
   </main>
   <footer>
-    <section class="bg-grey h-20 txt-lt p-5">
+    <section class="bg-grey mh-20vh txt-lt p-5">
       <h4>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</h4>
       <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Error tempore similique enim necessitatibus nisi.</p>
     </section>
-    <section class="bg-dgry h-10 txt-lt d-flex align-items-center justify-content-center p-1">
+    <section class="bg-dgry mh-10vh txt-lt d-flex align-items-center justify-content-center p-1">
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium beatae minus sequi praesentium modi odio numquam?</p>
     </section>
   </footer>

style.css

@@ -31,21 +31,12 @@ header {
   z-index: 99;
 }
 
-main {
-  /* margin-top: 10vh; */
-  /* height: 500vh; */
-}
-
 #hero-img {
   background-image: url("hero-bg.jpg");
   min-height: 60vh;
   background-size: cover;
 }
 
-#signup-box h4, #ovly-text{
-  color: var(--light-text);
-}
-
 #pitch-bar {
   min-height: 30vh;
   background-color: var(--dark-bg);
@@ -56,10 +47,6 @@ main {
   color: var(--light-text);
 }
 
-.txt-wht {
-  color: white;
-}
-
 .bg-drk {
   background-color: var(--dark-bg);
 }
@@ -72,7 +59,7 @@ main {
   }
 
   /* Push Down 15vh */
-  .pd-15 {
+  .mt-md-15vh {
     margin-top: 15vh;
   }
 }
@@ -92,19 +79,10 @@ img {
   height: 100%;
 }
 
-/* min Height 70vh */
-.h-70 {
-  min-height: 70vh;
-}
-
 .left-bar {
   border-left-width: 0.4em;
   border-left-style: solid;
-  border-left-color: darkred;
+  border-left-color: var(--dark-bg);
-}
-
-.txt-blk {
-  color: black;
 }
 
 .sq {
@@ -132,11 +110,11 @@ img {
   background-color: darkred;
 }
 
-#reviews, .bg-dgry {
+.bg-dgry {
   background-color: #2e2e2e;
 }
 
-#reviews .row {
+.mh-40-v {
   min-height: 40vh;
 }
 
@@ -148,11 +126,10 @@ img {
   color: darkred;
 }
 
-/* min Height 24vh */
+.mh-20vh {
-.h-20 {
   min-height: 20vh;
 }
 
-.h-10 {
+.mh-10vh {
   min-height: 10vh;
 }