Skip to content

Instantly share code, notes, and snippets.

@1wdtv

1wdtv/index.html

Created February 5, 2016 16:37
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save 1wdtv/ca35884bf2d3095344b2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save 1wdtv/ca35884bf2d3095344b2 to your computer and use it in GitHub Desktop.
Download ZIP
module0001
Raw
index.html
<section id="module0001">
<div class="container">
<div class="row">
<div class="col-md-6">
<!--Left Column-->
<div class="row">
<div class="title-block">
<h1>ELEMENT WATCHES</h1>
<h1>lorum ipsum deloras con squetor della con </h1>
</div>
</div>
<!-- two buttons -->
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 text-center">
<div class="btn btn-lg btn-danger">
<a href="#">
<img src="//dl.dropbox.com/s/texqmnvkez62ttf/apple-app.png">
</a>
</div>
<div class="btn btn-lg btn-danger">
<a href="#">
<img src="//dl.dropbox.com/s/usq05v5saoxc1i0/google-play.png">
</a>
</div>
</div>
</div>
<!-- Nav Stacked -->
<div class="row">
<ul class="nav nav-stacked">
<li>
<a class="bg-info page-scroll" href="#something-below-one" rel="page-scroll">Something Below</a>
</li>
<li>
<a class="bg-info page-scroll" href="#something-below-two" rel="page-scroll">Something Below One</a>
</li>
<li>
<a class="bg-info page-scroll" href="#something-below-three" rel="page-scroll">Membership</a>
</li>
</ul>
</div>
<!-- Social Media -->
<div class="row">
<ul class="nav nav-pills">
<li class="col-md-3 col-sm-3 col-xs-3">
<a href="#">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-youtube fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="col-md-3 col-sm-3 col-xs-3">
<a href="#">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-google-plus fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="col-md-3 col-sm-3 col-xs-3">
<a href="#">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="col-md-3 col-sm-3 col-xs-3">
<a href="#">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
</div>
</div><!-- end .row -->
</div><!-- end .container-->
</section>
<section id="module0001-lower" class="module-pad bg-white">
<div class="container">
<div class="row">
<div class="col-md-6">
<h1 class="text-muted">
Everything you need on your wrist
<br><small>The amazing watch concept</small>
</h1>
<p>Sed non mauris vitae erat consequat auctor eu in elit. Class aptent tasociosqu ad litora torquent peer inpet mauris in erat justo. Nullam ac urna eu felis. Cras eleifend aliquam turpis, vitae aliquam eros blandit vel. Praesent id dolor id esteod maximus id vitae eros. Nullam vehicula mattis sapien, sit cras volutpat, ante vulputate lacinia fringilla. Mauris lobortis, ex id pellentesque tincidunt.</p>
</div>
<div class="col-md-6">
<img class="hideme" src="https://dl.dropbox.com/s/l976jvrd9661gbg/product-element-yellow-watch-600x600.png">
</div>
</div>
</div>
</section>
<!--
<section id="colors">
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
</section>
-->
Raw
module0001.markdown
Raw
script.js
/* Window Size and Fade-in JS are located in http://codepen.io/1wdtv/pen/zrmqvw */
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://codepen.io/1wdtv/pen/zrmqvw"></script>
Raw
style.css
/* This is our global style*/
@import url(http://codepen.io/1wdtv/pen/5d5f47e822cd0011479d8aa9aa4877b8.css);
/* This is style particular to this module only*/
#module0001 {
background-color: #222222;
background-image: url("//dl.dropbox.com/s/b7176dki71mt7o0/product-jumbotron-background.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
display: inline-block;
height: 100%;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 550px;
}
/*Jumbotron Title*/
#module0001 .title-block {
text-align: center;
margin-top:20%;
margin-bottom:5%;
}
#module0001 .title-block h1:nth-child(1) {
font-size: 100px;
font-weight: 700;
color: #fff;
text-transform: uppercase;
margin: 0;
letter-spacing: -1px;
line-height: 1em;
}
#module0001 .title-block h1:nth-child(2) {
font-size: 25px;
font-weight: 300;
color: #bebebe;
margin: 0;
}
/* Helper Classes: Top Padding Between Rows */
.row + .row {
margin: 30px 0 0;
}
.module-pad {
padding:70px 0;
}
.module-pad-top {
padding-top:70px;
}
.row.row-bottom-margin {
margin-bottom:0!important;
}
.vertical-center {
margin-top:12.5%;
margin-bottom:12.5%;
}
/* Btn */
.btn-lg {
padding: 10px 10px;
}
/* Nav Stacked */
#module0001 .nav-stacked li a {
margin-top:10px;
color:#222;
font-weight:400;
font-size:25px;
}
#module0001 .nav-pills {
margin:0 auto;
float:none;
}
#module0001 .nav>li>a {
padding: 15px;
text-align:center;
}
#module0001 .nav-pills li {
text-align: center;
margin: 0;
}
#module0001 .nav-pills li a:hover {
background-color:transparent;
}
#module0001-lower h1 {
font-size: 50px;
line-height: 58px;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment