Scribd
Upload
19 views7 pages

Mini Project 12.HTML

Uploaded by

shantnakumar4
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
19 views7 pages

Mini Project 12.HTML

Uploaded by

shantnakumar4
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 7

<!

DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Explore India | Travel Guide</title>
<link href="https://fonts.googleapis.com/css2?
family=Roboto:wght@400;700&family=Playfair+Display:wght@400;700&family=Montserrat:w
ght@400;700&family=Lobster&display=swap" rel="stylesheet">
<style>

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Roboto', sans-serif;
background-color: #f4f4f4;
color: #333;
}

.hero-section {
position: relative;
height: 100vh;
overflow: hidden;
color: white;
text-align: center;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url('assets/india-hero.jpg') center/cover no-repeat;
}

.hero-video {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}

.hero-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.6);
padding: 20px;
width: 80%;
max-width: 600px;
}

.hero-overlay h1 {
font-size: 3em;
font-family: 'Playfair Display', serif;
margin-bottom: 10px;
}

.search-bar {
padding: 10px;
width: 100%;
font-size: 16px;
border: none;
border-radius: 5px;
margin-top: 20px;
background-color: #fff;
}

.section-button {
font-family: 'Montserrat', sans-serif;
font-size: 18px;
padding: 12px 30px;
border-radius: 5px;
color: white;
text-align: center;
display: inline-block;
margin: 10px;
cursor: pointer;
transition: background-color 0.3s ease;
}

.travel-tips-button {
background-color: #28a745;
}

.travel-tips-button:hover {
background-color: #218838;
}

.itineraries-button {
background-color: #007bff;
}

.itineraries-button:hover {
background-color: #0056b3;
}

.map-button {
background-color: #f60;
}

.map-button:hover {
background-color: #e55;
}

.contact-button {
background-color: #17a2b8;
}

.contact-button:hover {
background-color: #138496;
}

.featured-destinations {
padding: 50px 20px;
text-align: center;
background-color: #fff;
}

.featured-destinations h2 {
font-size: 2.5em;
font-family: 'Playfair Display', serif;
margin-bottom: 20px;
color: #333;
}

.destination-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}

.destination-card {
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: left;
background-color: #fff;
transition: transform 0.3s ease;
}

.destination-card:hover {
transform: scale(1.05);
}

.destination-card img {
width: 100%;
height: 200px;
object-fit: cover;
}

.destination-card h3 {
margin: 10px;
font-size: 1.5em;
color: #333;
}

.destination-card p {
margin: 10px;
font-size: 14px;
color: #666;
}

.btn {
display: block;
background-color: #f60;
color: white;
text-align: center;
padding: 10px;
margin: 10px;
border-radius: 5px;
text-decoration: none;
transition: background-color 0.3s ease;
}

.btn:hover {
background-color: #e55;
}

.contact-section {
background-color: #f9f9f9;
padding: 40px 20px;
text-align: center;
}

.contact-section h2 {
font-size: 2.5em;
margin-bottom: 20px;
color: #333;
}

.contact-form {
max-width: 600px;
margin: auto;
display: flex;
flex-direction: column;
}

.contact-form input, .contact-form textarea {


margin: 10px 0;
padding: 15px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 5px;
}

.contact-form textarea {
resize: vertical;
height: 100px;
}

.contact-form button {
background-color: #f60;
color: white;
padding: 10px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
}

.contact-form button:hover {
background-color: #e55;
}
.footer {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}

.footer p {
margin-bottom: 10px;
}

.social-links img {
width: 24px;
margin: 0 10px;
}

#map-container {
padding: 20px;
background-color: #fff;
text-align: center;
}

iframe {
border-radius: 8px;
}

.buttons-container {
display: flex;
justify-content: center;
margin-top: -60px;
z-index: 2;
}

.buttons-container .section-button {
margin: 10px 20px;
}

</style>
</head>
<body>

<header class="hero-section">
<div class="hero-overlay">
<h1>Explore India</h1>
<p>Discover the beauty of India's diverse destinations</p>
<input type="text" class="search-bar" placeholder="Search destinations...">
</div>
</header>

<div class="buttons-container">
<button class="section-button travel-tips-button">Travel Tips</button>
<button class="section-button itineraries-button">Sample Itineraries</button>
<button class="section-button map-button">Interactive Map</button>
<button class="section-button contact-button">Contact Us</button>
</div>
<section class="featured-destinations">
<h2>Popular Indian Cities</h2>
<div class="destination-cards">
<div class="destination-card">
<img src="file:///Users/shantnakumar/Downloads/mumbai.jpeg" alt="Mumbai">
<h3>Mumbai</h3>
<p>The bustling financial capital with a mix of colonial architecture and Bollywood
glamour.</p>
<a href="mumbai.html (2).txt class="btn">Learn More</a>
</div>
<div class="destination-card">
<img src="file:///Users/shantnakumar/Downloads/delhi.jpeg" alt="Delhi">
<h3>Delhi</h3>
<p>The capital city, rich in history with ancient monuments and modern culture.</p>
<a href="delhi.html" class="btn">Learn More</a>
</div>
<div class="destination-card">
<img src="file:///Users/shantnakumar/Downloads/jaipur.jpeg" alt="Jaipur">
<h3>Jaipur</h3>
<p>The "Pink City", known for its royal palaces, forts, and vibrant culture.</p>
<a href="jaipur.html" class="btn">Learn More</a>
</div>
<div class="destination-card">
<img src="file:///Users/shantnakumar/Downloads/agra.jpeg" alt="Agra">
<h3>Agra</h3>
<p>Home to the iconic Taj Mahal, one of the Seven Wonders of the World.</p>
<a href="agra.html" class="btn">Learn More</a>
</div>
<div class="destination-card">
<img src="file:///Users/shantnakumar/Downloads/kerala.jpeg" alt="Kerala">
<h3>Kerala</h3>
<p>Famous for its beautiful backwaters, beaches, and unique culture.</p>
<a href="kerala.html" class="btn">Learn More</a>
</div>
<div class="destination-card">
<img src="file:///Users/shantnakumar/Downloads/van.jpeg" alt="Varanasi">
<h3>Varanasi</h3>
<p>One of the oldest cities in the world, known for its spiritual significance and
ghats.</p>
<a href="varanasi.html" class="btn">Learn More</a>
</div>
<div class="destination-card">
<img src="file:///Users/shantnakumar/Downloads/udaipur.jpeg" alt="Udaipur">
<h3>Udaipur</h3>
<p>The "City of Lakes", famous for its royal palaces and scenic beauty.</p>
<a href="udaipur.html" class="btn">Learn More</a>
</div>
<div class="destination-card">
<img src="file:///Users/shantnakumar/Downloads/goa.jpeg" alt="Goa">
<h3>Goa</h3>
<p>A coastal paradise known for its sandy beaches, vibrant nightlife, and
Portuguese influence.</p>
<a href="goa.html" class="btn">Learn More</a>
</div>
<div class="destination-card">
<img src="file:///Users/shantnakumar/Downloads/bangalore.jpeg" alt="Bangalore">
<h3>Bangalore</h3>
<p>The tech hub of India, known for its pleasant climate and vibrant food
culture.</p>
<a href="bangalore.html" class="btn">Learn More</a>
</div>
<div class="destination-card">
<img src="file:///Users/shantnakumar/Downloads/che.jpeg" alt="Chennai">
<h3>Chennai</h3>
<p>A bustling city with rich culture, music, and cuisine on the Bay of Bengal.</p>
<a href="chennai.html" class="btn">Learn More</a>
</div>
</div>
</section>

<section id="map">
<h2>Interactive Map</h2>
<div id="map-container">
<iframe src="https://www.google.com/maps/embed?pb=..." width="600" height="450"
style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
</section>

<section class="contact-section">
<button class="section-button contact-button">Contact Us</button>
<form class="contact-form" action="mailto:[email protected]" method="POST"
enctype="text/plain">
<input type="text" name="name" placeholder="Your Name" required>
<input type="email" name="email" placeholder="Your Email" required>
<textarea name="message" placeholder="Your Message" required></textarea>
<button type="submit">Send Message</button>
</form>
</section>

<footer class="footer">
<p>&copy; 2024 Explore India | Your ultimate travel guide</p>

<p>Contact Us: <a href="tel:+1234567890">+91 78564-45679</a></p>


<p>Email us at <a
href="mailto:[email protected]">[email protected]</a></p>
<div class="social-links">
<a href="#"><img src="file:///Users/shantnakumar/Downloads/download%20(11).jpeg"
alt="Facebook"></a>
<a href="#"><img src="file:///Users/shantnakumar/Downloads/tiw.png"
alt="Twitter"></a>
<a href="#"><img src="file:///Users/shantnakumar/Downloads/insta.jpeg"
alt="Instagram"></a>
</div>
</footer>

</body>
</html>

You might also like