80% of the tasks done.

kelechukwufavour · Aug 11, 2024 · efb8816 · efb8816
commit efb8816
Show file tree

Hide file tree

Showing 40 changed files with 747 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,2 @@
+This portfolio Project is a simple Travel Landing Page.
+AUTHOR: KELECHUKWUFAVOUR
diff --git a/categories.html b/categories.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Categories</title>
+    <link rel="stylesheet" href="styles.css" />
+</head>
+<body>
+    <section id="category-section" class="category-section">
+        <h2 class="section-title">CATEGORY</h2>
+        <p class="section-subtitle">We Offer Best Services</p>
+        <div class="services-container">
+            <div class="service-item">
+                <img src="images/Group 48.png" alt="Calculated Weather" class="service-img" />
+                <h3 class="service-title">Calculated Weather</h3>
+                <p class="service-description">
+                    Built Wicket longer admire do barton vanity itself do in it.
+                </p>
+            </div>
+            <div class="red-shape"></div>
+            <div class="service-item">
+                <img src="images/Group 51.png" alt="Best Flights" class="service-img" />
+                <h3 class="service-title">Best Flights</h3>
+                <p class="service-description">
+                    Engrossed listening. Park gate sell they west hard for the.
+                </p>
+            </div>
+            <div class="red-shape"></div>
+            <div class="service-item">
+                <img src="images/Group 50.png" alt="Local Events" class="service-img" />
+                <h3 class="service-title">Local Events</h3>
+                <p class="service-description">
+                    Barton vanity itself do in it. Preferred to men it engrossed listening.
+                </p>
+            </div>
+            <div class="red-shape"></div>
+            <div class="service-item">
+                <img src="images/Group 49.png" alt="Customization" class="service-img" />
+                <h3 class="service-title">Customization</h3>
+                <p class="service-description">
+                    We deliver outsourced aviation services for military customers.
+                </p>
+            </div>
+        </div>
+    </section>
+</body>
+</html>
diff --git a/destinations.html b/destinations.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Destinations</title>
+    <link rel="stylesheet" href="styles.css" />
+</head>
+<body>
+    <section class="location">
+        <div class="location-heading">
+            <h2>Top Selling</h2>
+            <h2>Top Destinations</h2>
+        </div>
+        <div class="top-locations">
+            <div class="location-item">
+                <img src="images/Destination.png" alt="Rome Picture" />
+                <p>Rome, Italy <span>$5.42k</span></p>
+                <p><span class="unicode">&#8663;</span> 10 Days Trip</p>
+            </div>
+            <div class="location-item">
+                <img src="images/destination2.png" alt="London Clock Tower" />
+                <p>London, UK <span>$4.2k</span></p>
+                <p><span class="unicode">&#8663;</span> 12 Days Trip</p>
+            </div>
+            <div class="location-item">
+                <img src="images/Rectangle 14.png" alt="Full Europe" />
+                <p>Full Europe <span>$15k</span></p>
+                <p><span class="unicode">&#8663;</span> 28 Days Trip</p>
+            </div>
+            <div class="location-pic">
+                <img src="images/Decore1.png" alt="Decorative Image" />
+            </div>
+        </div>
+    </section>
+</body>
+</html>
diff --git a/footer.html b/footer.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Header</title>
+    <link rel="stylesheet" href="styles.css" />
+</head>
+<body>
+<footer>
+    <div class="footer">
+        <div class="jadoo">
+            <h3>Jadoo.</h3>
+            <p>Book your trip in minutes, get full control for much longer.</p>
+        </div>
+        <div class="company">
+            <h3>Company</h3>
+            <p>About</p>
+            <p>Careers</p>
+            <p>Mobile</p>
+        </div>
+        <div class="contact">
+            <h3>Contact</h3>
+            <p>Help/FAQ</p>
+            <p>Press</p>
+            <p>Affiliates</p>
+        </div>
+        <div class="more">
+            <h3>More</h3>
+            <p>Airline fees</p>
+            <p>Airline</p>
+            <p>Low fare tips</p>
+        </div>
+        <div class="socials">
+            <div class="social-icons">
+                <img class="social-media" src="images/facebook.png" alt="Facebook" />
+                <img class="social-media" src="images/instagram.png" alt="Instagram" />
+                <img class="social-media" src="images/twitter.png" alt="Twitter" />
+            </div>
+            <div class="app-section">
+                <p>Discover our app</p>
+                <div class="app-buttons">
+                    <button class="install-btn">
+                        <img src="images/google.png" alt="Google Play Store" />
+                        Get on Google Playstore
+                    </button>
+                    <button class="install-btn">
+                        <img src="images/apple.png" alt="Apple App Store" />
+                        Available on App Store
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="reference">
+        <p>All rights reserved @Jadoo.co</p>
+    </div>
+</footer>
diff --git a/header.html b/header.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Header</title>
+    <link rel="stylesheet" href="styles.css" />
+</head>
+<body>
+    <header>
+        <nav class="top-nav"> 
+            <!-- Navigation and Logo Container -->
+            <div class="nav-container">
+                <!-- Logo Section -->
+                <div class="logo-container">
+                    <img src="images/logo.png" alt="logo" class="logo" />
+                </div>
+
+                <!-- Navigation Menu -->
+                <div class="menu-container">
+                    <button class="nav-btn" onclick="location.href='#destinations'">Destinations</button>
+                    <button class="nav-btn" onclick="location.href='#hotels'">Hotels</button>
+                    <button class="nav-btn" onclick="location.href='#flights'">Flights</button>
+                    <button class="nav-btn" onclick="location.href='#bookings'">Bookings</button>
+                    <button class="nav-btn" onclick="location.href='#login'">Login</button>
+                    <button class="sign-up-btn">Sign Up</button>
+                    <select id="language-select" class="language-select">
+                        <option value="en">En</option>
+                        <option value="yo">Yoruba</option>
+                        <option value="ha">Hausa</option>
+                        <option value="pidgin">Pidgin</option>
+                        <option value="ig">Igbo</option>
+                    </select>
+                </div>
+            </div>
+        </nav>
+    </header>
+</body>
+</html>
diff --git a/hero.html b/hero.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hero Section</title>
+    <link rel="stylesheet" href="styles.css" />
+</head>
+<body>
+    <section class="hero-section">
+        <!-- Overlay Images -->
+        <div class="bg-container">
+            <img class="bg-img" src="images/decore.png" alt="Decorative Image" />
+        </div>
+        <div class="image-overlay">
+            <img class="human-img" src="images/hero.png" alt="Human Image" />
+        </div>
+
+        <!-- Main Content -->
+        <div class="text-section">
+            <p class="text-one">BEST DESTINATIONS AROUND THE WORLD</p>
+            <h1 class="h1">Travel, enjoy and live a new and full life</h1>
+            <p class="content">
+                Built Wicket longer admire do barton vanity itself do in it.
+                Preferred to sportsmen it engrossed listening. Park gate sell they
+                west hard for the.
+            </p>
+            <img src="images/zizzag.png" alt="Decorative Line" class="red-line" />
+            <div class="play-demo">
+                <button class="find-btn">Find out more</button>
+                <button class="play-btn">&#9658;</button>
+                <p>Play Demo</p>
+            </div>
+        </div>
+
+
+    </section>
+</body>
+</html>
diff --git a/images/Destination.png b/images/Destination.png
diff --git a/images/Group 4.png b/images/Group 4.png
diff --git a/images/Group 42.png b/images/Group 42.png
diff --git a/images/Group 48.png b/images/Group 48.png
diff --git a/images/Group 49.png b/images/Group 49.png
diff --git a/images/Group 5.png b/images/Group 5.png
diff --git a/images/Group 50.png b/images/Group 50.png
diff --git a/images/Group 51.png b/images/Group 51.png
diff --git a/images/Group 63.png b/images/Group 63.png
diff --git a/images/Group 78.png b/images/Group 78.png
diff --git a/images/Rectangle 14.png b/images/Rectangle 14.png
diff --git a/images/apple.png b/images/apple.png
diff --git a/images/decore.png b/images/decore.png
diff --git a/images/decore1.png b/images/decore1.png
diff --git a/images/destination2.png b/images/destination2.png
diff --git a/images/facebook.png b/images/facebook.png
diff --git a/images/favicon.ico b/images/favicon.ico
diff --git a/images/google.png b/images/google.png
diff --git a/images/hero.png b/images/hero.png
diff --git a/images/image 27.png b/images/image 27.png
diff --git a/images/image 28.png b/images/image 28.png
diff --git a/images/image 30.png b/images/image 30.png
diff --git a/images/image 31.png b/images/image 31.png
diff --git a/images/instagram.png b/images/instagram.png
diff --git a/images/logo.png b/images/logo.png
diff --git a/images/plane.png b/images/plane.png
diff --git a/images/plane1.png b/images/plane1.png
diff --git a/images/twitter.png b/images/twitter.png
diff --git a/images/zizzag.png b/images/zizzag.png
diff --git a/index.html b/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Travel Website Landing Page</title>
+    <link rel="icon" href="images/favicon.ico" type="image/x-icon">
+    <link rel="stylesheet" href="styles.css" />
+    <script defer src="script.js"></script>
+</head>
+<body>
+    <div id="header"></div>
+    <div id="hero"></div>
+    <div id="categories"></div>
+    <div id="destinations"></div>
+    <div id="subscribe"></div>
+    <div id="footer"></div>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "jadoo_travels",
+  "version": "1.0.0",
+  "main": "script.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "description": ""
+}
diff --git a/script.js b/script.js
@@ -0,0 +1,17 @@
+document.addEventListener("DOMContentLoaded", function() {
+    function loadSection(id, file) {
+        fetch(file)
+            .then(response => response.text())
+            .then(data => {
+                document.getElementById(id).innerHTML = data;
+            })
+            .catch(error => console.error('Error loading section:', error));
+    }
+
+    loadSection('header', 'header.html');
+    loadSection('hero', 'hero.html');
+    loadSection('categories', 'categories.html');
+    loadSectionoadSection('destinations', 'destinations.html');
+    loadSection('subscribe', 'subscribe.html');
+    loadSection('footer', 'footer.html');
+});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		This portfolio Project is a simple Travel Landing Page.
		AUTHOR: KELECHUKWUFAVOUR