The top section will display the heading, Tourist places in header. The section on the left has list of cities. The right hand side displays tourist places
of any one of the city. Use Inline style sheet in the top section to display background color for the text “Tourist places’. Use internal stylesheet for the left and right section with background color and font styles.
Tourist places & Cities
Here is the html code:-
<!DOCTYPE html>
<html>
<head>
<title>Tourist Places</title>
<style type=”text/css”>
#header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
</style>
<style type=”text/css”>
#left-section {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
padding: 10px;
width: 30%;
float: left;
}
</style>
<style type=”text/css”>
#right-section {
background-color: #fff;
font-family: Arial, sans-serif;
padding: 10px;
width: 70%;
float: left;
}
</style>
</head>
<body>
<div id=”header”>
<h1 style=”margin: 0;”>Tourist places</h1>
</div>
<div id=”left-section”>
<h2>City</h2>
<ol>
<li>Pune</li>
<li>Banglore</li>
<li>Hyderabad</li>
<li>Delhi</li>
</ol>
<p>CALS 91</p>
</div>
<div id=”right-section”>
<h2>Tourist places in Pune</h2>
<ul>
<li>Shanivarwada</li>
<li>Kelkar Museum</li>
<li>Sinhgad fort</li>
</ul>
</div>
</body>
</html>