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

            
                <div class="whole-container">
    <!--<div class="inner-container"></div>-->
	<nav id="topnav">
	  <div class="inner">
	  <a href="/" class="left logo"><img src="//dl.dropboxusercontent.com/u/55861319/icons/genius.png"></a>
	  <div class="left nav">
		 <ul>
			<li><a>Superheroes</a></li>
			<li><a>Villains</a></li>
			<li><a>Damsels</a></li>
			<li class="action"><a class="btn btn-small">More...</a></li>
		 </ul>
	  </div>
	  </div>
	</nav>
  <header class="main panel red">
    <div class="inner">
      <div class="left">
        <h1 class="big">Big Header 1</h1>
        <h2 class="big">Big Header 2</h2>
        <h3 class="big">Big Header 3</h3>
        <h4 class="big">Big Header 4</h4>
      </div>
      <div class="right">

      </div>
    </div>
  </header>
  <section class="panel blue">
    <div class="inner">
      <div class="left two-thirds">
        <div class="burst">
         <h4 class="big">Big Burst Header</h4>
        </div>
      </div>
      <div class="right third">
        <div class="comics-thought">
          <p><strong>THOUGHT</strong> Nightwing amphibian vertigo elektra plastic man primal screamer, <strong>she-hulk</strong> johann krauss.</p>
        </div>
      </div>
      <div class="half">
        <div class="comics-dialog">
          <h4><strong>DIALOG</strong> Nightwing amphibian vertigo elektra plastic man primal screamer, <strong>she-hulk</strong> johann krauss.</h4>
        </div>
      </div>

    </div>
  </section>
  <section class="comic panel grey">
    <div class="inner single">
		<div class="comic-pane">
      <div class="text">
        <div class="holder">
        <h2 class="yellow">Yellow Full Panel Header</h2>
        <p>Captain universe; angel montana tempest nova franklin "foggy" nelson! Augustus "gus" beezer boom boom black knight john stacy micah sanders. Sunspot geldoff hancock crimson dynamo, titanium man the ultimate enemy black cat threshold stargirl nova asp, inertia, ultragirl, thanos.</p>
        </div>
      </div>
      <div class="comic-image"><span class="cimg"></span></div>
    </div>
	 </div>
  </section>
  <section class="comic panel pink">
    <div class="double inner">
      <div class="half left" id="">
      <div class="comic-pane">
      <div class="text">
        <div class="holder">
        <h2 class="pink">Pink 1/2 Panel Header</h2>
        <p>Sunspot geldoff hancock crimson dynamo, titanium man the ultimate enemy black cat threshold stargirl nova asp, inertia, ultragirl, thanos.</p>
        </div>
      </div>
      <div class="comic-image"><span class="cimg"></span></div>
    </div>
    </div>
    <div class="half right" id="">
      <div class="comic-pane">
      <div class="text">
        <div class="holder">
        <h2 class="blue">Blue 1/2 Panel Header</h2>
        <p>Captain universe; angel montana tempest nova franklin "foggy" nelson! Augustus "gus" beezer boom boom black knight john stacy micah sanders.</p>
        </div>
      </div>
      <div class="comic-image"><span class="cimg"></span></div>
      </div>
    </div>
    </div>
  </section>
  <section class="comic panel yellow">
    <div class="triple inner">
      <div class="third left" id="">
      <div class="comic-pane">
      <div class="text">
        <div class="holder">
        <h2 class="yellow">Yellow 1/3 Panel Header</h2>
        <p>Diablo boomerang wong stardust, venom franklin "foggy" nelson fountain! Quill sobek alex woolsly polaris captain epic elastigirl toad!</p>
        </div>
      </div>
      <div class="comic-image"><span class="cimg"></span></div>
    </div>
    </div>
    <div class="third left" id="">
      <div class="comic-pane">
      <div class="text">
        <div class="holder">
        <h2 class="orange">Orange 1/3 Panel Header</h2>
        <p>Nightwing amphibian vertigo elektra plastic man primal screamer, she-hulk johann krauss.</p>
        </div>
      </div>
      <div class="comic-image"><span class="cimg"></span></div>
    </div>
    </div>
    <div class="third right" id="">
      <div class="comic-pane">
      <div class="text">
        <div class="holder">
          <h2 class="green">Green 1/3 Panel Header</h2>
        <p>Dreamcatcher. Scorpion power girl deacon frost hit-girl x-man offspring green arrow?</p>
        </div>
      </div>
      <div class="comic-image"><span class="cimg"></span></div>
      </div>
    </div>
    </div>
  </section>
  <section class="comic panel orange">
    <div class="double triple inner">
      <div class="third left" id="">
      <div class="comic-pane">
      <div class="text">
        <div class="holder">
        <h2 class="blue">Blue 1/3 Panel Header</h2>
        <p>Proteus whizzer frigga fountain captain spain corsair.</p>
        </div>
      </div>
      <div class="comic-image"><span class="cimg"></span></div>
    </div>
    </div>
    <div class="two-thirds right" id="">
      <div class="comic-pane">
      <div class="text">
        <div class="holder">
        <h2 class="pink">Pink 2/3 Panel Header</h2>
        <p>Bishop boomerang dolores betty brant sobek mister fantastic dazzler sunspot carol danvers brother voodoo magog lilandra neramani captain planet phoebe mcallister nathaniel richards.</p>
        </div>
      </div>
      <div class="comic-image"><span class="cimg"></span></div>
      </div>
    </div>
    </div>
  </section>
  <section class="comic panel green">
    <div class="double triple inner">
      <div class="two-thirds left" id="">
      <div class="comic-pane">
      <div class="text">
        <div class="holder">
        <h2 class="yellow">Yellow 2/3 Panel Header</h2>
        <p>Medusa doctor spectrum kraven the hunter, thing mr incredible, omniscient. Robbie robertson lockjaw sentry matt parkman hard-drive invisible woman monica dawson sabretooth guardian kang the conqueror toad light lass.</p>
        </div>
      </div>
      <div class="comic-image"><span class="cimg"></span></div>
      </div>
    </div>
      <div class="third right" id="">
      <div class="comic-pane">
      <div class="text">
        <div class="holder">
        <h2 class="orange">Orange 1/3 Panel Header</h2>
        <p>Lieberman firestar saluki agent 13 lady lark hawkwoman maverick arnim zola.</p>
        </div>
      </div>
      <div class="comic-image"><span class="cimg"></span></div>
    </div>
    </div>
    </div>
   </section>
   <section class="comic panel yellow">
    <div class="triple inner">
      <div class="third left" id="">
      <div class="comic-pane image-heavy">
      <div class="text">
        <div class="holder">
        <span class="trapezoid"><h2 class="yellow">Yellow 1/3 Panel Header</h2></span>
        <div class="caption"><p>Diablo boomerang wong stardust, venom franklin "foggy" nelson fountain! Quill sobek alex woolsly polaris captain epic elastigirl toad!</p></div>
        </div>
      </div>
      <div class="comic-image"><span class="cimg"></span></div>
    </div>
    </div>
    <div class="third left" id="">
      <div class="comic-pane">
      <div class="text">
        <div class="holder">
        <h2 class="orange">Orange 1/3 Panel Header</h2>
        <p>Nightwing amphibian vertigo elektra plastic man primal screamer, she-hulk johann krauss.</p>
        </div>
      </div>
      <div class="comic-image"><span class="cimg"></span></div>
    </div>
    </div>
    <div class="third right" id="">
      <div class="comic-pane image-heavy">
      <div class="text">
        <div class="holder">
          <span class="trapezoid"><h2 class="green">Green 1/3 Panel Header</h2></span>
        <div class="caption"><p>Dreamcatcher. Scorpion power girl deacon frost hit-girl x-man offspring green arrow?</p></div>
        </div>
      </div>
      <div class="comic-image"><span class="cimg"></span></div>
      </div>
    </div>
    </div>
  </section>
  <section class="comic panel ltgrey">
    <div class="inner section" id="panels">
    </div>
  </section>

  <footer>
	  <div class="top">
		 <div class="inner">
	  <div class="left quarter company">
      <h1>Kick Ass <span>//</span><br><span>//</span> Company</h1>
		 <!--<img class="logo" src="../img/logo.png">-->
		 <p>Nightwing amphibian vertigo elektra plastic man primal screamer.</p>
		 <ul>
			<li><a>Superman</a></li>
			<li><a>Spiderman</a></li>
			<li><a>Wonderwoman</a></li>
			<li><a>Batman</a></li>
			<li><a>Wolverine</a></li>
			<li><a>Catwoman</a></li>
		 </ul>
	  </div>
	  <div class="left quarter">
		 <h4>SECTION 1</h4>
		 <ul>
			<li><a>Superman</a></li>
			<li><a>Spiderman</a></li>
			<li><a>Wonderwoman</a></li>
			<li><a>Batman</a></li>
			<li><a>Wolverine</a></li>
			<li><a>Catwoman</a></li>
		 </ul>
	  </div>
	  <div class="left quarter">
		 <h4>SECTION 2</h4>
		 <ul>
			<li><a>Superman</a></li>
			<li><a>Spiderman</a></li>
			<li><a>Wonderwoman</a></li>
			<li><a>Batman</a></li>
			<li><a>Wolverine</a></li>
			<li><a>Catwoman</a></li>
		 </ul>
	  </div>
	  <div class="left quarter">
		 <h4>SECTION 3</h4>
		 <ul>
			<li><a>Superman</a></li>
			<li><a>Spiderman</a></li>
			<li><a>Wonderwoman</a></li>
			<li><a>Batman</a></li>
			<li><a>Wolverine</a></li>
			<li><a>Catwoman</a></li>
		 </ul>
	  </div>
		 </div>
	  </div>
	  <div class="bottom">
		 <div class="inner">
		 <div class="left half">
			<p>Company &copy; 2014</p>
		 </div>
		 <div class="right half">
			<p>Scorpion power girl deacon frost hit-girl x-man offspring.</p>
		 </div>
	  </div>
	  </div>
	</footer>
  </div>
            
          
!
            
              // COLOR PROFILES 
$pink: #f03485;
$yellow: #ffce55;
$blue: #51cbf1;
$orange: #fa9939;
$green: #9dc705;
$dkblue: #038ecf;
$grey: #484848;
$ltgrey: #acacac;
$dkgrey: #222;
$red: #f3655d;


/*===========================
START // General Page/Layout
============================*/
@import url(//fonts.googleapis.com/css?family=Patrick+Hand+SC|Bangers|Happy+Monkey);

/* LAYOUT */
.whole-container {
  width: 100%;
  height: auto;
  margin: -10px;
}

section, 
header {
  display: inline-block;
  width: 100%;
  height: auto;
  border-top: 1px solid $dkgrey;
}

.inner {
  max-width: 1003px;
  margin: 0 auto;
  width: 100%;
  height: auto;
}

.double, 
.triple, 
.double.triple {
  max-width: 1003px;
  display: block;
}

.left {
  float: left;
}

.right {
  float: right;
}

.half {
  width: 50%;
}

.third {
  width: 33.33%;
}

.two-thirds {
  width: 66.66%;
}

/* TYPOGRAPHY */

h1, 
h2, 
h3, 
h4, 
h5 {
  font-family: "Bangers", sans-serif;
  color: $dkgrey;
}

p, 
ul, 
li, 
ol {
  font-family: 'Happy Monkey', cursive;
  color: $dkgrey;
}

.blue {
  color: $blue;
}

.dkblue {
	color: $dkblue;
}

.yellow {
  color: $yellow;
}

.orange {
  color: $orange;
}

.pink {
  color: $pink;
}

.green {
  color: $green;
}

.red {
	color: $red
}

/*===========================
END // General Page/Layout
============================*/

/*===========================
START // Top Nav Bar
============================*/
#topnav {
  background: $dkgrey;
  width: 100%;
  height: 75px;
  padding: 0 1em;
  .logo {
    width: 7%;
    position: absolute;
    padding: 1.25em;
    background: #444;
    > img {
      width: 100%;
      //margin: 0 5%;
    }
    &:hover {
      background-color: $dkblue;
      transition: background-color 1s ease;
    }
  }
  .nav {
    margin-left: 20%;
    width: 80%;
    ul {
      list-style: none;
      width: 100%;
      height: 100%;
      margin: 0;
      li {
        float: left;
        line-height: 4.2em;
        width: auto;
        display: inline-block;
        padding: 0.25em 3em;
        text-transform: uppercase;
        font-family: 'Happy Monkey',cursive;
        color: #fff;
        &:not(.action):hover,
        &:hover a,
        &:hover a:hover,
        a:hover {
          background-color: $blue;
          color: #fff;
          text-decoration: none;
          cursor: pointer;
        }
        &.action {
          padding: 1em 1em 0;
          line-height: 3em;
          .btn {
            padding: .5em 2em;
            font-weight: 800;
            color: $dkgrey;
            background: #fff;
            border: 2px solid #444;
            height: auto;
            &:hover {
              background: $yellow;
              color: $dkgrey;
              border-color: #fff;
            }
          }
        }
      }
    }
  }
}
/*===========================
END // Top Nav Bar
============================*/

/*===========================
START // Comic (Dot) Panels
Original by @ashandrien | Comic Book Half Tone Background | https://codepen.io/ashandrien/pen/rnzsd
============================*/
.panel {
  padding: 1em;
  background-size: 8px 8px, 8px 8px, 8px 8px, 8px 8px, 8px 8px, 100% 100%;
  border-top: 3px solid #444;
  margin-bottom: -4px;
  &.red {
    background-image: radial-gradient(ellipse farthest-corner, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, #ffffff 30%, #ffffff 40%, rgba(0, 0, 0, 0) 90%), radial-gradient(ellipse farthest-corner at 0px 0px, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, #ffffff 15%, #ffffff 20%, rgba(0, 0, 0, 0) 50%), radial-gradient(ellipse farthest-corner at 8px 8px, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, #ffffff 15%, #ffffff 20%, rgba(0, 0, 0, 0) 50%), radial-gradient(ellipse farthest-corner at 0px 8px, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, #ffffff 15%, #ffffff 20%, rgba(0, 0, 0, 0) 40%), radial-gradient(ellipse farthest-corner at 8px 0px, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, #ffffff 15%, #ffffff 20%, rgba(0, 0, 0, 0) 50%), linear-gradient(40deg, #bd2d10 0, #f4502f 30%, #ff6e51 50%, #f4502f 70%, #bd2d10 100%);
  }
  &.blue {
    background-image: radial-gradient(ellipse farthest-corner, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, #ffffff 30%, #ffffff 40%, rgba(0, 0, 0, 0) 90%), radial-gradient(ellipse farthest-corner at 0px 0px, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, #ffffff 15%, #ffffff 20%, rgba(0, 0, 0, 0) 50%), radial-gradient(ellipse farthest-corner at 8px 8px, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, #ffffff 15%, #ffffff 20%, rgba(0, 0, 0, 0) 50%), radial-gradient(ellipse farthest-corner at 0px 8px, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, #ffffff 15%, #ffffff 20%, rgba(0, 0, 0, 0) 40%), radial-gradient(ellipse farthest-corner at 8px 0px, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, #ffffff 15%, #ffffff 20%, rgba(0, 0, 0, 0) 50%), linear-gradient(40deg, #038ecf 0, #51cbf1 30%, #7ff9ff 50%, #51cbf1 70%, #038ecf 100%);
  }
  &.grey {
    background-image: radial-gradient(ellipse farthest-corner, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, #ffffff 30%, #ffffff 40%, rgba(0, 0, 0, 0) 90%), radial-gradient(ellipse farthest-corner at 0px 0px, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, #ffffff 15%, #ffffff 20%, rgba(0, 0, 0, 0) 50%), radial-gradient(ellipse farthest-corner at 8px 8px, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, #ffffff 15%, #ffffff 20%, rgba(0, 0, 0, 0) 50%), radial-gradient(ellipse farthest-corner at 0px 8px, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, #ffffff 15%, #ffffff 20%, rgba(0, 0, 0, 0) 40%), radial-gradient(ellipse farthest-corner at 8px 0px, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, #ffffff 15%, #ffffff 20%, rgba(0, 0, 0, 0) 50%), linear-gradient(40deg, #484848 0, #959595 30%, #acacac 50%, #959595 70%, #484848 100%);
  }
  &.ltgrey {
    background-image: radial-gradient(ellipse farthest-corner, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, #ffffff 30%, #ffffff 40%, rgba(0, 0, 0, 0) 90%), radial-gradient(ellipse farthest-corner at 0px 0px, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, #ffffff 15%, #ffffff 20%, rgba(0, 0, 0, 0) 50%), radial-gradient(ellipse farthest-corner at 8px 8px, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, #ffffff 15%, #ffffff 20%, rgba(0, 0, 0, 0) 50%), radial-gradient(ellipse farthest-corner at 0px 8px, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, #ffffff 15%, #ffffff 20%, rgba(0, 0, 0, 0) 40%), radial-gradient(ellipse farthest-corner at 8px 0px, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, #ffffff 15%, #ffffff 20%, rgba(0, 0, 0, 0) 50%), linear-gradient(40deg, #acacac 0, #dadada 30%, #f2f2f2 50%, #dadada 70%, #acacac 100%);
  }
  &.yellow {
    background-image: radial-gradient(ellipse farthest-corner, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, #ffffff 30%, #ffffff 40%, rgba(0, 0, 0, 0) 90%), radial-gradient(ellipse farthest-corner at 0px 0px, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, #ffffff 15%, #ffffff 20%, rgba(0, 0, 0, 0) 50%), radial-gradient(ellipse farthest-corner at 8px 8px, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, #ffffff 15%, #ffffff 20%, rgba(0, 0, 0, 0) 50%), radial-gradient(ellipse farthest-corner at 0px 8px, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, #ffffff 15%, #ffffff 20%, rgba(0, 0, 0, 0) 40%), radial-gradient(ellipse farthest-corner at 8px 0px, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, #ffffff 15%, #ffffff 20%, rgba(0, 0, 0, 0) 50%), linear-gradient(40deg, #ffce55 0, #fffc83 30%, #ffffb1 50%, #fffc83 70%, #ffce55 100%);
  }
  &.orange {
    background-image: radial-gradient(ellipse farthest-corner, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, #ffffff 30%, #ffffff 40%, rgba(0, 0, 0, 0) 90%), radial-gradient(ellipse farthest-corner at 0px 0px, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, #ffffff 15%, #ffffff 20%, rgba(0, 0, 0, 0) 50%), radial-gradient(ellipse farthest-corner at 8px 8px, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, #ffffff 15%, #ffffff 20%, rgba(0, 0, 0, 0) 50%), radial-gradient(ellipse farthest-corner at 0px 8px, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, #ffffff 15%, #ffffff 20%, rgba(0, 0, 0, 0) 40%), radial-gradient(ellipse farthest-corner at 8px 0px, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, #ffffff 15%, #ffffff 20%, rgba(0, 0, 0, 0) 50%), linear-gradient(40deg, #fa9939 0, #ffc767 30%, #fff595 50%, #ffc767 70%, #fa9939 100%);
  }
  &.pink {
    background-image: radial-gradient(ellipse farthest-corner, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, #ffffff 30%, #ffffff 40%, rgba(0, 0, 0, 0) 90%), radial-gradient(ellipse farthest-corner at 0px 0px, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, #ffffff 15%, #ffffff 20%, rgba(0, 0, 0, 0) 50%), radial-gradient(ellipse farthest-corner at 8px 8px, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, #ffffff 15%, #ffffff 20%, rgba(0, 0, 0, 0) 50%), radial-gradient(ellipse farthest-corner at 0px 8px, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, #ffffff 15%, #ffffff 20%, rgba(0, 0, 0, 0) 40%), radial-gradient(ellipse farthest-corner at 8px 0px, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, #ffffff 15%, #ffffff 20%, rgba(0, 0, 0, 0) 50%), linear-gradient(40deg, #f03485 0, #ff62b3 30%, #ff90e1 50%, #ff62b3 70%, #f03485 100%);
  }
  &.green {
    background-image: radial-gradient(ellipse farthest-corner, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, #ffffff 30%, #ffffff 40%, rgba(0, 0, 0, 0) 90%), radial-gradient(ellipse farthest-corner at 0px 0px, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, #ffffff 15%, #ffffff 20%, rgba(0, 0, 0, 0) 50%), radial-gradient(ellipse farthest-corner at 8px 8px, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, #ffffff 15%, #ffffff 20%, rgba(0, 0, 0, 0) 50%), radial-gradient(ellipse farthest-corner at 0px 8px, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, #ffffff 15%, #ffffff 20%, rgba(0, 0, 0, 0) 40%), radial-gradient(ellipse farthest-corner at 8px 0px, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, #ffffff 15%, #ffffff 20%, rgba(0, 0, 0, 0) 50%), linear-gradient(40deg, #9dc705 0, #cbf533 30%, #f9ff61 50%, #cbf533 70%, #9dc705 100%);
  }
}
/*===========================
END // Comic (Dot) Panels
============================*/

/*===========================
START // Big & "Fancy" Headlines
Original by @sudocoda | Transparent Action Onomatopoeia | https://codepen.io/sudocoda/pen/xkLie
============================*/
.big {
  font-family: "Bangers";
  margin: 0 0 -1em 0;
  text-shadow: -1px -1px yellow, 1px 1px orange,  2px 2px orange;
  -webkit-transform: rotate(-10deg) skew(-10deg, 0);
  -moz-transform: rotate(-10deg) skew(-10deg, 0);
  -ms-transform: rotate(-10deg) skew(-10deg, 0);
  -o-transform: rotate(-10deg) skew(-10deg, 0);
  transform: rotate(-10deg) skew(-10deg, 0);
  padding-bottom: 50px;
  float: left;
  width: 100%;
}

h1.big {
  font-size: 150px;
  margin-bottom: -.75em;
}

h2.big {
  font-size: 110px;
}

h3.big {
  font-size: 80px;
}

h4.big {
  font-size: 60px;
  margin-top: -.15em;
}

.burst {
  background-image: url(//dl.dropboxusercontent.com/u/55861319/Woobox/FrontEnd/img/comicburst_1.png);
  width: 100%;
  height: auto;
  min-height: 350px;
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  > .big {
    transform: rotate(-22deg);
    line-height: 1em;
    font-size: 3em;
    text-align: left;
    margin: 2em 1em;
    max-width: 500px;
  }
}
/*===========================
END // Big & "Fancy" Headlines
============================*/

/*===========================
START // Main Header Panel
============================*/
header {
  &.main {
    margin: 0;
    width: 100%;
    display: block;
    min-height: 400px;
    border-top: none;
    h1.big {
      width: auto;
      line-height: .75em;
      margin-top: .5em;
    }
  }
}
/*===========================
END // Main Header Panel
============================*/

/*===========================
START // Comic (Content) Panes
Original by @beyondSimple | Comic style panes | https://codepen.io/beyondSimple/pen/sDibB
============================*/
/* BASE PANE PIECES */
.comic {
  .single,
  .triple,
  .double,
  .triple.double {
    .comic-pane {
      width: 98%;
      max-width: 943px;
      height: auto;
      min-height: 220px;
      top: .5em;
      left: 1.5em;
      position: relative;
      margin: 0px 1%;
      overflow: hidden;
      .text {
        width: 60%;
        height: 90.5%;
        position: absolute;
        left: 1em;
        transform: skew(-15deg);
        background: white;
        box-shadow: 3px 5px 10px rgba(0, 0, 0, 0.1);
        z-index: 1;
        border-right: 3px solid;
        &::before {
          content: "";
          dislay: block;
          position: absolute;
          height: 100%;
          width: 4em;
          left: -2em;
          transform: skew(15deg);
          background: white;
          border-left: 1px solid rgba(0, 0, 0, 0.05);
          -webkit-backface-visibility: hidden;
        }
        .holder {
          width: 85%;
          line-height: 1.2em;
          margin-top: 1.5em;
          margin-left: 2em;
          transform: skew(15deg);
        }
        h2 {
          font-size: 2em;
          margin-bottom: 0;
          text-shadow: -1px -1px black, 1px 1px black,  2px 2px black;
          font-weight: 400;
        }
      }
      .comic-image {
        width: 42%;  
        /* If you want a space between the text/image sections, just use: 
        width: 40%; */
        height: 100%;
        right: -1.5em;
        top: 0;
        transform: skew(-15deg);
        position: absolute;
        overflow: hidden;
        .cimg {
          display: block;
          transform: skew(15deg);
          width: 100%;
          height: 90%;
          position: absolute;
          left: -2em;
          top: 1px;
          background: url("//dl.dropboxusercontent.com/u/55861319/Photos/comics/MarvelGirl_1.jpg");
          background-size: cover;
          background-position: top center;
        }
      }
      &:not(.image-heavy) {
        .comic-image:hover {
          transform: skew(0deg);
          z-index: 1000;
          right: -2em;
          width: 100%;
          overflow: visible;
          .cimg {
            transition: all 0.5s ease;
            transform: skew(0deg);
            width: 100%;
            background-color: rgba(255,255,255,0.5);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: top right;
          }
        }
      }
    }
  }
}
/* DIFFERENT LAYOUT OPTIONS (# of items/row) */
.comic {
  .double {
    max-width: 963px;
    width: 96%;
    .half {
      width: 50%;
      .comic-pane {
        .text {
          left: 2em;
          width: 50%;
          .holder {
            margin: 2em 1.5em 1.5em -.5em;
            width: 90%;
            h2 {
              margin: 0.25em 0;
              font-size: 1.75em;
            }
            p {
              font-size: .8em;
              line-height: 1.15em;
            }
          }
        }
        .comic-image {
          width: 48%;
          /* If you want the space between the text/image sections, just use: 
          width: 47%; */
          right: -1.25em;
        }
      }
    }
  }
  .triple {
    max-width: 963px;
    width: 96%;
    .third {
      width: 33.33%;
      .comic-pane {
        .text {
          left: 2em;
          width: 60%;
          .holder {
            margin: 2em 1.5em 1.5em -.5em;
            width: 95%;
            h2 {
              margin: 0.25em 0;
              font-size: 1.5em;
            }
            p {
              font-size: .8em;
              line-height: 1.15em;
            }
          }
        }
        .comic-image {
          width: 40%;
          /* If you want the space between the text/image sections, just use: 
          width: 39%; */
          right: -1.25em;
        }
        &.image-heavy {
          .text {
            width: 10%;
            &::before {
              background: linear-gradient(to bottom, #fff 0, #fff 25%, rgba(255, 255, 255, 0) 26%);
            }
            .holder {
              margin: 0;
              width: 100%;
              min-width: 220px;
              height: 100%;
              border-left: 30px solid Efff;
              margin-left: -30px;
              .trapezoid {
                	height: 0px; 
                  width: 43px; 
                  padding: 0px;  
                  -webkit-transform: skew(345deg); 
                  transform: skew(345deg); 
                  border-top: 199px solid #fff; 
                  border-left: 50px solid transparent; 
                  border-right: 0px solid transparent; 
                  position:absolute;
                  top:0;
                  right:73%;
              }
              h2 {
                transform: rotate(-90deg);
                position: absolute;
                left: -4em;
                bottom: 4.5em;
                font-size: 1.25em;
                line-height: 2em;
                width: 200px;
              }
              .caption {
                visibility: hidden;
                background: rgba(255, 255, 255, 0.75);
                height: 77.75%;
                width: 77.75%;
                margin: 0 0 0 28%;
                transform: skew(-15deg);
                padding: 10%;
                p {
                  transform: skew(15deg);
                }
              }
            }
            &:hover {
              .holder {
                .caption {
                  visibility: visible;
                }
              }
            }
          }
          .comic-image {
            width: 90%;
          }
        }
      }
    }
    &.double {
      max-width: 963px;
      width: 96%;
      .two-thirds {
        width: 66.66%;
        .comic-pane {
          .text {
            h2 {
              margin-top: 0.25em;
            }
            p {
              font-size: .9em;
            }
          }
        }
      }
    }
  }
}

/*===========================
END // Comic (Content) Panes
============================*/

/*===========================
START // Comic Dialog & Thought Bubbles
Original by @fliptheweb | Comics dialog boxes (webkit) | https://codepen.io/fliptheweb/pen/BAFjo
============================*/
.comics-dialog,
.comics-thought {
  display: inline-block;
  vertical-align: top;
  position: relative;
  padding: 40px 20px;
  background-color: #fff;
  margin: 0em 2em 2em 4em;
  -webkit-filter: drop-shadow(0 4px 0 #f3655d);
  filter: drop-shadow(0 4px 0 #f3655d);
  -moz-transition: 2s;
  -o-transition: 2s;
  -webkit-transition: 2s;
  transition: 2s;
  font-size: 1.1em;
  text-align: center;
  &::after {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
  }
  &:hover {
    top: -30px;
    -webkit-filter: drop-shadow(0 10px 0 #f3655d);
    filter: drop-shadow(0 10px 0 #f3655d);
  }
  > p {
    font-weight: 400;
    > strong {
      font-weight: 800;
    }
  }
  > h4 {
   font-size: 1.5em;
   font-weight: 400;
   > strong {
    text-shadow: -1px -1px #ffce55, 1px 1px #fa9939;
   }
  }
}
/* DIALOG BUBBLE */
.comics-dialog {
  width: 80%;
  height: 65%;
  padding: 2em 4em;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  &::after {
    width: 65%;
    height: 45%;
    right: -2.5em;
    bottom: -3.75em;
    border-right: 90px solid #fff;
    -moz-border-radius-bottomright: 370px 200px;
    -webkit-border-bottom-right-radius: 370px 200px;
    border-bottom-right-radius: 370px 200px;
    -moz-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
  }
}
/* THOUGHT BUBBLE */
.comics-thought {
  width: 75%;
  padding: 2em;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -moz-box-shadow: -60px -50px 0 -20px #fff, 60px -45px 0 -40px #fff;
  -webkit-box-shadow: -60px -50px 0 -20px #fff, 60px -45px 0 -40px #fff;
  box-shadow: -60px -50px 0 -20px #fff, 60px -45px 0 -40px #fff;
  &::after {
    width: 50%;
    height: 70%;
    right: -1.15em;
    bottom: -.575em;
    background: #fff;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -moz-box-shadow: -140px 0px 0 #fff, -50px 30px 0 -10px #fff, -60px 120px 0 -60px #fff, -90px 155px 0 -65px #fff, -120px 175px 0 -70px #fff;
    -webkit-box-shadow: -140px 0px 0 #fff, -50px 30px 0 -10px #fff, -60px 120px 0 -60px #fff, -90px 155px 0 -65px #fff, -120px 175px 0 -70px #fff;
    box-shadow: -140px 0px 0 #fff, -50px 30px 0 -10px #fff, -60px 120px 0 -60px #fff, -90px 155px 0 -65px #fff, -120px 175px 0 -70px #fff;
  }
}
/*===========================
END // Comic Dialog & Thought Bubbles
============================*/

/*===========================
START // Footer
============================*/
footer {
  width: 100%;
  margin: 0;
  > .top, 
  > .bottom {
    width: 100%;
    margin: 0 auto;
    display: inline-block;
    padding: 0 1em;
  }
  > .top {
    background: $dkgrey;
    margin-bottom: -4px;
    .inner {
      h1 {
        color: #fff;
      }
      h4 {
        color: #fff;
        font-weight: 400;
        margin: 1em 0 0;
        font-size: 1.5em;
        border-bottom: 1px dotted rgba(255,255,255,0.5);
      }
      p,
      ul, 
      ul li {
        color: #ccc;
        font-weight: 400;
        font-family: 'Happy Monkey', cursive;
        font-size: .9em;
      }
      p {
        font-size: .75em;
      }
      ul {
        margin: .25em 0 1em;
      }
      ul, 
      ul li {
        list-style: none;
        margin-left: 0;
        line-height: 1.5em;
        padding-left: 0;
      }
      ul li {
        a {
          &:hover {
            color: $yellow;
            text-decoration: none;
            cursor: pointer;
          }
        }
      }
      .quarter {
        width: 21.5%;
        padding: 2em .25em 2em 1.85em;
        &:last-child {
          padding-right: 1em;
        }
        &:not(.company) {
          ul li {
            width: 48%;
            padding: 0 1%;
            float: left;
          }
        }
        &.company {
          padding-left: 1em;
          width: 21.75%;
          border-right: 3px solid rgba(255,255,255,0.2);
          background: $blue;
          .logo-square {
            width: 50%;
          }
          .logo {
            width: 90%;
            margin: 0 auto 1em;
          }
          h1 {
            margin-top: 0;
            font-weight: 400;
            > span {
              color: $dkblue;
              letter-spacing: -1em;
              margin: 0 .5em 0 .6em;
            }
          }
          p {
            margin: 0 0 1em;
            font-size: 1em;
            color: $yellow;
            display: none;
          }
          ul {
            li {
              float: left;
              margin: 0 1.5em .75em 0;
              padding: 0 .4em .25em;
              border-bottom: 1px dotted rgba(255,255,255,0.25);
              color: $dkgrey;
              border-bottom-color: $dkblue;
            }
          }
        }
      }
    }
  }
  > .bottom {
    background: #333;
    margin-bottom: -10px;
    .inner {
      p {
        font-size: .75em;
        color: $ltgrey;
      }
      .half {
        width: 45%;
        margin: .5em 1em;
      }
      .right {
        text-align: right;
      }
    }
  }
  
}
/*===========================
END // Footer
============================*/

/* JUST FOR GUIDANCE */
.inner-container {
  position: absolute;
  top: 0;
  left: 1em;
  width: 1003px;
  border: 1px dashed red;
  height: 6200px;
}
            
          
!
            
              /*
This pen is sort of a mashup I'm playing around with, based on several others created by other users; including the following (subject to change/add/remove as I continue playing with this): 
- [Header Text] Transparent Action Onomatopoeia by @sudocoda https://codepen.io/sudocoda/pen/xkLie
- [Background Pattern] Comic Book Half Tone Background by @ashandrien https://codepen.io/ashandrien/pen/rnzsd
- Comic style panes by @beyondSimple https://codepen.io/beyondSimple/pen/sDibB
- Comics dialog boxes (webkit) by @fliptheweb https://codepen.io/fliptheweb/pen/BAFjo

// NOT USED YET
- Comic style masonry divs by @ebrewe https://codepen.io/ebrewe/pen/pehbt
*/
            
          
!
999px
🕑 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 ..................

Console