Basically you have a little knowledge of html, css, and we can complete this basic home page layout for tourist ads homepage
i will give you a all code of this page and and also provide a code in zip file if you want learn a basic and advance level follow webdesigns0.blogspot.com
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Website of Ranthambore National Park, Uttarakhand India - Home</title>
<meta name="description"
content="Ranthambore National Park, history & culture, Ranthambore pictures, contributed articles & anecdotes, Ranthambore Tour Packages, How to Reach Ranthambore, information for visitors Ranthambore national park, Ranthambore tiger reserve Ranthambore online Ranthambore safari booking and hotels & Resorts in Ranthambore." />
<meta name="keywords"
content="Ranthambore national park, Ranthambore national park, Ranthambore tiger reserve, Ranthambore park, Ranthambore park india, information for visitors Ranthambore, safari permits" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
<link rel="icon" href="img/favicon.png" type="image/x-icon">
</head>
<body>
<section class="header">
<div class="container">
<div class="row">
<div class="col-lg-12">
<nav class="navbar navbar-expand-lg navbar-light ">
<a class="navbar-brand" href="index.html"><img src="img/logo.png" class="img-fluid header-logo" alt="logo"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto custom-nav" >
<li class="nav-item ">
<a class="nav-link" href="index.html">Home <span class="sr-only"></span></a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#html">About Us <span class="sr-only"></span></a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">Sertvices <span class="sr-only"></span></a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">Blog <span class="sr-only"></span></a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#" data-toggle="modal" data-target="#myModal">Contact Us</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="tel:+91-8527788324">+91-8527788324</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</section>
<section>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<h3 class="carouse-hedaing text-center">RANTHAMBORE NATIONAL PARK</h3>
<p class="carouse-para text-center">Book your Jeep & Canter Safari online</p>
<img class="d-block w-100" src="img/banner-01.jpg" alt="First slide">
</div>
<div class="carousel-item">
<h3 class="carouse-hedaing text-center">We Offer Best Services and Packages</h3>
<p class="carouse-para text-center">Book your Jeep & Canter Safari online</p>
<img class="d-block w-100" src="img/banner-02.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<h3 class="carouse-hedaing text-center">Ranthambore Safari Zones</h3>
<p class="carouse-para text-center">Book your Jeep & Canter Safari online</p>
<img class="d-block w-100" src="img/banner-03.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
<section class="custom-bg-section-1">
<div class="container">
<div class="row">
<div class="col-lg-12 content-section-one">
<h2 class="text-center ">Ranthambore National Park</h2>
<p>Located in the Sawai Madhopur district of south east Rajasthan, Ranthambore National Park is one of the biggest and the most renowned national parks in North India. It is spread over an area of 392 sq. kms and is about 130 kms away from Jaipur. People come from all parts of the world to witness the great Royal Bengal Tiger in action here. There was a time when this park was famous as the favorite hunting ground for the Maharajas of Jaipur. Now known for its rich heritage and wildlife, it attracts tourists, wildlife lovers and photographer from world over.</p>
<p>Ranthambore is known for its scenic beauty, with its mix of dry deciduous forest, hills, lakes, and ruins of ancient forts. The park is also famous for the Ranthambore Fort, which dates back to the 10th century and provides an excellent vantage point to see the surrounding landscape.</p>
<p>Visitors to Ranthambore National Park can participate in guided jeep safaris, which offer a unique opportunity to see the park's wildlife and scenery up close. The park is also a popular destination for nature lovers and wildlife enthusiasts, who come to observe and photograph the Bengal tigers, one of the most magnificent and elusive animals in the world. Overall, Ranthambore National Park is a must-visit destination for those interested in wildlife and nature, offering a unique combination of natural beauty and rich cultural heritage.</p>
<h2 class="text-center">We Offer Best Services and Packages</h2>
<p>We cater to the diverse needs of the clients. We offer a wide variety of packages for the customer to choose from. Based on their personal needs, customized packages can also be curated. We have trained professionals who design packages keeping in mind the requirements of the clients and offer them the best vacationing experience. From weekend packages to packages designed for family with kids or honeymooning couples, there is a long list of options to choose from. We even offer packages which include tourist destinations near Ranthambore National Park. Special discounted packages for school groups and other groups visiting the place for educational purposes are also available with us.</p>
</div>
<div class="col-lg-4 service-content text-center">
<img src="img/safari-booking.jpg" class="img-fluid">
<p class="py-2"><a href="#">Safari Booking</a></p>
</div>
<div class="col-lg-4 service-content text-center">
<img src="img/tour-booking.jpg" class="img-fluid">
<p class="py-2"><a href="#">Tour Booking</a></p>
</div>
<div class="col-lg-4 service-content text-center">
<img src="img/hotel-booking.jpg" class="img-fluid">
<p class="py-2"><a href="#">Hotel Booking</a></p>
</div>
<div class="col-lg-12 text-center py-2"><button class="btn cta-btn" data-toggle="modal" data-target="#myModal">BOOK NOW</button></div>
</div>
</div>
</section>
<section class="custom-bg-section-2">
<div class="container">
<div class="row py-1" >
<div class="col-lg-12 ranthambore-safari-text">
<h2>Ranthambore Safari Zones</h2>
<p>The park has been divided into 10 safari zones. In the beginning there were only 5 zones. But as the popularity of the park increased, 5 more zones were added.</p>
</div>
<div class="col-lg-3">
<img src="img/ranthambore-safari-zone.jpg " class="img-fluid">
</div>
<div class="col-lg-9 ">
<p class="safari-zones-para">
<strong>Zone 1 :</strong> This zone starts from the entry point and runs all the way to Singh Dwar. It is famous for the return of Noor with her 3 cubs. This zone is famous for its tigers and is considered to be one of the best places to spot them.
</p>
<p class="safari-zones-para">
<strong>Zone 2 :</strong> This zone has water holes and has reported sightings of cats T19, T22, T72, T57, T28, T60 and T39. This makes it the most important zone.
</p>
<p class="safari-zones-para">
<strong>Zone 3 :</strong>This zone includes Padam Talao, Jogi Mahal, High point, Rajbagh and Mandook.
</p>
<p class="safari-zones-para">
<strong>Zone 4 :</strong>This the home of Machli - the famous Ranthambore tigress. Other cats spotted in this area are T28, T64, T19, T75, T41 and T25.
</p>
</div>
</div>
<div class="row py-1">
<div class="col-lg-9 ">
<p class="safari-zones-para">
<strong>Zone 5 :</strong> The entry to this zone is the same as that of zone 4. It includes Singhdwar, Anatpur, Jokha, Dhakda, Kachida, Baghda and Bakola. Cats spotted here T25, T28, T17, T74 and T75. The entry for zones 6-10 is the exact opposite end from the entry of zones 1-5.
</p>
<p class="safari-zones-para">
<strong>Zone 6 :</strong> It shares its boundaries with zone 1, hence you might spot Noor here as well. Its landscape includes open grasslands with mountains in the backdrop. This zone is known for its good population of sloth bears and is considered to be a good place for wildlife viewing.
</p>
<p class="safari-zones-para">
<strong>Zone 7 :</strong>The spotting points in this zone are less compared to other zones. This zone is known for its large number of chital deer and is considered to be a good place for bird watching.
</p>
</div>
<div class="col-lg-3">
<img src="img/ranthambore-safari-zone-01.jpg" class="img-fluid">
</div>
</div>
<div class="row py-1">
<div class="col-lg-3">
<img src="img/ranthambore-safari-zone-02.jpg" class="img-fluid">
</div>
<div class="col-lg-9 ">
<p class="safari-zones-para">
<strong>Zone 8 :</strong> Tigers spotted here are same as those in zone 7. This zone is known for its good tiger sightings and is a popular spot for tourists.
</p>
<p class="safari-zones-para">
<strong>Zone 9 :</strong> It is 45 minutes away from the tiger reserve. It is home to the aggressive Fateh, who is known for chasing forest department vehicles. You can also spot Caracals, sloth bear and birds in this zone. This zone is located near the Raj Bagh ruins and offers a good chance to see tigers and leopards.
</p>
<p class="safari-zones-para">
<strong>Zone 3 :</strong>This zone includes Padam Talao, Jogi Mahal, High point, Rajbagh and Mandook.
</p>
<p class="safari-zones-para">
<strong>Zone 10 :</strong> This zone is also great for bird watching and spotting tigers and includes Aantri, Kushalipura, Bodal, Halonda and Banskhori. This zone is known for its serene atmosphere and sightings of tigers, leopards, and sambars.
</p>
</div>
</div>
</div>
</section>
<section class="contact-section">
<div class="container">
<div class="row">
<div class="col-lg-6">
<img src="img/enquiry.png" class="img-fluid">
</div>
<div class="col-lg-6 form-heading">
<h3>Contact Us</h3>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Name</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Phone number</label>
<input type="text" class="form-control" id="exampleInputnumber" aria-describedby="phone-number" placeholder="Enter phone number">
</div>
<div class="form-group">
<label for="exampleInputzone">Zone</label>
<input type="text" class="form-control" id="exampleInputzone" aria-describedby="zone" placeholder="Enter zone">
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Message</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="5" placeholder="Enter a message"></textarea>
</div>
<button type="submit" class="btn submit-btn">Submit</button>
</form>
</div>
</div>
</div>
</section>
<section class="service-content-box">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h3>Top Activities To Explore Ranthambore</h3>
</div>
<div class="col-lg-3 service-content-1">
<img src="img/spoting-wild-animal.jpg" class="img-fluid">
<p class="py-2"><a href="#">Spotting Wild Animals</a></p>
<span>There are a large number of mammals, reptiles and birds that reside in the Ranthambore National Park. Of course, the most prominent is the Royal Bengal Tiger.</span>
</div>
<div class="col-lg-3 service-content-1">
<img src="img/bird-watching.jpg" class="img-fluid">
<p class="py-2"><a href="#">Bird Watching</a></p>
<span>Most of the people associate Ranthambore as the natural habitat for the Royal Bengal tiger, but what they do not know is that it is also the home for 320 species of birds.</span>
</div>
<div class="col-lg-3 service-content-1">
<img src="img/jeep-safari.jpg" class="img-fluid">
<p class="py-2"><a href="#">Jeep Safari</a></p>
<span>The whole park has been divided into 10 zones. By taking an open 6 seater gypsy, you will be able to easily explore all these 10 zones. There are both day and night safari tours available.</span>
</div>
<div class="col-lg-3 service-content-1">
<img src="img/canter-safari.jpg" class="img-fluid">
<p class="py-2"><a href="#">Canter Safari</a></p>
<span>This is another great way to explore the great Ranthambore national Park. This 20 seater open safari bus operates at regular timings everyday and takes the tourists through the all 10 zones of the park.</span>
</div>
</div>
</div>
</section>
<section class="footer-bg">
<div class="container">
<div class="row ">
<div class="col-lg-7"><p class="Copyrights-text">Copyrights © 2023 webdesigns0.blogspot.com | All rights reserved.</p></div>
<div class="col-lg-5 footer-list">
<ul>
<li><a href="#">Terms & Conditions </a></li>
<li><a href="#">Privacy Policy </a></li>
<li><a href="#">Cancellation Policy </a></li>
</ul>
</div>
</div>
</div>
</section>
<!-- ============modal=========== -->
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Contact Us</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col-lg-5">
<img src="img/popup-enquiry.png" class="img-fluid">
</div>
<div class="col-lg-7 form-heading">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Name</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputnumber">Phone number</label>
<input type="text" class="form-control" id="exampleInputnumber" aria-describedby="phone-number" placeholder="Enter phone number">
</div>
<div class="form-group">
<label for="exampleInputzone">Zone</label>
<input type="text" class="form-control" id="exampleInputzone" aria-describedby="zone" placeholder="Enter zone">
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Message</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="4" placeholder="Enter a message"></textarea>
</div>
<button type="submit" class="btn submit-btn">Submit</button>
</form>
</div>
</div>
</div>
</div>
<!-- <div class="modal-footer">
<button type="button" class="btn btn-secondary mx-auto" data-dismiss="modal">Close</button>
</div> -->
</div>
</div>
</div>
<!-- ===========modalend============ -->
<script src="js/jquery-3.2.1.slim.min.js" ></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(window).on('load',function(){
var delayMs = 1500; // delay in milliseconds
setTimeout(function(){
$('#myModal').modal('show');
}, delayMs);
});
</script>
</body>
</html>
body{
margin: 0;
padding: 0;
font-family: 'Saira Semi Condensed', sans-serif;
/*font-family: 'Montserrat', sans-serif;*/
}
.navbar-toggler{}
.header{
background: #fff;
width: 100%;
}
.custom-nav .nav-item {padding: 0 15px;}
.custom-nav {margin: 0 0 0 auto !important;}
.custom-nav .active a{color: #d3d3d3 !important;}
.custom-nav li a{color: #000!important; font-size: 18px; }
.header-logo{height: 60px;}
.carouse-hedaing{position: absolute;
top: 44%;
font-size: 40px;
font-weight: 600;
text-align: center;
width: 100%;
color: #fff}
.carouse-para{position: absolute;
top: 55%;
font-size: 15px;
text-align: center;
width: 100%;
color: #fff}
.content-section-one h2{
font-size: 35px;
font-weight: 600;
padding: 50px 0 15px 0;
}
.service-content img{
margin: 10px 0 0 0;
box-shadow: 6px 3px 11px 3px #9b9b9b;
border: 7px solid white;
}
.service-content img:hover{
box-shadow: none;
transition: .5s ease;
border: 7px solid white;
}
.service-content p a{font-size: 15px;color: #000;
font-size: 19px;
font-weight: 600;
text-align: center;}
.service-content p{ font-size: 15px; margin: 0; font-size: 16px; font-weight: bold; text-align: center;}
.cta-btn{ font-size: 15px; font-size: 16px; font-weight: bold; padding: 8px 25px; border: 1px solid rebeccapurple; color: #fff;
background: rebeccapurple;}
.safari-zones-para{margin: 0px 0 10px 0;}
.ranthambore-safari-text h2{text-align: center; font-weight: 600; padding: 10px 0 0 0;}
.footer-bg{background: rebeccapurple; min-height: 60px;}
.Copyrights-text{color: #fff; padding: 20px 0 0 0;}
.footer-list ul{margin: 0; padding: 0; padding: 20px 0 0 0;}
.footer-list ul li{list-style: none; float: right; padding: 0 10px 0; font-size: 16px;}
.footer-list ul li a{color: #fff; text-decoration: none;}
.custom-bg-section-1{}
.custom-bg-section-2{background: #f5faff;
margin: 45px 0 00;
padding: 15px 0;}
.submit-btn{color: #fff;
background: rebeccapurple; width: 160px; font-size: 17px; font-weight: 600;}
.form-heading h3{font-size: 30px; font-weight: 600; padding: 15px 0;}
.contact-section{ margin: 45px 0 00;
padding: 15px 0}
.service-content-box{margin: 60px 0 10px 0;
padding: 15px 0; background: #f5faff;}
.service-content-box h3{text-align: center; padding: 25px 0 15px 0; font-weight: 600;}
.service-content-1 p {font-size: 15px;color: #000;
font-size: 19px;
font-weight: 600;
margin: 10px 0 0 0;
}
.service-content-1 p a{font-size: 15px;color: #000;
font-size: 19px;
font-weight: 600;
text-align: center;
text-decoration: none;}
.service-content-1 span{text-align: justify-all; font-size: 15px;}
.service-content-1 img{
margin: 10px 0 0 0;
box-shadow: 6px 3px 11px 3px #9b9b9b;
border: 7px solid white;
}
.service-content-1 img:hover{
box-shadow: none;
transition: .5s ease;
border: 7px solid white;
}
.modal-title{font-weight: 600;
font-size: 26px;
text-align: center;
width: 100%;}
.close{ color: red;
font-size: 35px;}
/*
===========responsive csss============*/
@media only screen and (max-width: 600px) {
.carouse-hedaing{font-size: 20px;}
}
Comments