index.html

<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>

Oceanside-Beach-Mockup.markdown

Oceanside Beach Mockup

A Pen by Josh Adamous on CodePen.

License.

script.js

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);
})();

style.sass

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