laid out all sections

mdr19002 · May 8, 2020 · 89710ee · 89710ee
1 parent e4b4abc
commit 89710ee
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 22 deletions.
diff --git a/css/main.css b/css/main.css
@@ -96,6 +96,11 @@ textarea {
     padding: 10px 30px;
     margin: 0;
     font-size: 12pt;
+    border: none;
+  }
+
+  .salmon-button:hover {
+    cursor: pointer;
   }
 
   .tiny {
@@ -260,7 +265,7 @@ textarea {
   }
 
   ::placeholder {
-    color: white;
+    color: #cbcbcb;
     font-size: 12pt;
   }
 
@@ -273,6 +278,45 @@ textarea {
     width: 200px;
   }
 
+  footer {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  #footer-flex-container {
+    display: flex;
+  }
+
+  footer ul {
+    list-style-type: none;
+  }
+
+  #social-flex-container {
+    display: flex;
+  }
+
+  footer form {
+    border-radius: 3px;
+    border-color: #cbcbcb;
+    background-color: #f6f6f6;
+    border-style: solid;
+    border-width: 1px;
+  }
+
+  footer input {
+    background-color: #f6f6f6;
+    color: white;
+    padding: 15px;
+    border-style: none;
+    margin: 0px;
+  }
+
+  footer button {
+    height: 45px;
+  }
+
   /* ----------START OF MEDIA QUERIES------------ */
 
   @media (min-width: 484px) {
@@ -366,6 +410,9 @@ textarea {
       display: flex;
       justify-content: space-evenly;
     }
+    #section-6-img {
+      text-align: center;
+    }
 
     #section-7 form {
       flex-direction: row;
@@ -382,6 +429,9 @@ textarea {
       width: 20vw;
     } 
 
+    footer {
+      flex-direction: row;
+    }
   }
 
   @media (min-width: 1921px) {

diff --git a/index.html b/index.html
@@ -13,6 +13,7 @@
 
   <link rel="stylesheet" href="css/normalize.css">
   <link href="https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100;0,400;0,500;1,300&display=swap" rel="stylesheet">
+  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
   <link rel="stylesheet" href="css/main.css">
 
   <meta name="theme-color" content="#fafafa">
@@ -154,31 +155,33 @@
       <p>USA &  CAN: 1-888-123-4567</p>
       <p>Address: 34 Brokel Rd. NY</p>
     </div>
-    <div>
-      <ul><span class="medium small">Support</span>
-        <li>Help Center</li>
-        <li>Get Started</li>
-        <li>Contact US</li>
-      </ul>
-    </div>
-    <div>
-      <ul><span class="medium small">About US</span>
-        <li>About Us</li>
-        <li>Terms of Use</li>
-        <li>Privacy Policy</li>
-      </ul>
-    </div>
+    <div id="footer-flex-container">
+      <div>
+        <ul><span class="medium small">Support</span>
+          <li>Help Center</li>
+          <li>Get Started</li>
+          <li>Contact US</li>
+        </ul>
+      </div>
+      <div>
+        <ul><span class="medium small">About US</span>
+          <li>About Us</li>
+          <li>Terms of Use</li>
+          <li>Privacy Policy</li>
+        </ul>
+      </div>
+  </div>
     <div>
       <p class="medium small">Get Newsletter</p>
       <form>
-        <input>
-        <button class="salmon-button"><img></button>
+        <input type="text" id="email-2" placeholder="EMAIL">
+        <button class="salmon-button"><i class="fa fa-paper-plane-o" aria-hidden="true"></i></button>
       </form>
-      <ul>
-        <li><img></li>
-        <li><img></li>
-        <li><img></li>
-        <li><img></li>
+      <ul id="social-flex-container">
+        <li><i class="fa fa-dribbble" aria-hidden="true"></i></li>
+        <li><i class="fa fa-facebook" aria-hidden="true"></i></li>
+        <li> <i class="fa fa-google-plus" aria-hidden="true"></i></li>
+        <li><i class="fa fa-twitter" aria-hidden="true"></i></li>
       </ul>
     </div>
   </footer>