Skip to content

Instantly share code, notes, and snippets.

@gsuttie

gsuttie/gist:0cc91875f307259e59b7

Created February 23, 2016 11:43
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 gsuttie/0cc91875f307259e59b7 to your computer and use it in GitHub Desktop.
Save gsuttie/0cc91875f307259e59b7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic' rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha256-3dkvEK0WLHRJ7/Csr0BZjAWxERc5WH7bdeUya2aXxdU= sha512-+L4yy6FRcDGbXJ9mPG8MT/3UCDzwR9gPeyFNMCtInsol++5m3bk2bXWKdZjvybmohrAsn3Ua5x8gfLnbE1YkOg==" crossorigin="anonymous">
<script>
function toggleChevron(e) {
$(e.target)
.prev('.panel-heading')
.find("i.indicator")
.toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);
</script>
<style>
body{background: #ffffff;
font-family: 'Open Sans', sans-serif;
color: #2D4E6F;
}
.well-checklist{/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e5e5e5+0,ffffff+100 */
background: #e5e5e5; /* Old browsers */
background: -moz-linear-gradient(top, #e5e5e5 0%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #e5e5e5 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #e5e5e5 0%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
margin:4em 0 0 0;
border-radius: 3px;
border: #e5e5e5 1px solid;
padding: 2em 3em
}
.headline {font-weight:300;
font-size:58px;
margin: .4em 0 .2em 0;
color: #2D4E6F;
}
.tagline{
margin: .6em 0 1.6em 0;
font-style: italic;
color: #2D4E6F;
}
.btn-default{background-color: #2D4E6F;
color:#ffffff;
border: #1E344B 1px solid ;
border-radius: 2px !important;
margin: 0 0 6px 0;
font-size:16px;
padding:12px;
text-transform: uppercase}
.btn-default:hover{
background-color: #3C6793;
color: #ffffff;
}
.close-checklist{
font-size: 30px;
position: relative;
margin: -.7em -1.7em 0 0;
color: #333333;
float: right;
cursor: pointer;
}
.close-checklist:hover{
color: #5a5a5a;
}
.attention{color:#A60002;
margin: 0 0 1.2em 0;}
.panel-group{margin: 1em auto;
width:90%;}
.panel-default>.panel-heading{
background-color: #2D4E6F;
color:#ffffff;
border: #1E344B 1px solid;
border-radius: 2px !important;
font-size:16px;
padding:12px;
text-transform: uppercase
}
li{
display: block;
margin: .8em 0;
text-transform: uppercase;
}
li:hover{
color: #3C6793;
cursor: pointer;
}
i{margin: 0 1em 0 0;}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css"></script>
<title>MTH - Checklist</title>
</head>
<body>
<div class="container">
<div class="well-checklist">
<div class="close-checklist"><i class="fa fa-times"></i></div>
<h1 class="headline">New Starter Checklist</h1>
<h2 class="tagline"> These are some common products that other people in your department have.
</h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Item #1
</a><i class="indicator glyphicon glyphicon-chevron-down pull-right"></i>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<ul>
<li><i class="fa fa-check"></i>I want this</li>
<li><i class="fa fa-times-circle"></i>I don't what this</li>
<li><i class="fa fa-ban"></i>I'll do this later</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Item #2
</a><i class="indicator glyphicon glyphicon-chevron-up pull-right"></i>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Item #3
</a><i class="indicator glyphicon glyphicon-chevron-up pull-right"></i>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment