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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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

              
                <main>

  <div class="c-card c-card--horror">
      <img class="c-card__image" 
           src="https://assets.codepen.io/11907/voice-control-01.jpg" 
           alt="A little girl staring at the camera with blood running down her face.">
    <div class="c-card__content">
      <h2 class="c-card__title">10 vampire flicks you should invite into your house</h2>
      <p class="c-card__description">We dug through the archives to find these hidden gems.</p>
      <p><a class="c-card__link" href="https://www.abc.com/">Learn more <span class="u-hide-visually">about these 10 overlooked vampire movies</span></a>
    </div>
  </div>
  
  <div class="c-card c-card--industry">
      <img class="c-card__image" 
           src="https://assets.codepen.io/11907/voice-control-02.jpg" 
           alt="A director's chair branded with the Supreme logo.">
    <div class="c-card__content">
      <h2 class="c-card__title">We can't say who, but this director has some werid habits</h2>
      <p class="c-card__description">Maybe spending all day talking backwards actualy helps?</p>
      <p><a class="c-card__link" href="https://www.def.com/">Learn more <span class="u-hide-visually">about this director's strange habits on set</span></a>
    </div>
  </div>

  <div class="c-card c-card--history">
      <img class="c-card__image" 
           src="https://assets.codepen.io/11907/voice-control-03.jpg" clutching a pole is staring at the camera with a flummoxed expression.">
    </a>
    <div class="c-card__content">
      <h2 class="c-card__title">8 silent movies you've never seen but still know</h2>
      <p class="c-card__description">These classic plots are referenced over and over again.</p>
      <p><a class="c-card__link" href="https://www.smashingmagazine.com/">Learn more <span class="u-hide-visually">about these silent films that we reference today</span></a>
    </div>
  </div>

  <div class="c-card c-card--scifi">
      <img class="c-card__image" 
           src="https://assets.codepen.io/11907/voice-control-04.jpg" 
           alt="The kaiju from the movie Colossal scratching its head.">
    <div class="c-card__content">
      <h2 class="c-card__title">Godzilla walked so these 3 movies could run</h2>
      <p class="c-card__description">They're stomping their way into our hearts.</p>
      <p><a class="c-card__link" href="https://www.hij.com/">Learn more <span class="u-hide-visually">about these 3 influential Kaiju flicks</span></a>
    </div>
  </div>

  <div class="c-card c-card--foreign">
      <img class="c-card__image" 
           src="https://assets.codepen.io/11907/voice-control-05.jpg" 
           alt="6 famous South Korean actors.">
    <div class="c-card__content">
      <h2 class="c-card__title">Squid Game is just the tip of the iceberg</h2>
      <p class="c-card__description">Lee Min-ho, Song Hye-ko, Gong Yoo, and more!</p>
      <p><a class="c-card__link" href="https://www.lmn.com/">Learn more <span class="u-hide-visually">about these 5 up and coming South Korean actors</span></a>
    </div>
  </div>
  
  <div class="c-card c-card--animation">
      <img class="c-card__image" 
           src="https://assets.codepen.io/11907/voice-control-06.jpg" their house is on fire and lightning strikes.">
    </a>
    <div class="c-card__content">
      <h2 class="c-card__title">You have to see this new amazing animation technique</h2>
      <p class="c-card__description">Pioneed by one of the lead animators on Into the Spider-Verse.</p>
      <p><a class="c-card__link" href="https://www.opq.com/">Learn more <span class="u-hide-visually">about this brand new animation technique</span></a>
    </div>
  </div>
  
  <div class="c-card c-card--scifi">
      <img class="c-card__image" 
           src="https://assets.codepen.io/11907/voice-control-07.jpg" shadowy figure walks away in the background.">
    </a>
    <div class="c-card__content">
      <h2 class="c-card__title">6 sci-fi concepts based in actual research</h2>
      <p class="c-card__description">Gattaca's ideas on genetic modification have some scientific merit behind them.</p>
      <p><a class="c-card__link" href="https://www.trs.com/">Learn more <span class="u-hide-visually">about these 6 sci-fi concepts that are actually grounded in scientific fact</span></a>
    </div>
  </div>

  <div class="c-card c-card--history">
      <img class="c-card__image" 
           src="https://assets.codepen.io/11907/voice-control-08.jpg" with the American Flag.">
    </a>
    <div class="c-card__content">
      <h2 class="c-card__title">Sequels that asked for forgiveness instead of permission</h2>
      <p class="c-card__description">There's more of these than you'd think!</p>
      <p><a class="c-card__link" href="https://www.tuv.com/">Learn more <span class="u-hide-visually">about sequels made without permission from the original film</span></a>
    </div>
  </div>

  <div class="c-card c-card--romance">
      <img class="c-card__image" 
           src="https://assets.codepen.io/11907/voice-control-09.jpg" inside it.">
    </a>
    <div class="c-card__content">
      <h2 class="c-card__title">Three Victorian romance sets we're in love with</h2>
      <p class="c-card__description">All I want to know is where I can get that fainting counch.</p>
      <p><a class="c-card__link" href="https://www.wxy.com/">Learn more <span class="u-hide-visually">about the sets of these 3 popular Victorian romance movies</span></a>
    </div>
  </div>

  <div class="c-card c-card--industry">
      <img class="c-card__image" 
           src="https://assets.codepen.io/11907/voice-control-10.jpg" is standing up straight and Danny is leaning on him.">
    </a>
    <div class="c-card__content">
      <h2 class="c-card__title">This script was a mess until he fixed it</h2>
      <p class="c-card__description">When the going gets tough, the tough call on this man.</p>
      <p><a class="c-card__link" href="https://www.123.com/">Learn more <span class="u-hide-visually">about how this screenwriter fixed a very popular movie we can't name</span></a>
    </div>
  </div>
  
    <div class="c-card c-card--fantasy">
      <img class="c-card__image" 
           src="https://assets.codepen.io/11907/voice-control-11.jpg" 
           alt="The imaginary pie from the movie Hook.">
    <div class="c-card__content">
      <h2 class="c-card__title">Fantasy flick food we need to eat</h2>
      <p class="c-card__description">The next best thing to reaching into your TV.</p>
      <p><a class="c-card__link" href="https://www.345.com/">Learn more <span class="u-hide-visually">about how these delicious-looking fantasy movie meals were made</span></a>
    </div>
  </div>

</main>
              
            
!

CSS

              
                .c-card {
  --c-card-border-width: var(--border-width-thick);
  --c-card-color-background: var(--color-white);
  --c-card-color-type-description: var(--color-gray);
  --c-card-color-type-title: var(--color-black);
  --c-card-padding-outer: var(--size-4);

  align-self: start;
  background-color: #ffffff;
  background-color: var(--c-card-color-background);
}

.c-card--horror { 
  .c-card__content {
     border-top-color: #5943BD;
     border-top-color: var(--color-horror);
  }
  
  .c-card__link {
    background-color: #5943BD;
    background-color: var(--color-horror);
  }
}

.c-card--industry { 
  .c-card__content {
    border-top-color: #F8D45B;
    border-top-color: var(--color-industry);
  }
  
  .c-card__link {
    background-color: #F8D45B;
    background-color: var(--color-industry);
    color: #000000;
    color: var(--color-black);
  }
}

.c-card--history { 
  .c-card__content {
    border-top-color:#AEB5BC;
    border-top-color: var(--color-history);
  }

  .c-card__link {
    background-color: #AEB5BC;
    background-color: var(--color-history);
    color: 000000;
    color: var(--color-black);
  }
}

.c-card--scifi { 
  .c-card__content {
    border-top-color: #69922E;
    border-top-color: var(--color-scifi);
  }
  
  .c-card__link {
    background-color: #69922E;
    background-color: var(--color-scifi);
  }
}

.c-card--foreign { 
  .c-card__content {
    border-top-color: #DE4D47;
    border-top-color: var(--color-foreign);
  }
  
  .c-card__link {
    background-color: #DE4D47;
    background-color: var(--color-foreign);
  }
}

.c-card--animation { 
  .c-card__content {
    border-top-color: #84BFF7;
    border-top-color: var(--color-animation);
  }
  
  .c-card__link {
    background-color: #84BFF7;
    background-color: var(--color-animation);
    color: #000000;
    color: var(--color-black);
  }
}

.c-card--romance { 
  .c-card__content {
    border-top-color: #DF6E94;
    border-top-color: var(--color-romance);
  }
  
  .c-card__link {
    background-color: #DF6E94;
    background-color: var(--color-romance);
  }
}

.c-card--fantasy { 
  .c-card__content {
    border-top-color: #B056D4;
    border-top-color: var(--color-fantasy);
  }

  .c-card__link {
    background-color: #B056D4;
    background-color: var(--color-fantasy);
  }
}


.c-card__image {
  aspect-ratio: 8 / 5;
  display: block;
}


.c-card__content {
  border-top: 1rem solid transparent;
  border-top: var(--c-card-border-width) solid transparent;
  padding: 2.25em;
  padding: var(--c-card-padding-outer);
}


.c-card__title {
  color: #000000;
  color: var(--c-card-color-type-title);
  line-height: 1.2;
}


.c-card__description {
  color: #878E95;
  color: var(--c-card-color-type-description);
  margin-top: 0.667rem;
  margin-top: var(--size-1);
}


.c-card__link {
  clip-path: polygon(4% 0%, 100% 0%, 96% 100%, 0% 100%);
  color: #ffffff;
  color: var(--color-white);
  display: inline-block;
  font-style: italic;
  margin-top: 1rem;
  margin-top: var(--size-2);
  padding: 0.667rem 1.5rem;
  padding: var(--size-1) var(--size-3);
  
  &:hover,
  &:focus {
    clip-path: polygon(0 0, 96% 0, 100% 100%, 4% 100%);
    color: #ffffff;
    color: var(--color-white);
    background-color: #000000;
    background-color: var(--color-black);
    
    text-decoration: none;
  }
}



.u-hide-visually {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}



:root {
  --border-width-thin: 1px;
  --border-width-thick: 1rem;

  --color-black: #393D3F;
  --color-gray: #878E95;
  --color-white: #FFFFFF;
  
  --color-horror: #5943BD;
  --color-industry: #F8D45B;
  --color-history: #AEB5BC;
  --color-scifi: #69922E;
  --color-foreign: #DE4D47;
  --color-animation: #84BFF7;
  --color-romance: #DF6E94;
  --color-fantasy: #B056D4;
  
  --size-0: 0;
  --size-1: 0.667rem;
  --size-2: 1rem;
  --size-3: 1.5rem;
  --size-4: 2.25em;
  --size-5: 3.375em;
  --size-6: 5.063em;
  --size-7: 7.594em;
  --size-8: 11.391em;
  --size-9: 17.086em;
}




*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}

body {
  background-color: #E9ECEF;
  color: var(--color-black);
  font-family: 'Poppins', sans-serif;
  line-height: 1.4;
  margin: 1rem;
  min-height: 100%;
  overflow-y: scroll;
  text-size-adjust: 100%;
  
  @media screen and (-webkit-min-device-pixel-ratio: 2),
  screen and (min-resolution: 2dppx) {
    font-smoothing: subpixel-antialiased;
  }
  
  @media screen and (min-width: 30em) {
    margin: 2rem;
  }
}

main {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  
  @supports (display: grid) {
    display: grid;
    gap: var(--size-4) var(--size-3);
    grid-template-columns: 1fr;

    @media screen and (min-width: 30em) {
      gap: var(--size-5) var(--size-4);
      grid-template-columns: repeat(3, 1fr);
    }    
  }
}

img {
  width: 100%;
  height: auto;
}

.c-card {
  flex-basis: 30%;
  margin-right: 2rem;
  margin-bottom: 2rem;
  
  @supports (display: grid) {
    margin-right: 0;
    margin-bottom: 0;
  }
}
              
            
!

JS

              
                  
              
            
!
999px

Console