<!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>Home</title>
<meta name="description" content="Gravity is a beautiful Bootstrap 4 template for multipurpose landing pages." />
<!--Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
<!--vendors styles-->
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/slick.min.css">
<link rel="stylesheet" href="css/slick-theme.min.css">
<!-- Bootstrap CSS / Color Scheme -->
<link rel="stylesheet" href="css/default.css" id="theme-color">
</head>
<body data-spy="scroll" data-target="#gravity-navbar" data-offset="0">
<!--navigation-->
<nav class="navbar navbar-expand-md navbar-dark bg-primary fixed-top sticky-navigation" id="gravity-navbar">
<a class="navbar-brand" href="index.html">
Gravity
</a>
<button class="navbar-toggler navbar-toggler-right border-0" type="button" data-toggle="collapse"
data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span data-feather="menu"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link page-scroll" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#features">Features</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#reviews">Reviews</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#pricing">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#faq">FAQ</a>
</li>
</ul>
<form class="form-inline">
<a href="https://www.51qianduan.com/">51前端</a>
</form>
</div>
</nav>
<!--hero header-->
<section class="py-6 py-md-7 bg-primary" id="home">
<div class="container">
<div class="row">
<div class="col-md-6 my-md-auto text-center text-md-left pb-5 pb-md-0">
<h1 class="display-3 text-white">Plan your next trip with Gravity</h1>
<p class="lead text-light">Quickly book your flights, hotels & travel insurance with Gravity.
100% satisfaction guaranteed.</p>
<a href="https://www.51qianduan.com/">51前端</a>
</div>
<div class="col-md-5 ml-auto">
<div class="card">
<div class="card-body p-4">
<h4 class="text-center">Get started for free</h4>
<form class="signup-form">
<div class="form-group">
<input type="text" class="form-control" placeholder="Full name">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email address">
</div>
<div class="form-group">
<select class="form-control">
<option value="">Plan type</option>
<option value="free">Free</option>
<option value="pro">Pro</option>
<option value="premium">Premium</option>
</select>
</div>
<div class="form-group">
<button class="btn btn-primary btn-block">Sign up for free</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- features section -->
<section class="py-7 bg-light" id="features">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-8 mx-auto text-center">
<span class="text-muted small-xl text-uppercase">Loved by millions of people</span>
<h2 class="display-4">Everything you need to travel</h2>
<p class="lead">Nam liber tempor cum eleifend option congue nihil imper.
Nam liber tempor cum soluta nobis.</p>
</div>
</div>
<div class="row mt-5">
<div class="col-md-4 col-sm-6 mb-5 text-center">
<div class="icon-box inverse">
<div class="icon-box-inner small-xs text-primary">
<span data-feather="star" width="30" height="30"></span>
</div>
</div>
<h4 class="mt-2">Top-rated hotels</h4>
<p>Nam liber tempor cum eleifend option congue nihil imper. Nam liber tempor cum soluta nobis.</p>
</div>
<div class="col-md-4 col-sm-6 mb-5 text-center">
<div class="icon-box inverse">
<div class="icon-box-inner small-xs text-primary">
<span data-feather="umbrella" width="30" height="30"></span>
</div>
</div>
<h4 class="mt-2">100+ airlines booking</h4>
<p>Nam liber tempor cum eleifend option congue nihil imper. Nam liber tempor cum soluta nobis.</p>
</div>
<div class="col-md-4 col-sm-6 mb-5 text-center">
<div class="icon-box inverse">
<div class="icon-box-inner small-xs text-primary">
<span data-feather="users" width="30" height="30"></span>
</div>
</div>
<h4 class="mt-2">Group trips</h4>
<p>Nam liber tempor cum eleifend option congue nihil imper. Nam liber tempor cum soluta nobis.</p>
</div>
<div class="col-md-4 col-sm-6 mb-5 text-center">
<div class="icon-box inverse">
<div class="icon-box-inner small-xs text-primary">
<span data-feather="gift" width="30" height="30"></span>
</div>
</div>
<h4 class="mt-2">Travel points</h4>
<p>Nam liber tempor cum eleifend option congue nihil imper. Nam liber tempor cum soluta nobis.</p>
</div>
<div class="col-md-4 col-sm-6 mb-5 text-center">
<div class="icon-box inverse">
<div class="icon-box-inner small-xs text-primary">
<span data-feather="heart" width="30" height="30"></span>
</div>
</div>
<h4 class="mt-2">Premium support</h4>
<p>Nam liber tempor cum eleifend option congue nihil imper. Nam liber tempor cum soluta nobis.</p>
</div>
<div class="col-md-4 col-sm-6 mb-5 text-center">
<div class="icon-box inverse">
<div class="icon-box-inner small-xs text-primary">
<span data-feather="check" width="30" height="30"></span>
</div>
</div>
<h4 class="mt-2">One-click booking</h4>
<p>Nam liber tempor cum eleifend option congue nihil imper. Nam liber tempor cum soluta nobis.</p>
</div>
</div>
</div>
</section>
<!--extra features section-->
<section class="pt-7" id="extra-features">
<div class="container">
<div class="row">
<div class="col-md-5">
<img src="img/mobile.png" class="img-fluid d-block mx-auto" alt="Mobile" />
</div>
<div class="col-md-6 my-auto ml-auto">
<span class="text-muted small-xl text-uppercase">Top-rated on Apple Store</span>
<h2 class="display-4">A new way to travel</h2>
<p class="lead text-muted">Nam liber tempor cum eleifend option congue nihil imper.
Nam liber tempor cum soluta nobis. Nam liber tempor cum eleifend option congue nihil imper.</p>
<ul class="features-list">
<li>Lorem ipsum dolor sit amet.</li>
<li>Aenean commodo ligula eget dolor.</li>
<li>Aenean massa.</li>
<li>Cum sociis natoque penatibus mus.</li>
<li>Lorem ipsum consectetuer adipiscing elit.</li>
<li>Aenean commodo ligula eget dolor.</li>
</ul>
<p class="lead mt-3">
<a href="#" class="d-flex flex-row align-items-center">
See more <span class="ml-1" width="18" height="18" data-feather="chevron-right"></span>
</a>
</p>
</div>
</div>
</div>
</section>
<hr class="mt-6" />
<!-- reviews section -->
<section class="pt-6 pb-7" id="reviews">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-8 mx-auto text-center">
<span class="text-muted small-xl text-uppercase">What our customers say</span>
<h2 class="display-4">Loved by thousands of people</h2>
</div>
</div>
<div class="row">
<div c
紫色简洁风格响应式旅行计划网页模板.zip
73 浏览量
2023-06-20
19:22:08
上传
评论
收藏 492KB ZIP 举报
紫色简洁风格响应式旅行计划网页模板.zip （17个子文件） 
20924 js 
bootstrap.min.js 48KB popper.min.js 19KB slick.min.js 42KB jquery-3.2.1.min.js 85KB feather.min.js 71KB scripts.js 2KB img 
client-1.jpg 57KB
mobile.png 138KB client-3.jpg 50KB client-2.jpg 56KB css slick.min.css 1KB default.css 191KB slick-theme.min.css 2KB font-awesome.min.css 30KB
index.html 19KB fonts fontawesome-webfont.woff2 75KB slick.woff 1KB资源评论
小徐博客
- 粉丝: 1742
- 资源: 872
