<!--
Author: W3layouts
Author URL: http://w3layouts.com
-->
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Go Trip a Travel Category Responsive Web Template| Home :: W3layouts</title>
<!-- Template CSS -->
<link rel="stylesheet" href="assets/css/style-starter.css">
<link href="//fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<link href="//fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap" rel="stylesheet">
</head>
<body id="home">
<section class=" w3l-header-4 header-sticky">
<!--header-->
<header id="site-header" class="fixed-top">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark stroke">
<h1><a class="navbar-brand" href="index.html">
<span class="fa fa-map-signs"></span> Go Trip
</a></h1>
<!-- if logo is image enable this
<a class="navbar-brand" href="#index.html">
<img src="image-path" alt="Your logo" title="Your logo" style="height:35px;" />
</a> -->
<button class="navbar-toggler collapsed bg-gradient" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon fa icon-expand fa-bars"></span>
<span class="navbar-toggler-icon fa icon-close fa-times"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-lg-5">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item @@about__active">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item @@services__active">
<a class="nav-link" href="services.html">Explore</a>
</li>
<li class="nav-item @@contact__active">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item ml-4">
<a class="nav-link phone" href="tel:+(21)-234-9999"><span class="fa fa-phone"></span> +(21)-234-9999</a>
</li>
<li class="nav-item" title="Search"><a href="#search" class="search-search nav-link"><span class="fa fa-search mr-2" aria-hidden="true"></span></a></li>
<!-- search -->
<div class="search-right">
<!-- search popup -->
<div id="search" class="pop-overlay">
<div class="popup">
<form action="#" method="GET" class="d-flex">
<input type="search" placeholder="Search.." name="search" required="required" autofocus>
<button type="submit">Search</button>
</form>
<a class="close" href="#close">×</a>
</div>
</div>
<!-- /search popup -->
</div>
<!--/ search -->
</ul>
</div>
<!-- toggle switch for light and dark theme -->
<div class="mobile-position">
<label class="theme-selector">
<input type="checkbox" id="themeToggle">
<i class="gg-sun"></i>
<i class="gg-moon"></i>
</label>
</div>
<!-- //toggle switch for light and dark theme -->
</nav>
</div>
</header>
<!--/header-->
</section>
<script src="assets/js/jquery-3.3.1.min.js"></script> <!-- Common jquery plugin -->
<!--bootstrap working-->
<script src="assets/js/bootstrap.min.js"></script>
<!--bootstrap working//-->
<!--/MENU-JS-->
<script>
$(window).on("scroll", function () {
var scroll = $(window).scrollTop();
if (scroll >= 80) {
$("#site-header").addClass("nav-fixed");
} else {
$("#site-header").removeClass("nav-fixed");
}
});
//Main navigation Active Class Add Remove
$(".navbar-toggler").on("click", function () {
$("header").toggleClass("active");
});
$(document).on("ready", function () {
if ($(window).width() > 991) {
$("header").removeClass("active");
}
$(window).on("resize", function () {
if ($(window).width() > 991) {
$("header").removeClass("active");
}
});
});
</script>
<!--//MENU-JS-->
<!-- disable body scroll which navbar is in active -->
<script>
$(function () {
$('.navbar-toggler').click(function () {
$('body').toggleClass('noscroll');
})
});
</script>
<!-- disable body scroll which navbar is in active -->
<!--theme switcher dark and light mode script-->
<script>
const bodyElement = document.querySelector('body');
const themeToggle = document.querySelector('#themeToggle');
const darkModeMql = window.matchMedia('(prefers-color-scheme: dark)');
const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : userPreference(darkModeMql);
if (currentTheme) {
bodyElement.classList.add(currentTheme);
if (currentTheme === 'dark') {
themeToggle.checked = true;
}
}
function userPreference(e) {
if (e.matches) {
bodyElement.classList.add("dark");
return "dark"
} else {
bodyElement.classList.remove("dark");
return ""
}
}
darkModeMql.addListener(userPreference);
function themeSwitcher(e) {
if (e.target.checked) {
bodyElement.classList.add('dark');
localStorage.setItem('theme', 'dark');
} else {
bodyElement.classList.remove('dark');
localStorage.setItem('theme', '');
}
}
themeToggle.addEventListener('change', themeSwitcher);
</script>
<!--theme switcher dark and light mode script//-->
<section class="w3l-main-slider" id="home">
<!-- main-slider -->
<div class="companies20-content">
<div class="owl-one owl-carousel owl-theme">
<div class="item text-center">
<li>
<div class="slider-info banner-view bg bg2" data-selector=".bg.bg2">
<div class="banner-info">
<div class="container">
<div class="banner-info-bg mr-auto">
<h5>Welcome<br>
To Let’s Travel</h5>
<p>Conse ctetur Lorem ipsum dolor sit amet adipi sicing elit. Quae, velit recu sandae eum necessi tatibus bland itiis adipisci Mollitia placeat modi explicabo voluptatum corporis.</p>
<a class="btn btn-theme2 mt-lg-5 mt-4" href="contact.html">Book Your Travel</a>
</div>
</div>
</div>
</div>
</li>
</div>
<div class="item text-center">
<li>
<div class="slider-info banner-view banner-top1 bg bg2" data-selector=".bg.bg2">
<div class="banner-info">
<div class="container">
<div class="banner-info-bg mr-auto">
<h5>Welcome <br>
To Let’s Travel </h5>
<p>Conse ctetur Lorem ipsum dolor sit amet adipi sicing elit. Quae, velit recu sandae eum necessi tatibus bland itiis adipisci Mollitia placeat modi explicabo voluptatum corporis.</p>
<a class="btn btn-theme2 mt-lg-5 mt-4" href="contact.html">Book Your Travel</a>
</div>
</div>
</div>
</div>
</li>
</div>
<div class="item text-center">
<li>
<div class="slider-info banner-view banner-top2 bg bg2" data-selector=".bg.bg2">
<div class="banner-info">
<div class="container">
<div class="banner-info-bg mr-auto">
<h5>Welcome<br>
To Let’s Travel</h5>
<p>Conse ctetur Lorem ipsum dolor sit amet adipi sicing elit. Quae, velit recu sandae eum necessi tatibus bland itiis adipisci Mollitia placeat modi explicabo voluptatum corporis.</p>
<a class="btn btn-theme2 mt-lg-5 mt-4" href="contact.html">Book Your Travel</a>
</div>
</div>
</d
HTML网站源码-旅游度假路线网页模板-响应式源码.zip
版权申诉
135 浏览量
2024-03-26
09:48:36
上传
评论
收藏 5.03MB ZIP 举报
HTML网站源码-旅游度假路线网页模板-响应式源码.zip （43个子文件） 
HTML网站源码-旅游度假路线网页模板-响应式源码 html assets js 
all.js 2KB bootstrap.min.js 57KB app.js 727B popper.min.js 21KB jquery-3.3.1.min.js 68KB particles.min.js.js 23KB owl.carousel.js 88KB script.js 4KB css style-starter.css 294KB images 
b1.jpg 355KB 2.jpg 269KB b8.jpg 238KB
down.png 240B b2.jpg 259KB blog5.jpg 21KB b6.jpg 231KB 1.jpg 164KB t3.jpg 40KB b7.jpg 263KB b3.jpg 255KB blog3.jpg 17KB blog6.png 128KB t1.jpg 73KB b5.jpg 203KB b4.jpg 145KB t4.jpg 68KB blog2.jpg 15KB blog4.jpg 19KB t2.jpg 66KB 3.jpg 342KB blog1.jpg 13KB 4.jpg 235KB videos 
video.mp4 1004KB fonts FontAwesome.otf 132KB fontawesome-webfont.eot 162KB fontawesome-webfont.woff 96KB fontawesome-webfont.woff2 75KB
fontawesome-webfont.svg 434KB fontawesome-webfont.ttf 162KB
services.html 15KB index.html 22KB contact.html 13KB about.html 15KB资源评论
