index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
/* Style the body */
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
.marquee{
font-size: 30px;
font-weight: 200px;
color: #990066;
font-family: sans-serif;
}
/* Header/logo Title */
.header {
padding: 15px;
text-align: center;
background: lightblue url("images/sharma.jpg") ;
color: white;
}
/* Increase the font size of the heading */
.header h1 {
font-size: 40px;
}
/* Style the top navigation bar */
.navbar {
overflow: hidden;
background-color: #660000;
}
/* Style the navigation bar links */
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
/* Right-aligned link */
.navbar a.right {
float: right;
}
/* Change color on hover */
.navbar a.hover {
background-color: #ddd;
color: black;
}
/* Column container */
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
width: 100%;
}
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
-ms-flex: 10%; /* IE10 */
flex: 10%;
background-color: #f1f1f1;
padding:10px;
}
/* Main column */
.main {
-ms-flex: 70%; /* IE10 */
flex: 70%;
background-color: white;
padding: 20px;
}
/* Fake image, just for this example */
.fakeimg {
background-color: #aaa;
width: 300px;
padding: 20px;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: HEX: #ff7b25;
}
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 340px) {
.row {
flex-direction: column;
}
}
@media screen and (max-width: 400px)
{
.main{
flex-direction: row;
width:400px;
}
}
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<div class="header">
<h1> <span style="color:#0000ff"><i>Bilaspur Tour And Tourism</i></span> </h1>
</div>
<div class="navbar">
<a href="index.html">Home</a>
<a href="about.html">About Us</a>
<a href="images.html">Images</a>
<a href="places.html">Tourism Places</a>
</div>
<div class="row">
<div class="side">
<div> <h2 class="card-heading">DISTRICT MAP</h2>
<h5>click GoTo Map</h5>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d435898.7105927449!2d76.37967984532331!3d31.401486481473313!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39053f6d36e95435%3A0xdf4a00cf1fabaf65!2sBilaspur%2C%20Himachal%20Pradesh!5e0!3m2!1sen!2sin!4v1623389515759!5m2!1sen!2sin" width="300" height="300" style="border:1;" allowfullscreen="" loading="lazy"></iframe>
</div>
<p>
*Map showing National Highway, Major Roads, District Headquarters, Major Towns, Rivers and etc in Bilaspur District</p>
<h2>Beautiful Places Bilaspur </h2>
<div> <h3 class="card-heading"> 1. Vyas Cave </h3>
<a href="https://www.holidify.com/places/bilaspur/vyas-cave-sightseeing-1432.html">
<img src="images/vyas.jpg" alt="vyas" width="300"border ="1" height="200px">
</a>
</div><br>
<div><h3 class="card-heading"> 2. Kandraur Bridge </h3>
<a href="https://www.tripadvisor.in/Attraction_Review-g1379990-d3292064-Reviews-Kandrour_Bridge-Bilaspur_Bilaspur_District_Himachal_Pradesh.html">
<img src="images/pul.jpg" alt="pul" width="300"border ="1" height="200px">
</a></div><br>
<div><h3 class="card-heading"> 3. Bhakra Nangal Dam </h3>
<div class="position-relative">
<a href="https://www.holidify.com/places/bilaspur/bhakra-dam-sightseeing-1425.html">
<img src="images/473.jpg" alt="473" width="300"border ="1" height="200px">
</a>
</div></div>
</div>
<div class="main">
<h2>BILASPUR</h2>
<h5>
Town in Bilaspur District, Himachal Pradesh</h5>
<div>
<img src="images/sahil.jpg" alt="sahil" width="100%" height="400">
</div>
<p>Bilaspur is a district of Himachal Pradesh, India. Its headquarters are in the town of Bilaspur. The district has an area of 1,167 km , and a population of 381,956 (2011 census). As of 2011 it is the third least populous district of Himachal Pradesh (out of 12), after Lahul and Spiti and Kinnau</p>
<br>
<p> <h2> <a href ="https://en.wikipedia.org/wiki/Ghumarwin">Ghumarwin</a></h2></p>
<p>Ghumarwin is a town and a municipal council in Bilaspur district in the North Indian Hill State of Himachal Pradesh and is the second largest town of the entire district. The town is an anchor point for commuters between Bilaspur and Hamirpur and other parts of the state. Situated primarily between the Hills of Lower Central Himalayas, Ghumarwin is situated at an average elevation of 700 metres or about 2300 ft. above sea level. It is one of the biggest commercial centres of Bilaspur District and one can find all kinds of shops, stores, services etc here.
It has become a major cultural and educational hub of Bilaspur and is a rapidly emerging city located on a sharp small rivulet Seer Khud's bank in a small valley which diverts towards Bilaspur city. The town celebrates a famous four-day fair at the dawn of summer in first week of April which is one of its chief tourism attractions. The town is also a tehsil and home to rapidly expanding entrepreneurship along with the tehsildar office and court. Spread in all four directions the town is growing rapidly National Highway 103 passes through Ghumarwin, State Highway 19 Terminates here connecting it with Northern Rural regions of the district. It is also famous for its variety of sweet preparations and local cuisines which people come to enjoy from far and wide.
Along with this Ghumarwin is the home for coffee farms in north India for the first time . Dr. Vikram Sharma presently member Coffee Board Of India is known as father for coffee in Himachal Pradesh started experimenting with coffee cultivation 18 years ago . Now the whole himachal is going to be a coffee state which started from Coffee Farms Manjhoti. Situated on Shimla-Kangra Road formerly NH 88 (Now NH 88 A) it is well connected to rest of neighbouring states. HRTC, CTU, Haryana Roadways, Uttarakhand Roadways and Punjab Roadways buses and taxis operate to nearly all possible routes on each sides. Ghumarwin is situated at a distance of 105 km from the state capital Shimla, 22 km from Bilaspur, the district Headquarter of Bilaspur. HRTC Volvo and Ordinary Buses also operates to the National Capital. In February 2019.
Despite of lying in the lower Himalayan region Nihari, a suburb of Ghumarwin experienced snowfall after 4 decades. In coming future is going to be connected by four lane in all directions. The Kiratpur-Nerchowk Expressway four lane project will come near Bhager which is 7 km away. Ghumarwin is also connected to Kuthera 12 Kms. away which is another fast developing sub center by two lane highway.<br>
SR. NO. CITY/TOWN DISTANCE<br>
1. Hamirpur 41 Kms.<br>
2. Una 97 Kms.<br>
3. Bilaspur 22 Kms.<br>
4. Swarghat 59 Kms.<br>
5. Kiratpur 80 Kms.<br>
6. Nalagarh 89 Kms.<br>
7. Baddi 104 Kms.<br>
8. Shimla 104 Kms.<br>
9. Mandi 72 Kms.<br>
10. Kullu 139 Kms.<br>
11. Solan 120 Kms.<br>
12. Dharamshala 130 Kms.<br>
13. Chandigarh 136 Kms.<br>
14. Panchkula 139 Kms.<br>
15. Delhi 400 Kms.<br></p>
</div>
</div>
<div class="footer">
<h2><FONT SIZE="5" COLOR="cccc99"> © Copyright Act All Reserved for Bilaspur Tourism
Developed By sahil sharma (vl)</FONT></h2>
</div>
</body>
</html>
output:
0 Comments