Added travel app (#883)

Avdhesh-Varshney · Oct 13, 2024 · 20491a3 · 20491a3
1 parent e20544b
commit 20491a3
Show file tree

Hide file tree

Showing 19 changed files with 821 additions and 0 deletions.
diff --git a/Vanilla-JS-Projects/Basic/Travel-App/README.md b/Vanilla-JS-Projects/Basic/Travel-App/README.md
@@ -0,0 +1,66 @@
+<h1 align='center'><b>💥 Tour Guide 💥</b></h1>
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h3 align='center'>Tech Stack Used 🎮</h3>
+<!-- enlist all the technologies used to create this project from them (Remove comment using 'ctrl+z' or 'command+z') -->
+
+<div align='center'>
+
+  ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white) 
+   ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) 
+  <!-- ![jQuery](https://img.shields.io/badge/jquery-%230769AD.svg?style=for-the-badge&logo=jquery&logoColor=white) -->
+  <!-- ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) -->
+  <!-- ![Redux](https://img.shields.io/badge/redux-%23593d88.svg?style=for-the-badge&logo=redux&logoColor=white) -->
+  <!-- ![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white) -->
+  <!-- ![Web3.js](https://img.shields.io/badge/web3.js-F16822?style=for-the-badge&logo=web3.js&logoColor=white) -->
+  <!-- ![Express.js](https://img.shields.io/badge/express.js-%23404d59.svg?style=for-the-badge&logo=express&logoColor=%2361DAFB) -->
+  <!-- ![Angular.js](https://img.shields.io/badge/angular.js-%23E23237.svg?style=for-the-badge&logo=angularjs&logoColor=white) -->
+  <!-- ![Next JS](https://img.shields.io/badge/Next-black?style=for-the-badge&logo=next.js&logoColor=white) -->
+  <!-- ![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white) -->
+  <!-- ![Vue.js](https://img.shields.io/badge/vuejs-%2335495e.svg?style=for-the-badge&logo=vuedotjs&logoColor=%234FC08D) -->
+  <!-- ![MongoDB](https://img.shields.io/badge/MongoDB-%234ea94b.svg?style=for-the-badge&logo=mongodb&logoColor=white) -->
+</div>
+
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Description 📃
+
+<div>
+   <p>This Tour guide app gives the recoomendations of most famous places to visit .</p> 
+
+</div>
+
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: How to run it? 🕹️
+
+- Fork this repository.
+- Clone the forked repository.
+- Open index.html in your web browser to start your culinary exploration.
+
+
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Screenshots 📸
+<!-- add the screenshot of the project (Mandatory) -->
+![Adviceimg](./screenshot.webp)
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h4 align='center'>Developed By <b><i>Aditi Jain</i></b> 👦</h4>
+<p align='center'>
+  <a href='https://github.com/Aditijainnn'>
+    <img src='https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white' />
+  </a>
+</p>
+
+<h4 align='center'>Happy Coding 🧑‍💻</h4>
+
+<h3 align="center">Show some &nbsp;❤️&nbsp; by &nbsp;🌟&nbsp; this repository!</h3>
diff --git a/Vanilla-JS-Projects/Basic/Travel-App/img/Screenshot 2023-07-14 173347.png b/Vanilla-JS-Projects/Basic/Travel-App/img/Screenshot 2023-07-14 173347.png
diff --git a/Vanilla-JS-Projects/Basic/Travel-App/img/Screenshot 2023-07-14 173807.png b/Vanilla-JS-Projects/Basic/Travel-App/img/Screenshot 2023-07-14 173807.png
diff --git a/Vanilla-JS-Projects/Basic/Travel-App/img/Screenshot 2023-07-14 174151.png b/Vanilla-JS-Projects/Basic/Travel-App/img/Screenshot 2023-07-14 174151.png
diff --git a/Vanilla-JS-Projects/Basic/Travel-App/img/pexels-ajay-donga-2174656.jpg b/Vanilla-JS-Projects/Basic/Travel-App/img/pexels-ajay-donga-2174656.jpg
diff --git a/Vanilla-JS-Projects/Basic/Travel-App/img/pexels-alex-azabache-3214958.jpg b/Vanilla-JS-Projects/Basic/Travel-App/img/pexels-alex-azabache-3214958.jpg
diff --git a/Vanilla-JS-Projects/Basic/Travel-App/img/pexels-andrei-tanase-1271619.jpg b/Vanilla-JS-Projects/Basic/Travel-App/img/pexels-andrei-tanase-1271619.jpg
diff --git a/Vanilla-JS-Projects/Basic/Travel-App/img/pexels-josh-hild-2422259.jpg b/Vanilla-JS-Projects/Basic/Travel-App/img/pexels-josh-hild-2422259.jpg
diff --git a/Vanilla-JS-Projects/Basic/Travel-App/img/pexels-paulo-marcelo-martins-2412606.jpg b/Vanilla-JS-Projects/Basic/Travel-App/img/pexels-paulo-marcelo-martins-2412606.jpg
diff --git a/Vanilla-JS-Projects/Basic/Travel-App/img/pexels-quang-nguyen-vinh-2132126.jpg b/Vanilla-JS-Projects/Basic/Travel-App/img/pexels-quang-nguyen-vinh-2132126.jpg
diff --git a/Vanilla-JS-Projects/Basic/Travel-App/img/pexels-sam-kolder-2387871.jpg b/Vanilla-JS-Projects/Basic/Travel-App/img/pexels-sam-kolder-2387871.jpg
diff --git a/Vanilla-JS-Projects/Basic/Travel-App/img/pexels-spencer-davis-4356144.jpg b/Vanilla-JS-Projects/Basic/Travel-App/img/pexels-spencer-davis-4356144.jpg
diff --git a/Vanilla-JS-Projects/Basic/Travel-App/img/pexels-stijn-dijkstra-2499699.jpg b/Vanilla-JS-Projects/Basic/Travel-App/img/pexels-stijn-dijkstra-2499699.jpg
diff --git a/Vanilla-JS-Projects/Basic/Travel-App/img/pexels-zakaria-boumliha-2827374.jpg b/Vanilla-JS-Projects/Basic/Travel-App/img/pexels-zakaria-boumliha-2827374.jpg
diff --git a/Vanilla-JS-Projects/Basic/Travel-App/img/video (1080p).mp4 b/Vanilla-JS-Projects/Basic/Travel-App/img/video (1080p).mp4
diff --git a/Vanilla-JS-Projects/Basic/Travel-App/index.html b/Vanilla-JS-Projects/Basic/Travel-App/index.html
@@ -0,0 +1,220 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="styles.css" />
+    <title>Travel Guide</title>
+  </head>
+  <body>
+    <nav>
+      <div class="nav__logo">Tourguide<span>.</span></div>
+      <ul class="nav__links">
+        <li class="link"><a href="#">Home</a></li>
+        <li class="link"><a href="#">Destinations</a></li>
+        <li class="link"><a href="#">Pricing</a></li>
+        <li class="link"><a href="#">Reviews</a></li>
+      </ul>
+      <button class="btn">Contact Us</button>
+    </nav>
+    <header>
+      <div class="section__container header__container">
+        <div class="header__image">
+          <img src="https://i.ibb.co/88Qnjxg/pexels-josh-hild-2422259.jpg" alt="header" />
+          <img src="https://i.ibb.co/w4Jqjdf/pexels-andrei-tanase-1271619.jpg" alt="header" />
+        </div>
+        <div class="header__content">
+          <div>
+            <p class="sub__header">Book Now</p>
+            <h1>Your Friendly Neighbhourhood<br />Tour Guide</h1>
+            <p class="section__subtitle">
+              Find Your Perfect Getaway.We are the best travel
+              agency and we are providing the best travel services for our
+              clients.
+            </p>
+            <div class="action__btns">
+              <button class="btn">Plan a Trip</button>
+              <div class="story">
+                <div class="video">
+                  <img src="https://i.ibb.co/KwHd8PQ/pexels-stijn-dijkstra-2499699.jpg" type="video/mp4"></img> 
+                  <span><i class="ri-play-fill"></i></span>
+                </div>
+                <span>Watch our story</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+
+    <section class="section__container destination__container">
+      <div class="section__header">
+        <div>
+          <h2 class="section__title">Explore top destinations</h2>
+          <p class="section__subtitle">
+            Explore your suitable and dream places around the world. Here you
+            can find your right destination.
+          </p>
+        </div>
+        <div class="destination__nav">
+          <span><i class="ri-arrow-left-s-line"></i></span>
+          <span><i class="ri-arrow-right-s-line"></i></span>
+        </div>
+      </div>
+      <div class="destination__grid">
+        <div class="destination__card">
+          <img src="https://i.ibb.co/kQ2s7bH/pexels-paulo-marcelo-martins-2412606.jpg" alt="destination" />
+          <div class="destination__details">
+            <p class="destination__title">Eiffel Tower</p>
+            <p class="destination__subtitle">Paris</p>
+          </div>
+        </div>
+        <div class="destination__card">
+          <img src="https://i.ibb.co/s248xRX/pexels-quang-nguyen-vinh-2132126.jpg" alt="destination" />
+          <div class="destination__details">
+            <p class="destination__title">Ho Chi Minn</p>
+            <p class="destination__subtitle">Vietnam</p>
+          </div>
+        </div>
+        <div class="destination__card">
+          <img src="https://i.ibb.co/Z2FMDPZ/pexels-sam-kolder-2387871.jpg" alt="destination" />
+          <div class="destination__details">
+            <p class="destination__title">Tajmahal</p>
+            <p class="destination__subtitle">Agra</p>
+          </div>
+        </div>
+        <div class="destination__card">
+          <img src="https://i.ibb.co/gj3DM28/pexels-alex-azabache-3214958.jpg" alt="destination" />
+          <div class="destination__details">
+            <p class="destination__title">Wadi Musa</p>
+            <p class="destination__subtitle">Jordan</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="trip">
+      <div class="section__container trip__container">
+        <h2 class="section__title">Best trip package</h2>
+        <p class="section__subtitle">
+          Explore your suitable and dream places around the world. Here you can
+          find your right destination.
+        </p>
+        <div class="trip__grid">
+          <div class="trip__card">
+            <img src="https://i.ibb.co/60nvYwQ/Screenshot-2023-07-14-173347.png" alt="trip" />
+            <div class="trip__details">
+              <p>Santorini ,Aegean Sea</p>
+              <div class="rating"><i class="ri-star-fill"></i> 4.2</div>
+              <div class="booking__price">
+                <div class="price"><span>From</span> $300</div>
+                <button class="book__now">Book Now</button>
+              </div>
+            </div>
+          </div>
+          <div class="trip__card">
+            <img src="https://i.ibb.co/h1WgH8B/Screenshot-2023-07-14-173807.png" alt="trip" />
+            <div class="trip__details">
+              <p>Machu Picchu ,Peru</p>
+              <div class="rating"><i class="ri-star-fill"></i> 4.5</div>
+              <div class="booking__price">
+                <div class="price"><span>From</span> $450</div>
+                <button class="book__now">Book Now</button>
+              </div>
+            </div>
+          </div>
+          <div class="trip__card">
+            <img src="https://i.ibb.co/vc2W0wN/Screenshot-2023-07-14-174151.png" alt="trip" />
+            <div class="trip__details">
+              <p>Grand Canyon National Park ,Arizona</p>
+              <div class="rating"><i class="ri-star-fill"></i> 4.7</div>
+              <div class="booking__price">
+                <div class="price"><span>From</span> $400</div>
+                <button class="book__now">Book Now</button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="view__all">
+          <button class="btn">View All</button>
+        </div>
+      </div>
+    </section>
+
+    <section class="gallary">
+      <div class="section__container gallary__container">
+        <div class="image__gallary">
+          <div class="gallary__col">
+            <img src="https://i.ibb.co/ZYDJ6vv/pexels-spencer-davis-4356144.jpg" alt="gallary" />
+          </div>
+          <div class="gallary__col">
+            <img src="https://i.ibb.co/W3HTbYG/pexels-zakaria-boumliha-2827374.jpg" alt="gallary" />
+            <img src="https://i.ibb.co/KwHd8PQ/pexels-stijn-dijkstra-2499699.jpg" alt="gallary" />
+          </div>
+        </div>
+        <div class="gallary__content">
+          <div>
+            <h2 class="section__title">
+              Our trip gallary that will inspire you
+            </h2>
+            <p class="section__subtitle">
+              Explore your suitable and dream places around the world. Here you
+              can find your right destination.
+            </p>
+            <button class="btn">View All</button>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="subscribe">
+      <div class="section__container subscribe__container">
+        <div class="subscribe__content">
+          <h2 class="section__title">Subscribe to get special prize</h2>
+          <p class="section__subtitle">
+            Explore your suitable and dream places around the world. Here you
+            can find your right destination.
+          </p>
+        </div>
+        <div class="subscribe__form">
+          <form>
+            <input type="email" placeholder="Your email here" />
+            <button class="btn" type="submit">Send</button>
+          </form>
+        </div>
+      </div>
+    </section>
+
+    <footer class="footer">
+      <div class="section__container footer__container">
+        <div class="footer__col">
+          <h3>Tourguide<span>.</span></h3>
+          <p>
+            Explore your suitable and dream places around the world. Here you
+            can find your right destination.
+          </p>
+        </div>
+        <div class="footer__col">
+          <h4>Support</h4>
+          <p>FAQs</p>
+          <p>Terms & Conditions</p>
+          <p>Privacy Policy</p>
+          <p>Contact Us</p>
+        </div>
+        <div class="footer__col">
+          <h4>Address</h4>
+          <p>
+            <span>Address:</span> India 
+          </p>
+          <p><span>Email:</span> [email protected]</p>
+          <p><span>Phone:</span> +91 0009900900</p>
+        </div>
+      </div>
+    </footer>
+  </body>
+</html>
diff --git a/Vanilla-JS-Projects/Basic/Travel-App/screenshot.webp b/Vanilla-JS-Projects/Basic/Travel-App/screenshot.webp