Difference between revisions of "Team:NPU-China/test"

Line 28: Line 28:
 
<body>
 
<body>
  
−
<!-- Navigation -->
+
    <!-- Navigation -->
−
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="top:500">
+
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
−
  <div class="container">
+
        <div class="container">
−
    <!-- Brand and toggle get grouped for better mobile display -->
+
            <!-- Brand and toggle get grouped for better mobile display -->
−
    <div class="navbar-header">
+
            <div class="navbar-header">
−
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
+
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
−
      <a class="navbar-brand" href="index.html">Batu</a>
+
                    <span class="sr-only">Toggle navigation</span>
−
    </div>
+
                    <span class="icon-bar"></span>
−
    <!-- Collect the nav links, forms, and other content for toggling -->
+
                    <span class="icon-bar"></span>
−
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+
                    <span class="icon-bar"></span>
−
      <ul class="nav navbar-nav navbar-right">
+
                </button>
−
        <li> <a href="about.html">About</a> </li>
+
                <a class="navbar-brand" href="#">Start Bootstrap</a>
−
        <li> <a href="about.html">About</a> </li>
+
            </div>
−
        <li> <a href="about.html">About</a> </li>
+
            <!-- Collect the nav links, forms, and other content for toggling -->
−
        <li> <a href="about.html">About</a> </li>
+
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
−
        <li> <a href="about.html">About</a> </li>
+
                <ul class="nav navbar-nav">
−
        <li> <a href="services.html">Services</a> </li>
+
                    <li>
−
        <li> <a href="contact.html">Contact</a> </li>
+
                        <a href="#">About</a>
−
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Portfolio <b class="caret"></b></a>
+
                    </li>
−
          <ul class="dropdown-menu">
+
                    <li>
−
            <li> <a href="portfolio-1-col.html">1 Column Portfolio</a> </li>
+
                        <a href="#">Services</a>
−
            <li> <a href="portfolio-2-col.html">2 Column Portfolio</a> </li>
+
                    </li>
−
            <li> <a href="portfolio-3-col.html">3 Column Portfolio</a> </li>
+
                    <li>
−
            <li> <a href="portfolio-4-col.html">4 Column Portfolio</a> </li>
+
                        <a href="#">Contact</a>
−
            <li> <a href="portfolio-item.html">Single Portfolio Item</a> </li>
+
                    </li>
−
          </ul>
+
                </ul>
−
        </li>
+
             </div>
−
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Blog <b class="caret"></b></a>
+
             <!-- /.navbar-collapse -->
−
          <ul class="dropdown-menu">
+
        </div>
−
            <li> <a href="blog-home-1.html">Blog Home 1</a> </li>
+
        <!-- /.container -->
−
            <li> <a href="blog-home-2.html">Blog Home 2</a> </li>
+
    </nav>
−
            <li> <a href="blog-post.html">Blog Post</a> </li>
+
−
          </ul>
+
−
        </li>
+
−
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Other Pages <b class="caret"></b></a>
+
−
          <ul class="dropdown-menu">
+
−
             <li> <a href="full-width.html">Full Width Page</a> </li>
+
−
             <li> <a href="sidebar.html">Sidebar Page</a> </li>
+
−
            <li> <a href="faq.html">FAQ</a> </li>
+
−
            <li> <a href="404.html">404</a> </li>
+
−
            <li> <a href="pricing.html">Pricing Table</a> </li>
+
−
          </ul>
+
−
        </li>
+
−
      </ul>
+
−
    </div>
+
−
    <!-- /.navbar-collapse -->
+
−
  </div>
+
−
  <!-- /.container -->  
+
−
</nav>
+
  
−
<!-- Header Carousel -->
+
    <!-- Half Page Image Background Carousel Header -->
−
<header id="myCarousel" class="carousel slide">  
+
    <header id="myCarousel" class="carousel slide">
−
  <!-- Indicators -->
+
        <!-- Indicators -->
−
  <ol class="carousel-indicators">
+
        <ol class="carousel-indicators">
−
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
+
            <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="1"></li>
−
    <li data-target="#myCarousel" data-slide-to="2"></li>
+
            <li data-target="#myCarousel" data-slide-to="2"></li>
−
  </ol>
+
        </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 -->
+
        <!-- Wrapper for Slides -->
−
<div class="container">
+
        <div class="carousel-inner">
−
 
+
            <div class="item active">
−
  <!-- Marketing Icons Section -->
+
                <!-- Set the first background image using inline CSS below. -->
−
  <div class="row">
+
                <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div>
−
    <div class="col-lg-12">
+
                <div class="carousel-caption">
−
      <h1 class="page-header"> Nice to meet you </h1>
+
                    <h2>Caption 1</h2>
−
    </div>
+
                </div>
−
    <div class="col-md-4">
+
            </div>
−
      <div class="panel panel-default">
+
            <div class="item">
−
        <div class="panel-heading">
+
                <!-- Set the second background image using inline CSS below. -->
−
          <h4><i class="fa fa-fw fa-check"></i> bulabula</h4>
+
                <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div>
 +
                <div class="carousel-caption">
 +
                    <h2>Caption 2</h2>
 +
                </div>
 +
            </div>
 +
            <div class="item">
 +
                <!-- Set the third background image using inline CSS below. -->
 +
                <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div>
 +
                <div class="carousel-caption">
 +
                    <h2>Caption 3</h2>
 +
                </div>
 +
            </div>
 
         </div>
 
         </div>
−
         <div class="panel-body">
+
 
−
          <p>bulabula?bulabula!</p>
+
         <!-- Controls -->
−
          <a href="#" class="btn btn-default">Learn More</a>
+
        <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">
 +
 
 +
        <div class="row">
 +
            <div class="col-lg-12">
 +
                <h1>Half Slider by Start Bootstrap</h1>
 +
                <p>The background images for the slider are set directly in the HTML using inline CSS. The rest of the styles for this template are contained within the <code>half-slider.css</code>file.</p>
 +
            </div>
 
         </div>
 
         </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>
+
        <hr>
 +
 
 +
        <!-- Footer -->
 +
        <footer>
 +
            <div class="row">
 +
                <div class="col-lg-12">
 +
                    <p>Copyright &copy; Your Website 2014</p>
 +
                </div>
 +
            </div>
 +
            <!-- /.row -->
 +
        </footer>
 +
 
 
     </div>
 
     </div>
−
  </div>
+
     <!-- /.container -->
−
  <hr>
+
−
 
+
−
  <!-- Footer -->
+
−
  <footer>
+
−
     <div class="row">
+
−
      <div class="col-lg-12">
+
−
        <p>Copyright &copy; NPU-China  2017</p>
+
−
      </div>
+
−
    </div>
+
−
  </footer>
+
−
</div>
+
−
<!-- /.container -->  
+
  
−
<!-- jQuery -->  
+
    <!-- jQuery -->
−
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>  
+
    <script src="js/jquery.js"></script>
  
−
<!-- Bootstrap Core JavaScript -->  
+
    <!-- Bootstrap Core JavaScript -->
−
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
+
    <script src="js/bootstrap.min.js"></script>
  
−
<!-- Script to Activate the Carousel -->  
+
    <!-- Script to Activate the Carousel -->
−
<script>
+
    <script>
 
     $('.carousel').carousel({
 
     $('.carousel').carousel({
 
         interval: 5000 //changes the speed
 
         interval: 5000 //changes the speed
 
     })
 
     })
−
</script>
+
    </script>
 +
 
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 12:46, 5 August 2017

Half Slider by Start Bootstrap

The background images for the slider are set directly in the HTML using inline CSS. The rest of the styles for this template are contained within the half-slider.cssfile.

Copyright © Your Website 2014