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

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

              
                <div class="container-title">
  <h1 class="page-title">The Tiny Cupcake Company</h1>
  <div class="page-heart"></div>
</div>
<div class="container-intro">
  <p class="page-intro">
    Say hello to the staff of The Tiny Cupcake Company! These fine folks strive to bring you the best, most delicious, tiniest cupcakes the world has ever seen. These people love their tiny cupcakes. Seriously, the obsession is borderline unhealthy.
  </p>
</div>
<div class="container-profiles">
  <ul>
    <li>
      <article tabindex="0">
        <div class="dismiss"></div>
        <div class="avatar">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ic-laura-avatar.jpg" alt="Laura">
        </div>
        <div class="about">
          <h1>Laura</h1>
          <p>
            Chief cupcake constructor. Laura's love for cupcakes began when she visited her first free-range cupcake farm at age 6. It changed her.
          </p>
          <div class="photo">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ic-laura-photo.jpg" alt="Laura hugging smilie guy">
          </div>
        </div>
      </article>
    </li>
    <li>
      <article tabindex="0">
        <div class="dismiss"></div>
        <div class="avatar">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ic-chris-avatar.jpg" alt="Chris">
        </div>
        <div class="about">
          <h1>Chris</h1>
          <p>
            Buzzword rockstar. Ensures that all tiny cupcakes are 10x engagement long tail viral synergy storytelling flat design startup ostrich.
          </p>
          <div class="photo">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ic-chris-photo.jpg" alt="Chris dancing">
          </div>
        </div>
      </article>
    </li>
    <li>
      <article tabindex="0">
        <div class="dismiss"></div>
        <div class="avatar">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ic-lora-avatar.jpg" alt="Lora">
        </div>
        <div class="about">
          <h1>Lora</h1>
          <p>
            Cupcake therapist and life coach. Helps all tiny cupcakes attain mental health and happiness before being devoured by the handful.
          </p>
          <div class="photo">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ic-lora-photo.jpg" alt="Lora in the city">
          </div>
        </div>
      </article>
    </li>
    <li>
      <article tabindex="0">
        <div class="dismiss"></div>
        <div class="avatar">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ic-will-avatar.jpg" alt="Will">
        </div>
        <div class="about">
          <h1>Will</h1>
          <p>
            Honestly, doesn't do much. Had an idea for a tiny cupcake business and then just rode it out while everyone else did all the work.
          </p>
          <div class="photo">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ic-will-photo.jpg" alt="Will only cares about code">
          </div>
        </div>
      </article>
    </li>
    <li>
      <article tabindex="0">
        <div class="dismiss"></div>
        <div class="avatar">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ic-desmond-avatar.jpg" alt="Desmond">
        </div>
        <div class="about">
          <h1>Desmond</h1>
          <p>
            This is a cat. He doesn't even like cupcakes, much less tiny ones. Sleeps 18 hours a day. Still contributes more than Will, though.
          </p>
          <div class="photo">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ic-desmond-photo.jpg" alt="Desmond loves catnip">
          </div>
        </div>
      </article>
    </li>
  </ul>
</div>
<div class="container-outro">
  <p class="page-outro">
    Now that you've met everyone, go buy their tiny cupcakes!
  </p>
</div>

              
            
!

CSS

              
                @import url(https://fonts.googleapis.com/css?family=Lora:400,700);

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: #696764;
  background-color: #f5f2eb;
  font: 1em/1 'Lora', serif;
}

.container-title {
  position: relative;
  height: 176px;
	color: #81728a;
	background-color: #fff;
}

.page-title {
  position: absolute;
  left: calc(50% - 500px);
  width: 1000px;
	margin: 0;
	padding: 60px 0;
	text-align: center;
	font-size: 3.5em;
}

.page-heart {
	position: absolute;
  z-index: 2;
	bottom: -24px;
	left: 0;
	right: 0;
	text-align: center;
}

.page-heart::before {
	content: '\f004';
	color: #c9b6c1;
	font: 3em/1 'FontAwesome';
}

.container-intro {
  position: relative;
  height: 180px;
	border-top: 2px dashed #fff;
	border-bottom: 2px dashed #f5f2eb;
	color: #fff;
	background-color: #a58899;
}

.page-intro {
  position: absolute;
  left: calc(50% - 500px);
  width: 1000px;
  margin: 0;
	padding: 40px 60px;
	font-size: 1.4em;
	line-height: 1.5;
	text-align: center;
}

.container-profiles {
  position: relative;
  height: 320px;
}

ul {
  position: absolute;
  left: calc(50% - 500px);
	display: flex;
	flex-wrap: wrap;
	width: 1000px;
	margin: 0;
	padding: 0 60px;
	list-style: none;
}

/* Safari/iOS fix: Adjusting both z-index and transform on <article>
   causes text anti-aliasing to die within subsequent <article>
   elements during the transition. Moving z-index to the parent <li>
   fixes this. */
li {
	position: relative;
	z-index: 1;
	width: 20%;
	height: 300px;
	margin-top: -20px;
	transition: z-index;
	transition-delay: .4s;
}

li:nth-child(2n) {
	margin-top: 20px;
}

article {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 512px;
	height: 472px;
	padding: 20px 32px 20px 20px;
	border-top: 8px solid #81728a;
	border-bottom: 4px solid #a299a8;
	background-color: #fff;
	cursor: pointer;
	transform: translate(-50%, -50%) scale(.25);
	transition: transform .4s;
}

article::before {
	content: '\f004';
	display: block;
	opacity: 0;
	position: absolute;
	z-index: -1;
	top: -100px;
	left: 0;
	right: 0;
	color: #c9b6c1;
	font: 6em/1 'FontAwesome';
	text-align: center;
	pointer-events: none;
	transition: transform .4s, opacity .4s;
}

article:focus {
	outline: none;
}

article:focus::before {
	opacity: 1;
	transform: translateY(-40px);
}

.dismiss {
	display: block;
	opacity: 0;
	position: absolute;
	top: -28px;
	right: -28px;
	width: 48px;
	height: 48px;
	border: 4px solid #fff;
	border-radius: 50%;
	color: #fff;
	background-color: #696764;
	cursor: pointer;
	transition: opacity .4s;
}

.dismiss::before {
	content: '\f00d';
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	font: 1.7em/1 'FontAwesome';
	transform: translate(-50%, -50%);
}

.avatar {
	float: left;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background-color: #b5c09e;
	overflow: hidden;
}

.avatar img {
	opacity: 0;
	width: 80px;
	height: 80px;
	border: 2px solid #b5c09e;
	border-radius: 50%;
	transition: opacity .4s;
}

.about {
	margin-left: 100px;
}

.about h1 {
	margin: 14px 0 16px;
	color: #81728a;
	font-size: 3.5em;
}

.about p {
	margin: 16px 0 18px;
	font-size: 1.25em;
	line-height: 1.4;
	word-spacing: .2em;
}

.about span {
	position: relative;
	overflow: hidden;
}

.about span::after {
	content: '';
	opacity: 1;
	display: block;
	position: absolute;
	top: -2px;
	bottom: -2px;
	left: 0;
	right: 0;
	background-image: linear-gradient(to bottom, #fff 25%, #c7c5bf 25%, #c7c5bf 75%, #fff 75%);
	transition: opacity .4s;
}

.about .photo {
	position: relative;
	margin: 18px 0 16px;
	background-color: #b5c09e;
}

.about .photo::after {
	content: '\f03e';
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	color: #fff;
	font: 7em/1 'FontAwesome';
	transform: translate(-50%, -50%);
	transition: opacity .4s;
}

.about .photo img {
	width: 360px;
	height: 180px;
	display: block;
	opacity: 0;
	border: 2px solid #b5c09e;
	transition: opacity .4s;
}

.container-outro {
  position: relative;
  height: 104px;
}

.page-outro {
  position: absolute;
  left: calc(50% - 500px);
  width: 1000px;
	margin: 0 0 80px;
	font-size: 1.4em;
	text-align: center;
}

.inactive {
	pointer-events: none;
}

/* Chrome/Safari/iOS fix: Bumping up the z-index from the start of
   the expand animation until the end of the shrink animation
   prevents unnecessary repaints on subsequent <article> elements. */
.active {
	z-index: 2;
	transition-delay: 0s;
}

.active article {
	cursor: auto;
	transform: translate(-50%, -50%) scale(1);
}

li:first-child.active article {
	transform: translate(calc(-50% + 152px), -50%) scale(1);
}
li:last-child.active article {
	transform: translate(calc(-50% - 152px), -50%) scale(1);
}

.active .dismiss,
.active .avatar img,
.active .about .photo img {
	opacity: 1;
}

.active article:focus::before,
.active .avatar::after,
.active .about span::after,
.active .about .photo::after {
	opacity: 0;
}

              
            
!

JS

              
                function spanify() {
  $('.about p').each(function() {
    var $this = $(this);
    var words = $this.text().trim().split(' ');
    var spans = '<span>' + words.join('</span> <span>') + '</span>';
    $this.html(spans);
  });
}

function activate(e) {
  var $wrapper = $(e.currentTarget).parent();
  $wrapper
    .addClass('active')
    .siblings().addClass('inactive');
}

function dismiss(e) {
  var $wrapper = $(e.currentTarget).closest('li');
  $wrapper
    .removeClass('active')
    .siblings().removeClass('inactive');
  e.stopPropagation();
}

function checkKey(e) {
  var $wrapper = $(e.currentTarget).parent();
  var isActive = $wrapper.hasClass('active');
  if (isActive && (e.keyCode === 13 || e.keyCode === 27)) {
    // active and hit enter or escape
    dismiss(e);
  } else if (!isActive && e.keyCode === 13) {
    // not active and hit enter
    activate(e);
  }
}

spanify();

$('article').on({
  'click': activate,
  'blur': dismiss,
  'keyup': checkKey
});
$('.dismiss').on('click', dismiss);

              
            
!
999px

Console