<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="hidden-xs col-sm-3">
<div class="fading-side-menu" data-spy="affix" data-offset-top="350">
<ul class="list-unstyled" id="nav-links">
<li>
<a href="#intro">
<span class="fa fa-angle-double-right text-primary"></span>Home
</a>
</li>
<li>
<a href="#getting-started">
<span class="fa fa-angle-double-right text-primary"></span>Account
</a>
</li>
<li>
<a href="#setting-up-our-page">
<span class="fa fa-angle-double-right text-primary"></span>Billing & Payment
</a>
</li>
<li>
<a href="#conclusion">
<span class="fa fa-angle-double-right text-primary"></span>Sign Out
</a>
</li>
</ul>
</div>
</div>
<!-- THIS IS NOT NEEDED, THIS IS JUST THE CONTENT OF THE DEMO -->
<div class="col-xs-12 col-sm-9">
<div class="welcome">
<h5>Hello Jon,</h5>
<div>Welcome to your Payment Portal.</div>
</div>
</div>
</div>
<a href="http://bootsnipp.com/iframe/rVnOR" class="btn btn-primary btn-lg" id="fullscreen" data-toggle="tooltip" data-placement="left" title="Full Screen"><span class="fa fa-arrows-alt"></span></a>
/* FOR DEMO ONLY */
/* Import Bootswatch paper theme because it isn't provided by Bootsnipp and it is awesome! */
@import url(//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.4/paper/bootstrap.min.css);
@import url(//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css);
.welcome {
font-family: "Roboto","Helvetica Neue",Helvetica,Arial,sans-serif !important;}
/* WHAT YOU NEED */
.fading-side-menu.affix-top {
opacity: 1;
transition: opacity 1s
}
.fading-side-menu.affix {
top: 11.5px;
}
.fading-side-menu.affix {
opacity: 0.2;
transition: opacity 5s
}
.fading-side-menu.affix:hover {
opacity: 1;
transition: opacity 0.3s
}
/* RECOMMENDED STYLING BUT NOT REQUIRED */
.fading-side-menu a {
color: #0067BC;
}
.fading-side-menu a .fa {
padding-right:15px;
}
/* FOR DEMO ONLY */
body {
background-color: rgb(255, 255, 255);
font-size: 13.5px;
}
.welcome {
font-weight: bold; }
h5 {font-weight: bold;}
.container {
margin-top: 20px;}
header {
background: url('https://unsplash.imgix.net/photo-1427955569621-3e494de2b1d2?fit=crop&fm=jpg&h=700&q=75&w=1050') no-repeat center bottom;
background-size: cover;
margin-bottom: 30px;
min-height: 320px;
overflow: hidden;
position: relative;
width: 100%;
}
header:after {
bottom: 0px;
box-shadow: 0px -0px 10px 10px rgb(255, 255, 255);
content: '';
height: 0px;
left: 0px;
width: 100%;
position: absolute;
}
header .col-xs-12 {
height: 320px;
}
header .alert-info {
background-color: rgba(156, 39, 176, 0.7);
}
.title {
font-weight: 700;
margin-top: 0px;
}
p.small.text-muted {
margin-bottom: 0px;
}
.lead {
font-style: italic;
}
#nav-links {
color: #00a8b3;
font-size: 16px;
}
.no-margin {
margin: 0px !important;
}
.vertical-center {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
#fullscreen {
position: fixed;
top: 10px;
right: 10px;
}
/* THOUGH THIS PLUGIN DOES NOT CONTAIN
ANY JAVASCRIPT ITSELF, IT DOES REQUIRE
THE BOOTSTRAP AFFIX PLUGIN. */
/* START OF DEMO JS - NOT NEEDED */
$(function () {
if (window.location == window.parent.location) {
$('#fullscreen').html('<span class="fa fa-compress"></span>');
$('#fullscreen').attr('href', 'http://bootsnipp.com/mouse0270/snippets/rVnOR');
$('#fullscreen').attr('title', 'Back To Bootsnipp');
}
$('#fullscreen').on('click', function(event) {
event.preventDefault();
window.parent.location = $('#fullscreen').attr('href');
});
$('#fullscreen').tooltip();
});
/* END DEMO OF JS - THAT IS RIGHT NO ADDITONAL JAVASCRIPT NEEDED FOR THIS SNIPPET */
