completed wireframe!

index.html

@@ -34,12 +34,12 @@
       <div class="row">
         <div class="col-md-3" id="signup-box">
           <h4 class="txt-lt">Keep updated</h4>
-          <div class="card">
+          <div class="card bg-blur sq">
             <div class="card-body">
-              <h5 class="card-subtitle">Tell us about you</h5>
+              <h5 class="card-subtitle txt-lt">Tell us about you</h5>
               <form>
                 <div class="row">
-                  <div class="col">
+                  <div class="col px-0 my-1">
                     <div class="form-floating">
                       <input type="name" class="form-control" id="userName">
                       <label for="userName">Name</label>
@@ -47,7 +47,7 @@
                   </div>
                 </div>
                 <div class="row">
-                  <div class="col">
+                  <div class="col px-0 my-1">
                     <div class="form-floating">
                       <input type="email" class="form-control" id="userEmail">
                       <label for="userEmail">Email</label>
@@ -55,13 +55,13 @@
                   </div>
                 </div>
                 <div class="row">
-                  <div class="col-8">
+                  <div class="col-8 px-0 my-1">
                     <div class="form-floating">
                       <input type="tel" class="form-control" id="userPhone">
                       <label for="userPhone">Phone</label>
                     </div>
                   </div>
-                  <div class="col-4">
+                  <div class="col-4 px-0 my-1">
                     <div class="form-floating">
                       <input type="tel" maxlength=4 class="form-control" id="userExt">
                       <label for="userExt">Ext.</label>
@@ -69,7 +69,7 @@
                   </div>
                 </div>
                 <div class="row">
-                  <div class="col">
+                  <div class="col px-0 my-1">
                     <div class="form-floating">
                       <textarea class="form-control" id="userComment"></textarea>
                       <label for="userComment">Comments</label>
@@ -77,16 +77,16 @@
                   </div>
                 </div>
                 <div class="row">
-                  <div class="col">
+                  <div class="col px-0 my-1">
                     <input type="checkbox" class="form-check-input" id="tosCheck">
-                    <label for="tosCheck" class="forom-check-label">
+                    <label for="tosCheck" class="form-check-label txt-lt">
                       Agree to receive messages
                     </label>
                   </div>
                 </div>
                 <div class="row">
-                  <div class="col">
+                  <div class="col px-0 my-1">
-                    <button type="submit" class="btn btn-primary">Submit</button>
+                    <button type="submit" class="btn">Submit</button>
                   </div>
                 </div>
               </form>
@@ -94,35 +94,84 @@
           </div>
         </div>
         <div class="col-6 offset-1 txt-lt">
-          <h4>The Retro Renaissance is Here!</h4>
+          <div class="left-bar px-2">
-          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas exercitationem impedit nobis delectus aliquam.</p>
+            <h4>The Retro Renaissance is Here!</h4>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas exercitationem impedit nobis delectus aliquam.</p>
+          </div>
         </div>
       </div>
     </section>
     <section id="pitch-bar" class="container-fluid txt-lt bg-drk">
       <div class="row">
-        <div class="col-md-5 txt-lt">
+        <div class="col-md-5 txt-lt p-5">
           <h3>Powerful 16-bit Computing, in an Affordable Package!</h3>
           <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga velit nesciunt id error nobis iste sequi hic voluptates ut cupiditate.</p>
         </div>
         <div class="col-7">
-          <div class="card hanging-card">
+          <div class="card hanging-card mx-5 txt-lt bg-trans sq display-6 p-3 px-5">
-            <ul class="list-group">
+            <ul class="list-unstyled">
-              <li class="list-group-item">lorem3</li>
+              <li>🐈 lorem3</li>
-              <li class="list-group-item">lorem3</li>
+              <li>🐈 lorem3</li>
-              <li class="list-group-item">lorem3</li>
+              <li>🐈 lorem3</li>
-              <li class="list-group-item">lorem3</li>
+              <li>🐈 lorem3</li>
-              <li class="list-group-item">lorem3</li>
+              <li>🐈 lorem3</li>
             </ul>
           </div>
         </div>
       </div>
-
     </section>
-
+    <section id="pitch">
+      <div class="container-fluid">
+        <div class="row h-70">
+          <div class="col-md-3 ps-5">
+            <img class="" src="macboard.jpg" alt="">
+          </div>
+          <div class="col-md-9 pd-15 txt-lt px-5">
+            <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>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section id="reviews" class="container-fluid">
+      <div class="row p-5 full-height">
+        <div class="col-md-4 order-md-1">
+          <div class="card full-height sq bg-grey txt-lt">
+            <div class="card-body text-center">
+              <h4 class="fs-1">💯💯💯</h4>
+              <p class="fs-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, inventore officiis? Porro illum cupiditate similique modi.</p>
+              <p class="fs-6 txt-red fw-bold">Lorem ipsum dolor sit amet consectetur.</p>
+            </div>
+          </div>
+        </div>
+        <div class="col-md-4 my-5 ps-md-0">
+          <div class="card full-height sq bg-grey txt-lt">
+            <div class="card-body text-center">
+              <p class="fs-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, inventore officiis? Porro illum cupiditate similique modi.</p>
+              <p class="fs-6 txt-red fw-bold">Lorem ipsum dolor sit amet consectetur.</p>
+            </div>
+          </div>
+        </div>
+        <div class="col-md-4 my-5 order-md-2 pe-md-0">
+          <div class="card full-height sq bg-grey txt-lt">
+            <div class="card-body text-center">
+              <p class="fs-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, inventore officiis? Porro illum cupiditate similique modi.</p>
+              <p class="fs-6 txt-red fw-bold">Lorem ipsum dolor sit amet consectetur.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
   </main>
   <footer>
-
+    <section class="bg-grey h-20 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>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium beatae minus sequi praesentium modi odio numquam?</p>
+    </section>
   </footer>
 
   <!-- Bootstrap JavaScript Libraries -->

style.css

@@ -33,7 +33,7 @@ header {
 
 main {
   /* margin-top: 10vh; */
-  height: 500vh;
+  /* height: 500vh; */
 }
 
 #hero-img {
@@ -56,12 +56,100 @@ main {
   color: var(--light-text);
 }
 
+.txt-wht {
+  color: white;
+}
+
 .bg-drk {
   background-color: var(--dark-bg);
 }
 
 .hanging-card {
-  min-height: 36vh;
+  min-height: 30vh;
   position: relative;
   top: 10vh;
+}
+
+#pitch {
+  background-image: linear-gradient(135deg, #c90051, #194bd3);
+}
+
+img {
+  height: 100%;
+  max-width: 100%;
+  object-fit: cover;
+}
+
+.full-height {
+  height: 100%;
+}
+
+/* min Height 70vh */
+.h-70 {
+  min-height: 70vh;
+}
+
+/* Push Down 15vh */
+.pd-15 {
+  margin-top: 15vh;
+}
+
+.left-bar {
+  border-left-width: 0.4em;
+  border-left-style: solid;
+  border-left-color: darkred;
+}
+
+.txt-blk {
+  color: black;
+}
+
+.sq {
+  border-radius: 0px;
+}
+
+.bg-trans {
+  background-color: #00000040;
+}
+
+.bg-blur {
+  background-color: transparent;
+  backdrop-filter: blur(8px);
+}
+
+.form-control {
+  background-color: #D0D0D080;
+  border-radius: 0px;
+  border-width: 0px;
+}
+
+.btn {
+  border-radius: 0px;
+  color: white;
+  background-color: darkred;
+}
+
+#reviews, .bg-dgry {
+  background-color: #2e2e2e;
+}
+
+#reviews .row {
+  min-height: 40vh;
+}
+
+.bg-grey {
+  background-color: #777374;
+}
+
+.txt-red {
+  color: darkred;
+}
+
+/* min Height 24vh */
+.h-20 {
+  min-height: 20vh;
+}
+
+.h-10 {
+  min-height: 10vh;
 }