added 2nd and 3rd row of axit layout

mdr19002 · Feb 16, 2020 · 4cd195c · 4cd195c
1 parent e4d6f52
commit 4cd195c
Show file tree

Hide file tree

Showing 3 changed files with 153 additions and 6 deletions.
diff --git a/css/axit.css b/css/axit.css
@@ -117,11 +117,9 @@ textarea {
      width: 80vw;
      display: flex;
      justify-content: space-between;
-     background-color: blue;
-
    }
 
-   .centered img {
+   header .centered img {
     height: 1.3em;
     align-self: center;
   }
@@ -142,10 +140,83 @@ textarea {
      justify-content: flex-end;
      list-style-type: none;
      padding: 0;
+     margin: 16px 0;
    }
 
    .desktop li {
-     margin: 0 20px;
+     margin-left: 20px;
+   }
+
+   main {
+     background-image: url(../img/axit_bg.jpg);
+     background-size: cover;
+     background-repeat: no-repeat;
+     background-position: center;
+     padding: 10vh 0;
+     display: flex;
+     justify-content: center;
+     text-align: center;
+   }
+
+   main .centered {
+     flex-direction: column;
+     align-items: center;
+   }
+
+   main .centered > * {
+     width: 50%;
+   }
+
+   #form-container {
+     display: flex;
+     justify-content: center;
+   }
+
+   form {
+     width: 250px;
+     display: flex;
+     flex-direction: column;
+     justify-content: space-between;
+     align-items: center;
+     background-color: white;
+   }
+
+   form h3 {
+    background-color: gray;
+    margin: 0;
+   }
+
+   form input {
+    background-color: transparent;
+    border-top: none;
+    border-left: none;
+    border-right: none;
+    border-bottom: 1px solid #f5f5f5;
+    margin-bottom: 25px;
+   }
+
+   #social-container {
+     display: flex;
+     justify-content: center;
+   }
+
+   #social-banner {
+     display: flex;
+     flex-direction: column;
+     align-items: center;
+   }
+
+   #social-text {
+     text-align: center;
+   }
+
+   #social-banner i {
+    margin: 10px;
+   }
+
+   #social-icons {
+     display: block;
+     font-size: 2em;
    }
 
   @media (min-width: 700px) {
@@ -155,8 +226,42 @@ textarea {
     .desktop {
       display: block;
     }
-
+  }
 
+  @media (min-width: 768px) {
+    main {
+      text-align: left;
+    }
+    main .centered {
+      flex-direction: row;
+    }
+    #form-container {
+      justify-content: flex-end;
+    }
+  }
+
+  @media (min-width: 835px) {
+    #social-banner {
+      flex-direction: row;
+      justify-content: space-between;
+    }
+
+    #social-text {
+      width: 33.3333%;
+      text-align: left;
+    }
+
+    #social-icons {
+      width: 66.6667%;
+      text-align: center;
+      display: flex;
+      justify-content: space-around;
+
+    }
+
+    #social-icons i{
+      font-size: 40px;
+    }
   }
 
 

diff --git a/img/axit_bg.jpg b/img/axit_bg.jpg
diff --git a/wk3_axit.html b/wk3_axit.html
@@ -26,7 +26,7 @@
   <!-- Add your site or application content here -->
   <header>
     <div class="centered">
-      <img src="img/axit_logo.png">
+      <img src="img/axit_logo.png" alt="AXIT logo">
       <nav class="mobile">
         <h2>Menu</h2>
         <i class="fa fa-chevron-down" aria-hidden="true"></i>
@@ -43,6 +43,48 @@
     </div>
   </header>
 
+  <main>
+    <div class="centered">
+      <div>
+        <img src="img/axit_logo.png" alt="AXIT logo">
+        <h1>MODERN AXURE TEMPLATE FOR BEAUTIFUL PROTOTYPES</h1>
+        <hr>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
+          euismod bibendum laoreet. Proin gravida dolor sit amet lacus
+          accumsan et viverra justo commodo.</p>
+        <p>Download</p>
+      </div>
+      <div id="form-container">
+        <form>
+          <h3>Try Your <span>FREE</span> Trial Today</h3>
+          <input type="text">
+          <input type="text">
+          <input type="text"> 
+          <button>Get Started</button>
+        </form>
+      </div>
+    </div>
+  </main>
+
+  <div id="social-container">
+    <div id="social-banner" class="centered">
+      <div id="social-text">
+        <h3>Social Media</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+          Aenean euismod bibendum laoreet.</p>
+      </div>
+      <div id="social-icons">
+        <i class="fa fa-facebook" aria-hidden="true"></i>
+        <i class="fa fa-twitter" aria-hidden="true"></i>
+        <i class="fa fa-google-plus" aria-hidden="true"></i>
+        <i class="fa fa-pinterest" aria-hidden="true"></i>
+        <i class="fa fa-instagram" aria-hidden="true"></i>
+        <i class="fa fa-stumbleupon" aria-hidden="true"></i>
+        <i class="fa fa-rss" aria-hidden="true"></i>
+      </div>
+    </div>
+  </div>
+
   <script src="js/vendor/modernizr-3.8.0.min.js"></script>
   <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
   <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')</script>