WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Trawel
410
Metehan
Abrir en el editor
Publica tu código
HTML
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="blogstyle.css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <title>TravelTales Blog</title> </head> <body> <header> <div class="header-container container"> <a href="#" class="logo"> <span class="logo-text">TravelTales</span> </a> <nav> <ul class="navbar nav"> <li class="nav-item"><a class="nav-links" href="#home">Home</a></li> <li class="nav-item"><a class="nav-links" href="#featured">Featured</a></li> <li class="nav-item"><a class="nav-links" href="#categories">Categories</a></li> <li class="nav-item"><a class="nav-links" href="#about">About</a></li> <li class="nav-item"><a class="nav-links" href="#contact">Contact</a></li> </ul> </nav> </div> </header> <div class="content-spacer"></div> <main> <section id="hero"> <div class="hero-container"> <div class="hero-content"> <h1>TravelTales Blog</h1> <p>Explore the World Through Our Stories</p> <a href="#featured" class="cta-button">Read Latest</a> </div> <div class="hero-image"> <img src="./images/travel-main.jpeg" alt="Travel Destination"> </div> </div> </section> <br> <section class="container" id="featured"> <div class="featured-container"> <h2>Featured Articles</h2> <div class="article-grid"> <div class="article-card"> <img src="./images/destination1.jpeg" alt="Paris"> <h3>A Weekend in Paris</h3> <p class="article-meta">By Sarah Miller • April 1, 2025</p> <p class="article-excerpt">Discover the hidden gems of the City of Light beyond the Eiffel Tower...</p> <button class="read-button">Read More</button> </div> <div class="article-card"> <img src="./images/destination2.jpeg" alt="Japan"> <h3>Cherry Blossoms in Japan</h3> <p class="article-meta">By David Wong • March 28, 2025</p> <p class="article-excerpt">The ultimate guide to experiencing Hanami season like a local...</p> <button class="read-button">Read More</button> </div> <div class="article-card"> <img src="./images/destination3.jpeg" alt="Morocco"> <h3>Moroccan Market Adventures</h3> <p class="article-meta">By Elena Rodriguez • March 25, 2025</p> <p class="article-excerpt">Navigating the colorful souks of Marrakech and finding treasures...</p> <button class="read-button">Read More</button> </div> <div class="article-card"> <img src="./images/destination4.jpeg" alt="Bali"> <h3>Spiritual Retreat in Bali</h3> <p class="article-meta">By Michael Chen • March 22, 2025</p> <p class="article-excerpt">Finding peace and renewal in the island's sacred temples...</p> <button class="read-button">Read More</button> </div> </div> </div> </section> <section id="categories"> <div class="categories-container container"> <h2>Explore Categories</h2> <div class="categories-grid"> <div class="category-card"> <img src="./images/adventure.jpeg" alt="Adventure Travel"> <div class="category-info"> <h3>Adventure</h3> <p>Thrilling experiences for the daring traveler</p> <a href="#adventure" class="category-button">Explore</a> </div> </div> <div class="category-card"> <img src="./images/food.jpeg" alt="Food & Cuisine"> <div class="category-info"> <h3>Food & Cuisine</h3> <p>Culinary journeys around the world</p> <a href="#food" class="category-button">Explore</a> </div> </div> <div class="category-card"> <img src="./images/culture.jpeg" alt="Culture & History"> <div class="category-info"> <h3>Culture & History</h3> <p>Deep dives into local traditions and heritage</p> <a href="#culture" class="category-button">Explore</a> </div> </div> <div class="category-card"> <img src="./images/budget.jpeg" alt="Budget Travel"> <div class="category-info"> <h3>Budget Travel</h3> <p>Tips and tricks for exploring on a shoestring</p> <a href="#budget" class="category-button">Explore</a> </div> </div> </div> </div> </section> <section id="about"> <div class="about-container"> <h2>About Our Blog</h2> <div class="about-content"> <div class="about-image"> <img src="./images/team.jpeg" alt="Our Team"> </div> <div class="about-text"> <h3>Our Story</h3> <p>Welcome to TravelTales, a passionate community of globetrotters sharing authentic travel experiences since 2022. We believe in the transformative power of travel and aim to inspire your next adventure.</p> <p>Our team of experienced travelers and writers are dedicated to bringing you honest reviews, practical tips, and compelling stories from all corners of the world.</p> <h3>What We Offer</h3> <ul> <li>Authentic travel narratives from real explorers</li> <li>Practical guides and insider tips</li> <li>Cultural insights and local perspectives</li> <li>Stunning photography from around the globe</li> </ul> <p>Join our community of over 50,000 fellow travelers who find inspiration, connection, and practical advice through our stories.</p> </div> </div> </div> </section> <section id="newsletter" class="container"> <div class="newsletter-container"> <h2>Join Our Newsletter</h2> <p>Get weekly travel inspiration, exclusive tips, and updates delivered straight to your inbox.</p> <form class="newsletter-form"> <div class="form-floating"> <input type="email" id="newsletter-email" class="form-control" placeholder="Enter your email" required> <label for="newsletter-email">Email Address</label> </div> <button type="submit" class="subscribe-button">Subscribe</button> </form> </div> </section> <section id="contact"> <div class="contact-container"> <h2>Contact Us</h2> <div class="contact-content"> <div class="contact-info"> <h3>Get in Touch</h3> <p>Have a question or want to collaborate? We'd love to hear from you!</p> <ul> <li><strong>Email:</strong> hello@traveltales.com</li> <li><strong>Phone:</strong> +1 (234) 567-8901</li> <li><strong>Address:</strong> 123 Wanderlust Avenue, Explorer City, EC 12345</li> </ul> </div> <div class="contact-form"> <h3>Send Us a Message</h3> <form action="#" method="post" class="form"> <div class="form-floating"> <input type="text" id="name" class="form-control" name="name" placeholder="Enter Name" required> <label for="name">Name</label> </div> <div class="form-floating mt-3 mb-3"> <input type="email" id="email" class="form-control" name="email" placeholder="Enter Email" required> <label for="email">Email</label> </div> <div class="form-floating"> <textarea id="message" class="form-control" name="message" placeholder="Enter Message" rows="5" required>
Message
Send Message
