refactor(home): display newletter form in sidebar

[Delivers #166260262]
chidimo · May 26, 2019 · a09e979 · a09e979
1 parent e3cead2
commit a09e979
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 39 deletions.
diff --git a/UI/css/style.css b/UI/css/style.css
@@ -300,41 +300,50 @@ ul.base_ul {
 /* Showcase */
 
 #showcase {
-    min-height: 400px;
+    display: flex;
+    min-height: 700px;
     text-align: center;
-    background: url('../img/architecture-bridge-buildings-374685.jpg') no-repeat 0 -500px;
+    background: url('../img/architecture-bridge-buildings-374685.jpg') no-repeat 0 -400px;
 }
 
 #showcase h1 {
-    margin-top: 100px;
-    font-size: 50px;
-    margin-bottom: 10px;
+    font-size: 55px;
 }
 
 #showcase p {
     font-size: 18px;
 }
 
+/* newsletter */
+
+#newsletter {
+    position: fixed;
+    right: 0;
+    top: 300px;
+}
+
 #newsletter {
     color: #ffffff;
     padding: 15px;
     background: #333A56
 }
 
 #newsletter h1 {
-    float: left;
+    margin-top: 0;
 }
 
-#newsletter form {
-    float: right;
-    margin-top: 25px;
+.newsletter-container {
+    text-align: left;
+    margin: auto;
+    padding: 25px 10px;
 }
 
 #newsletter input[type='email'] {
-    width: 250px;
+    width: 100%;
 }
 
 #newsletter button.subscribe_button {
+    width: 100%;
     height: 44px;
 }
 
@@ -399,6 +408,15 @@ footer {
         margin-left: auto;
         margin-right: auto;
     }
+
+    /* newsletter */
+    section#newsletter {
+        position: inherit;
+    }
+
+    #newsletter input[type='email'] {
+        margin-bottom: 5px;
+    }
 }
 
 @media (max-width: 768px) {
@@ -421,25 +439,12 @@ footer {
         width: 95%;
     }
 
-    header #branding,
-    #newsletter h1,
-    #newsletter form
-    {
+    header #branding {
         float: none;
         text-align: center;
         width: 100%;
     }
 
-    #newsletter input[type='email'] {
-        width: 100%;
-        margin-bottom: 5px;
-    }
-
-    #newsletter button {
-        display: block;
-        width: 100%;
-    }
-
     form.modal_content {
         width: 80%;
     }
@@ -694,7 +699,6 @@ hr.section_divider {
     display: grid;
     grid-row-gap: 50px;
     margin-right: auto;
-    /* font-weight: bold; */
     grid-template-columns: 30% 1% 68%;
 }
 

diff --git a/UI/index.html b/UI/index.html
@@ -9,6 +9,7 @@
         <meta name="keywords", content="loan, cash, short term loan">
         <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
         <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto+Slab&display=swap" rel="stylesheet">
+        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
         <link rel="stylesheet" href="./css/style.css">
         <title>Quick Credit | Welcome</title>
     </head>
@@ -36,28 +37,29 @@
                         <h1>Accessible and affordable funds for businesses</h1>
                     </div>
                 </section>
-                
-                <section id="newsletter">
+
+                <section class="info_section">
                     <div class="container">
+                        <h2>Why Choose Quick Credit</h2>
+                        <ul class="">
+                            <li><i class="fas fa-hand-point-right"></i> Accessible and affordable funds</li>
+                            <li><i class="fas fa-hand-point-right"></i> Flexible payment options</li>
+                            <li><i class="fas fa-hand-point-right"></i> Grow your business</li>
+                            <li><i class="fas fa-hand-point-right"></i> Enjoy peace of mind</li>
+                        </ul>
+                    </div>
+                </section>
+
+                <section id="newsletter">
+                    <div class="newsletter-container">
+                        <h1>Stay Informed</h1>
                         <h1>Subscribe To Our Newsletter</h1>
                         <form action="">
                             <input type="email" placeholder="Email">
                             <button class="button_1 subscribe_button bordered">Subscribe</button>
                         </form>
                     </div>
                 </section>
-
-                <section class="info_section">
-                    <div class="container">
-                        <h2>Benefits</h2>
-                        <ul class="">
-                            <li>Accessible funds</li>
-                            <li>Affordable and flexible payment options</li>
-                            <li>Grow your business</li>
-                            <li>Enjoy peace of mind</li>
-                        </ul>
-                    </div>
-                </section>
             </div>
 
             <footer>