Line 28: | Line 28: | ||
<body> | <body> | ||
+ | <!-- Header Carousel --> | ||
+ | <header id="myCarousel" class="carousel slide"> | ||
+ | <!-- Indicators --> | ||
+ | <ol class="carousel-indicators"> | ||
+ | <li data-target="#myCarousel" data-slide-to="0" class="active"></li> | ||
+ | <li data-target="#myCarousel" data-slide-to="1"></li> | ||
+ | <li data-target="#myCarousel" data-slide-to="2"></li> | ||
+ | </ol> | ||
+ | |||
+ | <!-- Wrapper for slides --> | ||
+ | <div class="carousel-inner"> | ||
+ | <div class="item active"> | ||
+ | <img src="http://placehold.it/1920x500" alt="First slide"> | ||
+ | <div class="carousel-caption">First slide</div> | ||
+ | </div> | ||
+ | <div class="item"> | ||
+ | <img src="http://placehold.it/1920x500" alt="Second slide"> | ||
+ | <div class="carousel-caption">Second slide</div> | ||
+ | </div> | ||
+ | <div class="item"> | ||
+ | <img src="http://placehold.it/1920x500" alt="Third slide"> | ||
+ | <div class="carousel-caption">Third slide</div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <!-- Controls --> | ||
+ | <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="icon-prev"></span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="icon-next"></span> </a> </header> | ||
+ | |||
+ | <!-- Page Content --> | ||
+ | <div class="container"> | ||
+ | |||
+ | <!-- Marketing Icons Section --> | ||
+ | <div class="row"> | ||
+ | <div class="col-lg-12"> | ||
+ | <h1 class="page-header"> Nice to meet you </h1> | ||
+ | </div> | ||
+ | <div class="col-md-4"> | ||
+ | <div class="panel panel-default"> | ||
+ | <div class="panel-heading"> | ||
+ | <h4><i class="fa fa-fw fa-check"></i> bulabula</h4> | ||
+ | </div> | ||
+ | <div class="panel-body"> | ||
+ | <p>bulabula?bulabula!</p> | ||
+ | <a href="#" class="btn btn-default">Learn More</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="col-md-4"> | ||
+ | <div class="panel panel-default"> | ||
+ | <div class="panel-heading"> | ||
+ | <h4><i class="fa fa-fw fa-gift"></i>bulabula</h4> | ||
+ | </div> | ||
+ | <div class="panel-body"> | ||
+ | <p>bulabula?bulabula!</p> | ||
+ | <a href="#" class="btn btn-default">Learn More</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="col-md-4"> | ||
+ | <div class="panel panel-default"> | ||
+ | <div class="panel-heading"> | ||
+ | <h4><i class="fa fa-fw fa-compass"></i>bulabula</h4> | ||
+ | </div> | ||
+ | <div class="panel-body"> | ||
+ | <p>bulabula?bulabula!</p> | ||
+ | <a href="#" class="btn btn-default">Learn More</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!-- /.row --> | ||
+ | |||
+ | <!-- Portfolio Section --> | ||
+ | <div class="row"> | ||
+ | <div class="col-lg-12"> | ||
+ | <h2 class="page-header">Some Photo</h2> | ||
+ | </div> | ||
+ | <div class="col-md-4 col-sm-6"> | ||
+ | <a href="portfolio-item.html"> <img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt=""> </a> | ||
+ | </div> | ||
+ | <div class="col-md-4 col-sm-6"> | ||
+ | <a href="portfolio-item.html"> <img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt=""> </a> | ||
+ | </div> | ||
+ | <div class="col-md-4 col-sm-6"> | ||
+ | <a href="portfolio-item.html"> <img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt=""> </a> | ||
+ | </div> | ||
+ | <div class="col-md-4 col-sm-6"> | ||
+ | <a href="portfolio-item.html"> <img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt=""> </a> | ||
+ | </div> | ||
+ | <div class="col-md-4 col-sm-6"> | ||
+ | <a href="portfolio-item.html"> <img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt=""> </a> | ||
+ | </div> | ||
+ | <div class="col-md-4 col-sm-6"> | ||
+ | <a href="portfolio-item.html"> <img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt=""> </a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!-- /.row --> | ||
+ | |||
+ | <!-- Features Section --> | ||
+ | <div class="row"> | ||
+ | <div class="col-lg-12"> | ||
+ | <h2 class="page-header">Some feihua</h2> | ||
+ | </div> | ||
+ | <div class="col-md-6"> | ||
+ | <p>bulabula</p> | ||
+ | </div> | ||
+ | <div class="col-md-6"> | ||
+ | <img class="img-responsive" src="http://placehold.it/700x450" alt=""> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!-- /.row --> | ||
+ | |||
+ | <hr> | ||
+ | |||
+ | <!-- Call to Action Section --> | ||
+ | <div class="well"> | ||
+ | <div class="row"> | ||
+ | <div class="col-md-8"> | ||
+ | <p>bulabula</p> | ||
+ | </div> | ||
+ | <div class="col-md-4"> | ||
+ | <a class="btn btn-lg btn-default btn-block" href="#">Call to Action</a> | ||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <hr> | ||
+ | |||
+ | <!-- Footer --> | ||
+ | <footer> | ||
+ | <div class="row"> | ||
+ | <div class="col-lg-12"> | ||
+ | <p>Copyright © NPU-China 2017</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </footer> | ||
+ | </div> | ||
+ | <!-- /.container --> | ||
+ | |||
+ | <!-- jQuery --> | ||
+ | <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> | ||
+ | |||
+ | <!-- Bootstrap Core JavaScript --> | ||
+ | <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> | ||
+ | |||
+ | <!-- Script to Activate the Carousel --> | ||
+ | <script> | ||
+ | $('.carousel').carousel({ | ||
+ | interval: 5000 //changes the speed | ||
+ | }) | ||
+ | </script> | ||
</body> | </body> | ||
</html> | </html> |
Revision as of 12:32, 5 August 2017
Nice to meet you
bulabula
bulabula?bulabula!
Learn Morebulabula
bulabula?bulabula!
Learn Morebulabula
bulabula?bulabula!
Learn MoreSome feihua
bulabula
bulabula