@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap');
:root{
--main-color:#8e44ad;
--black:#222;
--white:#fff;
--light-black:#777;
--light-white:#fff9;
--dark-bg:rgba(0,0,0,.7);
--light-bg:#eee;
--border:.1rem solid var(--black);
--box-shadow:0 .5rem 1rem rgba(0,0,0,.1);
--text-shadow:0 1.5rem 3rem rgba(0,0,0,.3);
}
*{
font-family: 'Poppins', sans-serif;
margin:0; padding:0;
box-sizing: border-box;
outline: none; border:none;
text-decoration: none;
text-transform: capitalize;
}
html{
font-size: 62.5%;
overflow-x: hidden;
}
html::-webkit-scrollbar{
width: 1rem;
}
html::-webkit-scrollbar-track{
background-color: var(--white);
}
html::-webkit-scrollbar-thumb{
background-color: var(--main-color);
}
section{
padding:5rem 10%;
}
@keyframes fadeIn {
0%{
transform: scale(0);
opacity: 0;
}
}
.heading{
background-size: cover !important;
background-position: center !important;
padding-top: 10rem;
padding-bottom:15rem;
display: flex;
align-items: center;
justify-content: center;
}
.heading h1{
font-size: 10rem;
text-transform: uppercase;
color:var(--white);
text-shadow: var(--text-shadow);
}
.btn{
display: inline-block;
background: var(--black);
margin-top: 1rem;
color:var(--white);
font-size: 1.7rem;
padding:1rem 3rem;
cursor: pointer;
}
.btn:hover{
background: var(--main-color);
}
.heading-title{
text-align: center;
margin-bottom: 3rem;
font-size: 6rem;
text-transform: uppercase;
color:var(--black);
}
.header{
position: sticky;
top:0; left:0; right:0;
z-index: 1000;
background-color: var(--white);
display: flex;
padding-top: 2rem;
padding-bottom: 2rem;
box-shadow: var(--box-shadow);
align-items: center;
justify-content: space-between;
}
.header .logo{
font-size: 2.5rem;
color:var(--black);
}
.header .navbar a{
font-size: 2rem;
margin-left: 2rem;
color:var(--black);
}
.header .navbar a:hover{
color:var(--main-color);
}
#menu-btn{
font-size: 2.5rem;
cursor: pointer;
color:var(--black);
display: none;
}
.home{
padding:0;
}
.home .slide{
text-align: center;
padding:2rem;
display: flex;
align-items: center;
justify-content: center;
background-size: cover !important;
background-position: center !important;
min-height: 60rem;
}
.home .slide .content{
width: 85rem;
display: none;
}
.home .swiper-slide-active .content{
display: inline-block;
}
.home .slide .content span{
display: block;
font-size: 2.2rem;
color: var(--light-white);
padding-bottom: 1rem;
animation:fadeIn .2s linear backwards .2s;
}
.home .slide .content h3{
font-size: 6vw;
color:var(--white);
text-transform: uppercase;
line-height: 1;
text-shadow: var(--text-shadow);
padding:1rem 0;
animation:fadeIn .2s linear backwards .4s;
}
.home .slide .content .btn{
animation:fadeIn .2s linear backwards .6s;
}
.home .swiper-button-next,
.home .swiper-button-prev{
top:inherit;
left: inherit;
bottom: 0;
right: 0;
height: 7rem;
width: 7rem;
background: var(--white);
color:var(--black);
}
.home .swiper-button-next:hover,
.home .swiper-button-prev:hover{
background: var(--main-color);
color:var(--white);
}
.home .swiper-button-next::after,
.home .swiper-button-prev::after{
font-size: 2rem;
}
.home .swiper-button-prev{
right: 7rem;
}
.services .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 1.5rem;
}
.services .box-container .box{
padding:3rem 2rem;
text-align: center;
background: var(--main-color);
cursor: pointer;
}
.services .box-container .box:hover{
background: var(--black);
}
.services .box-container .box img{
height: 7rem;
}
.services .box-container .box h3{
color:var(--white);
font-size: 1.7rem;
padding-top: 1rem;
}
.home-about{
display: flex;
align-items: center;
flex-wrap: wrap;
}
.home-about .image{
flex:1 1 41rem;
}
.home-about .image img{
width: 100%;
}
.home-about .content{
flex:1 1 41rem;
padding:3rem;
background: var(--light-bg);
}
.home-about .content h3{
font-size: 3rem;
color:var(--black);
}
.home-about .content p{
font-size: 1.5rem;
padding:1rem 0;
line-height: 2;
color:var(--black);
}
.home-packages{
background: var(--light-bg);
}
.home-packages .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap: 2rem;
}
.home-packages .box-container .box{
border:var(--border);
box-shadow: var(--box-shadow);
background: var(--white);
}
.home-packages .box-container .box:hover .image img{
transform: scale(1.1);
}
.home-packages .box-container .box .image{
height: 25rem;
overflow: hidden;
}
.home-packages .box-container .box .image img{
height: 100%;
width: 100%;
object-fit: cover;
transition: .2s linear;
}
.home-packages .box-container .box .content{
padding:2rem;
text-align: center;
}
.home-packages .box-container .box .content h3{
font-size: 2.5rem;
color:var(--black);
}
.home-packages .box-container .box .content p{
font-size: 1.5rem;
color:var(--light-black);
line-height: 2;
padding:1rem 0;
}
.home-packages .load-more{
text-align: center;
margin-top: 2rem;
}
.home-offer{
text-align: center;
}
.home-offer .content{
max-width:70rem;
margin:0 auto;
}
.home-offer .content h3{
font-size: 3.5rem;
text-transform: uppercase;
color:var(--black);
}
.home-offer .content p{
font-size: 1.5rem;
color:var(--light-black);
line-height: 2;
padding:1rem 0;
}
.about{
display: flex;
align-items: center;
flex-wrap: wrap;
gap:3rem;
}
.about .image{
flex:1 1 41rem;
}
.about .image img{
width: 100%;
}
.about .content{
flex:1 1 41rem;
text-align: center;
}
.about .content h3{
font-size: 3rem;
color:var(--black);
}
.about .content p{
font-size: 1.5rem;
color:var(--light-black);
line-height: 2;
padding:1rem 0;
}
.about .content .icons-container{
margin-top: 2rem;
display: flex;
flex-wrap: wrap;
gap:1.5rem;
align-items: flex-end;
}
.about .content .icons-container .icons{
background: var(--light-bg);
padding:2rem;
flex:1 1 16rem;
}
.about .content .icons-container .icons i{
font-size: 4rem;
margin-bottom: 2rem;
color:var(--main-color);
}
.about .content .icons-container .icons span{
font-size: 1.5rem;
color:var(--light-black);
display:block;
}
.reviews{
background: var(--light-bg);
}
.reviews .slide{
padding:2rem;
border:var(--border);
background: var(--white);
text-align: center;
box-shadow: var(--box-shadow);
user-select: none;
}
.reviews .slide .stars{
padding-bottom: .5rem;
}
.reviews .slide .stars i{
font-size: 1.7rem;
color:var(--main-color);
}
.reviews .slide p{
font-size: 1.5rem;
color:var(--light-black);
line-height: 2;
padding:1rem 0;
}
.reviews .slide h3{
font-size: 2rem;
color:var(--black);
}
.reviews .slide span{
font-size: 1.5rem;
color:var(--main-color);
display: block;
}
.reviews .slide img{
height: 7rem;
width: 7rem;
border-radius: 50%;
margin-top: 1rem;
}
.packages .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap: 2rem;
}
.packages .box-container .box{
border:var(-
没有合适的资源?快使用搜索试试~ 我知道了~
响应式旅游网站,HTML+CSS+Javascript+php+mysql
共49个文件
jpg:17个
png:15个
php:5个
需积分: 0 31 下载量 199 浏览量
2023-04-12
11:04:43
上传
评论 5
收藏 4.53MB ZIP 举报
温馨提示
响应式旅游网站,HTML+CSS+Javascript+php+mysql 页面设计简洁大气,可运行。可作为前端设计参考学习使用。
资源推荐
资源详情
资源评论
收起资源包目录
travel website.zip (49个子文件)
travel website
.DS_Store 6KB
js
.DS_Store 6KB
script.txt 1KB
script.js 1KB
home.html 7KB
book.html 4KB
home.php 7KB
css
style.txt 12KB
style.css 11KB
style 0B
book_form.php 733B
book.php 4KB
book_form.html 733B
about.html 8KB
images
about-img.jpg 43KB
icon-6.png 2KB
img-1.jpg 75KB
img-8.jpg 76KB
img-10.jpg 56KB
img-6.jpg 84KB
icon-5.png 2KB
img-5.jpg 52KB
header-bg-1.png 1.06MB
img-4.jpg 124KB
home-slide-2.jpg 194KB
img-9.jpg 105KB
icon-2.png 2KB
home-slide-3.jpg 203KB
footer-bg.jpg 80KB
pic-3.png 52KB
icon-1.png 2KB
home-slide-1.jpg 111KB
pic-5.png 61KB
pic-2.png 67KB
pic-6.png 62KB
pic-1.png 68KB
header-bg-3.png 538KB
img-12.jpg 96KB
pic-4.png 71KB
img-2.jpg 124KB
icon-4.png 2KB
img-11.jpg 90KB
img-7.jpg 100KB
icon-3.png 2KB
header-bg-2.png 940KB
img-3.jpg 74KB
package.php 8KB
about.php 8KB
package.html 8KB
共 49 条
- 1
资源评论
bananafish0488
- 粉丝: 0
- 资源: 1
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功