cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

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.

            
              <main>
  <section id="menu" class="close">
    <nav role='navigation'>
      <ul>
        <li id="btn-menu"><a><i class="fa fa-bars fa-lg"></i></a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Articles</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>  
  </section>

  <section id="content">
    <section id="article-cover">
      <div class="hero-photo"></div>
      <div id="article-details">
        <div class="article-details-wrapper responsive">
          <div class="article-category"><a href="#">Kategoria</a></div>
          <h1 class="article-title">Kahden Rivin Title</h1>
          <div class="article-abstract">Tämä on ingressi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea veniam aperiam, molestiae earum cumque ad maiores facilis. Fuga ab odio, reiciendis obcaecati dolor, accusantium eos similique quis quasi officia, ipsum.</div>
          <div class="article-byline">Text: <strong>Kirjoittajan Nimi</strong></div>
          <div id="read-more" class="responsive">
            <a href="#article-body">Lue Lisää<i class="fa fa-angle-double-down fa-2x"></i></a>
          </div>
        </div>
      </div>
    </section>

    <section id="article-body" class="responsive">
      <div class="article-copy dropcap">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet quam id metus interdum congue quis eget sapien. Maecenas non viverra urna. Aliquam ante felis, mattis eu purus at, scelerisque consectetur turpis. Fusce nec mollis purus. Aenean viverra, odio eget tempus lobortis, nulla odio aliquam mauris, ornare rutrum turpis mauris a sem. Integer in magna sed nisi varius fringilla pellentesque quis neque. Etiam ac placerat purus, quis suscipit nisl. Mauris dolor ipsum, volutpat at placerat in, lacinia non velit. Ut at nisl nec ipsum pharetra luctus.
        </p>
        <p>
          Proin imperdiet luctus quam, vitae pellentesque mauris tincidunt nec. Sed vestibulum nulla sed lacinia porttitor. In convallis sodales erat sit amet cursus. Morbi suscipit, metus sed luctus sollicitudin, tellus eros rhoncus orci, sed molestie tellus quam at metus. Nullam blandit enim velit, a rutrum nulla fermentum at. Donec feugiat commodo purus ut efficitur. Cras urna dolor, luctus nec velit non, maximus aliquet tellus.
        </p>
        <aside class="article-sidebar">
          <h3>Sidebar Title</h3>
          <h4>Sidebar Subtitle</h4>
          <ol>
            <li>
              <div class="sidebar-list-item">
                <h5>Ensimmäisen pointin otsikko</h5>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
              </div>
            </li>
            <li>
              <div class="sidebar-list-item">
                <h5>Otsikko</h5>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
              </div>
            </li>
            <li>
              <div class="sidebar-list-item">
                <h5>Otsikko</h5>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
              </div>
            </li>
          </ol>  
        </aside>
        <p>Integer quis elit bibendum, placerat lorem non, fermentum velit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur at imperdiet elit, quis commodo odio. Nunc ultrices nulla vitae tincidunt congue. Praesent ut varius felis. Vivamus mollis, tellus nec tempus lacinia, ante risus convallis tellus, ac vestibulum lectus lorem quis neque. Etiam mauris mauris, malesuada vitae odio quis, pulvinar accumsan nisl. Aenean erat nisi, condimentum sit amet porttitor a, ultrices ut neque.</p>
        <p>
          Vestibulum condimentum ullamcorper hendrerit. Donec vel lacinia tellus. Proin et justo feugiat, ornare nibh et, ullamcorper turpis. Morbi a lacus vulputate, aliquam justo id, rutrum dui. Suspendisse sodales, nulla eu egestas ultrices, turpis magna mattis sapien, id ornare arcu nulla vitae metus. <span class="pullquote">Ut cursus augue in arcu fermentum, ut facilisis est fermentum.</span> Vestibulum volutpat, ante sagittis feugiat elementum, metus massa vestibulum nulla, at lacinia quam tortor nec augue.
        </p>
        <p>
          Aenean id consectetur magna, in volutpat odio. Nunc vulputate, nisi vitae facilisis ultrices, ligula urna laoreet elit, eu fermentum diam neque et purus. Nullam vel nibh turpis. Nulla facilisi. Proin a pretium arcu. Nullam gravida non lectus non venenatis. Aenean quis luctus elit, ut tempus leo.
        </p>
        <p>
          Morbi semper orci velit, ut fringilla mi ultrices quis. Sed at venenatis risus. Quisque ligula nunc, auctor tempor dolor a, pellentesque ornare risus. Suspendisse iaculis condimentum ipsum a scelerisque. Nam ut laoreet nisl. Maecenas ornare eros vel mauris fringilla convallis. Integer scelerisque erat arcu, quis pellentesque augue venenatis quis. Etiam non facilisis libero. Fusce a tincidunt massa. Pellentesque vitae nibh dictum, congue purus vel, feugiat nisi.
        </p>
        <p>
          Donec congue finibus tellus et consequat. Nam sed nisl accumsan, congue tortor sed, dapibus mi. Cras at eros volutpat, ultricies mi sed, maximus leo. Aliquam erat volutpat. Phasellus faucibus ex eget mi cursus, ut placerat mauris luctus. Vestibulum et tempor nisi, id ultricies dolor. Praesent mollis tristique nisi nec vestibulum. In eu imperdiet felis. Nunc ultricies ultricies odio id vehicula. Integer ut placerat orci, quis finibus enim. Curabitur eleifend, nulla vitae fringilla blandit, felis tortor molestie erat, sit amet laoreet dolor purus sit amet ipsum. Nulla a fringilla lacus. Donec faucibus nisi ipsum, at efficitur leo accumsan at. Nam pharetra, odio id euismod venenatis, felis felis tristique neque, ut sodales purus est eu arcu.
        </p>
        <p>
          Donec orci urna, volutpat auctor sagittis sed, tincidunt eget urna. Vestibulum efficitur sem magna, quis consectetur dui mattis eget. Aliquam arcu nulla, rhoncus rutrum suscipit sed, tempor in lorem. Pellentesque auctor magna ac malesuada aliquet. Sed auctor lorem maximus facilisis vulputate. Nullam eu tempor nisl. Maecenas porta gravida dictum. Nullam efficitur augue in libero elementum, eget gravida velit fermentum.
        </p>
        <p>
          Morbi posuere at dui in tempor. Aliquam pulvinar auctor lobortis. Nullam posuere suscipit consectetur. Donec sed finibus nulla, sed finibus dui. Phasellus gravida est nulla, quis rhoncus arcu gravida quis. Mauris ultrices congue velit, vel tincidunt nibh sollicitudin in. Duis pulvinar eget dolor sed dapibus. Curabitur in luctus augue.
        </p>
        <p>
          Nulla facilisi. Nunc ac eros augue. Fusce finibus sapien nisi, id pretium erat venenatis sed. Donec elementum egestas volutpat. Donec ullamcorper vitae nulla eu posuere. Aenean euismod justo et placerat feugiat. Praesent sit amet ante purus. <span class="pullquote">Nunc imperdiet mollis interdum.</span> Fusce gravida, libero lacinia faucibus pellentesque, nibh leo varius velit, quis tristique neque justo nec justo. Etiam sagittis ex ac mi dapibus dapibus. Donec et arcu blandit, aliquet sem eu, commodo mi.
        </p>
      </div>
    </section>
    <section id="article-images">
      <figure>
        <img src="http://placehold.it/1400x675"/>
        <figcaption>Kuvateksti ensimmäiselle kuvalle.</figcaption>
      </figure>
      <figure>
        <img src="http://placehold.it/1400x675"/>
        <figcaption>Kuvateksti toiselle kuvalle.</figcaption>
      </figure>
      <figure>
        <img src="http://placehold.it/1400x675"/>
        <figcaption>Kuvateksti kolmannelle kuvalle.</figcaption>
      </figure>
      <figure>
        <img src="http://placehold.it/1400x675"/>
        <figcaption>Kuvateksti neljännelle kuvalle.</figcaption>
      </figure>
      <figure>
        <img src="http://placehold.it/1400x675"/>
        <figcaption>Kuvateksti viidennelle kuvalle.</figcaption>
      </figure>
    </section>
  </section>
</main>
            
          
!
            
              @import url(https://fonts.googleapis.com/css?family=Halant:400,500,300,600,700|Josefin+Sans:400,100italic,100,300,300italic,400italic,600,600italic,700|Playfair+Display:400,400italic,700,700italic,900,900italic)

$font-title: 'Josefin Sans', sans-serif
$font-sans: 'Josefin Sans', sans-serif
$font-serif: 'Playfair Display', serif
$font-paragraph: 'Halant', serif
$font-drop-cap: 'Playfair Display', serif

$color-very-dark: #000000
$color-dark: #808080
$color-medium: #cccccc
$color-light: #f5f5f5
$color-very-light: #ffffff

$tablet-width: 768px
$desktop-width: 1024px

@mixin tablet
  @media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px})
    @content

@mixin desktop
  @media (min-width: #{$desktop-width})
    @content

figure
  margin: 0
  
body
  font-size: 26px
  
  @include tablet
    font-size: 18px
    
  @include desktop
    font-size: 10px

.responsive
  margin: 0 auto
  width: 95%
  
  @include tablet
    width: 90%
    
  @include desktop
    width: 1024px
    
main
    
#menu
  height: 100vh
  position: fixed
  z-index: 2000
  overflow: hidden

  &.close
    
    li
      width: 60px
      transition: width 500ms ease-in-out
      
      &:nth-of-type(2)
        width: 0
        transition: width 420ms ease-in-out
      
      &:nth-of-type(3)
        width: 0
        transition: width 360ms ease-in-out
      
      &:nth-of-type(4)
        width: 0
        transition: width 320ms ease-in-out
            
      &:nth-of-type(5)
        width: 0
        transition: width 300ms ease-in-out
      
      a
        margin-right: 10em
  
  nav
    
    ul, li
      list-style: none
      margin: 0
      padding: 0
    
      li
        width: 150px
        border-bottom: 1px solid $color-dark
        text-align: right
        height: 50px
        background: $color-very-light
        transition: width 500ms ease-in-out
        
        &#btn-menu a
          margin-right: 1em

        &:nth-of-type(2)
          transition: width 420ms ease-in-out

        &:nth-of-type(3)
          transition: width 360ms ease-in-out

        &:nth-of-type(4)
          transition: width 320ms ease-in-out

        &:nth-of-type(5)
          transition: width 300ms ease-in-out
        
        a
          position: absolute
          right: 0
          font-size: 2em
          font-family: $font-sans
          text-transform: uppercase
          text-decoration: none
          color: $color-very-dark
          line-height: 2.4em
          margin-right: 1em
        
        &:hover
          
          li
            border-bottom: 1px solid $color-dark
        
          a
            color: $color-medium

#content

#article-cover
  width: 100%
  
  .hero-photo
    height: 100vh
    overflow: hidden
    background: url(https://40.media.tumblr.com/0ffc52f37ac317fcd870e7a2c6b06fbf/tumblr_nbpb0sdTpR1rlusy7o1_1280.jpg) no-repeat center center fixed
    background-size: cover
      
.article-details-wrapper
  background: rgba(0,0,0,0.5)
    
#article-details
  width: 100%
  position: fixed
  top: 0
  margin: 3em 0 3em 0
  text-align: center
  
  &.stuck
    position: relative

  .article-category
    a
      font-family: $font-sans
      font-weight: 200
      font-style: normal
      font-size: 2.5em
      text-transform: lowercase
      text-decoration: none
      color: $color-medium
      display: inline-block
      margin: 1.45em 0 1.5em

  h1.article-title
    font-family: $font-title
    font-weight: 100
    font-style: italic
    font-size: 6.2em
    line-height: 0.9em
    text-transform: uppercase
    letter-spacing: 0.05em
    color: $color-very-light
    margin: 0px
    margin-bottom: 0.4em

    & > span:last-child
      font-family: $font-title
      font-weight: 700
      font-style: normal
      font-size: 3em
      line-height: 1em
      text-transform: uppercase
      display: block
      letter-spacing: 0.05em
      word-spacing: 0.05em

  .article-abstract
    font-family: $font-sans
    font-weight: 300
    font-style: normal
    font-size: 2.8em
    line-height: 1.45em
    color: $color-light
    display: block
    text-transform: uppercase
    letter-spacing: 0.05em
    margin-bottom: 1em
    padding: 0 10%

  .article-byline
    font-family: $font-sans
    font-weight: 300
    font-style: normal
    font-size: 2.0em
    color: $color-medium
    display: block
    padding-bottom: 0.8em

    & strong
      font-style: italic
      font-weight: 400
      
#read-more
  padding: 2em 0
  height: 100%
  text-align: center

  &.stuck
    display: none

  a
    font-family: $font-sans
    font-weight: 300
    font-style: normal
    font-size: 2em
    text-transform: uppercase
    text-decoration: none
    display: inline-block

  a, i
    display: block
    color: $color-medium

#article-body
  text-align: justify
  font-family: $font-paragraph
  font-weight: 400
  font-size: 1.6em
  line-height: 1.571em
  
  .article-copy

    p
      margin: 0 0 1.571em 0

    &.dropcap:first-letter
      font-family: $font-drop-cap
      font-weight: 500
      font-style: normal
      font-size: 15.3em
      color: $color-very-dark
      float: left
      line-height: 0.7em
      margin: 0 0.09em 0.1em 0
      
.article-sidebar
  float: right
  height: 100%
  width: 50%
  padding: 2em
  margin: 0 0 1em 2.6em
  text-align: left
  background: $color-light
  
  @include desktop
    width: 30%
    
  h3
    margin: 0 0.8em
    font-family: $font-serif
    font-weight: 500
    font-style: normal
    font-size: 2.3em
    line-height: 1em
    text-transform: uppercase
    color: $color-very-dark
    text-align: center
    padding: 0.4em 0 0.3em
    border-top: 2px solid $color-very-dark
    border-bottom: 2px solid $color-very-dark
    
  h4
    font-family: $font-sans
    font-weight: 400
    font-style: normal
    font-size: 1.09em
    line-height: 1.2em
    text-transform: uppercase
    color: $color-dark
    margin: 1.2em 1.65em
    display: block
    text-align: center
    
  ol
    padding: 0px
    margin: 1.2em
    
  li
    list-style-type: none
    counter-increment: step-counter
    overflow: hidden
    margin: 0px 0px 2.5em
    
  ol li:before
    content: counter(step-counter)
    font-family: $font-serif
    font-size: 4.47em
    line-height: 1em
    color: $color-very-dark
    margin: -0.06em 6px 0.05em 0px
    display: inline-block
    
  .sidebar-list-item
    width: 80%
    float: right
    
    &:after
      content: " "
      width: 10em
      display: block
      position: absolute
      border-bottom: 1px solid $color-medium
    
    h5
      margin: 0 0 0.2em
      font-family: $font-serif
      font-weight: 500
      font-style: normal
      font-size: 1.27em
      text-transform: uppercase
      
    p  
      font-family: $font-sans
      font-style: normal
      margin-bottom: 0.4em
      
.pulledquote
  display: block
  font-family: $font-sans
  color: $color-dark
  font-weight: 500
  font-style: normal
  text-transform: uppercase
  text-align: center
  margin: 0 0 2em 0
  
  &:before
    width: 100%
    content: "\201C"
    font-family: $font-serif
    font-size: 8em
    position: relative
    top: 0.48em
    left: 20%
    color: $color-light
    z-index: -1
  
#article-images
  img
    width: 100%
    height: auto
    overflow: hidden

  figcaption
    font-family: $font-serif
    font-weight: 400
    font-style: normal
    font-size: 1.2em
    line-height: 1.4em
    text-align: center
    margin: 0px auto
    border-bottom: 1px solid #000
    padding: 1.5em 0px 2.5em
    
  #article-images ul
    list-style: none
    position: absolute
    width: 100%
    text-align: center
    bottom: 0
    
  .slick-dots
    position: absolute
    bottom: 7em
    display: block
    width: 100%
    padding: 0
    list-style: none
    text-align: center
    
  .slick-dots li
    position: relative
    display: inline-block
    width: 20px
    margin: 0 5px
    padding: 0
    cursor: pointer
 
  .slick-dots li button
    font-size: 0
    line-height: 0
    display: block
    width: 20px
    height: 20px
    padding: 5px
    cursor: pointer
    color: transparent
    border: 0
    outline: none
    background: transparent

    &:before
      font-family: FontAwesome
      font-size: 6px
      line-height: 20px
      position: absolute
      top: 0
      left: 0
      width: 20px
      height: 20px
      content: "\f111"
      text-align: center
      opacity: .25
      color: black
      -webkit-font-smoothing: antialiased
      -moz-osx-font-smoothing: grayscale
  
  .slick-prev, .slick-next
    font-family: FontAwesome
    position: absolute
    top: 30%
    z-index: 2
    color: transparent
    background: transparent
    border: none
    outline: none

  .slick-prev:before, .slick-next:before
    font-size: 200px
    line-height: 1
    opacity: .25
    color: white
    -webkit-font-smoothing: antialiased

  .slick-prev
    left: -5px

    &:before
      content: "\f104"

  .slick-next
    right: -25px

    &:before
      content: "\f105"
  li.slick-active button:before
    opacity: .75
    color: black
            
          
!
            
              /*!
Waypoints Sticky Element Shortcut - 4.0.0
Copyright © 2011-2015 Caleb Troughton
Licensed under the MIT license.
https://github.com/imakewebthings/waypoints/blog/master/licenses.txt
*/
(function() {
  'use strict'

  var $ = window.jQuery
  var Waypoint = window.Waypoint

  /* http://imakewebthings.com/waypoints/shortcuts/sticky-elements */
  function Sticky(options) {
    this.options = $.extend({}, Waypoint.defaults, Sticky.defaults, options)
    this.element = this.options.element
    this.$element = $(this.element)
    this.createWrapper()
    this.createWaypoint()
  }

  /* Private */
  Sticky.prototype.createWaypoint = function() {
    var originalHandler = this.options.handler

    this.waypoint = new Waypoint($.extend({}, this.options, {
      element: this.wrapper,
      handler: $.proxy(function(direction) {
        var shouldBeStuck = this.options.direction.indexOf(direction) > -1
        var wrapperHeight = shouldBeStuck ? this.$element.outerHeight(true) : ''

        this.$wrapper.height(wrapperHeight)
        this.$element.toggleClass(this.options.stuckClass, shouldBeStuck)

        if (originalHandler) {
          originalHandler.call(this, direction)
        }
      }, this)
    }))
  }

  /* Private */
  Sticky.prototype.createWrapper = function() {
    if (this.options.wrapper) {
      this.$element.wrap(this.options.wrapper)
    }
    this.$wrapper = this.$element.parent()
    this.wrapper = this.$wrapper[0]
  }

  /* Public */
  Sticky.prototype.destroy = function() {
    if (this.$element.parent()[0] === this.wrapper) {
      this.waypoint.destroy()
      this.$element.removeClass(this.options.stuckClass)
      if (this.options.wrapper) {
        this.$element.unwrap()
      }
    }
  }

  Sticky.defaults = {
    wrapper: '<div class="sticky-wrapper" />',
    stuckClass: 'stuck',
    direction: 'down right'
  }

  Waypoint.Sticky = Sticky
}())
;

$(function() { 
	  $('span.pullquote').each(function() { 
		var $parentParagraph = $(this).parent('p'); 
		$(this).clone() 
		  .addClass('pulledquote')
		  .appendTo($parentParagraph); 
	  }); 
    $(".article-details-wrapper").fitText(10, { minFontSize: '7px' });
    $("span.pulledquote").fitText(4.2, { minFontSize: '13px' });
    $(".article-sidebar").fitText(2, { minFontSize: '9.5px' });
    $('h1.article-title').lettering('words')  
    $( "#article-cover" ).css( "height", function () {
      return (this.bottom = $('.hero-photo').outerHeight(true)+$('#article-details').outerHeight(true))
    }
);
});

var sticky = new Waypoint.Sticky({
  element: $('#article-details')[0]
})

var sticky = new Waypoint.Sticky({
  element: $('#read-more')[0]
})

$('#article-images').slick({
  dots: true,
  infinite: true,
  speed: 300,
  slidesToShow: 1,
  adaptiveHeight: true
});

$('#read-more').localScroll();

$( "#btn-menu" ).click(function() {
  $( "#menu" ).toggleClass( "close" );
});
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console