Deleted json and php(they were of no use) , then changed abit of my f…

…ooter styling (internal CSS).
Ms-Irungu · Oct 26, 2022 · 901a17e · 901a17e
1 parent 17cfc16
commit 901a17e
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 11 deletions.
diff --git a/compose.json b/compose.json
diff --git a/home.php b/home.php
diff --git a/index.html b/index.html
@@ -15,6 +15,35 @@
    <!-- CSS only -->
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
     <title>Kiambu</title>
+    <style>
+        footer{
+            margin:0;
+            padding:0;
+            box-sizing: border-box;
+        } 
+        .container{
+            max-width: 1170px;
+            margin: auto;
+        }
+        .row{
+            display:flex;
+            flex-direction: row;
+        }
+        ul{
+            list-style: none;
+        }
+        .footer{
+            background-color:black;
+            color:aquamarine;
+            padding: 30px 0px;
+
+        }
+        .footer-col{
+            width: 15%;
+            padding: 0 15%;
+        }
+
+    </style>
 </head>
 <body>
     <h1 class = "first-title">My First Web Map</h1>
@@ -29,17 +58,12 @@ <h1 class = "first-title">My First Web Map</h1>
             color:rgb(217, 15, 116);
             text-align: center;
             padding: 0.1em;
-            background-color:white ;
+            background-color:black ;
+            margin-bottom: 3px;
         }
         #map{
             height: 600px;
         }
-        footer{
-            background: black;
-        }
-        .footer-col{
-            padding-right: 30%;
-        }
 
     </style>
 
@@ -54,7 +78,30 @@ <h1 class = "first-title">My First Web Map</h1>
     marker.bindPopup("<b>Find Me</b><br>I'm here.").openPopup();
     </script>
 
-    <footer class="footer">
+     <footer class="footer">
+        <div class="cointainer">
+            <div class="row">
+                <div class="footer-col">
+                    <h4>Contributers</h4>
+                    <ul>
+                        <li><a href="https://www.openstreetmap.org/#map=15/-1.2681/36.7569">OpenStreetMap</a></li>
+                        <li><a href="https://leafletjs.com/">Leafletjs</a></li>
+                    </ul>
+                </div> 
+                <div class="footer-col">
+                    <h4>Authors</h4>
+                    <p1>Work done by Valentine Irungu.<br>Reg no: ENC222-0135/2019</p1>
+                    <!-- <a href="mailto:[email protected]" class="btn btn-primary">Send me an Email</a> -->
+                </div>
+                <div class="footer-col">
+                    <h4>Marginal Information</h4>
+                <p1>
+                    This is a functional map extracted from openstreet map by the use of leaflet js.<br>It's my first web mapping page.</p1>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <!-- <footer class="footer">
         <div class="footer-col">
             <h4>Contributers</h4>
             <ul>
@@ -74,7 +121,7 @@ <h4>Marginal Information</h4>
             </p1>
         </div>
         </div>
-    </footer>
+    </footer> -->
     <!-- JavaScript Bundle with Popper -->
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
    </body>