diff --git a/Vanilla-JS-Projects/Basic/Travel-App/README.md b/Vanilla-JS-Projects/Basic/Travel-App/README.md new file mode 100644 index 00000000..f3985852 --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Travel-App/README.md @@ -0,0 +1,66 @@ +

đŸ’Ĩ Tour Guide đŸ’Ĩ

+ + + +

Tech Stack Used 🎮

+ + +
+ + ![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) + + + + + + + + + + + +
+ + +![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847) + + + +## :zap: Description 📃 + +
+

This Tour guide app gives the recoomendations of most famous places to visit .

+ +
+ + + + +## :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 📸 + +![Adviceimg](./screenshot.webp) +![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847) + + + +

Developed By Aditi Jain đŸ‘Ļ

+

+ + + +

+ +

Happy Coding 🧑‍đŸ’ģ

+ +

Show some  â¤ī¸  by  đŸŒŸ  this repository!

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 new file mode 100644 index 00000000..3803a394 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Travel-App/img/Screenshot 2023-07-14 173347.png differ 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 new file mode 100644 index 00000000..697eb197 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Travel-App/img/Screenshot 2023-07-14 173807.png differ 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 new file mode 100644 index 00000000..3c1835ba Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Travel-App/img/Screenshot 2023-07-14 174151.png differ 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 new file mode 100644 index 00000000..d2d6a81c Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Travel-App/img/pexels-ajay-donga-2174656.jpg differ 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 new file mode 100644 index 00000000..00d19c34 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Travel-App/img/pexels-alex-azabache-3214958.jpg differ 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 new file mode 100644 index 00000000..65d713e6 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Travel-App/img/pexels-andrei-tanase-1271619.jpg differ 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 new file mode 100644 index 00000000..69e9484e Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Travel-App/img/pexels-josh-hild-2422259.jpg differ 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 new file mode 100644 index 00000000..b110d169 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Travel-App/img/pexels-paulo-marcelo-martins-2412606.jpg differ 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 new file mode 100644 index 00000000..e2219ec7 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Travel-App/img/pexels-quang-nguyen-vinh-2132126.jpg differ 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 new file mode 100644 index 00000000..5317e2bc Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Travel-App/img/pexels-sam-kolder-2387871.jpg differ 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 new file mode 100644 index 00000000..7ebf8d89 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Travel-App/img/pexels-spencer-davis-4356144.jpg differ 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 new file mode 100644 index 00000000..40830699 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Travel-App/img/pexels-stijn-dijkstra-2499699.jpg differ 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 new file mode 100644 index 00000000..f6882286 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Travel-App/img/pexels-zakaria-boumliha-2827374.jpg differ diff --git a/Vanilla-JS-Projects/Basic/Travel-App/img/video (1080p).mp4 b/Vanilla-JS-Projects/Basic/Travel-App/img/video (1080p).mp4 new file mode 100644 index 00000000..6f9bf167 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Travel-App/img/video (1080p).mp4 differ diff --git a/Vanilla-JS-Projects/Basic/Travel-App/index.html b/Vanilla-JS-Projects/Basic/Travel-App/index.html new file mode 100644 index 00000000..032b72a2 --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Travel-App/index.html @@ -0,0 +1,220 @@ + + + + + + + + + Travel Guide + + + +
+
+
+ header + header +
+
+
+

Book Now

+

Your Friendly Neighbhourhood
Tour Guide

+

+ Find Your Perfect Getaway.We are the best travel + agency and we are providing the best travel services for our + clients. +

+
+ +
+
+ + +
+ Watch our story +
+
+
+
+
+
+ +
+
+
+

Explore top destinations

+

+ Explore your suitable and dream places around the world. Here you + can find your right destination. +

+
+
+ + +
+
+
+
+ destination +
+

Eiffel Tower

+

Paris

+
+
+
+ destination +
+

Ho Chi Minn

+

Vietnam

+
+
+
+ destination +
+

Tajmahal

+

Agra

+
+
+
+ destination +
+

Wadi Musa

+

Jordan

+
+
+
+
+ +
+
+

Best trip package

+

+ Explore your suitable and dream places around the world. Here you can + find your right destination. +

+
+
+ trip +
+

Santorini ,Aegean Sea

+
4.2
+
+
From $300
+ +
+
+
+
+ trip +
+

Machu Picchu ,Peru

+
4.5
+
+
From $450
+ +
+
+
+
+ trip +
+

Grand Canyon National Park ,Arizona

+
4.7
+
+
From $400
+ +
+
+
+
+
+ +
+
+
+ +
+
+
+
+ gallary +
+
+ gallary + gallary +
+
+
+
+

+ Our trip gallary that will inspire you +

+

+ Explore your suitable and dream places around the world. Here you + can find your right destination. +

+ +
+
+
+
+ +
+
+ + +
+
+ + + + \ No newline at end of file diff --git a/Vanilla-JS-Projects/Basic/Travel-App/screenshot.webp b/Vanilla-JS-Projects/Basic/Travel-App/screenshot.webp new file mode 100644 index 00000000..5ac6fe46 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Travel-App/screenshot.webp differ diff --git a/Vanilla-JS-Projects/Basic/Travel-App/styles.css b/Vanilla-JS-Projects/Basic/Travel-App/styles.css new file mode 100644 index 00000000..ba5ef6ef --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Travel-App/styles.css @@ -0,0 +1,534 @@ +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap"); + +:root { + --primary-color: #3685fb; + --primary-color-dark: #2f73d9; + --secondary-color: #fafcff; + --text-dark: #0d213f; + --text-light: #767268; + --extra-light: #ffffff; + --max-width: 1200px; +} + +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +.section__container { + max-width: var(--max-width); + margin: auto; + padding: 5rem 1rem; +} + +.section__header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 2rem; + flex-wrap: wrap; + margin-bottom: 4rem; +} + +.section__title { + font-size: 2rem; + font-weight: 600; + color: var(--text-dark); + margin-bottom: 1rem; +} + +.section__subtitle { + font-size: 1rem; + color: var(--text-dark); + max-width: calc(var(--max-width) / 2); +} + +.btn { + padding: 0.75rem 2rem; + outline: none; + border: none; + font-size: 1rem; + color: var(--extra-light); + background-color: var(--primary-color); + border-radius: 5rem; + cursor: pointer; + transition: 0.3s; +} + +.btn:hover { + background-color: var(--primary-color-dark); +} + +a { + text-decoration: none; +} + +img { + width: 100%; + display: block; +} + +body { + font-family: "Poppins", sans-serif; +} + +nav { + padding: 1rem; + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + width: 100%; + max-width: var(--max-width); + display: flex; + align-items: center; + justify-content: space-between; +} + +.nav__logo { + font-size: 1.2rem; + font-weight: 600; + color: var(--text-dark); + cursor: pointer; +} + +.nav__logo span { + color: var(--primary-color); +} + +.nav__links { + list-style: none; + display: flex; + align-items: center; + gap: 1rem; +} + +.link a { + padding: 0 1rem; + color: var(--text-dark); + transition: 0.3s; +} + +.link a:hover { + color: var(--primary-color); +} + +header { + background-color: var(--secondary-color); +} + +.header__container { + min-height: 100vh; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 2rem; +} + +.header__image { + position: relative; +} + +.header__image img { + position: absolute; + top: 50%; + left: 50%; + border: 0.5rem solid var(--extra-light); + border-radius: 2rem; + box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.1); +} + +.header__image img:nth-child(1) { + max-width: 350px; + transform: translate(-75%, -50%); +} + +.header__image img:nth-child(2) { + max-width: 250px; + transform: translate(0%, -25%); +} + +.header__content { + display: flex; + align-items: center; + justify-content: center; +} + +.header__content > div { + max-width: 400px; + display: grid; + gap: 1rem; +} + +.header__content .sub__header { + font-size: 1rem; + font-weight: 600; + color: var(--primary-color); +} + +.header__content h1 { + font-size: 3rem; + line-height: 4rem; + font-weight: 800; + color: var(--text-dark); +} + +.header__content .action__btns { + display: flex; + align-items: center; + gap: 2rem; + margin-top: 1rem; +} + +.story { + display: flex; + align-items: center; + gap: 2rem; + cursor: pointer; +} + +.video { + position: relative; +} + +.video img { + width: 60px; + height: 60px; + border-radius: 100%; + box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.1); +} + +.video span { + position: absolute; + top: 50%; + left: 100%; + transform: translate(-50%, -50%); +} + +.video span i { + padding: 0.5rem; + font-size: 1rem; + color: red; + background-color: var(--extra-light); + border-radius: 100%; + box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.1); +} + +.story > span { + font-size: 1rem; + font-weight: 600; + color: var(--text-dark); +} + +.destination__nav { + display: flex; + gap: 1rem; +} + +.destination__nav span { + width: 30px; + height: 30px; + display: grid; + place-content: center; + color: var(--primary-color); + border: 1px solid var(--primary-color); + border-radius: 100%; + font-size: 1.5rem; + cursor: pointer; + transition: 0.3s; +} + +.destination__nav span:hover { + color: var(--extra-light); + background-color: var(--primary-color); +} + +.destination__grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 2rem; +} + +.destination__card { + overflow: hidden; + position: relative; + isolation: isolate; + cursor: pointer; +} + +.destination__card img { + border-radius: 1rem; +} + +.destination__details { + position: absolute; + width: calc(100% - 2rem); + padding: 1rem; + bottom: -6rem; + left: 50%; + transform: translateX(-50%); + text-align: center; + color: var(--extra-light); + background-color: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(4px); + border-radius: 10px; + z-index: 1; + transition: 0.3s; +} + +.destination__card:hover .destination__details { + bottom: 1rem; +} + +.destination__title { + font-size: 0.9rem; + margin-bottom: 0.5rem; +} + +.destination__subtitle { + font-size: 1rem; + font-weight: 600; +} + +.trip { + background-color: var(--secondary-color); +} + +.trip__container :is(.section__title, .section__subtitle, .view__all) { + text-align: center; + margin-right: auto; + margin-left: auto; +} + +.trip__grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 2rem; + margin: 4rem 0; +} + +.trip__card { + border-radius: 1rem; + overflow: hidden; + box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.1); +} + +.trip__details { + padding: 1rem; + display: grid; + gap: 0.5rem; + font-size: 1rem; + font-weight: 600; + color: var(--text-dark); + background-color: var(--extra-light); + cursor: pointer; +} + +.rating { + color: goldenrod; +} + +.booking__price { + display: flex; + align-items: center; + justify-content: space-between; +} + +.price span { + font-weight: 400; + font-size: 0.9rem; + color: var(--text-light); +} + +.book__now { + padding: 0.5rem 1.5rem; + color: var(--primary-color); + outline: none; + border: 1px solid var(--primary-color); + border-radius: 5rem; + background-color: transparent; + cursor: pointer; + transition: 0.3s; +} + +.book__now:hover { + color: var(--extra-light); + background-color: var(--primary-color); +} + +.gallary__container { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 2rem; +} + +.image__gallary { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1rem; +} + +.gallary__col { + display: grid; + place-content: center; + gap: 1rem; +} + +.gallary__col img { + border-radius: 1rem; + box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2); +} + +.gallary__content { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} + +.gallary__content > div { + max-width: 400px; +} + +.gallary__content .section__subtitle { + margin-bottom: 2rem; +} + +.subscribe { + background-color: var(--secondary-color); +} + +.subscribe__container { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 2rem; +} + +.subscribe__form { + display: flex; + align-items: center; + justify-content: center; +} + +.subscribe__form form { + width: 100%; + max-width: 400px; + display: flex; + background-color: var(--extra-light); + box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.1); + border-radius: 5rem; +} + +.subscribe__form input { + width: 100%; + padding: 1rem; + outline: none; + border: none; + border-radius: 5rem; + font-size: 1rem; +} + +.footer { + background-color: var(--text-dark); +} + +.footer__container { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 5rem; + color: var(--secondary-color); +} + +.footer__col h3 { + font-size: 1.5rem; + font-weight: 600; + margin-bottom: 2rem; +} + +.footer__col h3 span { + color: var(--primary-color); +} + +.footer__col p { + font-size: 0.8rem; + margin-bottom: 1rem; + cursor: pointer; + transition: 0.3s; +} + +.footer__col p:hover { + color: var(--primary-color); +} + +.footer__col p span { + font-weight: 600; +} + +.footer__col h4 { + font-size: 1rem; + font-weight: 600; + margin-bottom: 2rem; +} + +.footer__bar { + max-width: var(--max-width); + margin: auto; + padding: 0.5rem; + text-align: center; + font-size: 0.8rem; + color: var(--secondary-color); + border-top: 1px solid var(--text-light); +} + +@media (width < 1200px) { + .header__image img:nth-child(1) { + max-width: 300px; + } + + .header__image img:nth-child(2) { + max-width: 200px; + } +} + +@media (width < 900px) { + .nav__links { + display: none; + } + + .header__container { + grid-template-columns: repeat(1, 1fr); + } + .header__image { + min-height: 500px; + } + + .destination__grid { + gap: 1rem; + } + + .trip__grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (width < 600px) { + .destination__grid { + grid-template-columns: repeat(2, 1fr); + } + + .trip__grid { + grid-template-columns: repeat(1, 1fr); + } + + .gallary__container { + grid-template-columns: repeat(1, 1fr); + } + + .subscribe__container { + grid-template-columns: repeat(1, 1fr); + } + + .footer__container { + grid-template-columns: repeat(2, 1fr); + } +} \ No newline at end of file diff --git a/Vanilla-JS-Projects/README.md b/Vanilla-JS-Projects/README.md index a7fb612f..cd6106c8 100644 --- a/Vanilla-JS-Projects/README.md +++ b/Vanilla-JS-Projects/README.md @@ -123,6 +123,7 @@ | 96 | [Github-Profile-Viewer](./Intermediate/Github-Profile-Viewer/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) | | 97 | [Qr-Code-Generator](./Basic/Qr-Code-Generator/) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) | | 98 | [Amazon-Clone](./Intermediate/Amazon-Clone/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) | +| 99 | [Travel-App](./Basic/Travel-App/) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) |