Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save thorstensiefert/ae79c5a7cd08b6b9db53 to your computer and use it in GitHub Desktop.
Save thorstensiefert/ae79c5a7cd08b6b9db53 to your computer and use it in GitHub Desktop.
<nav class="navbar navbar-default headroom" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navbar-offcanvas" data-canvas="body">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Oceanside Beach</a>
</div>
<div class="navbar-offcanvas offcanvas">
<div class="offcanvas-close visible-xs">
<button type="button" class="close" data-toggle="offcanvas" data-target=".navbar-offcanvas" data-canvas="body"><span aria-hidden="true">&times;</span>
</div>
<a class="navmenu-brand" href="#">Oceanside Beach</a>
<ul class="nav navbar-nav">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span><p class="visible-xs">Home</p></a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown account">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"><p class="visible-xs">Account</p></i></a>
<ul class="dropdown-menu" role="menu">
<li>
<a id="loginToggle" data-toggle="collapse" href="#login">
<i class="fa fa-lock"></i>Login
</a>
</li>
<div id="login" class="collapse">
<input type="text" class="form-control" placeholder="Username"/>
<input type="text" class="form-control" placeholder="Password"/>
</div>
<li>
<a href="https://www.twitter.com/">
<i class="fa fa-pencil"></i>Sign up
</a>
</li>
<li>
<a href="https://www.pinterest.com/">
<i class="fa fa-cog"></i>Settings
</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-share"><p class="visible-xs">Share</p></i></a>
<ul class="dropdown-menu socialMedia" role="menu">
<li>
<a href="https://www.facebook.com/" class="facebook" target="_blank">
<i class="fa fa-facebook"></i>Facebook
</a>
</li>
<li>
<a href="https://www.twitter.com/" class="twitter" target="_blank">
<i class="fa fa-twitter"></i>Twitter
</a>
</li>
<li>
<a href="https://www.pinterest.com/" class="pinterest" target="_blank">
<i class="fa fa-pinterest"></i>Pinterest
</a>
</li>
</ul>
</li>
<li>
<form class="searchbar hidden">
<input type="text" class="form-control" placeholder="Search our site..."/>
</form>
</li>
<li><a href="#" id="searchToggle"><i class="fa fa-search"><p class="visible-xs">Search</p></i></a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sm-12">
<section>
<div class="welcome sidePad">
<div class="welcomeText text-right">
<h2>Join us in creating awesome</h2>
<h3><a href="#"><span class="glyphicon glyphicon-arrow-left"></span> Book an Experience</a></h3>
</div>
<img class="mainImg" src="http://facingtrials.com/wp-content/uploads/2014/06/Ocean.jpg" alt="" />
</div>
<ul class="ctas list-inline row row-eq-height">
<li class="cta text-center col-sm-4 borderLeft">
<span class="glyphicon glyphicon-glass"></span>
<p class="lead">Fine Dining</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, doloremque voluptatem ipsam, dolore vero. Pariatur!</p>
</li>
<li class="cta text-center col-sm-4">
<span class="glyphicon glyphicon-music"></span>
<p class="lead">Great Music</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga aliquam eius earum eveniet! Maxime nisi dolorum.</p>
</li>
<li class="cta text-center col-sm-4">
<span class="glyphicon glyphicon-camera"></span>
<p class="lead">Lasting Memories</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium delectus dolore quaerat modi vel, ipsa quibusdam..</p>
</li>
</ul>
</section>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="list-group">
<a href="#" class="list-group-item active clearfix">
<h4 class="list-group-item-heading pull-left">From the Blog</h4>
<p class="list-group-item-text pull-right"><b>Go to Blog</b><span class="glyphicon glyphicon-arrow-right"></span></p>
</a>
<div class="posts">
<a href="#" class="list-group-item clearfix">
<img src="http://lorempixel.com/120/180/city/2" alt="" class="img-thumbnail pull-left">
<div class="pull-right">
<h4 class="list-group-item-heading"> Annual Independant Film Festival</h4>
<p>Lorem ipsum dolor sit, consectetur adipisicing alias!</p>
<p class="list-group-item-text"><b>View Article</b><span class="glyphicon glyphicon-arrow-right"></span></p>
</div>
</a>
<a href="#" class="list-group-item clearfix">
<img src="http://lorempixel.com/120/180/nightlife/5/" alt="" class="img-thumbnail pull-left"/>
<div class="pull-right">
<h4 class="list-group-item-heading">Laurence Fishburne Maddness</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipi?</p>
<p class="list-group-item-text"><b>View Article</b><span class="glyphicon glyphicon-arrow-right"></span></p>
</div>
</a>
<a href="#" class="list-group-item clearfix">
<img src="http://lorempixel.com/120/180/city/2" alt="" class="img-thumbnail pull-left">
<div class="pull-right">
<h4 class="list-group-item-heading"> Annual Independant Film Festival</h4>
<p>Lorem ipsum dolor sit, consectetur adipisicing alias!</p>
<p class="list-group-item-text"><b>View Article</b><span class="glyphicon glyphicon-arrow-right"></span></p>
</div>
</a>
<a href="#" class="list-group-item clearfix">
<img src="http://lorempixel.com/120/180/nightlife/5/" alt="" class="img-thumbnail pull-left"/>
<div class="pull-right">
<h4 class="list-group-item-heading">Laurence Fishburne Maddness</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipi?</p>
<p class="list-group-item-text"><b>View Article</b><span class="glyphicon glyphicon-arrow-right"></span></p>
</div>
</a>
</div>
</div>
</div>
<div class="col-md-8">
<ul class="nav nav-tabs nav-justified" role="tablist">
<li class="active"><a href="#highlights" role="tab" data-toggle="tab">Highlights</a></li>
<li><a href="#reviews" role="tab" data-toggle="tab">Reviews</a></li>
<li><a href="#media" role="tab" data-toggle="tab">Media</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="highlights">
<p class="lead">Unforgettable Moments</p>
<ul class="list-unstyled">
<li>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object img-thumbnail" src="http://lorempixel.com/65/65/animals/5/" alt="">
</a>
<div class="media-body">
<h4 class="media-heading">Dear on beach!</h4>
...
</div>
</div>
</li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="tab-pane" id="reviews">Reviews</div>
<div class="tab-pane" id="media">Media</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed culpa veritatis alias sapiente ut voluptas veniam fugit error, nam odit voluptates harum beatae, facilis inventore earum aliquid maiores mollitia eos a dolorem sint, perferendis rerum eius. Ut similique, consectetur dolor. Odio aliquam iure ex deleniti. Libero maxime asperiores necessitatibus, excepturi deleniti nulla quaerat corporis aspernatur quos recusandae rerum eveniet repellat facilis, totam eaque ad voluptas iste magnam aliquid amet nisi sint. Nobis quisquam, placeat magnam quasi libero, hic pariatur amet ut cupiditate ea maxime! Tenetur asperiores omnis quo beatae dolor fugit? Pariatur aspernatur harum error iure ab ut nobis consequatur, tempora, vitae a maiores libero, mollitia corporis numquam? Adipisci vel, consequatur ex enim a, debitis eaque reprehenderit voluptas quisquam laborum!</p>
<p>Quia illum expedita non quas veritatis dolorum nostrum tempora laborum possimus quis sint commodi eveniet, amet delectus vel eum quae numquam unde aliquid illo aspernatur quasi maiores autem? Veniam maxime praesentium repellat molestias, totam, quibusdam sequi autem asperiores delectus a ipsa saepe quasi soluta optio aliquid eaque dolores. Magnam quisquam quo eos labore earum assumenda possimus veritatis. Illum quae amet mollitia facere id! Quod, asperiores! Saepe, cupiditate nesciunt odit, maiores alias impedit quasi expedita, consectetur nam aut id! Recusandae, excepturi, non voluptate accusamus est natus. Ut laboriosam perspiciatis voluptatem rem enim eveniet ipsum harum eligendi nulla, tempora esse nobis vitae quas nostrum quaerat repellat obcaecati omnis mollitia provident possimus similique doloribus reprehenderit autem ipsa optio. Saepe sed quod architecto ratione.</p>
<p>Maiores aperiam ex esse quod quia. Recusandae animi nam sed. Amet inventore aspernatur, hic impedit, placeat eum facilis consequuntur ipsa quis odio animi earum dolorum laudantium totam laborum sed! Enim consequatur ipsa, voluptatem nam voluptates repellat quas magni, suscipit qui, alias iusto sint corporis quisquam error beatae debitis eligendi placeat sequi officia laudantium velit? Nostrum expedita laborum iste laboriosam hic dolor praesentium soluta cupiditate tenetur repudiandae omnis nulla nihil sunt, sit dignissimos ipsa in provident nam veritatis molestias accusamus accusantium. Est, et soluta ullam. Mollitia quae cum aperiam, laborum perspiciatis neque dicta aliquid maiores maxime soluta adipisci expedita unde inventore ratione nam libero sapiente natus! Ipsa maxime rerum labore voluptates provident adipisci facilis necessitatibus, nesciunt nemo quam! Libero, iste, repellendus.</p>
<p>Explicabo praesentium, excepturi modi corporis, temporibus error, accusamus exercitationem repellat recusandae commodi consequuntur suscipit possimus fuga est fugit voluptate delectus ad. Voluptas perferendis saepe reiciendis harum. Unde, fugit ex temporibus hic omnis laudantium eos labore iure autem expedita asperiores quaerat assumenda reprehenderit veniam, rem suscipit iusto ab tenetur ratione quis repellendus ducimus quae. Commodi nisi voluptatibus, neque non at provident iure id quaerat magnam repellendus esse vitae error sapiente, blanditiis corrupti reprehenderit. Nulla culpa, temporibus autem repellendus ab incidunt, nobis nostrum cum beatae, impedit repudiandae facere doloribus tempora delectus aut molestias ipsam eligendi dolorem quisquam. Laboriosam autem ipsam officia laudantium delectus molestiae corporis, iusto at omnis enim minus impedit qui aliquid amet magni nobis, sed voluptatum! Sed dicta, ut sequi.</p>
</div>
</div>
</div>
var behavior = (function(){
function init() {
mediaQuery();
onResize();
navbarScroll();
}
$('.account ul').on('shown.bs.dropdown', function(){
$('.dropdown-menu').closable = false;
});
$('.navbar-toggle').click(function(){
var $navbar = $('.navbar');
if($navbar.hasClass('headroom--pinned')){
$navbar.removeClass('headroom--pinned');
}
});
$('#searchToggle').click(function(){
$('.searchbar').toggleClass('hidden');
$('.searchbar input').focus();
});
function onResize() {
$(window).resize(function(){
mediaQuery();
});
}
function navbarScroll() {
var navbar = new Headroom(document.querySelector(".headroom"), {
tolerance: 0,
offset : 40,
classes: {
initial: "headroom",
pinned: "headroom--pinned",
unpinned: "headroom--unpinned"
}
});
navbar.init();
}
var mqLarge = window.matchMedia("(min-width: 1200px)"),
mqMedium = window.matchMedia("(min-width: 992px) and (max-width: 1199px)"),
mqSmall = window.matchMedia("(min-width: 768px) and (max-width: 991px)"),
mqXSmall = window.matchMedia("(max-width: 767px)");
function mediaQuery() {
var $ctas = $('.ctas'),
$cta = $('.cta'),
$welcome = $('.welcome');
if (mqLarge.matches) {
$ctas.addClass('row-eq-height');
$cta.removeClass('borderLeft');
$welcome.addClass('sidePad');
}
if (mqMedium.matches) {
$ctas.addClass('row-eq-height');
$cta.removeClass('borderLeft');
$welcome.addClass('sidePad');
}
if (mqSmall.matches) {
$ctas.addClass('row-eq-height');
$cta.removeClass('borderLeft');
$welcome.addClass('sidePad');
}
if (mqXSmall.matches) {
$ctas.removeClass('row-eq-height');
$cta.addClass('borderLeft');
$welcome.removeClass('sidePad');
}
}
$(init);
})();
body
background-color: #eee
// Navbar
.offcanvas-close
position: absolute
top: 0
right: 6px
padding: 10px
button.close
font-size: 30px
&:focus
outline: 0 !important
.navbar-offcanvas
background-color: #1A4586 !important
border-color: darken(#1A4586,8%) !important
.navmenu-brand
color: #fff !important
padding: 0 15px
margin: 0
height: 50px
line-height: 50px
&:hover
color: #fff !important
.headroom
animation-duration: .4s
animation-fill-mode: both
@keyframes slideDown
0%
transform: translateY(-50px)
100%
transform: translateY(0)
.headroom.headroom--pinned
animation-name: slideDown
@keyframes slideUp
0%
transform: translateY(0)
100%
transform: translateY(-50px)
.headroom.headroom--unpinned
animation-name: slideUp
.navbar
background-color: #1A4586
border: 0
border-bottom: 4px solid darken(#1A4586,8%)
color: #333
position: fixed
left: 0
top: 0
width: 100%
z-index: 9999
.navbar-toggle:hover, .navbar-toggle:focus
background-color: darken(#1A4586,8%)
.navbar-nav li a
&:hover, &:focus
background-color: darken(#1A4586,8%)
.active>a, .open>a
background-color: darken(#1A4586,8%) !important
.searchbar
padding: .4rem
height: 50px
input, input:hover, input:focus
border: 0
box-shadow: none !important
background-color: transparent
color: #eee
&::placeholder
color: #ccc
// Welcome Section
.welcome
position: relative
margin-top: 84px
.sidePad
padding-left: 1px
padding-right: 1px
.welcomeText
position: absolute
bottom: 0
right: 0
width: 100%
color: #fff
text-shadow: 1px 1px rgba(0,0,0,.35)
background-color: rgba(255,255,255, .33)
h2, h3
padding: 0 3rem
font-weight: 400
h3
margin-top: 1.4rem
padding-bottom: 1rem
a
color: orange
&:hover .glyphicon
padding-right: .4rem
.glyphicon
position: relative
top: 0
font-size: 18px
transition: all .22s ease .1s
.mainImg
width: 100%
max-height: 400px
// CTAs
.ctas
margin: 0 0 30px 0
.cta:first-child
border-left: 1px solid #ddd
.cta.borderLeft
border-left: 1px solid #ddd
.cta
background-color: #fff
border: 1px solid #ddd
border-left: none
cursor: pointer
padding: 3rem 2.4rem 2rem 2.4rem !important
&:hover
background-color: #F9F9F9
.glyphicon, .lead
color: #FFA500
transition: all .35s ease
.glyphicon
font-size: 3rem
color: grey
transition: color .18s ease
.lead
margin: 1rem 0
transition: all .18s ease
.row-eq-height
display: -webkit-box
display: -webkit-flex
display: -ms-flexbox
display: flex
// Socal Media Dropdown
.facebook
background-color: #3b5998
color: #fff !important
&:hover
background-color: darken(#3b5998, 6%) !important
.twitter
background-color: #00aced
color: #fff !important
&:hover
background-color: darken(#00aced, 6%) !important
.pinterest
background-color: #cb2027
color: #fff !important
&:hover
background-color: darken(#cb2027, 6%) !important
.dropdown-menu
margin-top: 3px !important
padding: 0
p
display: inline-block
i
width: 25%
// From the Blog
.posts
height: 284px
overflow-y: auto
border-bottom: 1px solid #ddd
.list-group-item
&:hover
background-color: #F9F9F9
.img-thumbnail
padding: 2px
width: 25%
div
width: 70%
.list-group-item.active
background-color: #1A4586
border-color: #1A4586
border-bottom: 4px solid darken(#1A4586,8%)
&:hover
background-color: darken(#1A4586,8%)
border-color: darken(#1A4586,8%)
.list-group-item-text.pull-right
line-height: 26px
.list-group-item-text
opacity: 0
color: orange
transition: all .2s ease
.glyphicon
font-size: 11px
transition: all .3s ease .12s
.list-group-item:hover .list-group-item-text
opacity: 1
.list-group-item:hover .glyphicon
margin-left: .6rem
// Tab Content
.nav-tabs
background-color: #1A4586
li a
border: 0
border-bottom: 4px solid darken(#1A4586,8%) !important
color: #fff
font-size: 18px
font-weight: 200
li.active a
border-bottom: 0 !important
height: 50px
font-weight: 400
li a:hover
border-color: transparent
background-color: darken(#1A4586,8%)
.tab-pane
height: 286px
overflow-y: auto
padding: 1.6rem
background-color: #fff
border: 1px solid #ddd
border-top: 0
.lead
border-bottom: 4px solid darken(#1A4586,8%)
.img-thumbnail
padding: 2px
@media screen and (max-width: 767px)
p.visible-xs
display: inline !important
margin-left: 1rem
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment