Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              - var headlines = [
- 'Explore our world',
- 'View all its beauty',
- 'Take lots of photos',
- 'Each one of them pretty'
- ]

each headline, index in headlines
  section.hero(id="section-" + index)
    figure
    h2.hero__title= headline
    
section.content
    article.content__inner
      h1.content__title Some Happy Little Text
      h3.content__author By Bob Ross

      p A thin paint will stick to a thick paint. The shadows are just like the highlights, but we're going in the opposite direction. When you do it your way you can go anywhere you choose.

      p You have to make almighty decisions when you're the creator. When you buy that first tube of paint it gives you an artist license. There we go. The little tiny Tim easels will let you down. Let's just drop a little Evergreen right here.

      p Trees grow in all kinds of ways. They're not all perfectly straight. Not every limb is perfect. I really believe that if you practice enough you could paint the 'Mona Lisa' with a two-inch brush. Just pretend you are a whisper floating across a mountain. This is your world, whatever makes you happy you can put in it. Go crazy.

      p The first step to doing anything is to believe you can do it. See it finished in your mind before you ever start. We'll play with clouds today. Every single thing in the world has its own personality - and it is up to you to make friends with the little rascals. Don't kill all your dark areas - you need them to show the light. We don't want to set these clouds on fire. Every day I learn.
      
      blockquote When you do it your way you can go anywhere you choose.

      p Let's get wild today. Once you learn the technique, ohhh! Turn you loose on the world; you become a tiger. This is probably the greatest thing to happen in my life - to be able to share this with you.

      p I'm a water fanatic. I love water. This is gonna be a happy little seascape. Put light against light - you have nothing. Put dark against dark - you have nothing. It's the contrast of light and dark that each give the other one meaning. Let's put a touch more of the magic here. I'm going to mix up a little color. We’ll use Van Dyke Brown, Permanent Red, and a little bit of Prussian Blue.
      
      p And that's when it becomes fun - you don't have to spend your time thinking about what's happening - you just let it happen. Let all these things just sort of happen. Don't fight it, use what happens. Let's put some happy little bushes on the other side now.
      
      blockquote Don't fight it, use what happens.

      p If we're going to have animals around we all have to be concerned about them and take care of them. I'll go over the colors one more time that we use: Titanium white, Thalo green, Prussian blue, Van Dyke brown, Alizarin crimson, Sap green, Cad yellow, and Permanent red. Anytime you learn something your time and energy are not wasted. This is your world. We want to use a lot pressure while using no pressure at all. Just let go - and fall like a little waterfall.

      p Let's build some happy little clouds up here. Everyone is going to see things differently - and that's the way it should be. Let's do that again. A tree needs to be your friend if you're going to paint him. That's why I paint - because I can create the kind of world I want - and I can make this world as happy as I want it.
            
          
!
            
              @import url('https://fonts.googleapis.com/css?family=Courgette|Roboto');

$ff-serif: 'Courgette', serif;
$ff-sans-serif: 'Roboto', sans-serif;
$color-accent: #A9DFBF;

$assets: (
  1: '1506260408121-e353d10b87c7',
  2: '1506744038136-46273834b3fb',
  3: '1523712999610-f77fbcfc3843',
  4: '1501785888041-af3ef285b470'
);

@function image($key) {
  $id: map-get($assets, $key);
  @return url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/225363/photo-' + $id + '.jpg');
}


// Global styles
* { box-sizing: border-box; }

p {
  font-family: $ff-sans-serif;
  font-size: 1.25rem;
  line-height: 1.5;
}

blockquote {
  position: relative;
  padding-left: 1.5rem;
  font-family: $ff-serif;
  font-size: 2rem;
  line-height: 1.25;
  letter-spacing: -0.05rem;
  
  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background-color: $color-accent;
    border-radius: 60px;
  }
}


// Fixed background image element
figure {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


// Hero section
.hero {
  position: relative;
  overflow: hidden;
  height: 100vh;
  clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
  
  @each $asset in $assets {
    $i: index($assets, $asset);
    &:nth-child(#{$i}) figure { 
      background-image: image($i);
      background-size: cover;
    }
  }
}

.hero__title {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  padding: 0 1rem;
  width: 100%;
  height: 100%;
  color: white;
  font-family: $ff-serif;
  font-size: 8vw;
  letter-spacing: -0.125rem;
  text-align: center;

  @media (min-width: 1200px) {
    font-size: 6rem;
  }
}


// Content section
.content {
  position: relative;
  margin: 0 auto 8rem;
  padding: 2rem;
  
  &:before {
    content: '';
    display: block;
    position: absolute;
    top: -100px;
    left: 0;
    width: 100%;
    height: 100px;
    background-color: white;
    z-index: 99;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  }
}

.content__inner {
  margin: 0 auto;
  max-width: 700px;
    
  > * + *   { margin-top: 1.5rem; }
  > blockquote {  margin: 3rem 0; }
}

.content__title {
  font-family: $ff-serif;
  font-size: 3rem;
  line-height: 1.25;
  letter-spacing: -0.125rem;
  text-align: center;
  
  @media (min-width: 600px) {
    font-size: 4rem;
  }
}

.content__author {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4rem;
  width: 100%;
  font-family: $ff-serif;
  font-size: 1.5rem;
  letter-spacing: -0.125rem;
  text-align: center;
  
  &:before,
  &:after {
    content: '';
    flex: 1;
    height: 2px;
    background-color: $color-accent;
  }
  
  &:before { margin-right: 1rem; }
  &:after  { margin-left:  1rem; }
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console