<!DOCTYPE html>
<html>
<head>
<title>摩托拉力赛 | About</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Bike Race Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design"/>
<!-- fonts -->
<link href="https://fonts.googleapis.com/css?family=Michroma" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Comfortaa:300,400,700" rel="stylesheet">
<!-- /fonts -->
<!-- css -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" media="all" />
<link href='css/aos.css' rel='stylesheet prefetch' type="text/css" media="all" />
<link href="css/pogo-slider.min.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- /css -->
</head>
<body>
<!-- navigation -->
<nav class="navbar navbar-default navbar-fixed-top" data-aos="flip-up">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><h1>Bike Race</h1></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav slide-nav">
<li><a href="index.html">Home</a></li>
<li class="active current"><a href="about.html">About</a></li>
<li><a href="news.html">News</a></li>
<li><a href="schedule.html">Schedule</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="drivers.html">Drivers</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Short Codes <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="typo.html">Typography</a></li>
<li><a href="icons.html">Icons</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
<div class="search1">
<form action="#" method="post">
<div class="input-group">
<input type="text" class="form-control" name="search" id="search2" placeholder="Search" required/>
<span class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
</span>
</div>
</form>
</div>
</div>
</nav>
<!-- /navigation -->
<!-- Page Content -->
<!-- header section -->
<section class="inner-w3ls">
<div class="container">
<h3 class="text-center" data-aos="zoom-in">About Us</h3>
<!-- Page Heading/Breadcrumbs -->
<div class="row">
<div class="col-lg-12">
<ol class="breadcrumb" data-aos="zoom-in">
<li><a href="index.html">Home</a>
</li>
<li class="active">About</li>
</ol>
</div>
</div>
<!-- /.row -->
</div>
</section>
<!-- /header section -->
<section class="about-w3layouts">
<div class="container">
<!-- Intro Content -->
<div class="row">
<div class="col-md-6" data-aos="flip-left">
<div class="pogoSlider" id="js-main-slider">
<div class="pogoSlider-slide" data-transition="blocksReveal" data-duration="1000" style="background-image:url(images/about-pic1.jpg);background-position:center;"></div>
<div class="pogoSlider-slide " data-transition="blocksReveal" data-duration="1000" style="background-image:url(images/about-pic2.jpg);background-position:center;"></div>
<div class="pogoSlider-slide " data-transition="blocksReveal" data-duration="1000" style="background-image:url(images/about-pic3.jpg);background-position:center;"></div>
</div>
</div>
<div class="col-md-6" data-aos="flip-right">
<h3>About Bike Race</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed voluptate nihil eum consectetur similique? Consectetur, quod, incidunt, harum nisi dolores delectus reprehenderit voluptatem perferendis dicta dolorem non blanditiis ex fugiat. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, consequuntur, modi mollitia corporis ipsa voluptate corrupti eum ratione ex ea praesentium quibusdam? Aut, in eum facere corrupti necessitatibus perspiciatis quis?</p>
</div>
</div>
<!-- /.row -->
</div>
</section>
<section class="team-w3layouts">
<div class="container">
<!-- Team Members -->
<h3 class="text-center" data-aos="flip-up">Our Team</h3>
<div class="col-md-4 col-sm-6 col-xs-6 text-center team-wthree" data-aos="zoom-in">
<div class="grid cs-style-4">
<div>
<figure>
<div><img src="images/team-pic1.jpg" alt="img05"></div>
<figcaption>
<h4>Elizabeth</h4>
<p>Founder</p>
<a data-toggle="modal" href="#team1" class="team-link" title="Click">Read More</a>
</figcaption>
</figure>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-6 text-center team-wthree" data-aos="zoom-in">
<div class="grid cs-style-4">
<div>
<figure>
<div><img src="images/team-pic2.jpg" alt="img05"></div>
<figcaption>
<h4>James Bond</h4>
<p>Director</p>
<a data-toggle="modal" href="#team2" class="team-link" title="Click">Read More</a>
</figcaption>
</figure>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-6 text-center team-wthree" data-aos="zoom-in">
<div class="grid cs-style-4">
<div>
<figure>
<div><img src="images/team-pic3.jpg" alt="img05"></div>
<figcaption>
<h4>Lara Croft</h4>
<p>Manager</p>
<a data-toggle="modal" href="#team3" class="team-link" title="Click">Read More</a>
</figcaption>
</figure>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-6 text-center team-wthree" data-aos="zoom-in">
<div class="grid cs-style-4">
<div>
<figure>
<div><img src="images/team-pic4.jpg" alt="img05"></div>
<figcaption>
<h4>Alice</h4>
<p>Organizer</p>
<a data-toggle="modal" href="#team4" class="team-link" title="Click">Read More</a>
</figcaption>
</figure>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-6 text-center team-wthree" data-aos="zoom-in">
<div class="grid cs-style-4">
<div>
<figure>
<div><img src="images/team-pic5.jpg" alt="img05"></div>
<figcaption>
<h4>Max Payne</h4>
<p>Coordinator</p>
<a data-toggle="modal" href="#team5" class="team-link" title="Click">Read More</a>
</figcaption>
</figure>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-6 text-center team-wthree" data-aos="zoom-in">
<div class="grid cs-style-4">
<div>
<figure>
<div><img src="images/team-pic6.jpg" alt="img05"></div>
<figcaption>
<h4>Mary Diana</h4>
<p>Treasurer</p>
<a data-toggle="modal" href="#team6" class="team-link" title="Click">Read More</a>
</figcaption>
</figure>
</div>
</div>
</div>
</div>
<div class="modal fade" id="team1" tabindex="-1" role="dialog" aria-labelledby="team1" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Elizabeth</h4>
</div>
<div class="modal-body">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="hover01 column">
<div>
<figure><img class="img-responsive" src="images/team-pic1.jpg" alt="w3layouts"></figure>
<span>Founder</span>
</div>
</div>
<ul class="social-icons2">
<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-youtube" aria-hidden="true"></i></a></li>
</ul>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec elementum diam. Etiam tempus sit amet mauris in molestie. Ut lorem nunc, ultricies eu diam et, egestas sagittis nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Phasellus ac velit quis nunc tempus iaculis. Etiam ac lectus ullamcorper massa luctus gravida. </p>
</div>
<div class="clearfix"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="team2" tabindex="-1" role="dialog" aria-labelledby="team2" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">James Bond</h4>
</div>
<div class="modal-body">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="hover01 column">
<div>
<figure><img class="img-responsive" src="images/team-pic2.jpg" alt="w3layouts"></figure>
<span>Director</span>
</div>
</div>
<ul class="social-icons2">
<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-youtube" aria-hidden="true"></i></a></li>
</ul>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec elementum diam. Etiam tempus sit amet mauris in molestie. Ut lorem nunc, ultricies eu diam et, egestas sagittis nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Phasellus ac velit quis nunc tempus iaculis. Etiam ac lectus ullamcorper massa luctus gravida. </p>
</div>
<div class="clearfix"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="team3" tabindex="-1" role="dialog" aria-labelledby="team3" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Lara Croft</h4>
</div>
<div class="modal-body">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="hover01 column">
<div>
<figure><img class="img-responsive" src="images/team-pic3.jpg" alt="w3layouts"></figure>
<span>Manager</span>
</div>
</div>
<ul class="social-icons2">
<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-youtube" aria-hidden="true"></i></a></li>
</ul>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec elementum diam. Etiam tempus sit amet mauris in molestie. Ut lorem nunc, ultricies eu diam et, egestas sagittis nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Phasellus ac velit quis nunc tempus iaculis. Etiam ac lectus ullamcorper massa luctus gravida. </p>
</div>
<div class="clearfix"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="team4" tabindex="-1" role="dialog" aria-labelledby="team4" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Alice</h4>
</div>
<div class="modal-body">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="hover01 column">
<div>
<figure><img class="img-responsive" src="images/team-pic4.jpg" alt="w3layouts"></figure>
<span>Organizer</span>
</div>
</div>
<ul class="social-icons2">
<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-youtube" aria-hidden="true"></i></a></li>
</ul>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec elementum diam. Etiam tempus sit amet mauris in molestie. Ut lorem nunc, ultricies eu diam et, egestas sagittis nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Phasellus ac velit quis nunc tempus iaculis. Etiam ac lectus ullamcorper massa luctus gravida. </p>
</div>
<div class="clearfix"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="team5" tabindex="-1" role="dialog" aria-labelledby="team5" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Max Payne</h4>
</div>
<div class="modal-body">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="hover01 column">
<div>
<figure><img class="img-responsive" src="images/team-pic5.jpg" alt="w3layouts"></figure>
<span>Coordinator</span>
</div>
</div>
<ul class="social-icons2">
<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-youtube" aria-hidden="true"></i></a></li>
</ul>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec elementum diam. Etiam tempus sit amet mauris in molestie. Ut lorem nunc, ultricies eu diam et, egestas sagittis nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p>Phasellus ac velit quis nunc tempus iaculis. Etiam ac lectus ullamcorper massa luctus gravida. </p>
</div>
<div class="clearfix"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="team6" tabindex="-1" role="dialog" aria-labelledby="team6" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Mary Diana</h4>
</div>
<div class="modal-body">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="hover01 column">
<div>
<figure><img class="img-responsive" src="images/team-pic6.jpg" alt="w3layouts"></figure>
<span>Treasurer</span>
</div>
</div>
<ul class="social-icons2">
<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-youtube" aria-hidden="true"></i></a></li>
</ul>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec elementum diam. Etiam tempus sit amet mauris in molestie. Ut lorem nunc, ultricies eu diam et, egestas sagittis nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Phasellus ac velit quis nunc tempus iaculis. Etiam ac lectus ullamcorper massa luctus gravida. </p>
</div>
<div class="clearfix"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</section>
<!-- last section -->
<section class="last-w3layouts">
<div class="container">
<a href="index.html" class="bottom-agile"><h2 class="text-center">Bike Race</h2></a>
<p class="text-center">© Bike Race. All Rights Reserved <a target="_blank" </a></p>
</div>
</section>
<!-- last section -->
<!-- back to top -->
<a href="#0" class="cd-top">Top</a>
<!-- /back to top -->
<!-- js files -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/SmoothScroll.min.js"></script>
<script src="js/top.js"></script>
<script src="js/modernizr.min.js"></script>
<script src="js/index.js"></script>
<script src='js/aos.js'></script>
<script src="js/aos2.js"></script>
<!-- js for team section -->
<script src="js/toucheffects.js"></script>
<!-- /js for team section -->
<!-- js for about section -->
<script src="js/jquery.pogo-slider.min.js"></script>
<script src="js/main.js"></script>
<!-- /js for about section -->
<!-- /js files -->
</body>
</html>