A Pen by Josh Adamous on CodePen.
Created
January 2, 2015 21:57
-
-
Save anonymous/c2bd03dbed344e23a428 to your computer and use it in GitHub Desktop.
Oceanside Beach Mockup
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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">×</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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
})(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | |
background-color: #3b5998 | |
color: #fff !important | |
&:hover | |
background-color: darken(#3b5998, 6%) !important | |
background-color: #00aced | |
color: #fff !important | |
&:hover | |
background-color: darken(#00aced, 6%) !important | |
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