代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入css重置样式 -->
<link rel="stylesheet" href="./css/reset.css">
<!-- 引入less样式文件 -->
<link rel="stylesheet/less" href="./css/style.less">
<!-- 引入bootstrap样式文件 -->
<link rel="stylesheet" href="./css/bootstrap.min.css">
<!-- 引入wow.js样式文件 -->
<link rel="stylesheet" href="./css/animate.min.css">
<link rel="stylesheet" href="./css/swiper-bundle.min.css">
<title>Document</title>
</head>
<body>
<!-- 导航 -->
<div class="header navbar-fixed-top">
<div class="container">
<div class="row">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand wow fadeInDown" href="#">Spirit8</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active wow fadeInDown" data-wow-delay="100ms"><a href="#HOME">HOME</a></li>
<li class="wow fadeInDown" data-wow-delay="200ms"><a href="#About">About</a></li>
<li class="wow fadeInDown" data-wow-delay="300ms"><a href="#SERVICES">SERVICES</a></li>
<li class="wow fadeInDown" data-wow-delay="300ms"><a href="#">portfolio</a></li>
<li class="wow fadeInDown" data-wow-delay="400ms"><a href="#">testimonials</a></li>
<li class="wow fadeInDown" data-wow-delay="500ms"><a href="#">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
<!-- 背景 -->
<div class="banner">
<video autoplay id="background" width="100%" muted loop>
<source src="./img/banner.mp4" />
</video>
</div>
<!-- Some words about us -->
<div class="main" id="HOME">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="main-left wow fadeInLeft">
<img src="./img/33-spirit8-digital-agency_03.png" alt="">
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="main-right">
<div class="main-top wow fadeInUp">About us</div>
<div class="main-title wow fadeInDown">
<span>Some</span>
<span>words</span>
<span>about us</span>
</div>
<div class="main-font">
<p class="wow fadeInLeft">We love building and rebuilding brands through our </p>
<p class="wow fadeInRight">specific skills. Using colour, fonts, and illustration, we</p>
<p class="wow fadeInLeft">brand companies in a way they will never forget.</p>
</div>
<div class="main-list">
<ul>
<li class="wow fadeInDown" data-wow-delay="100ms">Mission - We deliver uniqueness and
quality</li>
<li class="wow fadeInDown" data-wow-delay="200ms">Skills - Delivering fast and excellent
results</li>
<li class="wow fadeInDown" data-wow-delay="300ms">Clients - Satisfied clients thanks to
our experience</li>
</ul>
</div>
<div class="main-btn wow fadeInUp">
<span class="glyphicon glyphicon-lock"></span>
<span>Browse our work</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Meet our team -->
<div class="menu" id="About">
<div class="container">
<div class="row">
<div class="menu-title wow fadeInDown">
<div>Meet</div>
<div>our team</div>
</div>
<div class="wow fadeInUp">
<img src="./img/33-spirit8-digital-agency3.png" class="center-block" alt="">
</div>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<div class="menu-box wow fadeInLeft" data-wow-delay="100ms">
<div class="menu-img">
<img src="http://fxl.web3v.work/img/logo.jpg" class="center-block" alt="">
</div>
<div class="menu-font">
<div>Jason Statham</div>
<div>Knife designer</div>
</div>
<div class="menu-list">
<ul>
<li>Do not seek to change what has come </li>
<li>before. Seek to create that which has </li>
<li>not.</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<div class="menu-box wow fadeInLeft" data-wow-delay="100ms">
<div class="menu-img">
<img src="http://fxl.web3v.work/img/logo.jpg" class="center-block" alt="">
</div>
<div class="menu-font">
<div>Jason Statham</div>
<div>Knife designer</div>
</div>
<div class="menu-list">
<ul>
<li>Do not seek to change what has come </li>
<li>before. Seek to create that which has </li>
<li>not.</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<div class="menu-box wow fadeInLeft" data-wow-delay="100ms">
<div class="menu-img">
<img src="http://fxl.web3v.work/img/logo.jpg" class="center-block" alt="">
</div>
<div class="menu-font">
<div>Jason Statham</div>
<div>Knife designer</div>
</div>
<div class="menu-list">
<ul>
<li>Do not seek to change what has come </li>
<li>before. Seek to create that which has </li>
<li>not.</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<div class="menu-box wow fadeInLeft" data-wow-delay="100ms">
<div class="menu-img">
<img src="http://fxl.web3v.work/img/logo.jpg" class="center-block" alt="">
</div>
<div class="menu-font">
<div>Jason Statham</div>
<div>Knife designer</div>
</div>
<div class="menu-list">
<ul>
<li>Do not seek to change what has come </li>
<li>before. Seek to create that which has </li>
<li>not.</li>
</ul>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<div class="menu-box wow fadeInLeft" data-wow-delay="100ms">
<div class="menu-img">
<img src="http://fxl.web3v.work/img/logo.jpg" class="center-block" alt="">
</div>
<div class="menu-font">
<div>Jason Statham</div>
<div>Knife designer</div>
</div>
<div class="menu-list">
<ul>
<li>Do not seek to change what has come </li>
<li>before. Seek to create that which has </li>
<li>not.</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<div class="menu-box wow fadeInLeft" data-wow-delay="100ms">
<div class="menu-img">
<img src="http://fxl.web3v.work/img/logo.jpg" class="center-block" alt="">
</div>
<div class="menu-font">
<div>Jason Statham</div>
<div>Knife designer</div>
</div>
<div class="menu-list">
<ul>
<li>Do not seek to change what has come </li>
<li>before. Seek to create that which has </li>
<li>not.</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<div class="menu-box wow fadeInLeft" data-wow-delay="100ms">
<div class="menu-img">
<img src="http://fxl.web3v.work/img/logo.jpg" class="center-block" alt="">
</div>
<div class="menu-font">
<div>Jason Statham</div>
<div>Knife designer</div>
</div>
<div class="menu-list">
<ul>
<li>Do not seek to change what has come </li>
<li>before. Seek to create that which has </li>
<li>not.</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<div class="menu-box wow fadeInLeft" data-wow-delay="100ms">
<div class="menu-img">
<img src="http://fxl.web3v.work/img/logo.jpg" class="center-block" alt="">
</div>
<div class="menu-font">
<div>Jason Statham</div>
<div>Knife designer</div>
</div>
<div class="menu-list">
<ul>
<li>Do not seek to change what has come </li>
<li>before. Seek to create that which has </li>
<li>not.</li>
</ul>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<div class="menu-box wow fadeInLeft" data-wow-delay="100ms">
<div class="menu-img">
<img src="http://fxl.web3v.work/img/logo.jpg" class="center-block" alt="">
</div>
<div class="menu-font">
<div>Jason Statham</div>
<div>Knife designer</div>
</div>
<div class="menu-list">
<ul>
<li>Do not seek to change what has come </li>
<li>before. Seek to create that which has </li>
<li>not.</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<div class="menu-box wow fadeInLeft" data-wow-delay="100ms">
<div class="menu-img">
<img src="http://fxl.web3v.work/img/logo.jpg" class="center-block" alt="">
</div>
<div class="menu-font">
<div>Jason Statham</div>
<div>Knife designer</div>
</div>
<div class="menu-list">
<ul>
<li>Do not seek to change what has come </li>
<li>before. Seek to create that which has </li>
<li>not.</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<div class="menu-box wow fadeInLeft" data-wow-delay="100ms">
<div class="menu-img">
<img src="http://fxl.web3v.work/img/logo.jpg" class="center-block" alt="">
</div>
<div class="menu-font">
<div>Jason Statham</div>
<div>Knife designer</div>
</div>
<div class="menu-list">
<ul>
<li>Do not seek to change what has come </li>
<li>before. Seek to create that which has </li>
<li>not.</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<div class="menu-box wow fadeInLeft" data-wow-delay="100ms">
<div class="menu-img">
<img src="http://fxl.web3v.work/img/logo.jpg" class="center-block" alt="">
</div>
<div class="menu-font">
<div>Jason Statham</div>
<div>Knife designer</div>
</div>
<div class="menu-list">
<ul>
<li>Do not seek to change what has come </li>
<li>before. Seek to create that which has </li>
<li>not.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</div>
<!-- take a look at our services -->
<div class="submenu" id="SERVICES">
<div class="submenu-title wow fadeInDown">take a look at our services</div>
<div class="wow fadeInUp">
<img src="./img/1.gif" class="center-block" alt="">
</div>
<div class="submenu-font wow fadeInDown">
<div>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of
Good and Evil) by Cicero, written in 45 BC. This book is a trea</div>
<div>tise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum,
"Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<div class="submenu-box wow fadeInLeft" data-wow-delay="100ms">
<div class="submenu-img">
<img src="./img/2.gif" class="center-block" alt="">
</div>
<div class="submenu-headline">
Web design
</div>
<div class="submenu-list">
<ul>
<li>The first line of Lorem Ipsum, "Lorem </li>
<li>ipsum dolor sit amet..", comes from a </li>
<li>line in section 1.10.32.</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<div class="submenu-box wow fadeInLeft" data-wow-delay="200ms">
<div class="submenu-img">
<img src="./img/3.gif" class="center-block" alt="">
</div>
<div class="submenu-headline">
Web design
</div>
<div class="submenu-list">
<ul>
<li>The first line of Lorem Ipsum, "Lorem </li>
<li>ipsum dolor sit amet..", comes from a </li>
<li>line in section 1.10.32.</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<div class="submenu-box wow fadeInRight" data-wow-delay="100ms">
<div class="submenu-img">
<img src="./img/4.gif" class="center-block" alt="">
</div>
<div class="submenu-headline">
Web design
</div>
<div class="submenu-list">
<ul>
<li>The first line of Lorem Ipsum, "Lorem </li>
<li>ipsum dolor sit amet..", comes from a </li>
<li>line in section 1.10.32.</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<div class="submenu-box wow fadeInRight" data-wow-delay="200ms">
<div class="submenu-img">
<img src="./img/5.png" class="center-block" alt="">
</div>
<div class="submenu-headline">
Web design
</div>
<div class="submenu-list">
<ul>
<li>The first line of Lorem Ipsum, "Lorem </li>
<li>ipsum dolor sit amet..", comes from a </li>
<li>line in section 1.10.32.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="height: 513px;background-color:#070707 ;"></div>
<!-- take a look at our work -->
<div class="picture">
<div class="picture-title wow fadeInDown">take a look at our work</div>
<div class="wow fadeInUp">
<img src="./img/1.gif" class="center-block" alt="">
</div>
<div class="picture-font wow fadeInDown">
<div>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of
Good and Evil) by Cicero, written in 45 BC. This book </div>
<div>is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem
Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in sec</div>
<div>tion 1.10.32.</div>
</div>
<div>
<div class="container">
<div class="row">
<div class="picture-nav">
<div class="picture-navleft wow fadeInLeft">Filter by type</div>
<div class="picture-navright wow fadeInRight">
<ul>
<li>All |</li>
<li>Web design |</li>
<li>Mobile design |</li>
<li>Photograpy</li>
</ul>
</div>
</div>
<div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<div class="picture-box wow flipInX">
<div class="work">
<div class="work-img"><img src="./img/work-img1.png" class="center-block" alt="">
</div>
<div class="work-bg">
<div>Trend and fashion</div>
<div>Website design</div>
<div>+</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<div class="picture-box wow flipInX">
<div class="work">
<div class="work-img"><img src="./img/work-img1.png" class="center-block" alt="">
</div>
<div class="work-bg">
<div>Trend and fashion</div>
<div>Website design</div>
<div>+</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<div class="picture-box wow flipInX">
<div class="work">
<div class="work-img"><img src="./img/work-img1.png" class="center-block" alt="">
</div>
<div class="work-bg">
<div>Trend and fashion</div>
<div>Website design</div>
<div>+</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<div class="picture-box wow flipInX">
<div class="work">
<div class="work-img"><img src="./img/work-img1.png" class="center-block" alt="">
</div>
<div class="work-bg">
<div>Trend and fashion</div>
<div>Website design</div>
<div>+</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<div class="picture-box wow flipInY">
<div class="work">
<div class="work-img"><img src="./img/work-img2.png" class="center-block" alt="">
</div>
<div class="work-bg">
<div>Trend and fashion</div>
<div>Website design</div>
<div>+</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<div class="picture-box wow flipInY">
<div class="work">
<div class="work-img"><img src="./img/work-img2.png" class="center-block" alt="">
</div>
<div class="work-bg">
<div>Trend and fashion</div>
<div>Website design</div>
<div>+</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<div class="picture-box wow flipInY">
<div class="work">
<div class="work-img"><img src="./img/work-img2.png" class="center-block" alt="">
</div>
<div class="work-bg">
<div>Trend and fashion</div>
<div>Website design</div>
<div>+</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<div class="picture-box wow flipInY">
<div class="work">
<div class="work-img"><img src="./img/work-img2.png" class="center-block" alt="">
</div>
<div class="work-bg">
<div>Trend and fashion</div>
<div>Website design</div>
<div>+</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<div class="picture-box wow flipInX">
<div class="work">
<div class="work-img"><img src="./img/work-img3.png" class="center-block" alt="">
</div>
<div class="work-bg">
<div>Trend and fashion</div>
<div>Website design</div>
<div>+</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<div class="picture-box wow flipInX">
<div class="work">
<div class="work-img"><img src="./img/work-img3.png" class="center-block" alt="">
</div>
<div class="work-bg">
<div>Trend and fashion</div>
<div>Website design</div>
<div>+</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<div class="picture-box wow flipInX">
<div class="work">
<div class="work-img"><img src="./img/work-img3.png" class="center-block" alt="">
</div>
<div class="work-bg">
<div>Trend and fashion</div>
<div>Website design</div>
<div>+</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<div class="picture-box wow flipInX">
<div class="work">
<div class="work-img"><img src="./img/work-img3.png" class="center-block" alt="">
</div>
<div class="work-bg">
<div>Trend and fashion</div>
<div>Website design</div>
<div>+</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="height: 562px;background-color: #020202;"></div>
<!-- feel free to contact us -->
<div class="menu-form">
<div class="form-title wow fadeInDown">
feel free to contact us
</div>
<div class="wow fadeInUp">
<img src="./img/1.gif" class="center-block" alt="">
</div>
<div class="menu-top wow fadeInDown">
<div>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes
</div>
<div>of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very
popular</div>
<div>during the Renaissance. </div>
</div>
<div class="container">
<div class="row">
<div>
<!-- 左边 -->
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="form-left wow fadeInDown">
<span>Name</span>
<span>*</span>
</div>
<input type="text" class="input wow wow fadeInUp">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<!-- 右边 -->
<div class="form-right wow fadeInDown">
<span>Email address</span>
<span>*</span>
</div>
<input type="text" class="input wow wow fadeInUp">
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<!-- 下面 -->
<div class="form-bottom wow fadeInDown">
<span>Message</span>
<span>*</span>
</div>
<input type="text" class="text wow wow fadeInUp">
</div>
</div>
<div class="form-btn wow fadeInUp">SEDN</div>
</div>
</div>
</div>
<!-- 底部 -->
<div class="footer">
<div class="wow fadeInLeft">
<div class="footer-left">ALL RIGHTS RESERVED. COPYRIGHT © 2014 SPIRIT8</div>
</div>
<div>
<div class="footer-right">
<div class="wow flipInX" data-wow-delay="100ms">
<img src="./img/facebook.png" alt="">
</div>
<div class="wow flipInX" data-wow-delay="200ms">
<img src="./img/twitter.png" alt="">
</div>
<div class="wow flipInX" data-wow-delay="300ms">
<img src="./img/google.png" alt="">
</div>
<div class="wow flipInX" data-wow-delay="400ms">
<img src="./img/linkedin.png" alt="">
</div>
<div class="wow flipInX" data-wow-delay="500ms">
<img src="./img/dribbble.png" alt="">
</div>
</div>
</div>
</div>
</body>
<!-- 引入less的JavaScript文件 -->
<script src="./js/less.js"></script>
<!-- 引入jq文件 -->
<script src="./js/jquery.js"></script>
<!-- 引入bootstrap的JavaScript文件 -->
<script src="./js/bootstrap.min.js"></script>
<!-- 引入wow.js的JavaScript文件 -->
<script src="./js/wow.min.js"></script>
<script src="./js/swiper-bundle.min.js"></script>
<script src="./js/loop.js"></script>
<script>
// 初始化wow.js
new WOW().init();
// 设置视频播放速度
document.querySelector('video').defaultPlaybackRate = 8.0;
document.querySelector('video').play();
document.querySelector('video').playbackRate = 8.0;
// 初始化swiper
var mySwiper = new Swiper('.swiper', {
direction: 'horizontal', // 垂直切换选项
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
</script>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手