Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <header>
  <div class="container">
    <div class="row">
      <div class="column">
        <div class="logo">
          <div class="icon"></div>
          <div>Loft Digital<span><i class='fa fa-code-fork'></i> us on Github</span></div>
        </div>
      </div>
      <div class="column">
        <ul class="nav">
          <li><a href="#">About</a></li>
          <li><a href="#">Work</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </div>
    </div>
  </div>
</header>
<section class="hero">
  <div class="container">
    <div class="row">
      <div class="column">
        <h1>Creating a more level playing field</h1>
        <p>In everything we do, we are creating a more level-playing field,
where anyone can achieve anything they dream of. </p><a href="#" class="button">See our Work</a>
        <div class="video">
          <div class="overlay"></div>
          <iframe src="https://www.youtube.com/watch?v=ErcV8vlKexE" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
        </div>
      </div>
    </div>
  </div>
</section>
<section class="showcase">
  <div class="container">
    <div class="row">
      <div class="column">
        <h5>We are always pushing the boundaries of code, to create more innovative, flexible solutions. </h5>
        <h2>Progressive Full Stack Web Development</h2>
      </div>
    </div>
    <div class="row">
      <div class="tabs">
        <div class="tab-nav">
          <ul>
            <li><a href="#classic" class="active">Experts</a></li>
            <li><a href="#average">Entreprenurial</a></li>
            <li><a href="#proper">Fun</a></li>
          </ul>
        </div>
        <div id="classic" class="tab-content active">
          <div class="row">
            <div class="column">
              <div>
                <h3>Industry Acheivements</h3>
                <p>As far as tech is concerned, Loft are proud to be pioneers in their space. From founding a competive CMS to Wordpress - Matchbox. To Writing industry standard books on PHP unit testing & winning awards for open source projects - loft really is the best place to work as an abitious, aspiring Web Developer.</p>
              </div>
            </div>
            <div class="column"><img src="http://i1301.photobucket.com/albums/ag118/francescatabor89/zdenek-book_zpsk4gt3k9y.jpg"/></div>
          </div>
        </div>
        <div id="average" class="tab-content">
          <div class="row">
            <div class="column">
              <h3>Loft Innovation Labs</h3>
              <p>At Loft we empower each developer to really take the company forward with our flat management and flexible hours. Developers are awarded Innovation time to develop their skills, challenge their creative mind and exercise their entreprenurial muscle. Out of this we've initiated web developer meetups, hackerthons, built our own games and developed meaninful projects, such as the Loft Academy India, which teaches underpriviledged children living in Slums how to code.</p>
            </div>
            <div class="column"><img src="http://i1301.photobucket.com/albums/ag118/francescatabor89/11114730_866871100046557_6023125869972496752_n_zpsqjupniv0.jpg"/></div>
          </div>
        </div>
        <div id="proper" class="tab-content">
          <div class="row">
            <div class="column">
              <h3>Having a Good Time</h3>
              <p>From Loft Secret cinema, to agressive fose ball matches, and our relaxing lounge area, deemed "the developers gentleman's club" - we make sure our developers have enough time to let loose and have a good time. But above and beyond the leisure activities; being part of team, being respected and having room to grow and excell is what really keeps out Loft developers motivated. So our developers a passionatly fueled to go beyond their own limits to achieve the best results for our clients. </p>
            </div>
            <div class="column"><img src="http://i1301.photobucket.com/albums/ag118/francescatabor89/10441124_968543073212692_8286742216975333469_n_zpsjgeafske.jpg"/></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<section class="features">
  <div class="container">
    <div class="row">
      <div class="column">
        <h2>Mobile App Development</h2>
        <h5>At Loft, we strive to deliver the best user experience in every site and application we create, regardless of the device.</h5>
      </div>
    </div>
    <div class="row">
      <div class="column"><img src="http://i1301.photobucket.com/albums/ag118/francescatabor89/rss-mobile-updates_zpsg74lk9jg.png"/></div>
    </div>
  </div>
</section>
<section class="abtest">
  <div class="container">
    <div class="row">
      <div class="column">
        <h2>Wordpress development</h2>
        <p>We create custom developed WordPress websites with advanced functionality to increase visitors, website engagement, business credibility and sales leads.</p>
      </div>
    </div>
    <div class="row">
      <div class="column"><img src="http://i1301.photobucket.com/albums/ag118/francescatabor89/image-wordpress-is-the-1-cms_zpsc92ujcfs.jpg"/></div>
    </div>
  </div>
</section>
<section class="responsive">
  <div class="container">
    <div class="row">
      <div class="column">
        <h2>Global Clients</h2>
        <p>Panacea is the publisher of BusinessTraveller.com in Europe, the US, Asia and the Middle East, as well as a number of other travel-related websites and magazines. Loft has been working with the company over the last five years to launch an expanding portfolio of international, online editions of their publications – seven websites in total, including the Business Traveller network – and a fully-integrated subscriptions and user-sign-in system.</p>
      </div>
    </div>
    <div class="row">
      <div class="column"><img src="http://i1301.photobucket.com/albums/ag118/francescatabor89/panacea-publishing-relaunch_zpsdyc1xjm6.jpg"/></div>
    </div>
  </div>
</section>
<section class="repos">
  <div class="container">
    <div class="row">
      <div class="column">
        <h2>The question isn't who is going to let me; it's who is going to stop me</h2>
        <p>If you have everything under conrol, you're not miving fast enough - Mario Andetti</p>
      </div>
    </div>
  </div>
</section>
<section class="seamless">
  <div class="container">
    <div class="row">
      <div class="column">
        <h5>Clients, Testimonials & Case Studies</h5>
        <h2>Our International Client base</h2>
        <p>Click to view Case Studies</p>
      </div>
    </div>
    <div class="row bloggers">
      <div class="column"><img src="http://i1301.photobucket.com/albums/ag118/francescatabor89/ls_zpsk5ky5v78.png"/></div>
      <div class="column"><img src="http://placehold.it/250x100"/></div>
      <div class="column"><img src="http://placehold.it/250x100"/></div>
      <div class="column"><img src="http://placehold.it/250x100"/></div>
    </div>
    <div class="row bloggers">
      <div class="column"><img src="http://placehold.it/250x100"/></div>
      <div class="column"><img src="http://placehold.it/250x100"/></div>
      <div class="column"><img src="http://placehold.it/250x100"/></div>
      <div class="column"><img src="http://placehold.it/250x100"/></div>
    </div>
  </div>
</section>
<section class="cta">
  <div class="container">
    <div class="row">
      <div class="column">
        <h2>Excellence is the unlimited ability to improve the quality of what you have to offer</h2><a href="#" class="button">Work with us</a>
      </div>
    </div>
  </div>
</section>
<footer class="footer">
  <div class="container">
    <div class="row">
      <div class="column">
        <p>The person who says it cannot be done should not interup the person doing it.<br>Loft Digital &copy; 2016</p>
      </div>
    </div>
  </div>
</footer>
              
            
!

CSS

              
                $base-font: 'Open Sans';
$header-font: null;

$white: #FFF;
$black: #000;

$accent: #f77070;
$primary: #f44040;

$thin: 100;
$light: 300;
$regular: 400;
$semibold: 500;
$bold: 700;

body {
  background: #f5f5f5;
  font-family: $base-font, sans-serif;
  font-size: 14px;
  font-weight: $regular;
  -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
  line-height: 1.6em;
}

.clearfix {
  &:before,
  &:after {
    content: '';
    display: table;
    clear: both;
  }
}

.button {
  display: inline-block;
  background: $accent;
  border: 1px solid transparent;
  border-radius: 100px;
  margin: 0 0 48px;
  padding: 12px 24px;
  color: $white;
  font-weight: $bold;
  text-decoration: none;
  text-transform: uppercase;
  transition: .3s ease;

  &:hover {
    background: transparent;
    border: 1px solid $accent;
    color: $accent;
  }
}

.FontAwesome {
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container {
  max-width: 1180px;
  width: 90%;
  margin: 0 auto;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
}

.column {
  width: 100%;
}

header {
  z-index: 9;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  padding: 24px 0;
  transition: .3s ease;
  
  .fixed-header & {
    background: $white;
    box-shadow: 0 0 3px rgba($black, .3);
  }
  
  .nav {
    padding: 3px 0;
    text-align: right;

    li {
      display: inline-block;
      margin: 0 8px 0 0;

      &:last-child {
        margin: 0;

        a {
          border: 1px solid $accent;
          color: $accent;
          
          &:hover {
            background: $accent;
            color: $white;
          }
        }
      }
    }
    
    a {
      display: block;
      border-radius: 100px;
      border: 1px solid transparent;
      padding: 12px 24px;
      color: $white;
      font-weight: $bold;
      text-decoration: none;
      text-transform: uppercase;
      transition: .3s ease;
      
      &:hover {
        background: $white;
        color: $primary;
      }
      
      .fixed-header & {
        color: #333;
      }
    }
  }
}

.logo {
  .icon {
    display: inline-block;
    background: $white;
    width: 54px;
    height: 54px;
    border-radius: 100%;
    margin: 0 12px 0 0;
    color: $primary;
    line-height: 54px;
    text-align: center;
    vertical-align: middle;
    transition: .3s ease;
    
    .fixed-header & {
      background: $accent;
      color: $white;
    }
    
    &:before {
      @extend .FontAwesome;
      content: '';
    }
  }
  
  div {
    display: inline-block;
    font-size: 22px;
    font-style: italic;
    font-weight: $bold;
    vertical-align: middle;
    color: $white;
    transition: .3s ease;
    
    .fixed-header & {
      color: #666;
    }

    span {
      display: block;
      padding: 4px 0 0;
      font-size: 12px;
      font-style: normal;
      font-weight: $regular;
      line-height: 1;
      
      i {
        margin: 0 4px;
      }
    }
  }
}

section {
  .container {
    max-width: 960px;
  }
  
  h2 {
    margin: 0 0 48px;
    color: #333;
    font-size: 26px;
    font-weight: 400;
    text-align: center;
    text-transform: capitalize;
  }
  
  h5 {
    margin: 0 0 4px;
    color: #999;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    text-transform: uppercase;
  }
  
  p {
    text-align: center;
  }
}

.hero {
  background: $primary;
  height: 800px;
  padding: 160px 0 0;
  box-sizing: border-box;
  text-align: center;
  color: $white;
  
  h1 {
    margin: 0 0 24px;
    color: inherit;
    font-size: 30px;
    font-weight: 400;
    text-transform: capitalize;
  }
  
  p {
    max-width: 760px;
    margin: 0 auto 48px;
    padding: 0 48px;
    box-sizing: border-box;
    color: inherit;
  }
  
  .video {
    position: relative;
    background: $white;
    height: 540px;
    border-radius: 2px;
    box-shadow: 0 0 4px rgba($black, .12);
    overflow: hidden;
    
    .overlay {
      z-index: 1;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      background: $white;
      width: 100%;
      height: 100%;
      color: $accent;
      font-size: 48px;
      
      &:before {
        @extend .FontAwesome;
        cursor: pointer;
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: block;
        width: 48px;
        height: 48px;
        border-radius: 100px;
        margin: auto;
      }
    }
    
    iframe {
      width: 100% !important;
      height: 100% !important;
    }
  }
}

.showcase {
  padding: 200px 0 48px;
  
  h5 {
    
  }
  
  .tabs {
    width: 100%;
  }
  
  .tab-nav {
    ul {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      width: 100%;
      border-bottom: 1px solid rgba($black, .1);
    }
    
    li {
      display: block;
    }
    
    a {
      display: block;
      padding: 12px 0;
      border-bottom: 2px solid transparent;
      color: #666;
      text-decoration: none;
      text-transform: uppercase;
      transition: .3s ease;

      &.active {
        border-color: $accent;
        color: $accent;
        font-weight: $bold;
      }
    }
  }
}

.tab-content {
  padding: 48px 0;
  
  h3 {
    margin: 0 0 12px;
    color: #333;
    font-size: 20px;
    font-weight: $bold;
    text-transform: uppercase;
  }
  
  p {
    color: #999;
    text-align: left;
  }
  
  img {
    display: block;
    width: 100%;
  }
  
  .row {
    display: table;

    .column {
      display: table-cell;
      width: 60%;
      padding: 0 0 0 24px;
      vertical-align: middle;

      &:first-child {
        width: 40%;
        padding: 0;
      }
    }
  }
}

.features,
.abtest,
.responsive {
  background: $white;
  padding: 96px 0;
  
  h2 {
    margin: 0 0 24px;
  }
  
  h5 {
    margin: 0 0 48px;
  }
  
  p {
    color: #999;
    margin: 0 0 48px;
    text-align: center;
    text-transform: initial;
  }
  
  img {
    display: block;
    width: 80%;
    margin: 0 auto;
  }
}

.abtest {
  background: transparent;
}

.repos {
  background: $primary;
  padding: 96px 0 240px;
  
  h2,
  p {
    color: $white;
    text-align: center;
  }
}

.seamless {
  padding: 96px 0;
  
  p {
    margin: 0 0 48px;
    color: #666;
  }
  
  .bloggers {
    margin: 24px 0 0;

    .column {
      padding: 0 12px;
    }

    img {
      width: 100%;
    }
  }
}

.cta {
  background: $primary;
  padding: 96px 0;
  color: $white;
  text-align: center;

  h2 {
    color: inherit;
    font-size: 30px;
    line-height: 1.6em;
  }
}

.footer {
  background: darken($primary, 10%);
  padding: 24px 0;
  color: $white;
  text-align: center;
}
              
            
!

JS

              
                /* Video Overlay */
$('.video .overlay').on('click', function() {
  $(this).fadeOut(300);
});

/* Tabs */
$('.tab-content').not('.active').hide();

$('.tab-nav a').click(function(e) {
  e.preventDefault();
  $('.tab-nav a').removeClass('active');
  $(this).addClass('active');

  $('.tab-content').hide();
  $($.attr(this, 'href')).fadeIn(300);
});

/* Fixed Navigation */
if ($('header').offset().top > 0) {
  $('body').addClass('fixed-header');
} else {
  $('body').removeClass('fixed-header');
}

/* Scroll Function */
$(window).scroll(function() {
  /* Fixed Navigation */
  if ($('header').offset().top > 0) {
    $('body').addClass('fixed-header');
  } else {
    $('body').removeClass('fixed-header');
  }
});
              
            
!
999px

Console