Skip to content

Instantly share code, notes, and snippets.

@gsuttie

gsuttie/gist:d9de8b850f3c9370c522

Created February 23, 2016 15:13
Show Gist options
  • Save gsuttie/d9de8b850f3c9370c522 to your computer and use it in GitHub Desktop.
Save gsuttie/d9de8b850f3c9370c522 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">
<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;}
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.mth-nav{/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2d4e6f+0,42576b+100 */
background: #2d4e6f; /* Old browsers */
-webkit-box-shadow: -2px 10px 12px -5px rgba(0,0,0,0.32);
-moz-box-shadow: -2px 10px 12px -5px rgba(0,0,0,0.32);
box-shadow: -2px 10px 12px -5px rgba(0,0,0,0.32);
}
.tasty-burger{
margin: 5px 0 0 -120px;
font-size: 26px;
}
.tasty-burger a, a:link{
color: #ffffff;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e5e5e5+100 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(left, #ffffff 0%, #e5e5e5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #ffffff 0%,#e5e5e5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #ffffff 0%,#e5e5e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=1 ); /* IE6-9 */
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
border-right: 1px solid #C7C7C7;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #333333;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
margin: 3em 0 0 0;
border-bottom: 1px solid #e5e5e5;
}
.sidebar-nav > .sidebar-brand a {
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
@media(min-width:768px) {
#wrapper {
padding-left: 250px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 250px;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
.main-margin{margin: 4em 0 0 0;}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css"></script>
<title>MTH - Burger</title>
</head>
<body>
<div id="wrapper">
<nav class="navbar navbar-inverse navbar-fixed-top mth-nav">
<div class="container">
<div class="tasty-burger">
<a href="#menu-toggle" id="menu-toggle">
<i class="fa fa-bars"></i>
</a></div>
</div>
</nav>
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Category one
</a>
</li>
<li>
<a href="#"><i class="fa fa-home"></i> MY HUB</a>
</li>
<li>
<a href="#"><i class="fa fa-unlock"></i> Password resets</a>
</li>
<li>
<a href="#"><i class="fa fa-mobile"></i> Mobile &amp; Multimedia</a>
</li>
<li>
<a href="#"><i class="fa fa-envelope"></i> email &amp; sharepoint</a>
</li>
<li>
<a href="#"><i class="fa fa-envelope"></i> Deskphone</a>
</li>
<li>
<a href="#"><i class="fa fa-rocket"></i> applications</a>
</li>
<li>
<a href="#"><i class="fa fa-desktop"></i> my computer</a>
</li>
<li>
<a href="#"><i class="fa fa-medkit"></i> how to</a>
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row main-margin">
<div class="col-lg-12">
<h1 class="headline">MTH Burger Preview</h1>
<p class="tagline">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae blanditiis culpa deserunt
dolorem doloremque eligendi error, explicabo ipsam iste labore libero maiores natus
necessitatibus nesciunt nihil nulla praesentium quo rerum.</p>
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment