From 23e6193cdcb7b5f1b49473312aa32db0763d583d Mon Sep 17 00:00:00 2001
From: stanley <ugwuchiagoziestanley@gmail.com>
Date: Thu, 1 Oct 2020 23:38:38 +0100
Subject: [PATCH] bug/made the page responsive

---
 Style.css  | 39 +++++++++++++++++++++++++++++----------
 index.html |  4 ++--
 2 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/Style.css b/Style.css
index 5612985..fcd4701 100644
--- a/Style.css
+++ b/Style.css
@@ -6,18 +6,23 @@
         margin: 0%;
         padding: 0%;
     }
+    html{
+        scroll-behavior: smooth;
+    }
     body{
         background-color: #222831;
     }
     nav{
         height: 50px;
         display: block;
-        padding-top: 50px;
+        padding-top: 30px;
+        padding-bottom:30px;
         width: auto;
         margin: 0 auto;
         text-transform: uppercase;
         background-color: #525861;
         text-align: center;
+       
     }
     .nav{
         color: white;
@@ -29,6 +34,7 @@
     position: fixed; 
     top: 0; 
     width: 100%; 
+    z-index: 99;
   }
   
   .navbar a {
@@ -87,21 +93,34 @@
         font-size: 30px;
     }
     #clock{
-        width: 600px;
-        margin-left: 30%;
-        margin-top: 3%;
-        margin-bottom: 2%;
-        font-size: 70px;
+        width:90%;
+        max-width: 400px;
+        margin:auto;
+        margin-top:50px;
+        font-size: 50px;
         border: 2px solid white;
         align-items: center;
         text-align: center;
         align-items: center;
-        color: white;
+        color: #fff;
+        padding:10px 0;
+
     }
     #map{
-    width: 70%x;
+    width: 80%;
     height: 400px;
     padding: 18px;
-    margin-left: 100px;
-    margin-right: 100px;
+    margin:auto;
+    margin-bottom:40px;
+    }
+    @media(max-width:400px){
+        #clock{
+            font-size:25px;
+        }
+        #map{
+            width:82%;
+            margin:auto;
+            margin-bottom:30px;
+            margin-top:20px;
+        }
     }
diff --git a/index.html b/index.html
index 7eef2e8..b155bb0 100644
--- a/index.html
+++ b/index.html
@@ -18,7 +18,7 @@
         <a href="#clock">Clock</a>
         <a href="#FAQ">FAQs</a>
       </div>
-      <header>
+      <header id="home">
         <h1>
             JS-World<br>
             <span class="underline">Clock</span>
@@ -42,7 +42,7 @@ <h1>
     </nav>
     <div id="clock">10:10:01</div>
     <!--FAQs-->
-    <h2 class="faq">FAQs:</h2> 
+    <h2 class="faq" id="FAQ">FAQs:</h2> 
     <div id="map"></div>
 
 </body>