[Feature #159269831] Make features section in homepage visible in vie…

…wport
olusoladavid · Jul 25, 2018 · 9289b06 · 9289b06
1 parent 402d49e
commit 9289b06
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 28 deletions.
diff --git a/UI/css/style.css b/UI/css/style.css
@@ -96,6 +96,9 @@
   text-align: center;
   display: flex;
 }
+.hero--home {
+  height: auto;
+}
 .hero__title {
   font-size: 42px;
   line-height: 1.5;
@@ -483,7 +486,7 @@
   padding-left: 50px
 }
 .story__content {
-  font-szie:25px;
+  font-size:25px;
   line-height: 1.8em;
   padding: 0 50px
 }
@@ -595,6 +598,9 @@
   .nav__close-menu {
     display: block;
   }
+  .hero--home {
+    margin-bottom: 30px;
+  }
   .hero__title {
     font-size: 40px;
     margin: 2.8em 0 0 0;

diff --git a/UI/index.html b/UI/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -9,9 +10,10 @@
   <title>Home | MyDiary</title>
   <link rel="stylesheet" href="./css/style.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins"> 
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
   <link rel="icon" type="image/png" href="./img/favicon.png" sizes="32x32" />
 </head>
+
 <body>
   <div class="page page--is-flex page--stretches">
     <header class="header">
@@ -36,7 +38,7 @@
         </nav>
       </div>
     </header>
-    <section class="hero">
+    <section class="hero hero--home">
       <div class="container">
         <h1 class="hero__title">Capture every moment.</h1>
         <p class="hero__text">
@@ -59,32 +61,35 @@ <h1 class="feature-list__title">
             <img src="./img/remind-icon.svg" alt="remind-icon" class="item__image">
             <h2 class="item__title"> Reminders </h2>
             <p class="item__desc">
-             Choose a time and we'll send you daily reminders to write in your diary.
-           </p>
-         </div>
-         <div class="feature-list__item">
-          <img src="./img/lock-icon.svg" alt="hashtag-icon" class="item__image">
-          <h2 class="item__title"> Privacy </h2>
-          <p class="item__desc">
-            Your stories are yours and yours alone. We'll never share your data.
-          </p>
-        </div>
-        <div class="feature-list__item">
-          <img src="./img/fav-icon.svg" alt="fav-icon" class="item__image">
-          <h2 class="item__title"> Favorites </h2>
-          <p class="item__desc">
-            Easily find your favorite memories and be happy again
-          </p>
+              Choose a time and we'll send you daily reminders to write in your diary.
+            </p>
+          </div>
+          <div class="feature-list__item">
+            <img src="./img/lock-icon.svg" alt="hashtag-icon" class="item__image">
+            <h2 class="item__title"> Privacy </h2>
+            <p class="item__desc">
+              Your stories are yours and yours alone. We'll never share your data.
+            </p>
+          </div>
+          <div class="feature-list__item">
+            <img src="./img/fav-icon.svg" alt="fav-icon" class="item__image">
+            <h2 class="item__title"> Favorites </h2>
+            <p class="item__desc">
+              Easily find your favorite memories and be happy again
+            </p>
+          </div>
         </div>
       </div>
-    </div>
-  </section>
-  <footer class="footer">
-    <div class="container">
-      <h4> Built with &#10084; by <a class="link" href="https://twitter.com/olusola_dev">Olusola</a></h4>
-    </div>
-  </footer>
-</div>
-<script type="text/javascript" src="./js/main.js"></script>
+    </section>
+    <footer class="footer">
+      <div class="container">
+        <h4> Built with &#10084; by
+          <a class="link" href="https://twitter.com/olusola_dev">Olusola</a>
+        </h4>
+      </div>
+    </footer>
+  </div>
+  <script type="text/javascript" src="./js/main.js"></script>
 </body>
+
 </html>