Final-Project-Course_4/index.html at main · code-haseeb/Final-Project-Course_4 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Final Project - Travel Recommendations</title>
    <!-- Load Tailwind CSS for styling -->
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* Use Inter font */
        body {
            font-family: 'Inter', sans-serif;
        }

        /* This is our simple 'page' system. By default, hide all pages. */
        .page {
            display: none;
        }

        /* The 'active' class will be used by JavaScript to show the current page. */
        .page.active {
            display: block;
        }

        /* Simple active state for nav links */
        .nav-link.active {
            background-color: #1d4ed8; /* A darker blue */
            font-weight: 600;
        }
    </style>
</head>
<body class="bg-gray-100">

    <!-- TASK 3: Navigation Bar (6 points) -->
    <!-- This nav is sticky, so it stays at the top, and uses flexbox for alignment. -->
    <nav class="bg-blue-600 text-white p-4 shadow-md sticky top-0 z-50">
        <div class="container mx-auto flex justify-between items-center">
            <h1 class="text-xl font-bold">My Travel Site</h1>
            <div class="space-x-2">
                <!--
                  These links use 'data-target' attributes to tell our JavaScript
                  which page section to show. The 'active' class is added on page load to the home link.
                -->
                <button data-target="home" class="nav-link active px-3 py-2 rounded-md hover:bg-blue-700 transition-colors">Home</button>
                <button data-target="about" class="nav-link px-3 py-2 rounded-md hover:bg-blue-700 transition-colors">About Us</button>
                <button data-target="contact" class="nav-link px-3 py-2 rounded-md hover:bg-blue-700 transition-colors">Contact Us</button>
            </div>
        </div>
    </nav>

    <!-- Main content container -->
    <main class="container mx-auto p-4 md:p-8">

        <!--
          TASK 2: Home Page (Part of 3 points)
          TASK 4: Home Page Introduction (1 point)
          This 'page' section is shown by default by having the 'active' class.
        -->
        <section id="home" class="page active">
            <div class="bg-white p-8 rounded-lg shadow-lg">
                <h2 class="text-3xl font-bold mb-4 text-blue-700">Welcome to Our Travel Guide!</h2>
                <p class="text-lg text-gray-700 leading-relaxed">
                    This is the introduction for the Home Page. We are excited to share our favorite travel destinations with you. Whether you're looking for a relaxing beach, a cultural journey to ancient temples, or an adventure in a new country, we have recommendations just for you. Browse our top picks below!
                </p>
            </div>

            <!-- This is where the recommendation tasks are fulfilled -->
            <div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-1 gap-8 mt-10">

                <!-- TASK 7: Beach Recommendation (2 images) (2 points) -->
                <article class="bg-white p-6 rounded-lg shadow-lg overflow-hidden">
                    <h3 class="text-2xl font-bold mb-4 text-cyan-700">Beach: The Maldives</h3>
                    <p class="text-gray-600 mb-6">A truly stunning destination with crystal-clear water and overwater bungalows.</p>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <img src="bali_1.jpeg" alt="A beautiful beach in the Maldives" class="w-full h-auto rounded-md shadow-md">
                        <img src="bali_2.jpg" alt="Clear turquoise water at a beach" class="w-full h-auto rounded-md shadow-md">
                    </div>
                </article>

                <!-- TASK 8: Temple Recommendation (2 images) (2 points) -->
                <article class="bg-white p-6 rounded-lg shadow-lg overflow-hidden">
                    <h3 class="text-2xl font-bold mb-4 text-orange-700">Temple: Angkor Wat, Cambodia</h3>
                    <p class="text-gray-600 mb-6">A massive and breathtaking temple complex, a UNESCO World Heritage site.</p>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <img src="colombia_1.jpg" alt="Angkor Wat temple at sunrise" class="w-full h-auto rounded-md shadow-md">
                        <img src="colombia_2.jpg" alt="Detailed stone carvings at Angkor Wat" class="w-full h-auto rounded-md shadow-md">
                    </div>
                </article>

                <!-- TASK 9: Country Recommendation (2 images) (2 points) -->
                <article class="bg-white p-6 rounded-lg shadow-lg overflow-hidden">
                    <h3 class="text-2xl font-bold mb-4 text-red-700">Country: Japan</h3>
                    <p class="text-gray-600 mb-6">A fascinating country offering a perfect blend of ancient tradition and modern technology.</p>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <img src="japan_1.webp" alt="Cherry blossoms in Japan" class="w-full h-auto rounded-md shadow-md">
                        <img src="japan_2.jpg" alt="Tokyo city skyline at night" class="w-full h-auto rounded-md shadow-md">
                    </div>
                </article>
            </div>
        </section>

        <!--
          TASK 2: About Us Page (Part of 3 points)
          TASK 5: About Us Page Elements (2 points)
          This page contains elements like a heading and paragraphs.
        -->
        <section id="about" class="page">
            <div class="bg-white p-8 rounded-lg shadow-lg">
                <h2 class="text-3xl font-bold mb-4 text-blue-700">About Us</h2>
                <div class="space-y-4 text-gray-700 leading-relaxed">
                    <p>This page has all the required 'About Us' elements. We are a team of passionate developers and travelers who created this website for our final project. Our mission is to share beautiful destinations and practice our web development skills.</p>
                    <p>We used HTML, Tailwind CSS, and a little bit of JavaScript to create this single-page application. All content is loaded in one file, and JavaScript is used to show and hide the different sections, giving it the feel of a multi-page website.</p>
                    <p>We hope you enjoy our recommendations!</p>
                </div>
            </div>
        </section>

        <!--
          TASK 2: Contact Us Page (Part of 3 points)
          TASK 6: Contact Us Page Email Form (1 point)
          This page contains the required HTML form.
        -->
        <section id="contact" class="page">
            <div class="bg-white p-8 rounded-lg shadow-lg max-w-2xl mx-auto">
                <h2 class="text-3xl font-bold mb-6 text-blue-700">Contact Us</h2>
                <p class="text-gray-600 mb-6">Have a question or a recommendation for us? Fill out the form below!</p>

                <!-- This form doesn't send an email, but it fulfills the HTML requirement. -->
                <form action="#" method="POST" onsubmit="event.preventDefault(); alert('Form submitted! (This is a demo)');">
                    <div class="mb-4">
                        <label for="name" class="block text-sm font-medium text-gray-700">Your Name</label>
                        <input type="text" id="name" name="name" required class="mt-1 block w-full p-3 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    <div class="mb-4">
                        <label for="email" class="block text-sm font-medium text-gray-700">Your Email</label>
                        <input type="email" id="email" name="email" required class="mt-1 block w-full p-3 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    <div class="mb-6">
                        <label for="message" class="block text-sm font-medium text-gray-700">Message</label>
                        <textarea id="message" name="message" rows="5" required class="mt-1 block w-full p-3 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"></textarea>
                    </div>
                    <div>
                        <button type="submit" class="w-full bg-blue-600 text-white py-3 px-4 rounded-md font-medium hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                            Send Message
                        </button>
                    </div>
                </form>
            </div>
        </section>

    </main>

    <!-- Footer -->
    <footer class="text-center p-4 mt-10 text-gray-600 text-sm">
        Final Project by Muhammad Haseeb
    </footer>

    <!-- JavaScript for Page Navigation -->
    <script>
        // Select all navigation links and all page sections
        const navLinks = document.querySelectorAll('.nav-link');
        const pages = document.querySelectorAll('.page');

        // Add a click event listener to each navigation link
        navLinks.forEach(link => {
            link.addEventListener('click', () => {
                const targetId = link.getAttribute('data-target');

                // 1. Remove 'active' class from all pages to hide them
                pages.forEach(page => {
                    page.classList.remove('active');
                });

                // 2. Add 'active' class to the target page to show it
                const targetPage = document.getElementById(targetId);
                targetPage.classList.add('active');

                // 3. Update active state on nav links
                navLinks.forEach(navLink => {
                    navLink.classList.remove('active');
                });
                link.classList.add('active');
            });
        });
    </script>

</body>
</html>