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

Line 27: Line 27:
  
 
<body>
 
<body>
 +
  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
 +
        <div class="container">
 +
            <!-- Brand and toggle get grouped for better mobile display -->
 +
            <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>
 +
                <a class="navbar-brand" href="index.html">Batu</a>
 +
            </div>
 +
            <!-- Collect the nav links, forms, and other content for toggling -->
 +
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 +
                <ul class="nav navbar-nav navbar-right">
 +
                    <li>
 +
                        <a href="about.html">About</a>
 +
                    </li>
 +
                    <li>
 +
                        <a href="about.html">About</a>
 +
                    </li>
 +
                    <li>
 +
                        <a href="about.html">About</a>
 +
                    </li>
 +
                    <li>
 +
                        <a href="about.html">About</a>
 +
                    </li>
 +
                    <li>
 +
                        <a href="about.html">About</a>
 +
                    </li>
 +
                    <li>
 +
                        <a href="services.html">Services</a>
 +
                    </li>
 +
                    <li>
 +
                        <a href="contact.html">Contact</a>
 +
                    </li>
 +
                    <li class="dropdown">
 +
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Portfolio <b class="caret"></b></a>
 +
                        <ul class="dropdown-menu">
 +
                            <li>
 +
                                <a href="portfolio-1-col.html">1 Column Portfolio</a>
 +
                            </li>
 +
                            <li>
 +
                                <a href="portfolio-2-col.html">2 Column Portfolio</a>
 +
                            </li>
 +
                            <li>
 +
                                <a href="portfolio-3-col.html">3 Column Portfolio</a>
 +
                            </li>
 +
                            <li>
 +
                                <a href="portfolio-4-col.html">4 Column Portfolio</a>
 +
                            </li>
 +
                            <li>
 +
                                <a href="portfolio-item.html">Single Portfolio Item</a>
 +
                            </li>
 +
                        </ul>
 +
                    </li>
 +
                    <li class="dropdown">
 +
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Blog <b class="caret"></b></a>
 +
                        <ul class="dropdown-menu">
 +
                            <li>
 +
                                <a href="blog-home-1.html">Blog Home 1</a>
 +
                            </li>
 +
                            <li>
 +
                                <a href="blog-home-2.html">Blog Home 2</a>
 +
                            </li>
 +
                            <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>
  
−
<!-- Navigation -->
+
     <!-- Full Page Image Background Carousel Header -->
−
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="top:500">
+
     <header id="myCarousel" class="carousel slide">
−
  <div class="container">
+
        <!-- Indicators -->
−
     <!-- Brand and toggle get grouped for better mobile display -->
+
        <ol class="carousel-indicators">
−
     <div class="navbar-header">
+
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
−
      <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>
+
             <li data-target="#myCarousel" data-slide-to="1"></li>
−
      <a class="navbar-brand" href="index.html">Batu</a>
+
             <li data-target="#myCarousel" data-slide-to="2"></li>
−
    </div>
+
         </ol>
−
    <!-- Collect the nav links, forms, and other content for toggling -->
+
−
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+
−
      <ul class="nav navbar-nav navbar-right">
+
−
        <li> <a href="about.html">About</a> </li>
+
−
        <li> <a href="about.html">About</a> </li>
+
−
        <li> <a href="about.html">About</a> </li>
+
−
        <li> <a href="about.html">About</a> </li>
+
−
        <li> <a href="about.html">About</a> </li>
+
−
        <li> <a href="services.html">Services</a> </li>
+
−
        <li> <a href="contact.html">Contact</a> </li>
+
−
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Portfolio <b class="caret"></b></a>
+
−
          <ul class="dropdown-menu">
+
−
            <li> <a href="portfolio-1-col.html">1 Column Portfolio</a> </li>
+
−
             <li> <a href="portfolio-2-col.html">2 Column Portfolio</a> </li>
+
−
            <li> <a href="portfolio-3-col.html">3 Column Portfolio</a> </li>
+
−
            <li> <a href="portfolio-4-col.html">4 Column Portfolio</a> </li>
+
−
            <li> <a href="portfolio-item.html">Single Portfolio Item</a> </li>
+
−
          </ul>
+
−
        </li>
+
−
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Blog <b class="caret"></b></a>
+
−
          <ul class="dropdown-menu">
+
−
            <li> <a href="blog-home-1.html">Blog Home 1</a> </li>
+
−
             <li> <a href="blog-home-2.html">Blog Home 2</a> </li>
+
−
            <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 -->
+
        <!-- Wrapper for Slides -->
−
<header id="myCarousel" class="carousel slide">
+
        <div class="carousel-inner">
−
  <!-- Indicators -->
+
            <div class="item active">
−
  <ol class="carousel-indicators">
+
                <!-- Set the first background image using inline CSS below. -->
−
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
+
                <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div>
−
    <li data-target="#myCarousel" data-slide-to="1"></li>
+
                <div class="carousel-caption">
−
    <li data-target="#myCarousel" data-slide-to="2"></li>
+
                    <h2>Caption 1</h2>
−
  </ol>
+
                </div>
−
 
+
            </div>
−
  <!-- Wrapper for slides -->
+
            <div class="item">
−
<div class="carousel-inner">
+
                <!-- Set the second background image using inline CSS below. -->
−
<div class="item active">
+
                <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div>
−
<img src="http://placehold.it/1920x500"  alt="First slide">
+
                <div class="carousel-caption">
−
<div class="carousel-caption">First slide</div>
+
                    <h2>Caption 2</h2>
−
</div>
+
                </div>
−
<div class="item">
+
            </div>
−
<img src="http://placehold.it/1920x500"  alt="Second slide">
+
            <div class="item">
−
<div class="carousel-caption">Second slide</div>
+
                <!-- Set the third background image using inline CSS below. -->
−
</div>
+
                <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div>
−
<div class="item">
+
                <div class="carousel-caption">
−
<img src="http://placehold.it/1920x500"  alt="Third slide">
+
                    <h2>Caption 3</h2>
−
<div class="carousel-caption">Third slide</div>
+
                </div>
−
</div>
+
            </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 -->
+
        <!-- Controls -->
−
<div class="container">
+
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
−
 
+
            <span class="icon-prev"></span>
−
  <!-- Marketing Icons Section -->
+
        </a>
−
  <div class="row">
+
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
−
    <div class="col-lg-12">
+
            <span class="icon-next"></span>
−
      <h1 class="page-header"> Nice to meet you </h1>
+
        </a>
−
     </div>
+
 
−
     <div class="col-md-4">
+
     </header>
−
      <div class="panel panel-default">
+
 
−
         <div class="panel-heading">
+
     <!-- Page Content -->
−
          <h4><i class="fa fa-fw fa-check"></i> bulabula</h4>
+
    <div class="container">
 +
 
 +
         <div class="row">
 +
            <div class="col-lg-12">
 +
                <h1>Full 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>full-slider.css</code>file.</p>
 +
            </div>
 
         </div>
 
         </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>
+
        <hr>
−
    </div>
+
 
−
  </div>
+
        <!-- Footer -->
−
  <hr>
+
        <footer>
−
 
+
            <div class="row">
−
  <!-- Footer -->
+
                <div class="col-lg-12">
−
  <footer>
+
                    <p>Copyright &copy; Your Website 2014</p>
−
    <div class="row">
+
                </div>
−
      <div class="col-lg-12">
+
            </div>
−
        <p>Copyright &copy; NPU-China  2017</p>
+
            <!-- /.row -->
−
      </div>
+
        </footer>
 +
 
 
     </div>
 
     </div>
−
  </footer>
+
    <!-- /.container -->
−
</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:28, 5 August 2017

Full 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 full-slider.cssfile.

Copyright © Your Website 2014