speed

css/style.css

@@ -61,8 +61,9 @@ body{
 
     #banner p {
         color: rgba(255, 255, 255, 0.4);
-        font-size: 24px;
+        font-size: 1.5em;
         font-weight: 300;
+        font-family:'Roboto slab',serif;
     }
 
         @media screen and (max-width: 980px) {
@@ -84,20 +85,22 @@ body{
     #banner a {
         color: rgba(58, 28, 28, 0.75);
         text-decoration: none;
+        font-size:30px;
         border-bottom: 1px dotted;
-      font-family: 'Roboto slab', serif;
-      font-size: 30px;
+        font-family:'passion one',cursive;
+
     }
 
         #banner a:hover {
             color: #FFF;
             border: none;
         }
-#banner .log p{display: none;}
-#banner .log:hover p{display: block;}
-#banner .log:hover {display:block;}
+        #banner .log p{display: none;}
+        #banner .log:hover p{display: block;}
+        #banner .log:hover {display:block;}
+
   .navbar{
-    background-color:#3b5998;
+    background-color:#1085c4;
     overflow:hidden;
     height:63px;
   }
@@ -135,6 +138,7 @@ body{
   .side-nav a{
     padding:10px 10px 10px 30px;
     text-decoration:none;
+    font-family:'Roboto slab',serif;
     font-size:22px;
     color:#ccc;
     display:block;
@@ -184,6 +188,7 @@ body{
         width: 90%;
         max-width: 80em;
         margin: 0 auto;
+        align-items:flex-end;
     }
 
         @media screen and (max-width: 480px) {
@@ -193,6 +198,16 @@ body{
             }
 
         }
+        #main .items{align-items:baseline;
+          
+        }
+#items{       
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows:minmax(150px,auto);
+  max-width: 960px;
+}
 
     .button {
         -moz-appearance: none;

home.html

@@ -94,32 +94,32 @@ Simple, Fancy and Currency conversion
     </section> 
     <div id="main">
         <div class="inner">
-            <div class ="categories">
+            <div id="items" class ="box">
 
                     <div class="box">
                             <a href="" class="image fit"><img src="icons/length.png" width="400" height="355" alt="Length" /></a>
                             <div class="inner">
                                 <h2>Length</h2>
-                                <a href="categories/length.php" class="button fit" style="cursor: pointer;outline: 0px;background-color: #271010;color: black;">Select</a>
+                                <a href="categories/length.php" class="button style3 fit" >Select</a>
                             </div>
                         </div>
 
-                    <div class="box2">
+                    <div class="box">
                             <a href="" class="image fit"><img src="icons/area.png" width="400" height="355" alt="Area" /></a>
                             <div class="inner">
                                 <h2>Area</h2>
-                                <a href="categories/area.php" class="button style2 fit">Select</a>
+                                <a href="categories/area.php" class="button style3 fit">Select</a>
                             </div>
                     </div>
 
-                    <div class="box3">
+                    <div class="box">
                             <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="box4">
+                    <div class="box">
                             <a href="" class="image fit"><img src="icons/volume.png" width="400" height="355" alt="Volume" /></a>
                             <div class="inner">
                                 <h2>Volume</h2>
@@ -127,13 +127,21 @@ Simple, Fancy and Currency conversion
                             </div>
                     </div>
                     
-                    <div class="box5">
+                    <div class="box">
                             <a href="" class="image fit"><img src="icons/weight.png" width="400" height="355" alt="Weight" /></a>
                             <div class="inner">
                               <h2>Weight</h2>
                                 <a href="categories/weight.php" class="button style3 fit">Select</a>
                             </div>
                     </div>
+                    
+                    <div class="box">
+                        <a href="" class="image fit"><img src="icons/speed.png" width="400" height="355" alt="speed" /></a>
+                        <div class="inner">
+                            <h2>Speed</h2>
+                                <a href="categories/speed.php" class="button style3 fit">Select</a>
+                        </div>
+                    </div>
             </div>
         </div>