BASIC TRAVEL GUIDE WEBSITE FOR BEGINNERS : Tutorial #1
I made a basic beginner friendly travel guide website for fellow beginners :-
The website includes some basic HTML tags including divisions and href tags for inserting links, and some basic CSS styling for the decoration of the website.
HERE'S THE HTML AND CSS CODE FOR THIS SITE :-
Html code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>travel website</title>
<link href="4.css" rel="stylesheet">
</head>
<body>
<div id="div1">
<h1>TirathYatra.com</h1>
</div>
<div id="div2">
<h1>THANKS FOR VISITING</h1>
</div>
<div id="img1">
<img src="https://images.pexels.com/photos/11305767/pexels-photo-11305767.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" id="img11">
</div>
<div id="img2">
<img src="https://cdn.pixabay.com/photo/2021/06/06/07/32/temple-6314509_1280.jpg" id="img22">
</div>
<div id="img3">
<img src="https://images.unsplash.com/photo-1573040219364-5d599e1d53f3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=735&q=80" id="img33">
</div>
<div id="img4">
<img src="https://media.istockphoto.com/id/1199254571/photo/yamunotri-tracking-picture-2019.jpg?s=2048x2048&w=is&k=20&c=mnPIWo8URwK_rLP5SHLc6XZ75YigC6JLiyzvswsE_Mc=" id="44">
</div>
<div id="kedarnath">
<h2>KEDARNATH</h2>
</div>
<div id="trek1">
<a href="https://www.namasteindiatrip.com/blog/kedarnath-trek-guide/" target="_blank">CLICK HERE</a>
</div>
<div id="badrinath">
<h2>BADRINATH</h2>
</div>
<div id="trek2">
<a href="https://devilonwheels.com/badrinath-the-most-complete-guide/" target="_blank">CLICK HERE</a>
</div>
<div id="gangotri">
<h2>GANGOTRI</h2>
</div>
<div id="trek3">
<a href="https://www.euttaranchal.com/tourism/gangotri.php" target="_blank">CLICK HERE</a>
</div>
<div id="yamunotri">
<h2>YAMUNOTRI</h2>
</div>
<div id="trek4">
<a href="https://www.euttaranchal.com/tourism/yamunotri.php" target="_blank">CLICK HERE</a>
</div>
</body>
</html>
CSS code :
#div1{
position: absolute;
top: 0%;
text-align: center;
text-shadow: 1px 2px rgb(216, 6, 27);
background-image: linear-gradient(270deg,red,blue,yellow,pink,magenta);
height: 3cm;
width: 49cm;
font-size: 20px;
font-family: cursive;
}
#div2{
text-align: center;
position: absolute;
bottom: 0;
background-image: linear-gradient(270deg,magenta,pink,yellow,blue,red);
height: 3cm;
font-size: 20px;
width: 49cm;
text-shadow: 1px 2px red;
font-family: cursive;
}
#img1{
position: absolute;
width: 12cm;
height: 12cm;
background-color: aqua;
overflow: hidden;
background-size: cover;
top: 3.2cm;
box-shadow: 4px 5px 10px black;
overflow: hidden;
}
#img11{
position: relative;
bottom: 5cm;
right: 9cm;
}
#kedarnath{
position: absolute;
background-color: orange;
top: 15.6cm;
height: min-content;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
left: 4.6cm;
}
#trek1{
position: absolute;
background-color: rgb(237, 195, 116);
top: 14.7cm;
}
#img2{
position: absolute;
width: 12cm;
height: 12cm;
background-color: aqua;
overflow: hidden;
background-size: cover;
top: 3.2cm;
left: 12.5cm;
box-shadow: 4px 5px 10px black;
}
#img22{
position: relative;
bottom: 4.6cm;
right: 2cm;
}
#badrinath{
position: absolute;
background-color: orange;
top: 15.6cm;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
left: 16.8cm;
}
#trek2{
position: absolute;
background-color: rgb(237, 195, 116);
top: 14.7cm;
left: 12.5cm;
}
#img3{
position: absolute;
width: 12cm;
height: 12cm;
background-color: aqua;
overflow: hidden;
background-size: cover;
top: 3.2cm;
left: 24.6cm;
box-shadow: 4px 5px 10px black;
}
#img33{
position: relative;
bottom: 6.5cm;
right: 5cm;
}
#gangotri{
position: absolute;
background-color: orange;
top: 15.6cm;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
left: 29cm;
}
#trek3{
position: absolute;
background-color: rgb(237, 195, 116);
top: 14.7cm;
left: 24.6cm;
}
#img4{
position: absolute;
width: 12cm;
height: 12cm;
background-color: aqua;
overflow: hidden;
background-size: cover;
top: 3.2cm;
left: 36.7cm;
box-shadow: 4px 5px 10px black;
}
#yamunotri{
position: absolute;
background-color: orange;
top: 15.6cm;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
left: 41cm;
}
#trek4{
position: absolute;
background-color: rgb(237, 195, 116);
top: 14.7cm;
left: 36.72cm;
}
Have any doubts ?,
Mail us on : artistaryan18@gmail.com
HAPPY CODING :)
Post a Comment