styled first row

mdr19002 · Feb 16, 2020 · ed9fbaf941df77af7d66b97f4e333e70ebec883a · ed9fbaf
1 parent 4cd195c
commit ed9fbaf941df77af7d66b97f4e333e70ebec883a
Unified Split

Showing with 63 additions and 44 deletions.

+32 −26 css/axit.css

+31 −18 wk3_axit.html
diff --git a/css/axit.css b/css/axit.css
@@ -102,49 +102,51 @@ textarea {
     box-sizing: border-box;
    }
 
-   header {
-    background-color: black;
+   .bg {
     width: 100vw;
     display: flex;
     justify-content: center;
    }
 
-   .desktop {
-    display: none;
+   .centered {
+    width: 80vw;
+    display: flex;
+    justify-content: space-between;
   }
 
-   .centered {
-     width: 80vw;
-     display: flex;
-     justify-content: space-between;
+   header {
+    background-color: black;
+    font-family: 'Open Sans', sans-serif;
+    font-weight: semibold;
+    color: white;
+    font-size: 13px;
    }
 
+   .desktop {
+    display: none;
+  }
+
    header .centered img {
-    height: 1.3em;
+    height: 25px;
     align-self: center;
   }
 
-   .mobile {
-     align-self: center;
-     display: flex;
-     background-color: cyan;
-   }
-
    .mobile i {
      align-self: center;
+     margin-left: 10px;
    }
 
    header ul {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      list-style-type: none;
-     padding: 0;
-     margin: 16px 0;
+     padding: 10px 0;
+     margin: 0;
    }
 
    .desktop li {
-     margin-left: 20px;
+     margin-left: 50px;
    }
 
    main {
@@ -153,8 +155,6 @@ textarea {
      background-repeat: no-repeat;
      background-position: center;
      padding: 10vh 0;
-     display: flex;
-     justify-content: center;
      text-align: center;
    }
 
@@ -195,11 +195,6 @@ textarea {
     margin-bottom: 25px;
    }
 
-   #social-container {
-     display: flex;
-     justify-content: center;
-   }
-
    #social-banner {
      display: flex;
      flex-direction: column;
@@ -219,12 +214,23 @@ textarea {
      font-size: 2em;
    }
 
+   footer {
+    background-color: black;
+    color: white;
+    flex-direction: column;
+    text-align: center;
+    padding-top: 20px;
+    padding-bottom: 5px;
+   }
+
+
   @media (min-width: 700px) {
     .mobile {
       display: none;
     }
     .desktop {
-      display: block;
+      display: flex;
+      padding: 25px 0;
     }
   }
 

diff --git a/wk3_axit.html b/wk3_axit.html
@@ -13,6 +13,7 @@
 
   <link rel="stylesheet" href="css/normalize.css">
   <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 href="https://fonts.googleapis.com/css?family=Open+Sans:400,600&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="css/axit.css">
 
   <meta name="theme-color" content="#fafafa">
@@ -24,26 +25,24 @@
   <![endif]-->
 
   <!-- Add your site or application content here -->
-  <header>
-    <div class="centered">
+  <header class="bg">
+    <nav class="centered">
       <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>
-      </nav>
-      <nav class="desktop"> 
-        <ul>
-          <li>Features</li>
-          <li>About</li>
-          <li>Pricing</li>
-          <li>Reviews</li>
-          <li>Contact</li>
-        </ul>
-      </nav>
-    </div>
+      <ul class="mobile">
+        <li><h2>Menu</h2></li>
+        <li><i class="fa fa-chevron-down" aria-hidden="true"></i></li>
+      </ul>
+      <ul class="desktop">
+        <li>Features</li>
+        <li>About</li>
+        <li>Pricing</li>
+        <li>Reviews</li>
+        <li>Contact</li>
+      </ul>
+    </nav>
   </header>
 
-  <main>
+  <main class="bg">
     <div class="centered">
       <div>
         <img src="img/axit_logo.png" alt="AXIT logo">
@@ -66,7 +65,7 @@ <h3>Try Your <span>FREE</span> Trial Today</h3>
     </div>
   </main>
 
-  <div id="social-container">
+  <div id="social-container" class="bg">
     <div id="social-banner" class="centered">
       <div id="social-text">
         <h3>Social Media</h3>
@@ -85,6 +84,20 @@ <h3>Social Media</h3>
     </div>
   </div>
 
+  <footer class="bg">
+    <div id="footer-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>
+    <p>© 2015 Axure Themes</p>
+  </footer>
+
+
   <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>