style

css/simp-area.css

@@ -51,7 +51,64 @@ body{   background-image: url("../Area.jpg");
     text-align: center;
 
 }
+.navbar{
+  overflow:hidden;
+}
+
+.navbar a{
+  float:left;
+  display:block;
+  color:#f2f2f2;
+  text-align:center;
+  padding:14px 16px;
+  text-decoration:none;
+  font-size:17px;
+}
+
 
+.navbar a:hover{
+  background-color:rgb(78, 188, 92);
+  /* color:#000; */
+}
+
+.side-nav{
+  height:120%;
+  width:0;
+  position:absolute;
+  z-index:1;
+  top:0;
+  left:0;
+  background-color:rgb(108, 94, 133);
+  opacity:0.9;
+  overflow-x:hidden;
+  padding-top:60px;
+  transition:0.5s;
+}
+
+.side-nav a{
+  padding:10px 10px 10px 30px;
+  text-decoration:none;
+  font-family:'Roboto slab',serif;
+  font-size:22px;
+  color:#ccc;
+  display:block;
+  transition:0.3s;
+}
+
+.side-nav a:hover{
+  color:#fff;
+}
+
+.side-nav .btn-close{
+  position:absolute;
+  top:0;
+  right:22px;
+  font-size:36px;
+  margin-left:50px;
+}
+@media(max-width:568px){
+  .navbar-nav{display:none}
+}
 #title{
     background: #913fb7;
     opacity: 0.9;

css/style.css

@@ -60,8 +60,8 @@ body{
         }
 
     #banner p {
-        color: rgba(255, 255, 255, 0.85);
-        font-size: 1.5em;
+        color: rgba(255, 255, 255, 0.4);
+        font-size: 24px;
         font-weight: 300;
     }
 
@@ -85,15 +85,19 @@ body{
         color: rgba(58, 28, 28, 0.75);
         text-decoration: none;
         border-bottom: 1px dotted;
+      font-family: 'Roboto slab', serif;
+      font-size: 30px;
     }
 
         #banner a:hover {
             color: #FFF;
             border: none;  
         }
-  
+#banner .log p{display: none;}
+#banner .log:hover p{display: block;}
+#banner .log:hover {display:block;}
   .navbar{
-    background-color:#1085c4;
+    background-color:#3b5998;
     overflow:hidden;
     height:63px;
   }
@@ -131,7 +135,6 @@ body{
   .side-nav a{
     padding:10px 10px 10px 30px;
     text-decoration:none;
-    font-family:'Roboto slab',serif;
     font-size:22px;
     color:#ccc;
     display:block;

home.html

@@ -57,7 +57,7 @@ Simple, Fancy and Currency conversion
               document.documentElement.scrollTop = 0;
             }
     </script>
-     <nav class="navbar">
+     <a class="navbar">
          <span class ="open-slide">
             <a href="#" onclick="openSlideMenu()">
                 <svg width="30" height="30">
@@ -79,11 +79,8 @@ Simple, Fancy and Currency conversion
             <a href="categories/speed.php">Speed</a>
             <a href="login">Log in</a>
             <a href="login/signup.php">Sign up</a>
-
      </div> 
-     
      <script src="js/frontSide.js"></script>
-    
     <section id="banner">
         <div class="inner"> 
                 <header>
@@ -91,6 +88,8 @@ Simple, Fancy and Currency conversion
                     <p> An interactive Unit Calculator for all your needs. </p>
                     <a href="#main" class="more">Choose Conversion</a>
                 </header>
+                <a class="log" href="/login/index.html">login
+                <p>Restore your calculations</p></a>
         </div>
     </section> 
     <div id="main">
@@ -105,7 +104,7 @@ Simple, Fancy and Currency conversion
                             </div>
                         </div>
 
-                    <div class="box">
+                    <div class="box2">
                             <a href="" class="image fit"><img src="icons/area.png" width="400" height="355" alt="Area" /></a>
                             <div class="inner">
                                 <h2>Area</h2>
@@ -113,14 +112,14 @@ Simple, Fancy and Currency conversion
                             </div>
                     </div>
 
-                    <div class="box">
+                    <div class="box3">
                             <a href="" class="image fit"><img src="icons/temperature.png" width="400" height="355" alt="Temperature" /></a>
                             <div class="inner">
                                 <h2>Temperature</h2>
                                 <a href="categories/temperature.php" class="button style3 fit">Select</a>
                             </div>
                     </div>
-                    <div class="box">
+                    <div class="box4">
                             <a href="" class="image fit"><img src="icons/volume.png" width="400" height="355" alt="Volume" /></a>
                             <div class="inner">
                                 <h2>Volume</h2>
@@ -128,7 +127,7 @@ Simple, Fancy and Currency conversion
                             </div>
                     </div>
                     
-                    <div class="box">
+                    <div class="box5">
                             <a href="" class="image fit"><img src="icons/weight.png" width="400" height="355" alt="Weight" /></a>
                             <div class="inner">
                               <h2>Weight</h2>