Line 1: | Line 1: | ||
− | + | <!DOCTYPE html> | |
<html lang="en"> | <html lang="en"> | ||
+ | |||
<head> | <head> | ||
− | |||
− | |||
− | < | + | <meta charset="utf-8"> |
− | < | + | <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
+ | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
+ | <meta name="description" content=""> | ||
+ | <meta name="author" content=""> | ||
− | < | + | <title>Half Slider - Start Bootstrap Template</title> |
− | < | + | |
− | <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> | + | <!-- Bootstrap Core CSS --> |
− | <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> | + | <link href="css/bootstrap.min.css" rel="stylesheet"> |
− | <!--[if lt IE 9]> | + | |
+ | <!-- Custom CSS --> | ||
+ | <link href="css/half-slider.css" rel="stylesheet"> | ||
+ | |||
+ | <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> | ||
+ | <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> | ||
+ | <!--[if lt IE 9]> | ||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> | <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> | ||
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> | <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> | ||
<![endif]--> | <![endif]--> | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</head> | </head> | ||
<body> | <body> | ||
− | <!-- Navigation --> | + | <!-- Navigation --> |
− | <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation | + | <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="#">Start Bootstrap</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"> | |
− | + | <li> | |
− | + | <a href="#">About</a> | |
− | + | </li> | |
− | + | <li> | |
− | + | <a href="#">Services</a> | |
− | + | </li> | |
− | + | <li> | |
− | + | <a href="#">Contact</a> | |
− | + | </li> | |
− | + | </ul> | |
− | + | </div> | |
− | + | <!-- /.navbar-collapse --> | |
− | + | </div> | |
− | + | <!-- /.container --> | |
− | + | </nav> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </nav> | + | |
− | <!-- | + | <!-- Half Page Image Background Carousel Header --> |
− | <header id="myCarousel" class="carousel slide"> | + | <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=" | + | <div class="carousel-inner"> |
− | + | <div class="item active"> | |
− | + | <!-- Set the first background image using inline CSS below. --> | |
− | + | <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div> | |
− | + | <div class="carousel-caption"> | |
− | + | <h2>Caption 1</h2> | |
− | + | </div> | |
− | + | </div> | |
− | + | <div class="item"> | |
− | + | <!-- Set the second background image using inline CSS below. --> | |
− | + | <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> | ||
− | < | + | |
− | + | <!-- 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"> | ||
+ | |||
+ | <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> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | <hr> | |
+ | |||
+ | <!-- Footer --> | ||
+ | <footer> | ||
+ | <div class="row"> | ||
+ | <div class="col-lg-12"> | ||
+ | <p>Copyright © Your Website 2014</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!-- /.row --> | ||
+ | </footer> | ||
+ | |||
</div> | </div> | ||
− | + | <!-- /.container --> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | <!-- /.container --> | + | |
− | <!-- jQuery --> | + | <!-- jQuery --> |
− | <script src=" | + | <script src="js/jquery.js"></script> |
− | <!-- Bootstrap Core JavaScript --> | + | <!-- Bootstrap Core JavaScript --> |
− | <script src=" | + | <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:45, 5 August 2017
<!DOCTYPE html>
Caption 1
Caption 2
Caption 3
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.css
file.