cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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.

            
              <section class="page-section ">

 <div class="section-content">

  <ol class="list list-panels">
   <li class="panel layout-support">
    <div class="panel-support">
     <svg id="llama" class="walk-in" xmlns="http://www.w3.org/2000/svg" width="69.2" height="98.4" viewBox="0 0 69.2 98.4">

		<path class="st0" d="M60.5 49.4h5c1.3 0 2.4 1.1 2.4 2.4 0 1.3-1.1 2.4-2.4 2.4h-5M1.3 11.4H20v38h39.5v29.7H10.9V20.9H1.3"/>
		<ellipse class="st1" cx="15" cy="16.1" rx="1.3" ry="1.3"/>
		<path class="st0" d="M47.5 97.1h3.2v-18h-5.8M38.4 97.1h3.3v-18h-5.8M29.3 97.1h3.3v-18h-5.8M20.3 97.1h3.3v-18h-5.9M15.3 1.3H20v10.1h-4.7zM5.6 1.3h4.7v10.1H5.6zM45.4 54.4c0 2.1 1.7 3.7 3.7 3.7 2.1 0 3.7-1.7 3.7-3.7M41.7 62.6c0 2.1 1.7 3.7 3.7 3.7 2.1 0 3.7-1.7 3.7-3.7M44.1 70.2c0 2.1 1.7 3.7 3.7 3.7 2.1 0 3.7-1.7 3.7-3.7M16.3 70.7c0 2.1 1.7 3.7 3.7 3.7s3.7-1.7 3.7-3.7M23 60.7c0 2.1 1.7 3.7 3.7 3.7 2.1 0 3.7-1.7 3.7-3.7M18.4 53.2c0 2.1 1.7 3.7 3.7 3.7 2.1 0 3.7-1.7 3.7-3.7M29.7 68.6c0 2.1 1.7 3.7 3.7 3.7 2.1 0 3.7-1.7 3.7-3.7M32.2 56.3c0 2.1 1.7 3.7 3.7 3.7 2.1 0 3.7-1.7 3.7-3.7"/>
	</svg>
     <svg id="lara" class="walk-in" xmlns="http://www.w3.org/2000/svg" width="40.1" height="97.5" viewBox="0 0 40.1 97.5">
		<path d="M38,59.7c-2.2,0.6-3-0.9-3.4-2.8c-0.9-3.4-2-6.9-3-10.3c-0.6-2-1.2-4.2-1.9-6.2h-0.6c0,2,0.2,4.2,0.5,6.2
  c1.4,8.8,5.2,17,6.6,25.8c-0.6,0-1.2,0.2-1.7,0.2c-5.3,0.2-5.3,0.2-5.3,5.5v14.5c0,3.3-1.6,5-4.1,5s-3.9-1.7-3.9-4.8v-17
  c0-1.1-0.3-2-0.5-3.1h-1.1c-0.2,0.9-0.5,1.9-0.6,3v17c0,3.4-1.4,5-4.1,5c-2.5,0-4.1-1.9-4.1-5.2V76.7v-4.2h-7
  c1.4-8.9,5.2-17.2,6.2-26.1c0.3-2,0.3-4.1,0.3-6.2c-0.6,2-1.2,4.2-1.9,6.2c-0.9,3.1-1.9,6.2-2.8,9.4c-0.2,0.5-0.2,1.1-0.3,1.7
  c-0.6,1.7-1.7,2.5-3.4,2c-1.9-0.5-2.2-1.7-1.7-3.3c1.4-4.8,2.7-9.7,4.1-14.5c0.6-2,1.2-4.2,1.7-6.2c0.5-1.6,1.1-3.3,1.4-5
  C7.5,29.1,8,28,8.8,27.2c0.9-1.1,2.3-1.6,4.2-1.6h1.1h1.6c0.8,1.9,2.8,3.3,5,3.3c2.2-0.2,4.1-1.2,4.8-3.1c1.1,0,2.2,0.2,3.3,0.2h0.2
  c0.3,0,0.6,0.2,0.9,0.3c0.9,0.5,1.9,1.6,2.2,2.3c1.7,5.5,3.3,10.9,4.8,16.6l2.8,9.8C40.3,57.4,40.3,59.1,38,59.7L38,59.7z"/>
<path d="M28.8,13.1c-0.2,0.2-0.3,0.5-0.5,0.6L28,14.1c-0.6,0.2-0.9,2-1.1,2.5c-0.5,0.9-0.9,1.7-1.7,2.3c-1.4,1.4-3.1,2.3-5.2,2.2
  c-2,0-3.9-1.1-5.2-2.5c-0.8-0.8-1.4-1.9-1.7-2.8c-0.2-0.3-0.3-1.6-0.8-1.7c-0.2,0-0.3-0.2-0.3-0.3c-0.2-0.2-0.3-0.5-0.5-0.6
  c-0.5-0.6-0.8-1.6-0.8-2.3v-0.3v-0.3c-0.5-0.2,0-0.6,0.2-0.5c0.3,0,0.5,0.5,0.6,0.8c0,0.2,0.2,0.3,0.3,0.3s0.3-0.3,0.3-0.5
  c0.3-1.2,1.6-3.1,3-2.7c1.2,0.5,2.3,1.3,3.6,1.9c1.6,0.8,3.4,1.1,5.2,1.2c1.6,0.2,3.3,0.3,4.4-0.9c0.3-0.2,0.6-0.2,0.8-0.2
  s0.3,0.2,0.5,0.5C29.7,11.1,29.3,12.4,28.8,13.1L28.8,13.1z M31.9,9.9c-0.9-4.1-3.3-8.4-7.5-9.4C22.2,0,20-0.1,17.9,0.2
  c-4.2,0.6-7.3,4.2-8.9,8.4c-0.8,2-0.9,4.2-0.8,6.4c0.2,2.7,0.9,5.3,1.9,8c0.8-0.5,1.4-0.9,2-1.4c0.9-0.8,0.9-0.6,2,0
  c1.7,1.1,3.6,1.7,5.6,1.9c2.5,0.2,4.7-0.6,6.7-2c0.6-0.5,1.1-0.5,1.7,0s1.2,0.9,2,1.6c0.3-0.9,0.6-1.6,0.8-2.3
  C32.1,17,32.7,13.4,31.9,9.9L31.9,9.9z"/>
</svg>

     <svg version="1.1" id="skaman" xmlns="http://www.w3.org/2000/svg" width="139.1px" height="100px" viewBox="0 0 39.1 91" xml:space="preserve">
<defs>
</defs>
<path id="body" d="M36.3,16L35,16.2v-3c0-0.2-0.1-0.4-0.3-0.4l-3.3-1.7l3-0.2l3,1.4l0.5,1.6L36.3,16z M26.6,14.3l0.2-0.3l3.9-1.5l0.5,0.3
	l2.3,1.5l0.5,2.5l0,0.1c0,0,0,0,0,0l0.2,1.1L26.6,14.3z M32.9,20.5L31,19.9c-0.3-0.1-0.5,0-0.6,0.3c-0.1,0.3,0,0.5,0.3,0.6l1.7,0.6
	l-0.5,1l-3.1-1.4c-0.2-0.1-0.5,0-0.7,0.3c-0.1,0.3,0,0.5,0.3,0.7l3,1.4l-0.1,0.2l-3.5,1.3l-1.8-1.6l-0.4-1.9L25.1,19l-0.5-2l1.3-1.8
	l0.3,0.1l0.3,1.9l2.5,1.2l1.8-0.9l1.6,0.3L32.9,20.5L32.9,20.5z M15.5,32.5l6.4-9.6l1.4-0.4l1.6,1.1L15.5,32.5z M20.5,31.7l0.3-1.7
	l1.6,1.5L20.5,31.7z M13.1,31.9L13.1,31.9l8.8-14.4l0.8,2.3l-0.9,0.5c-0.1,0.1-0.2,0.2-0.2,0.3l-0.4,1.6L13.1,31.9z M8.9,36.1
	l-1.7-1.5l3.1-3.7l1.5,1.7L8.9,36.1z M3.6,29.9l0.6-1c0,0,0-0.1,0.1-0.1l0.5-2.1l2-1.7h0.2c0,0.1,0,0.1,0.1,0.2l1.1,1.6
	c0.1,0.1,0.2,0.2,0.4,0.2c0.1,0,0.2,0,0.3-0.1c0.2-0.2,0.3-0.5,0.1-0.7l-1-1.3L8.4,24l1.4,1.6V30l-3,3.6L3.6,29.9z M5.3,19.2
	l3.9,0.3l1.2,3v1.8l-0.1,0.3l-1.6-1.8c-0.1-0.1-0.3-0.2-0.4-0.2c-0.2,0-0.3,0.1-0.4,0.3l-0.6,1.1H6.6c-0.1,0-0.2,0-0.3,0.1l-1.2,1
	l-0.2-1.9L5.3,19.2z M21.3,13.1C21.3,13.1,21.3,13.1,21.3,13.1C21.2,13.1,21.3,13.1,21.3,13.1z M24.8,10.8l6.8-3.2l1.1,2.4l-3.1,0.2
	c0,0,0,0,0,0l-1.4,0.1c-0.1,0-0.1,0-0.2,0.1l-4.2,2.2L24.8,10.8z M39,13.8l-0.7-2.1c0-0.1-0.1-0.2-0.3-0.3l-3.4-1.6
	c-0.1,0-0.2-0.1-0.2,0l-0.7,0.1l-1.5-3.2c-0.1-0.2-0.4-0.4-0.7-0.2l-7.4,3.5c-0.1,0-0.2,0.1-0.2,0.2l-1.5,2.8L11,0.2
	C10.8,0,10.6,0,10.4,0.1l-2,1.1C8.2,1.2,8.1,1.3,8,1.5L4.9,15.2c0,0.1,0,0.3,0.1,0.4c0.1,0.1,0.2,0.2,0.3,0.2l4.4,0.8
	c0.2,0,0.5-0.1,0.6-0.3l1.3-3.9l1.8,4.1L11,21.2L10,18.9c-0.1-0.2-0.2-0.3-0.4-0.3l-4.7-0.4c-0.3,0-0.5,0.2-0.5,0.4l-0.5,4.5
	c0,0,0,0.1,0,0.1l0.3,2.5c0,0,0,0.1,0,0.1L4,26c-0.1,0.1-0.1,0.2-0.2,0.3l-0.5,2.2l-0.8,1.3c-0.1,0.2-0.1,0.4,0.1,0.6l3.6,4
	l-4.6,6.2c-0.1,0.2-0.1,0.4,0,0.6l1.1,1.6l-1.2,3.8c0,0.1,0,0.3,0.1,0.4l2.8,4.3l2.2,14.9L1.3,81.9c-0.1,0.2,0,0.3,0.1,0.5
	c0.1,0.1,0.2,0.2,0.4,0.2h0l5.7-0.1c0.2,0,0.4-0.1,0.4-0.3l7.4-15.8c0-0.1,0-0.1,0-0.2l0.3-8.8l8.2,3.8l-8.6,11.5
	c-0.1,0.1-0.1,0.3-0.1,0.4c0,0.1,0.1,0.3,0.3,0.3l4.5,2.3c0.2,0.1,0.4,0.1,0.6-0.1l15.9-15.4c0.1-0.1,0.2-0.2,0.2-0.4
	c0-0.1-0.1-0.3-0.2-0.4l-16.3-12l0.7-0.2c0.1,0,0.2-0.1,0.3-0.2c0.1-0.1,0.1-0.3,0-0.4l-1.2-4l10.7-12.1c0.1-0.2,0.2-0.4,0.1-0.6
	l-2-4.2l3.4-1.3c0.1,0,0.2-0.1,0.3-0.2l1.6-3.2l1-0.2l1.6-1.6l-1.1-0.5l-0.2-1.4l1.5-0.2c0.1,0,0.2-0.1,0.3-0.2l2-2.5
	C39.1,14.2,39.1,14,39,13.8L39,13.8z"/>

	<path id="shoe1" class="shoe" d="M17.5,87.5l-4.7-1.4l-2.8-3c-0.1-0.1-0.2-0.2-0.4-0.2l-3.1,0c-0.2,0-0.3,0.1-0.4,0.2c-0.1,0.1-0.1,0.3-0.1,0.4l0.7,2.1
		l-5.9-1.2c-0.1,0-0.3,0-0.4,0.1c-0.1,0.1-0.2,0.2-0.2,0.4L0,90.1c0,0.1,0,0.3,0.1,0.4c0.1,0.1,0.2,0.2,0.4,0.1l4.7-0.3
		c0.2,0,0.3-0.1,0.4-0.2l0.5-0.9l1.3,1.6C7.5,90.9,7.7,91,7.8,91h0l9.5-0.6c0.3,0,0.5-0.2,0.5-0.5l0-1.9
		C17.8,87.8,17.7,87.6,17.5,87.5L17.5,87.5z"/>
	<path id="shoe2" class="shoe" d="M23.1,81l-0.4-2.4c0-0.1-0.1-0.3-0.2-0.4L18.6,76c-0.1-0.1-0.3-0.1-0.5,0c-0.2,0.1-0.2,0.2-0.3,0.4l-0.1,1.2l-3.9-3.2
		c-0.1-0.1-0.3-0.1-0.4-0.1c-0.1,0-0.3,0.1-0.3,0.2l-2.6,3.9c-0.1,0.1-0.1,0.3-0.1,0.4c0,0.1,0.1,0.2,0.2,0.3l4.3,2.5
		c0.2,0.1,0.4,0.1,0.6-0.1l0.9-0.8l0.5,2.3c0,0.2,0.1,0.3,0.3,0.4l8.6,3.5c0.1,0,0.1,0,0.2,0c0.1,0,0.2,0,0.2-0.1
		c0.1-0.1,0.2-0.2,0.3-0.3l0.5-1.8c0.1-0.2,0-0.4-0.2-0.5L23.1,81z"/>
	</svg>
     <svg id="checkers" class="" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100px" height="20px" viewBox="0 0 100 20">
				<rect width="10" height="10"/>
				<rect x="10" y="10" width="10" height="10"/>
				<rect x="30" y="10" width="10" height="10"/>
				<rect x="50" y="10" width="10" height="10"/>
				<rect x="70" y="10" width="10" height="10"/>
				<rect x="90" y="10" width="10" height="10"/>
				<rect x="20" width="10" height="10"/>
				<rect x="40" width="10" height="10"/>
				<rect x="60" width="10" height="10"/>
				<rect x="80" width="10" height="10"/>
			</svg>
    </div>

    <div class="panel-content">
     <h4 class="panel-title">The Llama Girl</h4>
     <p>I grew up on a llama farm southeast of Pittsburgh, PA. I showed llamas in 4-H and was known as The Llama Girl in school. Around age 15, I started to resent this fact and shifted my energies to art class and ska music.</p>
    </div>
   </li>
   <li class="panel layout-content">
    <div class="panel-support">
     <svg xmlns="http://www.w3.org/2000/svg" width="46.5" height="60" viewBox="0 0 46.5 60">
  <path d="M27.7 27.3c0-3.2-2.6-5.8-5.8-5.8h-16c-1.6 0-2.9-1.3-2.9-2.9v-6.2c0-.8.4-1.6.9-2.1V6.8c-2.3.8-3.9 3-3.9 5.6v6.2c0 3.3 2.6 5.9 5.9 5.9h16c1.6 0 2.8 1.3 2.8 2.8V30h-2c-.5 0-.9.4-.9.9v27.5c0 .9.7 1.6 1.6 1.6h5.7c.9 0 1.6-.7 1.6-1.6V30.9c0-.5-.4-.9-.9-.9h-2v-2.7h-.1zM46.5 3.6v7.8c0 2-1.6 3.6-3.6 3.6H9.4c-2 0-3.6-1.6-3.6-3.6V3.6c0-2 1.6-3.6 3.6-3.6h33.4c2 0 3.7 1.6 3.7 3.6z"/>
</svg>
    </div>

    <div class="panel-content">
     <h4 class="panel-title">The Boulder Days</h4>
     <p>I chose to attend college far, far away from my small town upbringing in Pennsylvania. I enrolled in the University of Colorado at Boulder where I studied Fine Arts, printmaking specifically. Unofficially, I studied skiing and good times.</p>
    </div>
   </li>
   <li class="panel layout-support">
		 <div class="panel-support">
		 	drawing
		 </div>
    <div class="panel-content">
     <h4 class="panel-title">NODOI</h4>
     <p>While in Boulder, I worked on a very bizarre art project called NODOI. It was a spiritual satire of sorts and although I'd never played video games (other than the Sims and Roller Coaster Tycoon), I was convinced I needed to make this project into a video game.</p>
			<p>The curriculum at CU Boulder didn't allow for an easy switch from printmaking to computer science, so I transferred to a strange art school in Boston called the School of the Museum of Fine Arts that would basically let me work on whatever I wanted.</p>
    </div>
   </li>
		<li class="panel layout-content">
			<div class="panel-support">
				drawing
			</div>
			<div class="panel-content">
				<h4>To Boston I Go</h4>
				<p>As it turned out, it was impossible to retain sanity while both devoting myself to this project and continuing my "unofficial studies" at Boulder. After two years, I transferred to a small art school in Boston.</p>
			</div>
		</li>
		
		<li class="panel layout-support">
			<div class="panel-support">
				drawing
			</div>
			<div class="panel-content">
				<h4>I learned HTML!</h4>
				<p>I paid a friend's boyfriend $10/hr to tutor me in HTML and CSS and nodoi.net was born. I taught myself ActionScript via lots of weird Flash animations and games, and I took an elective course in video game development in Python where I built the real NODOI.</p>
			</div>
		</li>
		
		<li class="panel layout-support">
			<div class="panel-support">
				drawing
			</div>
			<div class="panel-content">
				<h4>I learned to code!</h4>
				<p>I paid a friend's boyfriend $10/hr to tutor me in HTML and CSS and nodoi.net was born. I taught myself ActionScript via lots of weird Flash animations and games, and I took an elective course in video game development in Python where I built the real NODOI.</p>
			</div>
		</li>
		
		<li class="panel layout-content">
			<div class="panel-support">
				drawing
			</div>
			<div class="panel-content">
				<h4>"You should make WordPress websites"</h4>
				<p>I took a few classes with Steve Lambert, a brilliant artist/activist, and author of the original WPFolio WordPress theme from back in the day. He told me, "You should learn how to build WordPress websites, then you can freelance and call your own shots." And that's pretty much what I did.</p>
			</div>
		</li>
		
  </ol>
  <!-- /.list-major -->

 </div>
 <!-- /.section-content -->

</section>
            
          
!
            
              // Sizing scale

$base:  			1.1rem;

$xsml: 				$base*0.6;
$sml:  				$base*0.8;

$h1:  				$base*3;
$h2:  				$base*2.4;
$h3:  				$base*2;
$h4:  				$base*1.3;
$h5:  				$sml;
$h6:  				$base;

$breakpoint: 	600px;

* {
	box-sizing: border-box;
}

.page-section {
	padding: $sml;
}

.list-panels {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.panel {
	padding: $sml;
	@media(min-width: $breakpoint) {
		display: grid;
	  min-height: 80vh;
		grid-template-columns: repeat(5, 1fr);
		grid-auto-flow: column dense;
		grid-column-gap: $base;
		grid-row-gap: $base;
		align-items: center;
	}
}

.panel-support {
	background-color: #F7DE32;
}

.panel-content {
	background-color: #CCEBF3;
}

.panel-support,
.panel-content {
	padding: $base;
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

@media(min-width: $breakpoint) {

	.layout-support {	
		.panel-support {
			grid-column: 1 / span 3;
		}
		.panel-content {
			grid-column: span 2;
		}
	}

	.layout-content { 
		.panel-support {
			grid-column: span 2;
		}
		.panel-content {
			grid-column: 1 / span 3;
		}
	}

}

// SVGs

.walk-in {
	bottom: 0;
	left: 0;
	position: absolute;
	bottom: 0;
}

#lara {
	fill: slategray;
	left: 80%;
	stroke: #444;
	stroke-width: 1;
}

#llama {
	transform: scaleX(-1);
  filter: FlipH;
	stroke-width: 1.4;
	stroke: #000;
	fill: white;
 	left: 60%;
}

#skaman {
	position: relative;
}

.shoe {
	fill: black;
	position: relative;
	left: 10px;
}

#checkers {
	fill: black;
}


            
          
!
            
              const $walkIn = document.querySelectorAll('.walk-in'),
			$llama = document.querySelector('#llama'),
			$lara = document.querySelector('#lara'),
			$checkers = document.querySelectorAll('#checkers rect'),
			$skaman = document.querySelector('#skaman'),
			$shoe1 = document.querySelector('#shoe1'),
			$shoe2 = document.querySelector('#shoe2'),
			$shoes = document.querySelectorAll('.shoe'),
			$roller = document.querySelectorAll('#roller');
			
	TweenLite.set($skaman, {autoAlpha:0});
	TweenLite.set($shoes, {autoAlpha:0});

function skank() {
	let tl = new TimelineLite();
	
	tl.add('start')
		.staggerFrom($checkers, 2, {
			fill: 'none',
			ease:Power1.easeIn
		}, 0.025, 'start')
		.add('ska')
		.fromTo($skaman, 1, {
			marginLeft: -100,
			bottom: -50,
			ease:Power1.easeIn
		}, {
			marginLeft: 0, 
			bottom: 0,
			ease:Bounce.easeOut
		}, 'ska')
		.fromTo([$skaman, $shoes], 0.5, {
			autoAlpha: 0,
			fill: 'none',
		}, {
			autoAlpha: 1,
			fill: 'black',
			ease:Power1.easeIn
		}, 'ska+=0.5')
		.add('rendered')
		.fromTo($shoe1, 0.25, {
			rotation: 60, 
			ease:Bounce.easeIn
		}, {
			rotation: 0,
			ease:Power1.easeIn
		}, 'rendered+=0.25')
		.to($shoe2, 0.25, {
			rotationX: 360, 
			transformOrigin: "left bottom",
			ease:Power1.easeIn
		}, 0.35, 'rendered+=0.05');
	
	return tl;	
}

function llama() {
	let tl = new TimelineLite();
	tl.add('start')
		.from($llama, 0.5, {fill: 'none', autoAlpha: 0}, 'start')
		.from($lara, 2, {left: '0', ease:Power3.easeOut}, 'start')
		.from($llama, 2, {left: '-15%', ease:Power1.easeIn}, 'start');
	
	return tl;
}

function roller() {
	let tl = new TimelineLite();
	tl.add('start')
		.from($llama, 0.5, {fill: 'none', autoAlpha: 0}, 'start')
		.from($lara, 2, {left: '0', ease:Power3.easeOut}, 'start')
		.from($llama, 2, {left: '-15%', ease:Power1.easeIn}, 'start');
	
	return tl;
}

var master = new TimelineLite() 

master.add(llama())
			.add(skank());


            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console