Merge pull request #2 from pixelomer/responsive-html

More responsive design

public/css/styles.css

@@ -10,20 +10,18 @@ body {
     color: #FEF1E6;
     border-radius: 10px;
     padding: 7px;
-    width: 23rem; 
-    margin-left: 30rem;
-    margin-top: 1.5rem;
+    width: 23rem;
+    display: block;
+    margin: 2rem auto;
     font-family: Lobster;
 }
 
-.front-div {
-    margin: 1rem 0 10rem;
-}
-
 .intro {
- padding: 10px;
- line-height: 30px;
- margin-bottom: 5rem;
+    display: block;
+    margin: 0 auto;
+    max-width: 500px;
+    padding: 10px;
+    line-height: 30px;
 }
 
 
@@ -32,29 +30,25 @@ body {
     border: 2px solid #3D087B;
     box-shadow: 0 0 12px 7px #f8937d;
     padding: 10px;
-    margin: 0 27.2rem 3rem;
     display: block;
+    margin: 2rem auto 0 auto;
     width: 9.5rem;
 }
 
 .city-input:focus {
     outline: none;
 }
 
-.home-input {
-    margin: 2rem 10rem 7rem;
-}
-
 .btn-input {
     width: 5.8rem;
     background: #3D087B;
     color: #FEF1E6;
     border-radius: 10px;
     padding: 7px;
     font-weight: 800;
-    margin: 1rem 27.2rem;
-    border: 0;
+    margin: 1rem auto 3rem auto;
     display: block;
+    border: 0;
 }
 
 .btn-input:hover {
@@ -67,7 +61,7 @@ body {
 }
 
 .div-description {
-    margin: 1rem 0 7rem;
+    margin: 1rem 0 3rem;
 }
 
 .wea-description {
@@ -81,7 +75,7 @@ body {
     border-radius: 10px;
     padding: 7px;
     font-weight: 800;
-    margin: 1rem 33.3rem 5rem;
+    margin: 1rem auto 3rem auto;
     border: 0;
     text-decoration: none;
     display: block;
@@ -97,66 +91,11 @@ body {
 }
 
 @media only screen and (max-width: 452px) {
-.top-bar {
-    margin-left: 5rem;
-    padding: 4px;
-    font-size: 1.2rem;
-    width: 10rem;
-}
-
-.home-input {
-    margin: 2rem 1rem 4rem;
-}
-
-.home-input > h3 {
-    font-size: 0.8rem;
-    font-weight: 600;
-}
-.city-input {
-    width: 4.4rem;
-    margin: 0.4rem 3.7rem 2rem 5.2rem;
-    border: 1.5px solid #3D087B;
-    box-shadow: 0 0 9px 5px #f8937d;
-    padding: 5px;
-    font-size: 0.7rem;
-}
-
-.btn-input {
-    width: 2.7rem;
-    margin: 0.4rem 3.7rem 0.4rem 5.2rem;
-    font-size: 0.6rem;
-    padding: 5px;
-    font-weight: 550;
-}
-
-.btn-input:hover {
-    background-color: #f8937d;
-    color: #3D087B;
-}
-
-.btn-back {
-    margin: 0.4rem 3.7rem 4.5rem 5.2rem;
-    font-size: 0.6rem;
-}
-
-.intro {
-    font-size: 0.8rem;
-    line-height: 20px;
-    padding: 5px;
-    margin: 0 0 3rem 0;
-    font-weight: 600;
-}
-
-.wea-image {
-    width: 5.5rem;
-}
-
-.div-description > h3 {
-    font-size: 0.8rem;
-    font-weight: 600;
-}
-
-footer {
-    font-size: 0.5rem;
-}
-  }
+    .top-bar {
+        width: 15rem;
+        font-size: 25px;
+        display: block;
+        margin: 2rem auto;
+        font-family: Lobster;
+    }
+}  

views/home.ejs

@@ -1,17 +1,11 @@
 <%- include("partials/header.ejs") -%> 
 
 
-<div class="front-div">
-    <h3 class="intro"> Stay updated with the current weather conditions <br> in various cities of the world.</h3>
-    <form action="/weather" method="POST">
-        <div class="home-input">
-        <h3>Enter City's Name</h3>
-        <input type="text" placeholder="City's Name" name="cityName" class="city-input" autocomplete="off">
-        <button type="submit" class="btn-input">Submit</button>
-        </div>
-    </form>
-</div>
-
+<h3 class="intro"> Stay updated with the current weather conditions in various cities of the world.</h3>
+<form action="/weather" method="POST">
+    <input type="text" placeholder="City's Name" name="cityName" class="city-input" autocomplete="off">
+    <button type="submit" class="btn-input">Submit</button>
+</form>