fixed footer and made it better on all pages by expanding info

IbroRebronja · May 22, 2024 · 2755520 · 2755520
1 parent 454bdcf
commit 2755520
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 30 deletions.
diff --git a/index.html b/index.html
@@ -85,12 +85,21 @@ <h2>Highlights</h2>
   </aside>
 
   <footer>
-    <ul>
-      <li><a href="https://www.instagram.com/enjoy.bosnia.herzegovina/?hl=en" target="_blank"><img
-            src="images/icons/instagram.png" alt="Instagram Logo"></a></li>
-      <li><a href="https://www.facebook.com/groups/visitbosnia/" target="_blank"><img src="images/icons/facebook.png"
-            alt="facebook Logo"></a></li>
-    </ul>
+    <div class="footer-left">
+      <p>
+        <a href="#forum">Forum</a> | 
+        <a href="#schedules">Schedules</a> | 
+        <a href="#about">About BiHCities</a> | 
+        <a href="#contact">Contact Us</a>
+      </p>
+      <p>&copy; 2024 Bosnia & Herzegovina Cities. All Rights Reserved. <a href="#terms">Terms of Use</a> | <a href="#privacy">Privacy Policy</a></p>
+    </div>
+    <div class="footer-right">
+      <ul>
+        <li><a href="https://www.instagram.com/enjoy.bosnia.herzegovina/?hl=en" target="_blank"><img src="images/icons/instagram.png" alt="Instagram Logo"></a></li>
+        <li><a href="https://www.facebook.com/groups/visitbosnia/" target="_blank"><img src="images/icons/facebook.png" alt="facebook Logo"></a></li>
+      </ul>
+    </div>
   </footer>
 
 </body>

diff --git a/login.html b/login.html
@@ -92,12 +92,21 @@ <h4>Don't have an account? <a href="register.html">Sign Up</a></h4>
   </aside>
 
   <footer>
-    <ul>
-      <li><a href="https://www.instagram.com/enjoy.bosnia.herzegovina/?hl=en" target="_blank"><img
-            src="images/icons/instagram.png" alt="Instagram Logo"></a></li>
-      <li><a href="https://www.facebook.com/groups/visitbosnia/" target="_blank"><img src="images/icons/facebook.png"
-            alt="facebook Logo"></a></li>
-    </ul>
+    <div class="footer-left">
+      <p>
+        <a href="#forum">Forum</a> | 
+        <a href="#schedules">Schedules</a> | 
+        <a href="#about">About BiHCities</a> | 
+        <a href="#contact">Contact Us</a>
+      </p>
+      <p>&copy; 2024 Bosnia & Herzegovina Cities. All Rights Reserved. <a href="#terms">Terms of Use</a> | <a href="#privacy">Privacy Policy</a></p>
+    </div>
+    <div class="footer-right">
+      <ul>
+        <li><a href="https://www.instagram.com/enjoy.bosnia.herzegovina/?hl=en" target="_blank"><img src="images/icons/instagram.png" alt="Instagram Logo"></a></li>
+        <li><a href="https://www.facebook.com/groups/visitbosnia/" target="_blank"><img src="images/icons/facebook.png" alt="facebook Logo"></a></li>
+      </ul>
+    </div>
   </footer>
 </body>
 

diff --git a/places.html b/places.html
@@ -233,12 +233,21 @@ <h2>Bosnia and Herzegovina</h2>
   </aside>
 
   <footer>
-    <ul>
-      <li><a href="https://www.instagram.com/enjoy.bosnia.herzegovina/?hl=en" target="_blank"><img src="images/icons/instagram.png"
-            alt="Instagram Logo"></a></li>
-      <li><a href="https://www.facebook.com/groups/visitbosnia/" target="_blank"><img
-            src="images/icons/facebook.png" alt="facebook Logo"></a></li>
-    </ul>
+    <div class="footer-left">
+      <p>
+        <a href="#forum">Forum</a> | 
+        <a href="#schedules">Schedules</a> | 
+        <a href="#about">About BiHCities</a> | 
+        <a href="#contact">Contact Us</a>
+      </p>
+      <p>&copy; 2024 Bosnia & Herzegovina Cities. All Rights Reserved. <a href="#terms">Terms of Use</a> | <a href="#privacy">Privacy Policy</a></p>
+    </div>
+    <div class="footer-right">
+      <ul>
+        <li><a href="https://www.instagram.com/enjoy.bosnia.herzegovina/?hl=en" target="_blank"><img src="images/icons/instagram.png" alt="Instagram Logo"></a></li>
+        <li><a href="https://www.facebook.com/groups/visitbosnia/" target="_blank"><img src="images/icons/facebook.png" alt="facebook Logo"></a></li>
+      </ul>
+    </div>
   </footer>
 
 </body>

diff --git a/register.html b/register.html
@@ -165,12 +165,21 @@ <h4>Already have an account? <a href="login.html">Log in</a></h4>
   </aside>
 
   <footer>
-    <ul>
-      <li><a href="https://www.instagram.com/enjoy.bosnia.herzegovina/?hl=en" target="_blank"><img
-            src="images/icons/instagram.png" alt="Instagram Logo"></a></li>
-      <li><a href="https://www.facebook.com/groups/visitbosnia/" target="_blank"><img src="images/icons/facebook.png"
-            alt="facebook Logo"></a></li>
-    </ul>
+    <div class="footer-left">
+      <p>
+        <a href="#forum">Forum</a> | 
+        <a href="#schedules">Schedules</a> | 
+        <a href="#about">About BiHCities</a> | 
+        <a href="#contact">Contact Us</a>
+      </p>
+      <p>&copy; 2024 Bosnia & Herzegovina Cities. All Rights Reserved. <a href="#terms">Terms of Use</a> | <a href="#privacy">Privacy Policy</a></p>
+    </div>
+    <div class="footer-right">
+      <ul>
+        <li><a href="https://www.instagram.com/enjoy.bosnia.herzegovina/?hl=en" target="_blank"><img src="images/icons/instagram.png" alt="Instagram Logo"></a></li>
+        <li><a href="https://www.facebook.com/groups/visitbosnia/" target="_blank"><img src="images/icons/facebook.png" alt="facebook Logo"></a></li>
+      </ul>
+    </div>
   </footer>
 </body>
 

diff --git a/styles/shared.css b/styles/shared.css
@@ -70,7 +70,32 @@ header nav a:hover {
 footer {
   margin-top: auto;
   background: linear-gradient(70deg, rgb(24, 24, 24), rgb(25, 29, 29));
-  padding: 2.25rem 0;
+  padding: 2.25rem 4rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.footer-left {
+  color: white;
+}
+
+.footer-left a {
+  color: white;
+  text-decoration: none;
+}
+
+.footer-right ul {
+  display: flex;
+}
+
+.footer-right li {
+  margin-left: 10px;
+}
+
+.footer-right img {
+  width: 100%;
+  height: 100%;
 }
 
 footer ul {
@@ -84,11 +109,6 @@ footer li {
   margin: 0 3.125rem;
 }
 
-footer img {
-  width: 100%;
-  height: 100%;
-}
-
 .menu-btn {
   width: 3rem;
   height: 3rem;