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 includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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

              
                <section class="container">   
  <div class="column column__background column--active" data-column-item>
    <h1 class="column-heading">About</h1> 
      <div class="column-inner">      
        <p>Apple pie candy canes pudding icing icing jelly beans chocolate. Jelly cotton candy oat cake cotton candy tootsie roll. Marzipan oat cake jujubes chocolate cake jelly wafer liquorice bear claw danish. Candy dessert sugar plum cotton candy gingerbread. Gingerbread tootsie roll dragée dessert caramels. Toffee chocolate topping macaroon sugar plum donut.</p>
      </div>   
  </div>    
  <div class="column column__background" data-column-item>
       <h1 class="column-heading">Portfolio</h1>  
       <div class="column-inner">     
         <p>Tart candy oat cake. Ice cream liquorice oat cake jelly beans wafer sweet. Oat cake chocolate icing. Chocolate cake marzipan pudding. Topping sesame snaps sweet roll lemon drops chupa chups. Pie macaroon lemon drops topping cheesecake muffin gummies caramels wafer. Fruitcake topping topping caramels. Liquorice pudding donut marzipan.</p>
       </div> 
  </div>
  <div class="column column__background" data-column-item>
      <h1 class="column-heading">Resume</h1>  
      <div class="column-inner">   
        <p>Topping pudding croissant cupcake cake cookie lemon drops chocolate bar gingerbread. Donut lemon drops gummies danish. Jelly-o danish croissant wafer soufflé. Biscuit bonbon candy canes brownie marshmallow. Cupcake croissant chupa chups sweet caramels chocolate powder cake. Bear claw lemon drops chocolate cake sweet roll donut toffee. Cupcake sweet roll chocolate jujubes biscuit marzipan cheesecake. Topping sweet candy canes macaroon liquorice chocolate bar.</p>
      </div> 
  </div>
</section>   
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Montserrat:400,600');

$plain: #FFFFFF;
$bright: #0083ff;
$overlay: rgba(3, 1, 1, 0.39);
$touch: transparent;

html, 
body {
  height: 100%;
}

html {
  font-size: 10px;
  
  @media (max-width: 991px) {
    font-size: calc(5px + .4vw);
  }
  
  @media (max-width: 768px) {
    font-size: calc(6px + .4vw);
  }
}

body {
  font-family: 'Montserrat', sans-serif;
  margin: 0;
}

h1 {
  color: $plain;
  font-size: 3rem;
  font-weight: 400;
}

p {
  line-height: 1.4;
  letter-spacing: 1.2px;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  
  @media only screen and (min-width: 768px) { 
    flex-direction: row;
  }
}

.column {
  flex-basis: 100%;
  padding: 2rem;
  flex: 1;
  transition: flex 0.4s linear;
  
  .column-inner {
    visibility: hidden;
  }
}

.column__background {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    
    &:after {
      content: '';
      background: $overlay; 
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }
  
  &.column--active { 
    &:after {
      background-color: transparent;
    }
  }
  
  &:hover {
      cursor: pointer;
      
      &:after {
        background: $touch;
      }
  }  
    
 }

.column--active {
  flex: 100%;
  
  .column-inner {
    background: #000000;
    color: $plain;
    font-size: 1.6rem;
    visibility: visible;
    transition: visibility 0.5s linear  0.3s;
    max-width: 100%;
    padding: 20px;
    
    @media only screen and (min-width: 768px) { 
      width: 70%;
    }
  }
  
  &:hover {
    cursor: initial;
  }
}

.column-heading {
  padding: 0 20px;
}
              
            
!

JS

              
                var cards = document.querySelectorAll("[data-column-item]"); 

var images = ['https://images.pexels.com/photos/38278/tiger-head-wildlife-animal-38278.jpeg', 'https://images.pexels.com/photos/219943/pexels-photo-219943.jpeg', 'https://images.pexels.com/photos/1106452/pexels-photo-1106452.jpeg', 'https://images.pexels.com/photos/1238248/pexels-photo-1238248.jpeg', 'https://images.pexels.com/photos/148182/pexels-photo-148182.jpeg', 'https://images.pexels.com/photos/50988/ape-berber-monkeys-mammal-affchen-50988.jpeg', 'https://images.pexels.com/photos/53261/pexels-photo-53261.jpeg',  'https://images.pexels.com/photos/213399/pexels-photo-213399.jpeg'];

function onlyUnique(value, index, self) { 
    return self.indexOf(value) === index;
}

var real = images.filter( onlyUnique );

if(cards !== null) {
  for (i = 0; i < cards.length; i++) {
    var card = cards[i];
    
    var set = Math.floor(Math.random() * real.length);
    var random = real.splice(set, 1)[0];
    
    card.style.backgroundImage = "url('" + random + "')";
    
  } 
 
  for (var i = 0; i < cards.length; i++) {
    cards[i].addEventListener("click", function() {
      var current = document.getElementsByClassName("column--active");
      if (current.length > 0) { 
        current[0].className = current[0].className.replace(" column--active", "");
      }
      this.className += " column--active";
    });
  }
}

 
 
    
              
            
!
999px

Console