-
Notifications
You must be signed in to change notification settings - Fork 600
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1372 from ayush-848/main
feat: Added the about us page
- Loading branch information
Showing
6 changed files
with
763 additions
and
303 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,185 @@ | ||
| body, html { | ||
| margin: 0; | ||
| padding: 0; | ||
| font-family: 'Poppins', sans-serif; | ||
| width: 100vw; | ||
| min-height: 100vh; | ||
| color: #fff; | ||
| overflow-x: hidden; | ||
| } | ||
|
|
||
| .background { | ||
| position: fixed; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| z-index: -1; | ||
| background-image: url('path_to_fallback_image.jpg'); | ||
| background-size: cover; | ||
| background-position: center; | ||
| } | ||
|
|
||
| .background video { | ||
| width: 100%; | ||
| height: 100%; | ||
| object-fit: cover; | ||
| } | ||
|
|
||
|
|
||
| .content-wrapper { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
| min-height: 100vh; | ||
| padding: 40px; | ||
| text-align: center; | ||
| background-color: rgba(0, 0, 0, 0.6); | ||
| } | ||
|
|
||
| header { | ||
| margin-bottom: 30px; | ||
| } | ||
|
|
||
| .heading { | ||
| font-size: 4rem; | ||
| color: #fff; | ||
| margin-bottom: 10px; | ||
| font-weight: 700; | ||
| text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); | ||
| letter-spacing: 2px; | ||
| } | ||
|
|
||
| .subheading { | ||
| font-size: 1.5rem; | ||
| color: #f0f0f0; | ||
| margin-top: 0; | ||
| font-weight: 300; | ||
| letter-spacing: 1px; | ||
| } | ||
|
|
||
| .content-block { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| gap: 30px; | ||
| max-width: 800px; | ||
| } | ||
| .video-container { | ||
| width: 100%; | ||
| max-width: 800px; | ||
| position: relative; | ||
| overflow: hidden; | ||
| border-radius: 10px; | ||
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); | ||
| margin-bottom: 4rem; | ||
| } | ||
|
|
||
| .video-container::before { | ||
| content: ''; | ||
| display: block; | ||
| padding-top: 56.25%; /* 16:9 Aspect Ratio */ | ||
| } | ||
|
|
||
| .video-container iframe { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| border: none; | ||
| } | ||
|
|
||
|
|
||
| .summary { | ||
| font-size: 1.1rem; | ||
| color: #f0f0f0; | ||
| line-height: 1.6; | ||
| text-align: center; | ||
| margin: 0; | ||
| text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); | ||
| } | ||
|
|
||
| .features { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| width: 100%; | ||
| margin-top: 3rem !important; | ||
| margin: 0 auto; | ||
| margin-left: 2.2rem; | ||
| } | ||
|
|
||
| .feature { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| gap: 10px; | ||
| } | ||
|
|
||
| .feature i { | ||
| font-size: 2.5rem; | ||
| color: #ff6b6b; | ||
| } | ||
|
|
||
| .feature h3 { | ||
| font-size: 1.1rem; | ||
| font-weight: 600; | ||
| margin: 0; | ||
| } | ||
|
|
||
| .cta-button { | ||
| display: inline-block; | ||
| padding: 15px 30px; | ||
| background-color: #ff6b6b; | ||
| color: #fff; | ||
| text-decoration: none; | ||
| font-size: 1.2rem; | ||
| font-weight: 600; | ||
| border-radius: 50px; | ||
| transition: all 0.3s ease; | ||
| box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4); | ||
| margin-top: 1.5rem; | ||
| } | ||
|
|
||
| .cta-button:hover { | ||
| background-color: #ff8787; | ||
| transform: translateY(-3px); | ||
| box-shadow: 0 8px 20px rgba(255, 107, 107, 0.6); | ||
| } | ||
|
|
||
| @media (max-width: 768px) { | ||
| .content-wrapper { | ||
| padding: 20px; | ||
| } | ||
|
|
||
| .heading { | ||
| font-size: 3rem; | ||
| } | ||
|
|
||
| .subheading { | ||
| font-size: 1.2rem; | ||
| } | ||
|
|
||
| .summary { | ||
| font-size: 1rem; | ||
| } | ||
|
|
||
| .features { | ||
| flex-direction: column; | ||
| gap: 20px; | ||
| } | ||
|
|
||
| .feature i { | ||
| font-size: 2rem; | ||
| } | ||
|
|
||
| .feature h3 { | ||
| font-size: 1rem; | ||
| } | ||
|
|
||
| .cta-button { | ||
| font-size: 1rem; | ||
| padding: 12px 25px; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>About Us - TourGuide</title> | ||
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet"> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> | ||
| <link rel="stylesheet" href="about.css"> | ||
| </head> | ||
| <body> | ||
| <div class="background"> | ||
| <video autoplay muted loop playsinline> | ||
| <source src="./about.mp4" type="video/mp4"> | ||
| Your browser does not support the video tag. | ||
| </video> | ||
| </div> | ||
|
|
||
| <div class="content-wrapper"> | ||
| <header> | ||
| <h1 class="heading">About Us</h1> | ||
| <p class="subheading">Discover Your Purpose Through Travel</p> | ||
| </header> | ||
|
|
||
| <div class="content-block"> | ||
| <div class="video-container"> | ||
| <iframe src="https://www.youtube.com/embed/veULUjsSrPg?si=eq3sDAt3-yZnZUme" allowfullscreen></iframe> | ||
| </div> | ||
| <p class="summary"> | ||
| Welcome to TourGuide, where life's purpose unfolds through exploration and the pursuit of the extraordinary. We empower you to navigate the world with unparalleled assistance, forging unforgettable memories. | ||
| </p> | ||
| <p class="summary"> | ||
| Our local guides help you effortlessly navigate languages, customs, and traditions. We offer curated itineraries, once-in-a-lifetime experiences, and valuable travel advice, all customizable to your wishes. | ||
| </p> | ||
| <p class="summary"> | ||
| Since 2024, TourGuide has grown to 30,000+ guides across 200+ countries. Join our family, where every journey becomes a story worth sharing! | ||
| </p> | ||
| <div class="features"> | ||
| <div class="feature"> | ||
| <i class="fas fa-map-marked-alt"></i> | ||
| <h3>Curated Itineraries</h3> | ||
| </div> | ||
| <div class="feature"> | ||
| <i class="fas fa-users"></i> | ||
| <h3>Local Guides</h3> | ||
| </div> | ||
| <div class="feature"> | ||
| <i class="fas fa-star"></i> | ||
| <h3>Unforgettable Experiences</h3> | ||
| </div> | ||
| </div> | ||
| <a href="/" class="cta-button">Start Your Journey</a> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.