A Responsive Tourist Website
Introduction:
"Explore & Discover" is a modern and visually appealing tourist website designed to provide users with an immersive and interactive experience while exploring various travel destinations. Built using HTML, CSS, and JavaScript, this website combines stunning visuals, intuitive navigation, and dynamic features to offer a seamless browsing experience on both desktop and mobile devices.
Key Features:
1. Responsive Design:
The website is developed with a responsive layout, ensuring that it adapts seamlessly to different screen sizes and resolutions. Whether accessed on a desktop, tablet, or smartphone, users can enjoy the same level of functionality and visual appeal.
2. Eye-catching Visuals:
To captivate visitors, the website incorporates high-quality images and engaging multimedia elements that showcase the beauty and uniqueness of each travel destination. From breathtaking landscapes to cultural landmarks, the visuals aim to inspire wanderlust in users.
3. Intuitive Navigation:
The website features a well-organized and user-friendly navigation system, allowing visitors to effortlessly explore different sections and access relevant information. The responsive menu adapts to different screen sizes, ensuring easy access to all pages and content.
4. Destination Showcase:
Each travel destination is presented in a dedicated section, featuring enticing images, captivating descriptions, and key highlights. Users can learn about the history, culture, attractions, and activities available in each location, helping them make informed decisions about their travel plans.
5. Interactive Maps:
Interactive maps are integrated into the website, allowing users to explore destinations visually. Visitors can zoom in and out, click on markers to obtain more information, and plan their itineraries accordingly. The maps enhance user engagement and provide a sense of location and direction.
6. Trip Planner:
The website offers a trip planning feature where users can create personalized itineraries for their desired travel destinations. This interactive tool enables visitors to select attractions, accommodation options, and activities, and generate a customized plan that suits their preferences.
7. User Reviews and Ratings:
To enhance the credibility and user engagement, the website incorporates a review and rating system. Users can share their travel experiences, provide recommendations, and rate various destinations and services. This feature enables visitors to benefit from the insights and feedback of fellow travelers.
8. Social Media Integration:
To promote social sharing and expand the website's reach, social media integration is seamlessly integrated. Visitors can easily share their favorite destinations, itineraries, and experiences with their friends and followers, creating a vibrant community around the website.
Conclusion:
"Explore & Discover" is a responsive tourist website that combines HTML, CSS, and JavaScript to provide an immersive and interactive experience for travel enthusiasts. Through its visually stunning design, intuitive navigation, and dynamic features, the website aims to inspire, inform, and assist users in planning their dream vacations. Whether on a desktop or a mobile device, visitors can explore various travel destinations, create personalized itineraries, and connect with fellow travelers, all within a seamless and captivating user interface.
HTML CODE
<!--===================header section start====================================-->
<section class="header" id="header">
<div class="main_header" id="main_header">
<nav class="navbar" id="navbar">
<div class="logo">
<h1><span>CSP</span>Tours</h1>
</div>
<div class="links" id="links">
<a href="#home">Home</a>
<a href="#toure">Tours</a>
<a href="#Booking">Booking</a>
<a href="#Destinations">Destinations</a>
<a href="#pages">pages</a>
<a href="#Blog">Blog</a>
<a href="#Shortcodes">Shortcodes</a>
<a href="#Shop">Shop</a>
</div>
<div class="icon">
<span class="openbtn" onclick="openNav()" style="z-index: 99999;">☰</span>
<ion-icon name="cart-outline"></ion-icon>
<ion-icon name="heart"></ion-icon>
</div>
</nav>
<div class="header-content">
<center>
<h1>Where do you want to go?</h1>
<p>Trips, experiences, and places. All in one service.</p>
<form>
<input type="text" placeholder="Destination, City">
<select>
<option>Any Month</option>
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>june</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
<select>
<option>Short By Date</option>
<option>Price Low to Hight</option>
<option>Price Hight to Low</option>
<option>Short By Name</option>
<option>Short By Popularity</option>
<option>Short By Review Score</option>
</select>
<button type="submit">submit</button>
</form>
</center>
</div>
<div class="main-sidebar" id="main-sidebar"></div>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#home">Home</a>
<a href="#home">Tours</a>
<a href="#home">Booking</a>
<a href="#home">Destinations</a>
<a href="#home">pages</a>
<a href="#home">Blog</a>
<a href="#home">Shortcodes</a>
<a href="#home">Shop</a>
<ion-icon name="logo-facebook" class="facebook"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
<ion-icon name="logo-pinterest"></ion-icon>
<ion-icon name="logo-instagram"></ion-icon>
<ion-icon name="medical"></ion-icon>
<hr class="line">
<div class="side-box">
<div class="box">
<img src="img-1.jpeg">
<div class="conent">
<div class="nav">
<h2>Thailand</h2>
<h2>4.3<ion-icon name="star"></ion-icon> </h2>
</div>
<p>The next flight is on 26th Dec</p>
</div>
</div>
<div class="box">
<img src="img-2.jpeg">
<div class="conent">
<div class="nav">
<h2>Maldives</h2>
<h2>4.3<ion-icon name="star"></ion-icon> </h2>
</div>
<p>2 flights every week</p>
</div>
</div>
<div class="box">
<img src="img-3.jpeg">
<div class="conent">
<div class="nav">
<h2>Hong Kong</h2>
<h2>4.3<ion-icon name="star"></ion-icon> </h2>
</div>
<p>Daily 1 flight</p>
</div>
</div>
<div class="box">
<img src="img-4.jpeg">
<div class="conent">
<h2>Thailand</h2>
<h2>4.3<ion-icon name="star"></ion-icon> </h2>
<p>The next flight is on 12th Oct</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!--=========================header section end====================================-->
<script src="index.js"></script>
<!--ion-icon script link-->
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
CSS CODE
@import url('https://fonts.googleapis.com/css2?family=Gloock&family=Herr+Von+Muellerhoff&
family=Open+Sans:wght@300&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,
100;1,300;1,400;1,500;1,700;1,900&display=swap');
:root {
--main-color: #FF4A52;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
text-decoration: none;
transition: .3s linear;
}
html {
font-size: 62.5%;
overflow-x: hidden;
scroll-padding-top: 9rem;
scroll-behavior: smooth;
}
html::-webkit-scrollbar {
width: .8rem;
}
html::-webkit-scrollbar-track {
background: transparent;
}
html::-webkit-scrollbar-thumb {
background: var(--main-color);
border-radius: 4rem;
}
/* =================================header style start */
.header {
width: 100%;
height: 100vh;
background-image: url(header-gackrund.jpeg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.main_header {
width: 100%;
height: 100vh;
}
.navbar {
width: 100%;
padding: 40px 7%;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
right: 0;
left: 0;
}
.navbar .logo h1 {
font-size: 30px;
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #eee;
}
.navbar .logo h1 span {
font-weight: 100;
color: var(--main-color);
}
.navbar ion-icon {
font-size: 20px;
color: #eee;
padding: 0 5px;
}
.links {
margin-left: 290px;
}
.links a {
font-size: 15px;
padding: 20px 10px;
font-family: Arial, Helvetica, sans-serif;
color: #eee;
font-weight: 600;
cursor: pointer;
}
.links a:hover {
color: var(--main-color);
}
.openbtn {
font-size: 20px;
cursor: pointer;
color: #eee;
}
.header-content {
width: 100%;
padding: 100px;
/* background: red; */
position: absolute;
top: 150px;
display: flex;
align-items: center;
justify-content: center;
}
.header-content h1 {
font-size: 70px;
color: #eee;
font-family: Arial, Helvetica, sans-serif;
}
.header-content p {
font-size: 20px;
color: #eee;
font-family: Arial, Helvetica, sans-serif;
font-weight: 600;
padding-bottom: 50px;
}
.header-content form {
display: flex;
align-items: center;
}
.header-content form input {
width: 300px;
padding: 10px;
border-radius: 5px;
border: none;
margin: 0 10px;
}
.header-content form select {
width: 300px;
margin: 0 10px;
padding: 10px;
border-radius: 5px;
border: none;
}
.header-content form option {
border-radius: 10px;
}
.header-content form button {
padding: 6px 30px;
width: 200px;
font-size: 18px;
text-transform: uppercase;
background: var(--main-color);
border: none;
color: #eee;
cursor: pointer;
border-radius: 5px;
}
.header-content form button:hover {
background: #eee;
color: var(--main-color);
}
#main-sidebar {
width: 100%;
height: 100vh;
display: none;
transition: .5s;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #eee;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
display: block;
z-index: 999999;
font-family: 'Tilt Neon', cursive;
}
.sidenav a {
font-size: 20px;
text-align: left;
text-decoration: none;
text-transform: uppercase;
font-family: arial;
padding: 10px 0 20px 50px;
font-weight: 600;
display: block;
transition: 0.3s;
letter-spacing: 1px;
color: black;
}
.sidenav a:hover {
color: var(--main-color);
}
.sidenav .closebtn {
position: absolute;
top: 10px;
right: 30px;
font-size: 40px;
margin-left: 50px;
font-weight: 100;
padding: 10px 20px;
background: var(--main-color);
color: #eee;
border-radius: 50%;
}
.sidenav .closebtn:hover {
color: black;
}
.sideabr_btn {
padding: 10px 30px;
border: 2px solid var(--main-color2);
background: transparent;
text-transform: uppercase;
font-size: 15px;
font-weight: 400;
color: var(--main-color2);
letter-spacing: 1px;
position: relative;
left: 50px;
}
.sideabr_btn:hover {
cursor: pointer;
background: var(--main-color2);
color: #eee;
}
.sidenav ion-icon {
font-size: 20px;
padding: 10px;
margin-top: 50px;
color: var(--main-color);
}
.sidenav .facebook {
margin-left: 50px;
}
.sidenav ion-icon:hover {
opacity: .5;
cursor: pointer;
}
.sidenav ul li {
font-size: 20px;
color: var(--main-color);
margin-top: 0px;
padding-top: 0px;
}
.line {
width: 50%;
border-bottom: 1px solid var(--main-color);
margin: 20px 0 0 50px;
opacity: .5;
}
.side-box {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
padding: 10%;
overflow: hidden;
}
.side-box .box {
height: 200px;
border-radius: 10px;
overflow: hidden;
}
.box img {
width: 100%;
height: 100%;
}
.box:hover img {
transform: scale(1.2);
}
.conent {
width: 100%;
height: 100%;
position: relative;
top: -100%;
background: rgba(0, 0, 0, .5);
padding: 10px 20px;
opacity: 0;
}
.conent {
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px;
}
.conent h2 {
color: #eee;
font-size: 30px;
font-weight: 600;
font-family: 'Tilt Neon', cursive;
}
.conent h2 ion-icon {
color: yellow;
font-size: 30px;
position: relative;
top: 2px;
padding: 0 3px;
}
.conent p {
font-size: 18px;
color: rgba(255, 255, 255, .7);
padding: 5px 15px;
}
.box:hover .conent {
opacity: 1;
}
/* =================================header style end*/
@media only screen and (max-width: 991px) {
.main_header h1 {
font-size: 70px;
padding: 200px 5% 0 5%;
}
.links {
display: none;
}
}
@media only screen and (max-width: 768px) {
.header {
width: 100%;
height: auto;
}
.navbar .btn_A {
display: none;
}
.main_header h1 {
font-size: 40px;
padding: 200px 10% 20px 10%;
}
#nav_img {
width: 150px;
}
.header-content form {
display: block;
}
}
@media only screen and (max-width: 448px) {
.navbar .logo h1 {
font-size: 20px;
}
}
JAVASCRIPT CODE
function openNav() {
var width = document.getElementById("mySidenav");
var blur = document.querySelector('#main-sidebar');
var m_width = document.getElementById("main-sidebar");
if (window.innerWidth < 768) {
width.style.width = '100%';
} else {
width.style.width = '450px';
blur.style.backdropFilter = 'blur(30px)';
m_width.style.display = "block";
}
}
function closeNav() {
var width = document.getElementById("mySidenav");
var blur = document.querySelector('#main-sidebar');
var m_width = document.getElementById("main-sidebar");
width.style.width = "0";
m_width.style.display = "none";
blur.style.backdropFilter = 'blur(0px)';
}
var prevScrollpos = window.pageYOffset;
window.onscroll = function () {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.top = "0";
document.getElementById("nav_img").style.width = "150px";
document.getElementById("navbar").style.background = "rgba(0, 0, 0, 0.7)";
document.getElementById("navbar").style.zIndex = "9999";
document.getElementById("navbar").style.padding = "5px 7%";
if (screenTop == currentScrollPos) {
document.getElementById("navbar").style.top = "0px";
document.getElementById("navbar").style.background = "transparent";
document.getElementById("nav_img").style.width = "200px";
}
}
else {
document.getElementById("navbar").style.top = " -100px";
document.getElementById("navbar").style.background = "transparent";
document.getElementById("main_header").style.backdropFilter = "blur(0)";
}
prevScrollpos = currentScrollPos;
}
// Get a reference to the button that will trigger the addition of the div
var addButton1 = document.getElementById('about');
var addButton2 = document.getElementById('sub-link');
// Set the maximum number of divs that can be added
var divNo1 = document.getElementById('sub-link');
// div no 1
addButton1.addEventListener('mouseover', function (event) {
divNo1.style.display = "block";
divNo1.style.transform = "translateY(0)";
});
addButton1.addEventListener('mouseout', function (event) {
divNo1.style.display = "block";
});
addButton2.addEventListener('mouseover', function (event) {
divNo1.style.display = "block";
});
addButton2.addEventListener('mouseout', function (event) {
divNo1.style.display = "none";
});
Comments
Post a Comment