├── README.md
├── .github
    └── workflows
    │   └── azure-static-web-apps-blue-ocean-097c62710.yml
└── index.html


/README.md:
--------------------------------------------------------------------------------
 1 | # Destination Paradise
 2 | 
 3 | Welcome to **Destination Paradise** – a responsive and visually engaging travel website template designed to help users discover their dream getaway!
 4 | 
 5 | ## Overview
 6 | 
 7 | This project is a front-end template built with HTML, CSS, and JavaScript. It features:
 8 | - A full-screen header with an attractive background image and animated welcome messages.
 9 | - A navigation menu that smoothly scrolls to sections such as Destinations, Gallery, Offers, Testimonials, and Contact.
10 | - A **Destinations** section showcasing top travel spots with images and descriptions.
11 | - A **Special Offers** section highlighting exclusive travel deals.
12 | - A **Testimonials** section with client reviews.
13 | - A **Contact** section including a form for inquiries.
14 | - A newsletter subscription form in the footer.
15 | - Interactive elements like scroll-triggered animations and a “Back to Top” button.
16 | 
17 | ## Features
18 | 
19 | - **Responsive Design:** Optimized for desktops, tablets, and mobile devices.
20 | - **Animated UI:** Uses CSS animations and JavaScript’s Intersection Observer for smooth fade-in effects.
21 | - **Easy Navigation:** Clearly defined sections for a seamless user experience.
22 | - **Modern Aesthetics:** Clean layout with vibrant imagery and stylish components.
23 | 
24 | ## Technologies Used
25 | 
26 | - **HTML5** for structure.
27 | - **CSS3** for styling and animations.
28 | 
29 | ## Getting Started
30 | 
31 | ### Prerequisites
32 | 
33 | All you need is a modern web browser. No additional software or libraries are required.
34 | 
35 | ### Installation
36 | 
37 | 1. **Clone the Repository:**
38 |    ```bash
39 |    git clone https://github.com/Krishna18062005/Destination_Paradise.git
40 | 


--------------------------------------------------------------------------------
/.github/workflows/azure-static-web-apps-blue-ocean-097c62710.yml:
--------------------------------------------------------------------------------
 1 | name: Azure Static Web Apps CI/CD
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |       - main
 7 |   pull_request:
 8 |     types: [opened, synchronize, reopened, closed]
 9 |     branches:
10 |       - main
11 | 
12 | jobs:
13 |   build_and_deploy_job:
14 |     if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
15 |     runs-on: ubuntu-latest
16 |     name: Build and Deploy Job
17 |     steps:
18 |       - uses: actions/checkout@v3
19 |         with:
20 |           submodules: true
21 |           lfs: false
22 |       - name: Build And Deploy
23 |         id: builddeploy
24 |         uses: Azure/static-web-apps-deploy@v1
25 |         with:
26 |           azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_BLUE_OCEAN_097C62710 }}
27 |           repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
28 |           action: "upload"
29 |           ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
30 |           # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
31 |           app_location: "/" # App source code path
32 |           api_location: "" # Api source code path - optional
33 |           output_location: "/" # Built app content directory - optional
34 |           ###### End of Repository/Build Configurations ######
35 | 
36 |   close_pull_request_job:
37 |     if: github.event_name == 'pull_request' && github.event.action == 'closed'
38 |     runs-on: ubuntu-latest
39 |     name: Close Pull Request Job
40 |     steps:
41 |       - name: Close Pull Request
42 |         id: closepullrequest
43 |         uses: Azure/static-web-apps-deploy@v1
44 |         with:
45 |           azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_BLUE_OCEAN_097C62710 }}
46 |           action: "close"
47 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <title>Destination Paradise</title>
  7 |     <style>
  8 |       /* Global Styles */
  9 |       * {
 10 |         box-sizing: border-box;
 11 |         margin: 0;
 12 |         padding: 0;
 13 |       }
 14 |       body,
 15 |       html {
 16 |         font-family: Arial, sans-serif;
 17 |         background-color: #f5f5f5;
 18 |         color: #333;
 19 |         scroll-behavior: smooth;
 20 |       }
 21 |       a {
 22 |         text-decoration: none;
 23 |       }
 24 | 
 25 |       /* Animation keyframes */
 26 |       @keyframes fadeInUp {
 27 |         0% {
 28 |           opacity: 0;
 29 |           transform: translateY(20px);
 30 |         }
 31 |         100% {
 32 |           opacity: 1;
 33 |           transform: translateY(0);
 34 |         }
 35 |       }
 36 |       .animate {
 37 |         opacity: 0;
 38 |       }
 39 |       .animate.visible {
 40 |         animation: fadeInUp 1s ease-out forwards;
 41 |       }
 42 | 
 43 |       /* Header and Navigation */
 44 |       header {
 45 |         background: url("https://images.unsplash.com/photo-1493558103817-58b2924bce98?ixlib=rb-4.0.3&auto=format&fit=crop&w=1500&q=80")
 46 |           no-repeat center center/cover;
 47 |         height: 100vh;
 48 |         color: #fff;
 49 |         text-align: center;
 50 |         position: relative;
 51 |         display: flex;
 52 |         flex-direction: column;
 53 |         justify-content: center;
 54 |       }
 55 |       header::after {
 56 |         content: "";
 57 |         position: absolute;
 58 |         top: 0;
 59 |         left: 0;
 60 |         height: 100%;
 61 |         width: 100%;
 62 |         background: rgba(0, 0, 0, 0.5);
 63 |       }
 64 |       header h1,
 65 |       header p {
 66 |         position: relative;
 67 |         z-index: 1;
 68 |       }
 69 |       header h1 {
 70 |         font-size: 4em;
 71 |       }
 72 |       header p {
 73 |         font-size: 1.5em;
 74 |         margin: 20px 0 40px;
 75 |       }
 76 |       nav {
 77 |         position: absolute;
 78 |         top: 20px;
 79 |         width: 100%;
 80 |         z-index: 2;
 81 |         display: flex;
 82 |         justify-content: center;
 83 |       }
 84 |       nav ul {
 85 |         list-style: none;
 86 |         display: flex;
 87 |       }
 88 |       nav ul li {
 89 |         margin: 0 15px;
 90 |       }
 91 |       nav ul li a {
 92 |         color: #fff;
 93 |         font-size: 1.1em;
 94 |         transition: color 0.3s ease;
 95 |       }
 96 |       nav ul li a:hover {
 97 |         color: #f39c12;
 98 |       }
 99 | 
100 |       /* Section Styles */
101 |       section {
102 |         padding: 60px 20px;
103 |         text-align: center;
104 |       }
105 |       section h2 {
106 |         font-size: 2.5em;
107 |         margin-bottom: 20px;
108 |         color: #333;
109 |       }
110 | 
111 |       /* Features & Gallery */
112 |       .features,
113 |       .offers-container,
114 |       .testimonials-container {
115 |         display: flex;
116 |         flex-wrap: wrap;
117 |         justify-content: center;
118 |         gap: 30px;
119 |       }
120 |       .feature-item,
121 |       .offer-item {
122 |         background: #fff;
123 |         padding: 20px;
124 |         flex: 1 1 300px;
125 |         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
126 |         border-radius: 10px;
127 |         transition: transform 0.3s ease;
128 |       }
129 |       .feature-item:hover,
130 |       .offer-item:hover {
131 |         transform: translateY(-5px);
132 |       }
133 |       .feature-item img,
134 |       .offer-item img {
135 |         width: 100%;
136 |         border-radius: 10px;
137 |         transition: transform 0.3s ease;
138 |       }
139 |       .feature-item img:hover,
140 |       .offer-item img:hover {
141 |         transform: scale(1.05);
142 |       }
143 |       .feature-item h3,
144 |       .offer-item h3 {
145 |         margin-top: 15px;
146 |         color: #f39c12;
147 |       }
148 |       .feature-item p,
149 |       .offer-item p {
150 |         color: #555;
151 |         margin: 10px 0;
152 |       }
153 |       .offer-item a {
154 |         display: inline-block;
155 |         margin-top: 10px;
156 |         background: #f39c12;
157 |         color: #fff;
158 |         padding: 10px 20px;
159 |         border-radius: 20px;
160 |         transition: background 0.3s ease;
161 |       }
162 |       .offer-item a:hover {
163 |         background: #e67e22;
164 |       }
165 | 
166 |       /* Call to Action */
167 |       .cta {
168 |         background: #f39c12;
169 |         color: #fff;
170 |         padding: 50px 20px;
171 |         margin-top: 40px;
172 |         position: relative;
173 |         overflow: hidden;
174 |       }
175 |       .cta a {
176 |         background: #fff;
177 |         color: #f39c12;
178 |         padding: 15px 30px;
179 |         font-weight: bold;
180 |         border-radius: 30px;
181 |         transition: background 0.3s ease, color 0.3s ease;
182 |       }
183 |       .cta a:hover {
184 |         background: #e67e22;
185 |         color: #fff;
186 |       }
187 | 
188 |       /* Special Offers Section */
189 |       #offers {
190 |         background-color: #fafafa;
191 |       }
192 |       #offers h2 {
193 |         margin-bottom: 40px;
194 |       }
195 | 
196 |       /* Testimonials Section */
197 |       #testimonials {
198 |         background-color: #fff;
199 |         padding: 60px 20px;
200 |       }
201 |       .testimonials-container {
202 |         gap: 20px;
203 |       }
204 |       .testimonial-item {
205 |         background: #fafafa;
206 |         padding: 20px;
207 |         border-radius: 10px;
208 |         flex: 1 1 300px;
209 |         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
210 |         font-style: italic;
211 |         position: relative;
212 |       }
213 |       .testimonial-item h4 {
214 |         margin-top: 15px;
215 |         color: #f39c12;
216 |         font-style: normal;
217 |       }
218 | 
219 |       /* Contact Form */
220 |       #contact form {
221 |         max-width: 600px;
222 |         margin: 0 auto;
223 |       }
224 |       #contact input,
225 |       #contact textarea,
226 |       #contact button {
227 |         width: 100%;
228 |         padding: 10px;
229 |         margin: 10px 0;
230 |         border: 1px solid #ccc;
231 |         border-radius: 5px;
232 |       }
233 |       #contact button {
234 |         background: #f39c12;
235 |         color: #fff;
236 |         border: none;
237 |         cursor: pointer;
238 |         font-size: 1em;
239 |         transition: background 0.3s ease;
240 |       }
241 |       #contact button:hover {
242 |         background: #e67e22;
243 |       }
244 | 
245 |       /* Footer & Newsletter */
246 |       footer {
247 |         background: #333;
248 |         color: #fff;
249 |         padding: 20px;
250 |         text-align: center;
251 |       }
252 |       .newsletter {
253 |         margin-bottom: 20px;
254 |       }
255 |       .newsletter h3 {
256 |         margin-bottom: 10px;
257 |       }
258 |       .newsletter form {
259 |         display: flex;
260 |         justify-content: center;
261 |         flex-wrap: wrap;
262 |         gap: 10px;
263 |       }
264 |       .newsletter input[type="email"] {
265 |         flex: 1 1 250px;
266 |         padding: 10px;
267 |         border: none;
268 |         border-radius: 5px;
269 |       }
270 |       .newsletter button {
271 |         padding: 10px 20px;
272 |         background: #f39c12;
273 |         border: none;
274 |         border-radius: 5px;
275 |         color: #fff;
276 |         cursor: pointer;
277 |         transition: background 0.3s ease;
278 |       }
279 |       .newsletter button:hover {
280 |         background: #e67e22;
281 |       }
282 | 
283 |       /* Back to Top Button */
284 |       #back-to-top {
285 |         position: fixed;
286 |         bottom: 40px;
287 |         right: 40px;
288 |         background: #f39c12;
289 |         color: #fff;
290 |         padding: 10px 15px;
291 |         border: none;
292 |         border-radius: 50%;
293 |         cursor: pointer;
294 |         font-size: 1.2em;
295 |         opacity: 0.7;
296 |         transition: opacity 0.3s ease;
297 |         display: none;
298 |         z-index: 100;
299 |       }
300 |       #back-to-top:hover {
301 |         opacity: 1;
302 |       }
303 | 
304 |       /* Responsive Adjustments */
305 |       @media (max-width: 768px) {
306 |         header h1 {
307 |           font-size: 3em;
308 |         }
309 |         header p {
310 |           font-size: 1.2em;
311 |         }
312 |         nav ul li {
313 |           margin: 0 10px;
314 |         }
315 |         .features,
316 |         .offers-container,
317 |         .testimonials-container {
318 |           flex-direction: column;
319 |           align-items: center;
320 |         }
321 |       }
322 |     </style>
323 |   </head>
324 |   <body>
325 |     <!-- Header Section -->
326 |     <header id="home">
327 |       <nav>
328 |         <ul>
329 |           <li><a href="#home">Home</a></li>
330 |           <li><a href="#destinations">Destinations</a></li>
331 |           <li><a href="#gallery">Gallery</a></li>
332 |           <li><a href="#offers">Offers</a></li>
333 |           <li><a href="#testimonials">Testimonials</a></li>
334 |           <li><a href="#contact">Contact</a></li>
335 |         </ul>
336 |       </nav>
337 |       <h1 class="animate">Welcome to Destination Paradise</h1>
338 |       <p class="animate">Discover your dream getaway</p>
339 |     </header>
340 | 
341 |     <!-- Destinations Section -->
342 |     <section id="destinations">
343 |       <h2 class="animate">Our Top Destinations</h2>
344 |       <div class="features">
345 |         <div class="feature-item animate">
346 |           <img
347 |             src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
348 |             alt="Beach Escapes"
349 |           />
350 |           <h3>Beach Escapes</h3>
351 |           <p>
352 |             Relax on sun-kissed shores with crystal clear water and pristine
353 |             sands.
354 |           </p>
355 |         </div>
356 |         <div class="feature-item animate">
357 |           <img
358 |             src="https://images.unsplash.com/photo-1501785888041-af3ef285b470?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
359 |             alt="Mountain Retreats"
360 |           />
361 |           <h3>Mountain Retreats</h3>
362 |           <p>
363 |             Embrace tranquility with breathtaking mountain views and fresh air.
364 |           </p>
365 |         </div>
366 |         <div class="feature-item animate">
367 |           <img
368 |             src="https://images.unsplash.com/photo-1494526585095-c41746248156?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
369 |             alt="City Adventures"
370 |           />
371 |           <h3>City Adventures</h3>
372 |           <p>
373 |             Experience the vibrant life of cities rich in culture and history.
374 |           </p>
375 |         </div>
376 |       </div>
377 |     </section>
378 | 
379 |     <!-- Call-to-Action Section -->
380 |     <section class="cta">
381 |       <h2 class="animate">Plan Your Trip Today!</h2>
382 |       <a href="#contact" class="animate">Get in Touch</a>
383 |     </section>
384 | 
385 |     <!-- Gallery Section -->
386 |     <section id="gallery">
387 |       <h2 class="animate">Gallery</h2>
388 |       <div class="features">
389 |         <div class="feature-item animate">
390 |           <img
391 |             src="https://images.unsplash.com/photo-1516483638261-f4dbaf036963?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
392 |             alt="Scenic View"
393 |           />
394 |         </div>
395 |         <div class="feature-item animate">
396 |           <img
397 |             src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
398 |             alt="Sunset"
399 |           />
400 |         </div>
401 |         <div class="feature-item animate">
402 |           <img
403 |             src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
404 |             alt="Paradise"
405 |           />
406 |         </div>
407 |       </div>
408 |     </section>
409 | 
410 |     <!-- Special Offers Section -->
411 |     <section id="offers">
412 |       <h2 class="animate">Special Offers</h2>
413 |       <div class="offers-container">
414 |         <div class="offer-item animate">
415 |           <img
416 |             src="https://images.unsplash.com/photo-1541532713592-79a0317b6b77?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
417 |             alt="Summer Escape Deal"
418 |           />
419 |           <h3>Summer Escape Deal</h3>
420 |           <p>
421 |             Enjoy up to 30% off on our exclusive beach holiday packages this
422 |             summer!
423 |           </p>
424 |           <a href="#">Learn More</a>
425 |         </div>
426 |         <div class="offer-item animate">
427 |           <img
428 |             src="https://images.unsplash.com/photo-1506784365847-bbad939e9335?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
429 |             alt="Mountain Adventure"
430 |           />
431 |           <h3>Mountain Adventure</h3>
432 |           <p>
433 |             Get special rates on mountain retreats and hiking tours. Book now!
434 |           </p>
435 |           <a href="#">Learn More</a>
436 |         </div>
437 |         <div class="offer-item animate">
438 |           <img
439 |             src="https://images.unsplash.com/photo-1568605114967-8130f3a36994?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
440 |             alt="City Break Special"
441 |           />
442 |           <h3>City Break Special</h3>
443 |           <p>
444 |             Discover the charm of the city with our limited-time deals for urban
445 |             explorers.
446 |           </p>
447 |           <a href="#">Learn More</a>
448 |         </div>
449 |       </div>
450 |     </section>
451 | 
452 |     <!-- Testimonials Section -->
453 |     <section id="testimonials">
454 |       <h2 class="animate">What Our Clients Say</h2>
455 |       <div class="testimonials-container">
456 |         <div class="testimonial-item animate">
457 |           <p>
458 |             "The trip was a dream come true! Every detail was perfect. I can't
459 |             wait to book my next adventure."
460 |           </p>
461 |           <h4>- Alex Johnson</h4>
462 |         </div>
463 |         <div class="testimonial-item animate">
464 |           <p>
465 |             "Exceptional service and breathtaking destinations. Destination
466 |             Paradise exceeded all my expectations!"
467 |           </p>
468 |           <h4>- Maria Rodriguez</h4>
469 |         </div>
470 |         <div class="testimonial-item animate">
471 |           <p>
472 |             "A seamless experience from booking to the final return. Highly
473 |             recommended for a hassle-free vacation."
474 |           </p>
475 |           <h4>- David Lee</h4>
476 |         </div>
477 |       </div>
478 |     </section>
479 | 
480 |     <!-- Contact Section -->
481 |     <section id="contact">
482 |       <h2 class="animate">Contact Us</h2>
483 |       <form action="#" method="post" class="animate">
484 |         <input type="text" name="name" placeholder="Your Name" required />
485 |         <input type="email" name="email" placeholder="Your Email" required />
486 |         <textarea
487 |           name="message"
488 |           rows="5"
489 |           placeholder="Your Message"
490 |           required
491 |         ></textarea>
492 |         <button type="submit">Send Message</button>
493 |       </form>
494 |     </section>
495 | 
496 |     <!-- Footer with Newsletter Subscription -->
497 |     <footer>
498 |       <div class="newsletter">
499 |         <h3 class="animate">Subscribe to Our Newsletter</h3>
500 |         <form action="#" method="post" class="animate">
501 |           <input
502 |             type="email"
503 |             name="newsletter-email"
504 |             placeholder="Enter your email"
505 |             required
506 |           />
507 |           <button type="submit">Subscribe</button>
508 |         </form>
509 |       </div>
510 |       <p>&copy; 2025 Destination Paradise. All Rights Reserved.</p>
511 |     </footer>
512 | 
513 |     <!-- Back to Top Button -->
514 |     <button id="back-to-top">&#8679;</button>
515 | 
516 |     <script>
517 |       // IntersectionObserver to add animation on scroll
518 |       const observer = new IntersectionObserver(
519 |         (entries) => {
520 |           entries.forEach((entry) => {
521 |             if (entry.isIntersecting) {
522 |               entry.target.classList.add("visible");
523 |             }
524 |           });
525 |         },
526 |         { threshold: 0.2 }
527 |       );
528 | 
529 |       document.querySelectorAll(".animate").forEach((el) => {
530 |         observer.observe(el);
531 |       });
532 | 
533 |       // Back to Top button functionality
534 |       const btnTop = document.getElementById("back-to-top");
535 |       window.addEventListener("scroll", () => {
536 |         if (window.scrollY > 300) {
537 |           btnTop.style.display = "block";
538 |         } else {
539 |           btnTop.style.display = "none";
540 |         }
541 |       });
542 | 
543 |       btnTop.addEventListener("click", () => {
544 |         window.scrollTo({ top: 0, behavior: "smooth" });
545 |       });
546 |     </script>
547 |   </body>
548 | </html>
549 | 


--------------------------------------------------------------------------------