index.html exp-5
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="external-style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- HERO SECTION -->
<div class="hero">
<h1 id="title">Discover Delhi </h1>
<p id="india">📍India</p>
<h2 id="intro">
Immerse yourself in the rich culture, history, and vibrant life of the capital city, Delhi.
</h2>
</div>
<!-- ACTIVITIES SECTION -->
<div id="activities">
<div id="images">
<div id="activity">
<img src="redfort.jpg" />
<h4>Explore the Red Fort</h4>
<p>Discover the iconic Red Fort, a UNESCO World Heritage Site, and immerse yourself in the rich history
of Delhi.</p>
</div>
<div id="activity">
<img src="chaat.jpg" />
<h4>Savor Delhi's Chaat</h4>
<p>Indulge in the delightful flavors of Delhi's street food, especially the famous and savory chaat
dishes.</p>
</div>
<div id="activity">
<img src="indiagate.png" />
<h4>Visit India Gate</h4>
<p>Experience the grandeur of India Gate, a war memorial that stands tall as a symbol of valor and
sacrifice.</p>
</div>
</div>
</div>
<!-- LOCAL GUIDE SECTION -->
<div class="card">
<div class="business-card-text">
<h2>Your Local Guide</h2>
<p>
"As a Delhi native, I'm excited to show you the best of our city. From historical landmarks to
mouth-watering street food, Delhi has something for everyone."
</p>
<h3>Your Host - Rohan Gupta</h3>
</div>
</div>
<footer>
<p>Rohan Gupta (00396307222).</p>
</footer>
</body>
</html>
external-style.css exp5
/* External CSS */
body {
margin: 0;
text-align: center;
font-family: 'Roboto', sans-serif;
color: #1d3557;
line-height: 25px;
background-image: url('delhiimg2.jpg');
background-size: cover;
}
img {
width: 100px;
}
.hero {
color: #ffffff;
height: 400px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4%;
background: rgba(29, 53, 87, 0.7);
}
#title {
background: #1d3557;
padding: 5px 10px;
border-radius: 5px;
margin: 0 0 0 0;
margin-top: 20px;
}
#intro {
background: #457b9d;
padding: 5px 10px;
border-radius: 5px;
margin: 5px 0 10px 0;
width: 80%;
line-height: 35px;
}
#activities {
background-color: rgba(241, 250, 238, 0.9);
padding-top: 50px;
padding-bottom: 50px;
display: flex;
flex-direction: column;
align-items: center;
}
#images {
width: 80%;
display: flex;
flex-direction: row;
justify-content: space-around;
}
#activities img {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
}
#activity {
width: 250px;
font-weight: 500;
}
.card {
width: 80%;
margin: 80px auto;
padding: 20px;
display: flex;
justify-content: space-around;
align-items: center;
text-align: center;
background: rgba(168, 218, 220, 0.9);
color: #2b2839;
border-bottom: 6px solid #1d3557;
border-radius: 10px;
}
.card img {
object-fit: cover;
width: 200px;
border-radius: 10px;
height: 300px;
}
.business-card-text {
width: 250px;
}
footer {
background-color: rgba(241, 250, 238, 0.9);
padding: 10px 0;
}
GUYS IF YOU HAVE ANY DOUBT. PLEASE LET ME KNOW