Skip to content

Instantly share code, notes, and snippets.

@clarknelson

clarknelson/gist:8a5beb9b1f1fa29d29b3

Created July 14, 2015 00:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save clarknelson/8a5beb9b1f1fa29d29b3 to your computer and use it in GitHub Desktop.
Save clarknelson/8a5beb9b1f1fa29d29b3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap ROCKS!</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
.topbar {
margin: 35px 150px 0 0;
}
#logo {
font-size: 1.5em;
font-weight: bold;
font-family: 'Berkshire Swash', Helvetica, sans-serif;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div id="logo" class="page-header pull-left"> KA7</div>
<div class="topbar">
<ul class="nav nav-pills pull-right">
<li role="presentation"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Store</a></li>
<li role="presentation"><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div id="mySlider" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#mySlider" data-slide-to = "0" class="active"></li>
<li data-target="#mySlider" data-slide-to = "1"></li>
<li data-target="#mySlider" data-slide-to = "2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://wallpaperswiki.org/wallpapers/2012/11/Wallpaper-Abstract-Dark-Background-485x728.jpg" alt="One" class="img-responsive">
</div>
<div class="item">
<img src="http://topwalls.net/wallpapers/2012/11/Wallpaper-Vivid-Dots-Warm-Tone-The-Grid-485x728.jpg" alt="Three" class="img-responsive">
</div>
<div class="item">
<img src="http://topwalls.net/wallpapers/2012/03/Gold-Coast-Australia-485x728.jpg" alt="Two" class="img-responsive">
</div>
</div>
<a class="left carousel-control" href="#mySlider" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#mySlider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script>
$('.carousel').carousel();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment