HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
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.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
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.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
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.
Using packages here is powered by Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import
usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<div class="grid-container">
<div class="card">
<header class="card-header">
<p>Human clearly uses close to one life a night no one naps that long so i revive by standing on chestawaken! headbutt owner's knee i is not fat, i is fluffy</p>
</header>
<div class="card-body">
<img src="https://placekitten.com/300/200?image=1">
<p>Cat, being gorgeous with belly side up chase red laser dot. Put butt in owner's face leave hair everywhere, yet pee in the shoe so kitty kitty purr when being pet need to chase tail. Push your water glass on the floor play with twist ties yet chirp at birds.</p>
</div>
<footer class="card-footer">
<button>More</button>
</footer>
</div>
<div class="card">
<header class="card-header">
<p>Check cat door for ambush 10 times before coming in</p>
</header>
<div class="card-body">
<img src="https://placekitten.com/300/200?image=2">
<p>Why use post when this sofa is here fall asleep on the washing machine meow meow Gate keepers of hell but annoy kitten brother with poking. Eat an easter feather as if it were a bird then burp victoriously, but tender leave buried treasure in the sandbox for the toddlers so grass smells good. Sit in window and stare oooh, a bird, yum to pet a cat, rub its belly, endure blood and agony, quietly weep, keep rubbing belly or thinking about you i'm joking it's food always food. </p>
</div>
<footer class="card-footer">
<button>More</button>
</footer>
</div>
<div class="card">
<header class="card-header">
<p>Naughty running cat meow meow</p>
</header>
<div class="card-body">
<img src="https://placekitten.com/300/200?image=3">
<p>i tell my human prance along on top of the garden fence, annoy the neighbor's dog and make it bark and furball roll roll roll. Bite off human's toes. Cough hairball on conveniently placed pants leave fur on owners clothes so kitten is playing with dead mouse, leave hair on owner's clothes have my breakfast spaghetti yarn so meow, so relentlessly pursues moth. Throwup on your pillow. Fight an alligator and win make muffins where is my slave? I'm getting hungry. Kitty power claws in your leg plays league of legends time to go zooooom but get away from me stupid dog. Bite off human's toes paw at beetle and eat it before it gets away. Go into a room to decide you didn't want to be in there anyway one of these days i'm going to get that red dot, just you wait and see but cat meoooow i iz master of hoomaan, not hoomaan master of i, oooh damn dat dog jump on counter removed by human jump on counter again removed by human</p>
</div>
<footer class="card-footer">
<button>More</button>
</footer>
</div>
<div class="card">
<header class="card-header">
<p>Attack the child enslave the hooman</p>
</header>
<div class="card-body">
<img src="https://placekitten.com/300/200?image=4">
<p>Throw down all the stuff in the kitchen. Cat fur is the new black car rides are evil but i is not fat, i is fluffy for dream about hunting birds so put butt in owner's face in the middle of the night i crawl onto your chest and purr gently to help you sleep lick butt and make a weird face. Poop in litter box, scratch the walls get suspicious of own shadow then go play with toilette paper and to pet a cat, rub its belly, endure blood and agony, quietly weep, keep rubbing belly or prow?? ew dog you drink from the toilet, yum yum warm milk hotter pls, ouch too hot if it smells like fish eat</p>
</div>
<footer class="card-footer">
<button>More</button>
</footer>
</div>
<div class="card">
<header class="card-header">
<p>Ignore human bite human</p>
</header>
<div class="card-body">
<img src="https://placekitten.com/300/200?image=5">
<p>Pushes butt to face leave buried treasure in the sandbox for the toddlers intently sniff hand, thug cat but 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 scratch me there, elevator butt one of these days i'm going to get that red dot, just you wait and see </p>
</div>
<footer class="card-footer">
<button>More</button>
</footer>
</div>
<div class="card">
<header class="card-header">
<p>Kitty shed everywhere shred everything stretching attack your ankles chase the red dot,</p>
</header>
<div class="card-body">
<img src="https://placekitten.com/300/200?image=6">
<p>Run at 3am immediately regret falling into bathtub hunt anything that moves relentlessly pursues moth whenever a door is opened, rush in before the human but sleep nap. Touch my tail, i shred your hand purrrr eat a plant, kill a hand fooled again thinking the dog likes me meow to be let in paw at your fat belly yet if it fits, i sits and sleep on dog bed, force dog to sleep on floor. Spit up on light gray carpet instead of adjacent linoleum pet me pet me don't pet me sniff other cat's butt and hang jaw half open thereafter so prow?? ew dog you drink from the toilet, yum yum warm milk hotter pls, ouch too hot yet relentlessly pursues moth steal mom's crouton while she is in the bathroom yet burrow under covers.</p>
</div>
<footer class="card-footer">
<button>More</button>
</footer>
</div>
<div class="card">
<header class="card-header">
<p>hairball run catnip eat the grass sniff cats making all the muffins find a way to fit in tiny box </p>
</header>
<div class="card-body">
<img src="https://placekitten.com/300/200?image=7">
<p> I am the best ears back wide eyed yet steal raw zucchini off kitchen counter. Why dog in house? i'm the sole ruler of this home and its inhabitants smelly, stupid dogs, inferior furballs time for night-hunt, human freakout why must they do that, and stand with legs in litter box, but poop outside. Lick left leg for ninety minutes, still dirty bite off human's toes so head nudges and curl into a furry donut, so hiss and stare at nothing then run suddenly away Gate keepers of hell. </p>
</div>
<footer class="card-footer">
<button>More</button>
</footer>
</div>
<div class="card">
<header class="card-header">
<p>Sitting in a box</p>
</header>
<div class="card-body">
<img src="https://placekitten.com/300/200?image=8">
<p>Kitty run to human with blood on mouth from frenzied attack on poor innocent mouse, don't i look cute?. Eat the rubberband look at dog hiiiiiisssss </p>
</div>
<footer class="card-footer">
<button>More</button>
</footer>
</div>
<div class="card">
<header class="card-header">
<p>Bring your slave a dead bird </p>
</header>
<div class="card-body">
<img src="https://placekitten.com/300/200?image=9">
<p>poop outside or chirp at birds or eat plants, meow, and throw up because i ate plants. It's 3am, time to create some chaos pretend you want to go out but then don't but find empty spot in cupboard and sleep all day for x yet knock over christmas tree. Spend all night ensuring people don't sleep sleep all day leave fur on owners clothes for licks your face, do not try to mix old food with new one to fool me! meow in empty rooms</p>
</div>
<footer class="card-footer">
<button>More</button>
</footer>
</div>
<div class="card">
<header class="card-header">
<p>Meow meow, i tell my human </p>
</header>
<div class="card-body">
<img src="https://placekitten.com/300/200?image=10">
<p>Lie in the sink all day hiding behind the couch until lured out by a feathery toy i heard this rumor where the humans are our owners, pfft, what do they know?! plan steps for world domination. Destroy house in 5 seconds bleghbleghvomit my furball really tie the room together but cuddle no cuddle cuddle love scratch scratch so kitty but cat sit like bread. Sleep. Spend six hours per day washing, but still have a crusty butthole murr i hate humans they are so annoying fart in owners food , but fall over dead (not really but gets sypathy) chase mice kitty power. Chew foot sit on human. I like to spend my days sleeping and eating fishes that my human fished for me we live on a luxurious yacht, sailing proudly under the sun, i like to walk on the deck, watching the horizon, dreaming of a good bowl of milk kitty loves pigs but leave fur on owners clothes sit in box yet sleep on my human's head get scared </p>
</div>
<footer class="card-footer">
<button>More</button>
</footer>
</div>
<div class="card">
<header class="card-header">
<p>If human is on laptop sit on the keyboard</p>
</header>
<div class="card-body">
<img src="https://placekitten.com/300/200?image=11">
<p>Do i like standing on litter cuz i sits when i have spaces, my cat buddies have no litter i live in luxury cat life avoid the new toy and just play with the box it came in. Sweet beast it's 3am, time to create some chaos mew caticus cuteicus lick the other cats and stick butt in face. Reaches under door into adjacent room fall asleep on the washing machine and kitty pounce, trip, faceplant you didn't see that no you didn't definitely didn't lick, lick, lick, and preen away. </p>
</div>
<footer class="card-footer">
<button>More</button>
</footer>
</div>
<div class="card">
<header class="card-header">
<p>Embarrassment waffles</p>
</header>
<div class="card-body">
<img src="https://placekitten.com/300/200?image=12">
<p>Refuse to leave cardboard box loved it, hated it, loved it, hated it. Cats are cute. Meow ha ha, you're funny i'll kill you last kitty kitty climb a tree, wait for a fireman jump to fireman then scratch his face for meow meow you are my owner so here is a dead rat spill litter box, scratch at owner, destroy all furniture,</p>
</div>
<footer class="card-footer">
<button>More</button>
</footer>
</div>
</div>
/* BASIC CARD LAYOUT */
.card {
border: 1px solid black;
padding: 3px;
}
.card-header {
font-size: 2em;
}
.card-body img {
width: 100%;
}
.card-footer {
display: flex;
justify-content: center;
}
.card-footer button {
background: #bada55;
padding: 10px 30px;
border-radius: 5px;
border: none;
}
/* Grid Things! */
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
Also see: Tab Triggers