Creating an Online Travel Agency Website using HTML and CSS : Tutorial #3
Hello Coders :) , I am here with a new tutorial to make a website with some more amazing css styling. Previously, I made a website for a Gym in which I included some basic CSS styling including small animations.
link : https://codingatess.blogspot.com/2023/07/tutorial-website-for-gym.html
In this website, you will see some more exciting CSS styling including shadows, transitions etc. In next tutorial, we will make this website responsive for different media devices.
the website includes one page includes only one page including different links in which we can add other pages.
here's the code for the website :
HTML CODE :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cheap Affordable travel packages - VideshYatra.com</title>
<link href="home.css" rel="stylesheet">
</head>
<body>
<div class="nav">
<img src="logo.jpg" id="logo">
<nav id="navbar">
<ul>
<a href="#">
<li>HOME</li>
</a>
<a href="#">
<li>SERVICES</li>
</a>
<a href="#">
<li>DESTINATIONS</li>
</a>
<a href="#">
<li>CONTACT US</li>
</a>
<a href="#">
<li>ABOUT US</li>
</a>
</ul>
</nav>
<div class="social">
<a href="#"><img src="instagram.png" alt=""></a>
<a href="#"><img src="twitter.png" alt=""></a>
<a href="#"><img src="facebook.png" alt=""></a>
<a href="#"><img src="youtube.png" alt=""></a>
</div>
</div>
</div>
<div class="socialbg"></div>
<div class="navbg"></div>
<div class="wall">
<img src="wallpaper.jpg" alt="">
</div>
<div class="searchbar">
<a href="#"><img src="search.png" alt=""></a>
<input type="search" placeholder="Search your Destination">
</div>
<div class="title">
<h1>VideshYatra.com</h1>
</div>
<div class="popular">
<h1>POPULAR PLACES</h1>
</div>
<div class="popularplaces">
<a href="#"><img src="munnar (1).jpg" alt=""></a>
<a href="#"><img src="new york.jpg" alt=""></a>
<a href="#"><img src="maldives (1).jpg" alt=""></a>
<a href="#"><img src="mauritious (1).jpg" alt=""></a>
<a href="#"><img src="bali (1).jpg" alt=""></a>
<a href="#"><img src="andaman (1).jpg" alt=""></a>
</div>
<div class="placenames">
<h3>MUNNAR</h3>
<h3>NEW YORK</h3>
<h3>MALDIVES</h3>
<h3>MAURITIOUS</h3>
<h3>BALI</h3>
<h3>ANDAMAN</h3>
</div>
<div class="phone">
<h3>+91 9289473291</h3>
</div>
<div class="pricing">
<h1>PRICING</h1>
</div>
<div class="price1">
<h3>
<h1>📍CLASSIC</h1>
<hr>
<b>budget Range:</b> $500 - $800<br> <br>
<b>Package Duration:</b> 3-5 days<br> <br>
<b>Accommodation:</b> 2-3 star hotels or <br>budget-friendly accommodations <br> <br>
<b>Transport:</b> Economy class flights or buses <br> <br>
<b>Destinations:</b> Local or nearby attractions <br> <br>
<b>Inclusions:</b> Basic sightseeing tours, selected meals and airport transfers
</h3>
</div>
<div class="price2">
<h3>
<h1>📍LUXURY</h1>
<hr>
<b>Price Range</b>: $1500 - $3000 <br><br>
<b>Package Duration</b>: 7-10 days <br><br>
<b>Accommodation</b>: 5-star hotels or luxury resorts <br><br>
<b>Transport</b>: Business class flights or <br>private chauffeur-driven cars <br><br>
<b>Destinations</b>: Exotic and exclusive locations <br><br>
<b>Inclusions</b>: VIP sightseeing, gourmet meals,<br> cultural experiences, and personalized services
</h3>
</div>
<div class="price3">
<h3>
<h1>📍FAMILY</h1>
<hr>
<b>Price Range:</b> $1200 - $1800 <br><br>
<b>Package Duration:</b> 6-9 days <br><br>
<b>Accommodation:</b> Family-friendly hotels or vacation rentalsbr
<br><br>
<b>Transport:</b> Flights or private transfers suitable for families <br><br>
<b>Destinations:</b> Kid-friendly attractions <br> and entertainment <br><br>
<b>Inclusions:</b> Family-oriented activities, theme park visits, and kid-friendly meals
</h3>
</div>
<div class="purchasegrid">
<h1>BUY</h1>
<h1>BUY</h1>
<h1>BUY</h1>
</div>
</div>
<div class="disclaimer">
<h3>
<h2>Disclaimer</h2>
<hr>
Please note that the information provided on our travel packages website is for general guidance purposes
only. Prices, itineraries, <br> and availability are subject to change without prior notice. We do not
guarantee the accuracy or completeness of the content. Customers are advised <br>to verify all details
before making any bookings. We are not responsible for any losses, damages, or inconveniences resulting from
the use of our website or <br>services. Travel at your own risk.
</h3>
</div>
</body>
</html>
CSS CODE :-
body {
background: rgb(179 180 168);
width: fit-content;
}
.nav {
z-index: 0;
display: flex;
flex-direction: row;
padding: 20px;
height: 1cm;
background-color: aqua;
width: 33cm;
}
.navbg {
display: block;
position: relative;
background-color: white;
height: 78px;
width: 18.9cm;
left: 5.3cm;
top: -160px;
z-index: 0;
}
#logo {
position: relative;
height: 60px;
top: -10px;
width: 60px;
border-radius: 2cm;
background-size: cover;
}
#navbar {
z-index: 1;
width: 20cm;
height: 50px;
position: absolute;
left: 5cm;
top: 15px;
justify-content: center;
text-align: start;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-weight: bold;
font-style: oblique;
font-size: larger;
}
#navbar ul li {
display: inline;
position: sticky;
}
#navbar a {
text-decoration: none;
color: black;
padding: 20px 20px;
}
#navbar a:hover {
color: red;
}
.phone {
display: inline-block;
}
.phone h3 {
position: relative;
bottom: 47.27cm;
left: 29cm;
font-size: larger;
}
.social {
display: grid;
grid-template-columns: repeat(5, 60px);
position: absolute;
width: 20px;
left: 34cm;
z-index: 2;
}
.social img {
height: 40px;
width: 40px;
transition: transform 100ms;
filter: drop-shadow(2px 1px 3px black);
}
.social img:hover {
transform: scale(1.3);
}
.socialbg {
display: inline-block;
position: relative;
background-color: white;
height: 78px;
width: 6.7cm;
left: 33.3cm;
top: -78px;
z-index: 1;
}
.wall {
display: inline;
z-index: 6;
}
.wall img {
width: 40cm;
height: 10cm;
display: inline-block;
position: absolute;
top: 4cm;
z-index: 5;
filter: brightness(0.7);
}
.searchbar {
display: block;
position: relative;
z-index: 6;
}
.searchbar img {
height: 42px;
position: relative;
width: 40px;
left: 26cm;
filter: drop-shadow(3px 3px 5px black);
top: 129px;
}
.searchbar input {
display: block;
height: 1.5cm;
width: 13cm;
padding: 11px;
text-align: left;
font-family: math;
font-weight: bold;
font-size: larger;
box-shadow: 3px 4px 4px black;
position: relative;
left: 12cm;
top: 2cm;
}
.title {
display: inline-block;
}
.title h1 {
color: rgb(253, 246, 246);
position: relative;
font-family: emoji;
font-size: 138px;
top: -7cm;
left: 7cm;
z-index: 7;
text-shadow: 2px 6px 3px black;
font-style: italic;
-webkit-text-stroke: 2.5px black;
}
.popular {
display: inline-block;
}
.popular h1 {
position: relative;
left: -10cm;
font-family: fantasy;
font-size: 41px;
top: 1cm;
color: blue;
-webkit-text-stroke: 1px black;
letter-spacing: 3px;
}
.popularplaces {
display: grid;
grid-template-columns: repeat(3, 400px);
position: relative;
row-gap: 60px;
width: 5cm;
}
.popularplaces img {
display: inline-block;
position: relative;
height: 300px;
left: 5.1cm;
width: 300px;
border: 3px solid black;
box-shadow: 2px 3px 4px black;
filter: grayscale();
transition: transform ease-in 100ms, filter ease-in 100ms;
z-index: 7;
}
.popularplaces img:hover {
transform: scale(1.1);
filter: contrast(1)
}
.placenames {
display: grid;
grid-template-columns: repeat(3, 387px);
position: relative;
width: 0;
row-gap: 312px;
bottom: 10cm;
left: 6cm;
z-index: 6;
}
.placenames h3 {
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size: larger;
}
.picing {
display: block;
}
.pricing h1 {
color: red;
position: relative;
text-shadow: 2px 2px 4px black;
-webkit-text-stroke: 2px black;
top: -10cm;
left: 18cm;
display: inline-block;
font-family: cursive;
font-size: 50px;
}
.price1 {
display: inline-block;
border: 2px solid black;
padding: 1px 20px 60px 20px;
background-color: rgb(255, 145, 0);
transition: bottom ease 100ms, transform ease 100ms;
width: 9cm;
height: 9cm;
position: relative;
bottom: 8cm;
left: 1cm;
box-shadow: 1px 1px 10px black;
}
.price1:hover {
bottom: 8.2cm;
transform: scale(1.04);
}
.price2 {
display: inline-block;
border: 2px solid black;
background-color: rgb(255, 145, 0);
;
padding: 1px 20px 60px 20px;
transition: bottom ease 100ms, transform ease 100ms;
width: 9cm;
height: 9cm;
position: relative;
bottom: 8cm;
left: 4cm;
box-shadow: 1px 1px 10px black;
}
.price2:hover {
bottom: 8.2cm;
transform: scale(1.04);
}
.price3 {
display: inline-block;
border: 2px solid black;
background-color: rgb(255, 145, 0);
transition: bottom ease 100ms, transform ease 100ms;
padding: 1px 20px 60px 20px;
width: 9cm;
height: 9cm;
position: relative;
bottom: 7cm;
left: 7cm;
box-shadow: 1px 1px 10px black;
}
.price3:hover {
bottom: 7.5cm;
transform: scale(1.04);
}
.purchasegrid {
display: flex;
flex-direction: row;
column-gap: 8cm;
position: relative;
bottom: 7cm;
left: 3.1cm;
}
.purchasegrid h1 {
display: inline-block;
border: 2px solid rgb(255, 0, 0);
border-radius: 300px;
padding: 19px 61px;
color: wheat;
font-size: 42px;
font-family: cursive;
transition: transform ease 90ms, background-color ease 90ms;
box-shadow: 1px 1px 10px black;
background-color: rgb(193, 8, 8);
;
}
.purchasegrid h1:hover {
transform: scale(0.9);
background-color: red;
}
.disclaimer {
display: inline-block;
}
.disclaimer h2 {
display: block;
font-size: 50px;
font-family: 'Courier New', Courier, monospace;
}
.disclaimer {
color: rgb(8, 8, 8);
font-size: 20px;
border: 2px solid white;
width: 35cm;
height: 6.5cm;
left: 1.8cm;
bottom: 3cm;
position: relative;
padding: 9px 19px;
box-shadow: 2px 2px 9px black;
}
___________________________________________________________________________________
https://www.mediafire.com/folder/zr09sscivoe6f/Online+Travel+Agency+Website+2nd+Aug,23
Above link includes all the files I used for making the website
___________________________________________________________________________________
Steps to use this website template :
follow the steps to access this webpage and make changes according to your choice :
1. download and install vs code in your computer.
2. open vs code and install an extension "live server" in it.
3. create a new file named "home.html" and paste the html code provided for homepage.
4. again create a new file named "home.css" and paste the css code provided for homepage.
5. go to html file and click on "go live" to see the result.
HAPPY CODING :)
Post a Comment