add banner img

html/index.html

@@ -5,6 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>FlyLAF: Your Gateway to Convenient Travel</title>
     <style>
+        img {
+            max-width: 100%;
+            height: auto;
+        }
         :root {
             --primary: #2E4053; /* Blue */
             --secondary: #5DADE2; /* Teal */
@@ -27,17 +31,6 @@
             position: relative;
         }
 
-        header .banner {
-            width: 100%;
-            height: 300px; /* Adjust the height of the banner */
-            overflow: hidden;
-        }
-
-        header .banner img {
-            width: 100%;
-            height: 100%;
-            object-fit: cover; /* Ensures the image fills the container and is not distorted */
-        }
 
         header h1 {
             margin: 0;
@@ -179,7 +172,7 @@
     </header>
 
 <div class="banner">
-    <img src="nothing.jpg" alt="Banner Image">
+    <img src="./img/wide-southern-plane.JPG" alt="Banner Image">
 </div>
 
     <section class="hero">