css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

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.

              <div class="container">
  <div class="author-blurb">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32795/Anonymous-Whatsapp-profile-picture.jpg" alt="anonymous photo of author">
    <p>Anonymous is famous for making messes and never cleaning them up</p>
  <div class="content">
    <h1>Article Title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ligula velit, vulputate sit amet luctus ut, rutrum a ante. Aenean bibendum est vitae magna vestibulum volutpat. Ut egestas felis sit amet aliquet vulputate. Suspendisse efficitur non arcu sit amet congue. Pellentesque eget dolor ac nisi ultrices facilisis. Vestibulum dictum dignissim sem, sed fringilla enim luctus ac. Cras tincidunt dignissim turpis, vel volutpat nulla lobortis sit amet. Quisque et ultricies felis. Vivamus ullamcorper lacus in purus dictum dictum. In aliquet, erat in sodales congue, erat orci iaculis dui, eu euismod mi est sit amet ipsum. Phasellus euismod ex placerat, maximus elit et, euismod est. Fusce nec odio vel est ornare facilisis ac ut massa. Nulla pellentesque a nisl sit amet condimentum. Morbi volutpat dui sit amet lorem volutpat malesuada.</p>

<p>Praesent scelerisque, massa ac accumsan tempor, lorem massa pretium erat, vel efficitur magna felis quis arcu. Duis eget dolor ut urna euismod porttitor sed aliquet erat. Vestibulum consequat semper mattis. Vestibulum vulputate interdum nibh, vel sagittis felis malesuada sit amet. Quisque vehicula augue in metus interdum, ut ornare libero convallis. Nulla pretium nec nisi vel euismod. Nam laoreet felis non risus cursus ullamcorper. Quisque a dolor elit. Aenean hendrerit tellus et libero faucibus, sed interdum urna congue. Maecenas vestibulum nisi vel turpis laoreet gravida. Morbi nec purus purus. Nunc enim velit, blandit eget ultricies non, scelerisque a ligula. Pellentesque non euismod erat. Donec ornare molestie arcu, at commodo dui. Morbi quis mi varius, consectetur erat vitae, commodo quam. Vestibulum tristique, augue ut ullamcorper rhoncus, felis nulla mollis sem, et mollis metus tellus porttitor justo.</p>

<p>Aliquam in bibendum erat. Vivamus quis ullamcorper enim. Aenean ullamcorper nunc at lectus faucibus, in blandit ligula hendrerit. Aliquam pulvinar orci eleifend ex fringilla aliquet. Cras sed ultricies purus. In bibendum dignissim diam ac eleifend. Suspendisse vehicula, diam a tempus tincidunt, massa velit varius risus, ac viverra elit purus sed mi. Sed pretium enim ac lorem iaculis tempus. Integer aliquet, arcu eu suscipit feugiat, nisl neque venenatis magna, vitae tempor neque lacus ut elit.</p>

<p>Praesent eu justo lacinia justo tincidunt pretium eget quis odio. Mauris dictum lacus et nibh sollicitudin, et molestie turpis lobortis. Nullam condimentum arcu a nisl posuere feugiat. Phasellus finibus erat sed felis efficitur accumsan. Sed cursus, augue id mollis tempor, lacus risus blandit augue, a scelerisque risus risus sit amet nunc. Donec luctus malesuada pretium. Fusce quis erat molestie, venenatis diam eu, condimentum augue. In a lorem quam. Sed ultrices metus sed nisi sodales, at dapibus purus iaculis. Curabitur lacinia congue eleifend.</p>

<p>Sed molestie augue quis nisi maximus, nec hendrerit odio laoreet. Quisque tempor, sem sit amet bibendum bibendum, arcu massa tempor metus, a placerat justo lorem quis lorem. Fusce pharetra quis leo eget auctor. Maecenas vel iaculis massa. Phasellus a lorem mauris. Proin nec facilisis leo, in mollis urna. Curabitur non mi quis risus facilisis porttitor.</p>
              @import url('https://fonts.googleapis.com/css?family=Mali:400,400i,700,700i');

.container {
  display: flex;
  flex-flow: row;
  width: 80%;
  height: 90%;
  margin: 5em auto;
img {
  border: 5px solid rebeccapurple;
  height: 150px;
  width: 150px;
  &:hover {
    transform-origin: bottom left;
    transform: scale(1.2) rotate(-15deg);

.content {
  padding-left: 2em;
  h1, p {
    font-family: 'Mali', cursive;

🕑 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.
Loading ..................