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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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

HTML

              
                <header id="header" class="header">
<nav id="nav-bar" class="nav">
  <div class="nav__logo">
    <a href="#">
      <img id="header-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/donut.svg">
      <span>The Donut Hole</span>
    </a>
  </div>
  <ul class="nav__items">
    <li><a class="nav-link" href="#header">Home</a></li>
    <li><a class="nav-link" href="#video">Watch</a></li>
    <li><a class="nav-link" href="#form">Specials</a></li>
  </ul>
</nav>
<section class="hero">
  <div class="hero__image">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/donut-glazed-2.png">
  </div>
  <div class="hero__content">
    <h1 class"hero__heading">There always room <br>for one more</h1>
    <p class="hero__subhead">Buy 3 glazed donuts and get 1 free</p>
    <a class="button button--large" href="#">Dive In</a>
  </div>
</section>
<section class="commercial">
  <div class="commercial__video">
    <iframe id="video" src="https://www.youtube.com/embed/w7KsiKs4zHY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
  <div class="commercial__content">
    <h2>Get Specials Delivered to Your Inbox</h2>
    <p>We'll let you know when sweet deals are available.</p>
    <form id="form" class="form" action="https://www.freecodecamp.com/email-submit" method="get">
      <input id="email" name="email" type="email" placeholder="email address">
      <input type="submit" value="Sign Up" id="submit" class="button button--med">
    </form>
  </div>
</section>
<section id="section-product-menu" class="products">
  <article class="product">
    <figure class="product__image">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/donut-purple.png">
    </figure>
    <h2 class="product__title">Purple Glaze</h2>
    <small>$1 single / $10 dozen</small>
    <p class="product__description">Tripped out purple frosting and psychedelic sprinkles even Hendrix couldn't resist.</p>
    <a class="button button--med" href="#">Bag It</a>
  </article>
  <article class="product">
    <figure class="product__image">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/donut-brown.png">
    </figure>
    <h2 class="product__title">Haight-zlenut</h2>
    <small>$1 single / $10 dozen</small>
    <p class="product__description">The perfectly creamy complement to your morning stroll (or late-night munchies).</p>
    <a class="button button--med" href="#">Bag It</a>
  </article>
  <article class="product">
    <figure class="product__image">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/donut-pink.png">
    </figure>
    <h2 class="product__title">Beatleberry</h2>
    <small>$1 single / $10 dozen</small>
    <p class="product__description">Can't buy me love, but you can enjoy thick strawberry frosting and a gooey filling.</p>
    <a class="button button--med" href="#">Bag It</a>
  </article>
</section>
<footer class="footer">
  <div class="footer__logo">
    <svg viewBox="0 0 270 216" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Group" transform="translate(0.000004, 0.000000)" fill-rule="nonzero">
          <path d="M134.999999,0 C60.5223795,0 2.84217094e-14,48.4422 2.84217094e-14,108.04716 C2.84217094e-14,167.65176 60.5223795,216.00006 134.999999,216.00006 C209.477642,216.00006 269.999993,167.65176 269.999993,108.04716 C269.999993,48.4422 209.477642,3.41060513e-13 134.999999,3.41060513e-13 L134.999999,0 Z" id="Path" fill="#000000"></path>
          <path d="M134.999999,10.6629 C202.224602,10.6629 256.574579,54.2469 256.574579,108.04716 C256.574579,110.21196 256.468079,112.33446 256.294979,114.46386 C251.075309,123.39816 244.055009,128.77656 235.877156,131.73276 C226.791266,135.01656 216.136259,135.18306 205.110596,132.39306 C202.505216,131.71536 199.523006,133.07976 198.304646,135.50736 C193.093856,146.05506 186.781406,149.56746 177.886829,149.56746 C168.992249,149.56746 157.103849,144.85446 144.230069,136.16766 C141.823049,134.56206 138.265109,135.07656 136.398569,137.30016 C128.407679,146.73606 119.088509,151.07736 108.895109,151.07736 C98.7017355,151.07736 87.3630855,146.46936 76.2638985,136.63986 C74.7988185,135.38196 72.7117185,134.90856 70.8564285,135.41286 C53.6369265,139.77006 44.9547135,138.67476 39.7169385,135.88476 C34.4791635,133.09416 31.2930705,127.68156 26.7576855,120.03156 C26.1032055,118.89396 25.0706625,117.98376 23.8674915,117.48366 L13.611966,113.33166 C13.494846,111.57816 13.425486,109.82466 13.425486,108.04716 C13.425486,54.2469 67.7754885,10.6629 135.000059,10.6629 L134.999999,10.6629 Z" id="Path" fill="#FF9DDA"></path>
          <path d="M146.933701,20.4768 C143.638288,20.4768 140.966848,23.1807 140.966848,26.5164 C140.966848,29.8518 143.638288,32.5557 146.933701,32.5557 C150.229108,32.5557 152.900551,29.8518 152.900551,26.5164 C152.900551,23.1807 150.229111,20.4768 146.933701,20.4768 Z" id="Path" fill="#FFFFFF"></path>
          <path d="M126.049709,26.5164 C121.106639,26.5164 117.099449,30.5721 117.099449,35.5752 C117.099449,40.5786 121.106639,44.6343 126.049709,44.6343 C130.992809,44.6343 134.999999,40.5786 134.999999,35.5752 C134.999999,30.5721 130.992809,26.5164 126.049709,26.5164 Z" id="Path" fill="#FFFFFF"></path>
          <path d="M203.618789,29.5359 C198.675689,29.5359 194.668499,33.5916 194.668499,38.595 C194.668499,43.5981 198.675689,47.6538 203.618789,47.6538 C208.561859,47.6538 212.569049,43.5981 212.569049,38.595 C212.569049,33.5916 208.561859,29.5359 203.618789,29.5359 Z" id="Path" fill="#FFFFFF"></path>
          <path d="M69.3646485,32.5557 C64.4215395,32.5557 60.4143645,36.6114 60.4143645,41.6145 C60.4143645,46.6179 64.4215395,50.6736 69.3646485,50.6736 C74.3077185,50.6736 78.3149085,46.6179 78.3149085,41.6145 C78.3149085,36.6114 74.3077185,32.5557 69.3646485,32.5557 Z" id="Path" fill="#FFFFFF"></path>
          <path d="M102.182309,35.5752 C98.8869285,35.5752 96.2154585,38.2791 96.2154585,41.6145 C96.2154585,44.9502 98.8869285,47.6538 102.182309,47.6538 C105.477719,47.6538 108.149159,44.9502 108.149159,41.6145 C108.149159,38.2791 105.477719,35.5752 102.182309,35.5752 Z" id="Path" fill="#FFFFFF"></path>
          <path d="M170.801099,35.5752 C167.505689,35.5752 164.834249,38.2791 164.834249,41.6145 C164.834249,44.9502 167.505688,47.6538 170.801099,47.6538 C174.096512,47.6538 176.767949,44.9502 176.767949,41.6145 C176.767949,38.2791 174.096512,35.5752 170.801099,35.5752 Z" id="Path" fill="#FFFFFF"></path>
          <path d="M104.513129,57.8451 C96.2564685,61.0593 89.4095385,66.2892 89.4095385,73.3209 C89.4095385,80.3529 96.2564685,85.488 104.513129,88.7025 C112.769789,91.9167 123.370769,93.6096 134.999999,93.6096 C146.629199,93.6096 157.230209,91.9167 165.486869,88.7025 C173.743529,85.4877 180.590459,80.3529 180.590459,73.3209 C180.590459,66.2892 173.743532,61.0593 165.486869,57.8451 C157.230209,54.6309 146.629199,52.9383 134.999999,52.9383 C124.787069,53.0253 113.346089,54.4899 104.513129,57.8451 Z" id="Path" fill="#000000"></path>
          <path d="M203.618789,62.7522 C198.675689,62.7522 194.668499,66.8079 194.668499,71.8113 C194.668499,76.8144 198.675689,80.8701 203.618789,80.8701 C208.561859,80.8701 212.569049,76.8144 212.569049,71.8113 C212.569049,66.8079 208.561859,62.7522 203.618789,62.7522 Z" id="Path" fill="#FFFFFF"></path>
          <path d="M134.999999,63.4128 C144.790859,63.4128 153.552989,65.0313 159.333569,67.2816 C165.114089,69.5319 166.978589,72.0144 166.978589,73.3209 C166.978589,74.6277 165.114089,77.0157 159.333569,79.266 C153.552989,81.5163 144.790859,83.1348 134.999999,83.1348 C125.209109,83.1348 116.446979,81.5166 110.666428,79.266 C104.885878,77.0157 103.021408,74.6277 103.021408,73.3209 C103.021408,72.0144 104.885878,69.5319 110.666428,67.2816 C116.446979,65.0313 125.209109,63.4128 134.999999,63.4128 Z" id="Path" fill="#FFFFFF"></path>
          <path d="M66.3812145,68.7915 C63.0858135,68.7915 60.4143645,71.4954 60.4143645,74.8308 C60.4143645,78.1662 63.0858135,80.8701 66.3812145,80.8701 C69.6766185,80.8701 72.3480585,78.1662 72.3480585,74.8308 C72.3480585,71.4954 69.6766185,68.7915 66.3812145,68.7915 Z" id="Path" fill="#FFFFFF"></path>
          <path d="M36.5469585,80.8701 C31.6038585,80.8701 27.5966835,84.9258 27.5966835,89.9292 C27.5966835,94.9323 31.6038585,98.988 36.5469585,98.988 C41.4900615,98.988 45.4972365,94.9323 45.4972365,89.9292 C45.4972365,84.9258 41.4900615,80.8701 36.5469585,80.8701 Z" id="Path" fill="#FFFFFF"></path>
          <path d="M236.436448,83.8899 C233.141068,83.8899 230.469598,86.5935 230.469598,89.9292 C230.469598,93.2646 233.141068,95.9685 236.436448,95.9685 C239.731861,95.9685 242.403301,93.2646 242.403301,89.9292 C242.403301,86.5935 239.731861,83.8899 236.436448,83.8899 Z" id="Path" fill="#FFFFFF"></path>
          <path d="M63.3977895,86.9094 C58.4546895,86.9094 54.4475115,90.9651 54.4475115,95.9685 C54.4475115,100.97166 58.4546895,105.02736 63.3977895,105.02736 C68.3408685,105.02736 72.3480585,100.97166 72.3480585,95.9685 C72.3480585,90.9651 68.3408685,86.9094 63.3977895,86.9094 Z" id="Path" fill="#FFFFFF"></path>
          <path d="M176.767948,92.9487 C173.472538,92.9487 170.801098,95.6526 170.801098,98.988 C170.801098,102.32376 173.472538,105.02736 176.767948,105.02736 C180.063361,105.02736 182.734801,102.32376 182.734801,98.988 C182.734801,95.6526 180.063361,92.9487 176.767948,92.9487 Z" id="Path" fill="#FFFFFF"></path>
          <path d="M212.569052,95.9685 C209.273668,95.9685 206.602198,98.6724 206.602198,102.00786 C206.602198,105.34326 209.273668,108.04716 212.569052,108.04716 C215.864462,108.04716 218.535901,105.34326 218.535901,102.00786 C218.535901,98.6724 215.864462,95.9685 212.569052,95.9685 Z" id="Path" fill="#FFFFFF"></path>
          <path d="M140.966848,98.988 C137.671438,98.988 134.999998,101.69196 134.999998,105.02736 C134.999998,108.36306 137.671438,111.06696 140.966848,111.06696 C144.262258,111.06696 146.933701,108.36306 146.933701,105.02736 C146.933701,101.69196 144.262261,98.988 140.966848,98.988 Z" id="Path" fill="#FFFFFF"></path>
          <path d="M99.1988985,102.00786 C95.9034885,102.00786 93.2320485,104.71176 93.2320485,108.04716 C93.2320485,111.38256 95.9034885,114.08646 99.1988985,114.08646 C102.494308,114.08646 105.165748,111.38256 105.165748,108.04716 C105.165748,104.71176 102.494309,102.00786 99.1988985,102.00786 Z" id="Path" fill="#FFFFFF"></path>
          <path d="M230.469598,114.08646 C225.526528,114.08646 221.519338,118.14216 221.519338,123.14556 C221.519338,128.14866 225.526528,132.20436 230.469598,132.20436 C235.412698,132.20436 239.419888,128.14866 239.419888,123.14556 C239.419888,118.14216 235.412698,114.08646 230.469598,114.08646 Z" id="Path" fill="#FFFFFF"></path>
          <path d="M99.1988985,120.12576 C94.2557985,120.12576 90.2486085,124.18146 90.2486085,129.18486 C90.2486085,134.18796 94.2557985,138.24366 99.1988985,138.24366 C104.141969,138.24366 108.149159,134.18796 108.149159,129.18486 C108.149159,124.18146 104.141969,120.12576 99.1988985,120.12576 Z" id="Path" fill="#FFFFFF"></path>
          <path d="M170.801099,120.12576 C165.858029,120.12576 161.850842,124.18146 161.850842,129.18486 C161.850842,134.18796 165.858029,138.24366 170.801099,138.24366 C175.744199,138.24366 179.751389,134.18796 179.751389,129.18486 C179.751389,124.18146 175.744199,120.12576 170.801099,120.12576 Z" id="Path" fill="#FFFFFF"></path>
          <path d="M15.7562145,127.20336 L17.6208555,127.95816 C21.7025325,134.90886 25.8778245,142.15536 34.1229255,146.54796 C42.5549055,151.03956 54.0841815,151.57386 70.9495785,147.68016 C83.0468385,157.63176 96.0951285,163.15596 108.895019,163.15596 C121.022489,163.15596 132.514439,157.90116 141.899159,148.62396 C154.329539,156.39306 166.479599,161.64606 177.886739,161.64606 C189.289589,161.64606 199.610549,155.61936 206.508989,144.66066 C217.930049,146.89056 229.521722,146.93106 239.979272,143.15076 C243.821612,141.76206 247.448642,139.84266 250.887422,137.48886 C235.330622,176.86866 189.402452,205.33716 134.999999,205.33716 C75.9732015,205.33716 26.8532985,171.80196 15.7562145,127.20336 Z" id="Path" fill="#FFFFFF"></path>
        </g>
      </g>
      </svg>
    <span class="footer__tagline">Make donuts, not war.</span>
  </div>
  </div>
<nav class="footer__nav">
  <ul class="nav__items">
    <li><a class="nav-link" href="#">Home</a></li>
    <li><a class="nav-link" href="#">Customer Service</a></li>
    <li><a class="nav-link" href="#">Terms & Conditions</a></li>
  </ul>
</nav>
</footer>
              
            
!

CSS

              
                :root {
	/* Global Colors */
	--black:			      #000;
	--white:			      #fff;
	--primary-color:	  #FF9DDA;
  --primary-light:    #FFD6F0;
  --secondary-color:  #FF009F;
	
	/* Global Variables */
	--body-font:		'Inconsolata', monospace;
  --display-font: 'Baloo Chettan', cursive;
}

body {
  /* Test contrast */
  filter: grayscale(100%);
  
	font-family: var(--body-font);
	font-size: 18px;
  letter-spacing: 1px;
	line-height: 24px;
	overflow-x: hidden;
	width: 100%;
}

h1 {
  font-family: var(--display-font);
	font-size: 2.5em;
	font-weight: 900;
	line-height: 1.25;
}

h2 {
  font-family: var(--display-font);
}

a, .button{
  cursor: pointer;
}

img {
  max-width: 100%;
}

.form input[type="email"] {
  border: 1px solid transparent;
  color: var(--secondary-color);
  font-family: var(--body-font);
  font-size: 1.25em;
  outline: 0;
  padding: .25em;
  width: 300px;
}

.form input:focus {
  border: 1px solid var(--secondary-color);
}

.form .button {
  border: 0;
}

.button {
	background: var(--primary-color);
	box-shadow: 0 5px 35px var(--primary-light);
	color: var(--white);
  font-family: var(--display-font);
	font-weight: 900;
	position: relative;
	text-decoration: none;
	text-transform: lowercase;
  transform: scale(1);
	transition: all .5s ease-out;
}

.button:hover,
.button:focus {
  background: var(--secondary-color);
	transform: scale(1.5);
}

.button--large {
	border-radius: 25px;
	padding: 15px 50px;
}

.button--med {
	border-radius: 20px;
	padding: 10px 40px;
}

.nav {
	align-items: center;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	padding-top: 1.5em;
	position: absolute;
	width: 98%;
}

.nav-fixed {
  position: fixed;
}

.nav__logo a {
  text-decoration: none;
}

.nav__logo {
	padding-left: 1em;
  transition: all .15s ease-in;
}

.nav__logo:hover {
  transform: scale(1.05);
}

.nav__logo img {
  display: inline;
  height: 50px;
  margin-right: .25em;
  width: 50px;
  vertical-align: middle;
}

.nav__logo span {
  color: var(--white);
  display: inline;
  font-family: var(--display-font);
  font-size: 1em;
  font-weight: 900;
  text-decoration: none;
}

.nav__items {
	align-self: center;
	display: flex;
	flex: auto;
	flex-flow: row wrap;
	justify-content: flex-end;
	list-style: none;
	padding-right: 1em;
	margin: 0;
}

.nav-link {
	color: var(--black);
  font-size: .8em;
	font-weight: 900;
	margin-left: 1.25em;
	text-decoration: none;
	text-transform: lowercase;
	transition: all .35s ease-in-out;
}

.nav-link:hover,
.nav-link:focus {
	color: var(--primary-color);
}

html:not([data-scroll='0']) .nav {
  background: var(--white);
  box-shadow: 0 3px 10px rgba(0,0,0,.25);
  height: 40px;
  padding-top: .35em;
  position: fixed;
  width: 100%;
  z-index: 1;
}

html:not([data-scroll='0']) .nav__logo {
  bottom: 10px;
  padding: 0;
  position: relative;
  transform: scale(0.75);
}

html:not([data-scroll='0']) .nav__logo span {
  display: none;
}

html:not([data-scroll='0']) .nav__items {
  bottom: 10px;
  position: relative;
}

.hero {
	align-items: center;
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/background-glaze.svg');
  background-repeat: no-repeat;
  background-size: contain;
	display: flex;
	flex-flow: column wrap;
	justify-content: space-around;
  padding: 5em 0;
}

.hero__image {
  flex: 1;
  margin-top: 100px;
  text-align: center;
}

.hero__image img {
  max-width: 75%;
}

.hero__content {
  flex: 1;
}

.hero__subhead {
	font-size: 1.25em;
	line-height: 125%;
	margin-bottom: 2em;
}

.commercial {
  background: var(--primary-color);
  display: flex;
  flex-flow: row wrap;
}

.commercial__video {
  flex: 1;
}

.commercial__video iframe {
  margin: 0;
  min-height: 350px;
  padding: 0;
  width: 100%;
}

.commercial__content {
  color: var(--white);
  flex: 1;
  height: 100%;
  margin: auto;
  padding-left: 50px;
}

.commercial .form .button {
  background: var(--secondary-color);
}

.commercial .form .button:hover,
.commercial .form .button:focus {
  opacity: .5;
  transform: scale(1);
}

.products {
	align-items: flex-start;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	padding: 3em;
}

.product {
	flex: 100%;
  margin-bottom: 1.5em;
	padding: 0 2em;
  text-align: center;
}

.product small {
  border-bottom: 3px solid var(--secondary-color);
  color: #555;
  padding-bottom: .25em;
}

.product__description {
	margin-bottom: 2.5em;
}

.footer {
	align-items: center;
  background: var(--primary-color);
  color: var(--white);
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
  padding: 1em 0;
}

.footer a {
  color: var(--white);
}

.footer a:hover,
.footer a:focus {
  color: var(--black);
}

.footer__logo svg {
	display: inline;
	margin-right: 1em;
	vertical-align: middle;
  width: 50px;
}

html:not([data-scroll='0']) .footer .nav__items {
  bottom: 0;
}

@media (min-width: 600px) {
  html:not([data-scroll='0']) .nav {
    height: 75px;
    padding-top: 0;
  }
}

@media (min-width: 800px) {
  .nav__logo svg {
    height: 100px;
    margin-right: .5em;
    width: 100px;
  }
  
  .nav__logo a {
    font-size: 1.5em;
    text-shadow: 0 1px 5px var(--secondary-color);
  }
  
  .nav-link {
    font-size: 1em;
  }
  
  .hero {
    flex-flow: row wrap;
  }
  
  .hero__content {
    margin-top: 100px;
  }
  
  .product {
    flex: 1;
    padding: 0 2em;
    text-align: left;
  }
}
              
            
!

JS

              
                // The debounce function receives our function as a parameter
const debounce = (fn) => {

  // This holds the requestAnimationFrame reference, so we can cancel it if we wish
  let frame;

  // The debounce function returns a new function that can receive a variable number of arguments
  return (...params) => {
    
    // If the frame variable has been defined, clear it now, and queue for next frame
    if (frame) { 
      cancelAnimationFrame(frame);
    }

    // Queue our function call for the next frame
    frame = requestAnimationFrame(() => {
      
      // Call our function and pass any params we received
      fn(...params);
    });

  } 
};


// Reads out the scroll position and stores it in the data attribute
// so we can use it in our stylesheets
const storeScroll = () => {
  document.documentElement.dataset.scroll = window.scrollY;
}

// Listen for new scroll events, here we debounce our `storeScroll` function
document.addEventListener('scroll', debounce(storeScroll), { passive: true });

// Update scroll position for first time
storeScroll();
              
            
!
999px

Console