Skip to content

Instantly share code, notes, and snippets.

@meanmachin3

meanmachin3/index.html

Created September 23, 2016 08:16
Show Gist options
  • Save meanmachin3/e80f5d6fba4944616b4b997bfcb866c8 to your computer and use it in GitHub Desktop.
Save meanmachin3/e80f5d6fba4944616b4b997bfcb866c8 to your computer and use it in GitHub Desktop.
Download ZIP
My first pen
Raw
index.html
<html>
<head></head>
<div class="container">
<div class="jumbotron">
<body>
<h1>Firefly</h1>
<h2><i>If I could store lightnings in jars, I'd sell them to sick fireflies to light their way. Only they have nothing to pay for it with but life.</i></h2>
<div id='fireflyslide' class='carousel slide' data-ride='carousel'>
<ol class="carousel-indicators">
<li data-target="#fireflyslide" data-slide-to="0" class="active"></li>
<li data-target="#fireflyslide" data-slide-to="1"></li>
<li data-target="#fireflyslide" data-slide-to="2"></li>
<li data-target="#fireflyslide" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!----First Slide--->
<div class="item active">
<img src="http://3.bp.blogspot.com/-YXsgjuK3H78/UKlCNtqmNYI/AAAAAAABMIY/dIf3qqYX1DY/s1600/fireflies+by+Tsuneaki+Hiramatsu+4.jpg" alt="img1">
<div class="carousel-caption">
<h3>Firefly</h3>
<p>Photographs by tsuneaki hiramatsu</p>
</div>
</div>
<!--End of First Slider-->
<div class="item">
<img src="https://s3-eu-west-1.amazonaws.com/assets.barcroft.tv/4dffb161-0c57-4ecf-8ba8-77c87687851a.jpg" alt="img1">
<div class="carousel-caption">
<h3>Firefly</h3>
<p>Photographs by tsuneaki hiramatsu</p>
</div>
</div>
<div class="item">
<img src="http://thumbs.media.smithsonianmag.com//filer/0d/26/0d26db71-03d4-4f37-91f4-72fe87638b2e/04-all-that-glitters.jpg__1072x0_q85_upscale.jpg" alt="img1">
<div class="carousel-caption">
<h3>Firefly</h3>
<p>Photographs by tsuneaki hiramatsu</p>
</div>
</div>
<div class="item">
<img src="http://brainchase.com/public/uploads/aAJSR.jpg" alt="img1">
<div class="carousel-caption">
<h3>Firefly</h3>
<p>Photographs by tsuneaki hiramatsu</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#fireflyslide" 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="#fireflyslide" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</body>
</div>
</div>
</html>
Raw
my-first-pen.markdown
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
Raw
style.scss
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
max-width: none;
margin: auto;
min-width: 100%;
height: 500px;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment