update

royvivi29 · Jul 3, 2024 · 989519c · 989519c
1 parent 235698c
commit 989519c
Show file tree

Hide file tree

Showing 6 changed files with 281 additions and 0 deletions.
diff --git a/image/img-1.jpg b/image/img-1.jpg
diff --git a/image/img-2.jpg b/image/img-2.jpg
diff --git a/image/img-3.jpg b/image/img-3.jpg
diff --git a/image/img-4.jpg b/image/img-4.jpg
diff --git a/travel.css b/travel.css
@@ -0,0 +1,182 @@
+body {
+    margin: 0;
+    font-family: Arial, sans-serif;
+    background-color: #613131;
+    line-height: 1.6;
+}
+
+header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px;
+    background-color: #333;
+    color: white;
+}
+
+header .logo {
+    font-size: 24px;
+    font-weight: bold;
+}
+
+header nav ul {
+    list-style: none;
+    display: flex;
+    gap: 20px;
+}
+
+header nav ul li {
+    display: inline;
+}
+
+header nav ul li a {
+    color: white;
+    text-decoration: none;
+    transition: color 0.3s;
+}
+
+header nav ul li a:hover {
+    color: #ddd;
+}
+
+.hero {
+    background-image: url('https://via.placeholder.com/1200x600');
+    background-size: cover;
+    background-position: center;
+    height: 600px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    text-align: center;
+    padding: 20px;
+}
+
+.hero h1 {
+    font-size: 48px;
+    margin: 0;
+}
+
+.hero p {
+    font-size: 24px;
+    margin: 10px 0 20px;
+}
+
+.cta {
+    display: inline-block;
+    padding: 10px 20px;
+    background-color: #ff6600;
+    color: white;
+    text-decoration: none;
+    font-size: 18px;
+    border-radius: 5px;
+    transition: background-color 0.3s;
+}
+
+.cta:hover {
+    background-color: #e65c00;
+}
+
+.about, .destinations, .contact {
+    padding: 50px 20px;
+    text-align: center;
+    background-color: #fff;
+}
+
+.about h2, .destinations h2, .contact h2 {
+    font-size: 36px;
+    margin-bottom: 30px;
+}
+
+.about p {
+    font-size: 18px;
+    color: #555;
+    line-height: 1.6;
+    margin: 10px 0;
+}
+
+.destination-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 20px;
+    padding: 0 20px;
+}
+
+.destination-card {
+    background-color: #f9f9f9;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    text-align: left;
+}
+
+.destination-card img {
+    width: 100%;
+    border-radius: 10px;
+}
+
+.destination-card h3 {
+    font-size: 24px;
+    margin: 15px 0 10px;
+}
+
+.destination-card p {
+    font-size: 16px;
+    color: #555;
+}
+
+.contact-details {
+    display: flex;
+    justify-content: space-around;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    gap: 20px;
+}
+
+.contact-info p {
+    font-size: 18px;
+    color: #555;
+}
+
+.contact-form {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    width: 100%;
+    max-width: 400px;
+}
+
+.contact-form label {
+    font-size: 16px;
+}
+
+.contact-form input,
+.contact-form textarea {
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    font-size: 16px;
+}
+
+.contact-form button {
+    padding: 10px 20px;
+    background-color: #c16c10;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    font-size: 18px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.contact-form button:hover {
+    background-color: #ad3f0c;
+}
+
+footer {
+    text-align: center;
+    padding: 20px;
+    background-color: #333;
+    color: white;
+}
diff --git a/travel.html b/travel.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Travel Landing Page</title>
+    <link rel="stylesheet" href="travel.css">
+</head>
+<body>
+    <header>
+        <div class="logo">Travel</div>
+        <nav>
+            <ul>
+                <li><a href="#home">Home</a></li>
+                <li><a href="#destinations">Destinations</a></li>
+                <li><a href="#about">About</a></li>
+                <li><a href="#contact">Contact</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <main>
+        <section class="hero">
+            <h1>Explore the World</h1>
+            <p>Discover new places and adventures with us. Your journey starts here.</p>
+            <a href="#destinations" class="cta">Get Started</a>
+        </section>
+
+        <section id="about" class="about">
+            <h2>About Us</h2>
+            <p>Welcome to Travel, your number one source for all things travel. We're dedicated to giving you the very best travel experiences, with a focus on dependability, customer service, and uniqueness.</p>
+            <p>Founded in 2023, Travel has come a long way from its beginnings. When we first started out, our passion for helping people explore the world drove us to do intense research, and gave us the impetus to turn hard work and inspiration into a booming travel agency. We now serve customers all over the world and are thrilled to be a part of the travel industry.</p>
+            <p>We hope you enjoy our services as much as we enjoy offering them to you. If you have any questions or comments, please don't hesitate to contact us.</p>
+            <p><strong>Sincerely,</strong></p>
+            <p>The Travel Team</p>
+        </section>
+
+
+        <section id="destinations" class="destinations">
+            <h2>Top Destinations</h2>
+            <div class="destination-grid">
+                <div class="destination-card">
+                    <img src="image/img-1.jpg" alt="Destination 1">
+                    <h3>Paris, France</h3>
+                    <p>Experience the city of lights, romance, and history.</p>
+                </div>
+                <div class="destination-card">
+                    <img src="image/img-4.jpg" alt="Destination 2">
+                    <h3>Tokyo, Japan</h3>
+                    <p>Explore the bustling city filled with culture and innovation.</p>
+                </div>
+                <div class="destination-card">
+                    <img src="image/img-3.jpg" alt="Destination 3">
+                    <h3>Sydney, Australia</h3>
+                    <p>Discover the vibrant city with stunning beaches and landmarks.</p>
+                </div>
+                <div class="destination-card">
+                    <img src="image/img-2.jpg" alt="Destination 4">
+                    <h3>New York, USA</h3>
+                    <p>Visit the city that never sleeps, full of iconic sights.</p>
+                </div>
+            </div>
+        </section>
+
+
+
+        <!-- Contact Section -->
+        <section id="contact" class="contact">
+            <h2>Contact Us</h2>
+            <div class="contact-details">
+                <div class="contact-info">
+                    <p><strong>Address:</strong> 123 Travel Lane, Wanderlust City, WL 45678</p>
+                    <p><strong>Phone:</strong> (123) 456-7890</p>
+                    <p><strong>Email:</strong> [email protected]</p>
+                </div>
+                <form class="contact-form">
+                    <label for="name">Name:</label>
+                    <input type="text" id="name" name="name" required>
+
+                    <label for="email">Email:</label>
+                    <input type="email" id="email" name="email" required>
+
+                    <label for="subject">Subject:</label>
+                    <input type="text" id="subject" name="subject" required>
+
+                    <label for="message">Message:</label>
+                    <textarea id="message" name="message" rows="4" required></textarea>
+
+                    <button type="submit">Send Message</button>
+                </form>
+            </div>
+        </section>
+    </main>
+
+    <footer>
+        <p>&copy; 2024 Travel. All rights reserved.</p>
+    </footer>
+</body>
+</html>