Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ 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

Auto Save

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

              
                <div class="article-wrapper">
  <div class="poster-image">
    <p class="caption">Some text to go as caption here</p>
  </div>
  <div class="text">
    <h1>Article Title</h1>
    <p class="lead">Shove bum in owner's face like camera lens demand to be let outside at once, and expect owner to wait for me as i think about it</p>
    <article>
      <p>Mrow sniff sniff yet cat slap dog in face. Jumps off balcony gives owner dead mouse at present then poops in litter box snatches yarn and fights with dog cat chases laser then plays in grass finds tiny spot in cupboard and sleeps all day jumps in bathtub and meows when owner fills food dish the cat knocks over the food dish cat slides down the water slide and into pool and swims even though it does not like water woops poop hanging from butt must get rid run run around house drag poop on floor maybe it comes off woops left brown marks on floor human slave clean lick butt now so hack up furballs eat owner's food. Eat from dog's food give me attention or face the wrath of my claws for spend six hours per day washing, but still have a crusty butthole or leave fur on owners clothes stare at the wall, play with food and get confused by dust eat a plant, kill a hand. Roll over and sun my belly cats making all the muffins so chase dog then run away but lick plastic bags eat half my food and ask for more for woops poop hanging from butt must get rid run run around house drag poop on floor maybe it comes off woops left brown marks on floor human slave clean lick butt now, destroy house in 5 seconds. Meow meow, i tell my human lick the plastic bag always hungry, yet run in circles, make meme, make cute face yet i love cuddles. Have my breakfast spaghetti yarn disappear for four days and return home with an expensive injury; bite the vet. Lounge in doorway. While happily ignoring when being called. Going to catch the red dot today going to catch the red dot today give attitude, yet i am the best. Somehow manage to catch a bird but have no idea what to do next, so play with it until it dies of shock make meme, make cute face, stand in front of the computer screen jumps off balcony gives owner dead mouse at present then poops in litter box snatches yarn and fights with dog cat chases laser then plays in grass finds tiny spot in cupboard and sleeps all day jumps in bathtub and meows when owner fills food dish the cat knocks over the food dish cat slides down the water slide and into pool and swims even though it does not like water but scratch leg; meow for can opener to feed me. Meow meow, i tell my human need to chase tail, or sweet beast. Meoooow plays league of legends for spit up on light gray carpet instead of adjacent linoleum and curl into a furry donut, so put butt in owner's face. Plays league of legends decide to want nothing to do with my owner today why must they do that leave fur on owners clothes and cough furball into food bowl then scratch owner for a new one. Meow loudly just to annoy owners. Immediately regret falling into bathtub cats making all the muffins and purrrrrr ask for petting. Chase after silly colored fish toys around the house toilet paper attack claws fluff everywhere meow miao french ciao litterbox nap all day. Mice sniff all the things demand to have some of whatever the human is cooking, then sniff the offering and walk away. Sit in window and stare oooh, a bird, yum meow meow, i tell my human groom forever, stretch tongue and leave it slightly out, blep. </p>
      <p>Jump off balcony, onto stranger's head roll over and sun my belly and sun bathe, and meow for food, then when human fills food dish, take a few bites of food and continue meowing dream about hunting birds. Bleghbleghvomit my furball really tie the room together ignore the human until she needs to get up, then climb on her lap and sprawl but hopped up on catnip, so man running from cops stops to pet cats, goes to jail hide at bottom of staircase to trip human so sleep on my human's head. Show belly. Jump around on couch, meow constantly until given food, rub face on everything run around the house at 4 in the morning. Hate dog mrow but meoooow so sit in box for ooh, are those your $250 dollar sandals? lemme use that as my litter box so howl uncontrollably for no reason for need to chase tail. Put toy mouse in food bowl run out of litter box at full speed.</p>

Spend six hours per day washing, but still have a crusty butthole a nice warm laptop for me to sit on but have secret plans hiss at vacuum cleaner freak human out make funny noise mow mow mow mow mow mow success now attack human, meow to be let out. Destroy house in 5 seconds hit you unexpectedly so the door is opening! how exciting oh, it's you, meh, but cats are fats i like to pets them they like to meow back but have my breakfast spaghetti yarn and going to catch the red dot today going to catch the red dot today. Meoooow sit on the laptop pee in human's bed until he cleans the litter box. Howl uncontrollably for no reason. Eat plants, meow, and throw up because i ate plants purr while eating. Eat plants, meow, and throw up because i ate plants howl on top of tall thing flex claws on the human's belly and purr like a lawnmower missing until dinner time, or catch mouse and gave it as a present chase the pig around the house. Attack the dog then pretend like nothing happened. Pet my belly, you know you want to; seize the hand and shred it!. Purr for no reason. Poop in a handbag look delicious and drink the soapy mopping up water then puke giant foamy fur-balls sleep everywhere, but not in my bed fight an alligator and win i'm going to lap some water out of my master's cup meow but lick the other cats unwrap toilet paper. Refuse to leave cardboard box annoy kitten brother with poking or sleep. Thug cat poop on grasses, yet hopped up on catnip fall asleep on the washing machine so hate dog dream about hunting birds, yet scream for no reason at 4 am. Jump around on couch, meow constantly until given food, eat plants, meow, and throw up because i ate plants, eat the fat cats food hiss and stare at nothing then run suddenly away yet kick up litter. Hiss and stare at nothing then run suddenly away pet my belly, you know you want to; seize the hand and shred it! somehow manage to catch a bird but have no idea what to do next, so play with it until it dies of shock and i'm going to lap some water out of my master's cup meow but sit on human so lick sellotape i show my fluffy belly but it's a trap! if you pet it i will tear up your hand. Attack dog, run away and pretend to be victim. Jump five feet high and sideways when a shadow moves swat turds around the house yet scratch leg; meow for can opener to feed me give attitude sniff other cat's butt and hang jaw half open thereafter and meow meow or meow loudly just to annoy owners. Kitten is playing with dead mouse lick butt and make a weird face yet rub face on owner yowling nonstop the whole night. Immediately regret falling into bathtub brown cats with pink ears. Ask for petting. Stuff and things if it fits, i sits, eat too much then proceed to regurgitate all over living room carpet while humans eat dinner. I am the best instead of drinking water from the cat bowl, make sure to steal water from the toilet make muffins, and plays league of legends or destroy house in 5 seconds or chew foot pretend you want to go out but then don't. Head nudges sweet beast, for head nudges or you call this cat food but knock over christmas tree so run outside as soon as door open. Meow meow, i tell my human meow, warm up laptop with butt lick butt fart rainbows until owner yells pee in litter box hiss at cats and i am the best.</p>

    <p class="pull-quote">Purrr purr littel cat, little cat purr purr curl up and sleep on the freshly laundered towels yet hit you unexpectedly for show belly.</p>
    
    <p>Licks paws attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor; what's your problem? I meant to do that now i shall wash myself intently ooh, are those your $250 dollar sandals? lemme use that as my litter box or i'm bored inside, let me out i'm lonely outside, let me in i can't make up my mind whether to go in or out, guess i'll just stand partway in and partway out, contemplating the universe for half an hour how dare you nudge me with your foot?!?! leap into the air in greatest offense! and kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff playing with balls of wool and meow to be let out.</p>
    </article>
    <footer>
      <hr>
        <p>Initial code and idea from <a href="https://codepen.io/brianhaferkamp/">Brian Haferkamp</a> and his <a href="https://codepen.io/brianhaferkamp/details/xEypqR">2-Up Magazine Layout</a>. Ipsum  from <a href="http://www.catipsum.com/">Cat Ipsum</a>
  </div>
</div>'
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Lato|Roboto');

body {
  margin: 0;
  font-size: 18px;
  font-family: "Raleway", sans-serif;
}

.article-wrapper {
  display: flex;
}

.poster-image {
  position: fixed;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/32795/delfi-de-la-rua-294635-unsplash.jpg");
  background-size: cover;
  // background-position: center;
  height: 100vh;
  width: 50vw;
  flex: 0 0 50%;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
.poster-image .caption {
  color: white;
  font-weight: normal;
  font-size: 1.2em;
  text-align: right;
  margin: 0 20px 20px 50%;
}

// article {
//   columns: 2;
//   column-width: 250px;
//   column-gap: 2em;
// }

.text {
  padding: 100px 60px 60px;
  margin-left: 50%;
  z-index: 10;
}

h1 {
  font-family: 'Lato', sans-serif;
  font-size: 7vw;
  text-align: right;
  line-height: 1;
}

.lead {
  font-size: 1.5vw;
  font-weight: normal;
  color: rgba(0, 0, 0, 0.5);
}


p {
  line-height: 1.3;
}

footer {
  height: 5vh;
}


              
            
!

JS

              
                
              
            
!
999px

Console