Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ 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

Auto Save

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

              
                <nav id="navbar">
  <ul id="navbar-list">
    <a id="branding" href="#splash">
      <img src="https://www.gustavoguarino.com/projects/tvbox-landing-page/computer-white.svg" alt="company logo">TVCrate
    </a>
    <li class="navbar-link"><a href="#breakdown">How It Works</a></li>
    <li class="navbar-link"><a href="#testimonials">Testimonials</a></li>
    <li class="navbar-link"><a href="#pricing">Pricing</a></li>
  </ul>
  <button class="expand-menu" type="button">&#9776;</button>
</nav>
<div class="slideshow">
  <div class="slide-container" id="better-way">
    <div class="slide-content">
      <p>Finding it hard to buy the products you see on TV?</p>
      <p>Do you wish you could find helpful household items on a regular basis?</p>
      <p>Having trouble trying to choose from over hundreds of products on the market?</p>
      <p><strong>There's got to be a better way!</strong></p>
    </div>
  </div>
  <div class="slide-container sticky-slide" id="splash">
    <div class="slide-content">
      <img class="splash-img" src="https://www.gustavoguarino.com/projects/tvbox-landing-page/tvcrate.png" alt="TVCrate example, box render thanks to trashedgraphics.com">
      <div id="splash-text">
        <small id="intro">Introducing</small>
        <h1>TVCrate</h1>
        <p>The fun, easy way to get convenient products every month, shipped straight to your door</p>
      </div>
      <form id="form" method="POST" action="https://www.freecodecamp.com/email-submit">
        <h2>Get Started</h2>
        <input id="email" name="email" type="email" placeholder="johndoe@email.net" required>
        <input class="btn" id="submit" type="submit" value="Send">
      </form>
    </div>
  </div>
</div>
<section id="breakdown">
  <h1>How It Works</h1>
  <div class="breakdown-container">
    <img src="https://www.gustavoguarino.com/projects/tvbox-landing-page/check-box-with-check-sign.svg" alt="checkbox icon">
    <div class="breakdown-text">
      <h2>Choose a category</h2>
      <p>Mix and match from our various collections, such as &ldquo;Cleaning,&rdquo; &ldquo;Around the House,&rdquo; and &ldquo;Extra Mobility&rdquo;</p>
    </div>
  </div>
  <div class="breakdown-container">
    <img src="https://www.gustavoguarino.com/projects/tvbox-landing-page/calendar.svg" alt="calendar icon">
    <div class="breakdown-text">
      <h2>Pick the delivery date</h2>
      <p>Pick which  day of the month you'd like to recieve your TVCrate</p>
    </div>
  </div>
  <div class="breakdown-container">
    <img src="https://www.gustavoguarino.com/projects/tvbox-landing-page/shipped.svg" alt="truck icon">
    <div class="breakdown-text">
      <h2>Get the box</h2>
      <p>It's that easy!</p>
    </div>
  </div>
</section>
<section id="testimonials">
  <div class="container">
    <h1>Testimonials</h1>
    <div class="quote">
      <p class="quote-text">Thanks to this wonderful service, I don't have any more issues around the house! The grandchildren are amazed to see the collection of products I've  have in stock inside my home. Their eyes pop out of their heads they're so surprised!</p>
      <p class="quote-author">Mildred &#8213; Salt Lake City, Utah</p>
    </div>
    <div class="quote">
      <p class="quote-text">Thank you TVCrate I love all the stuff I've gotten in the mail it has all been very helpful and I don't know what I would do without your services it is very helpful and it helps get me throgh my days I don't know how to end this email so thanks again thank you very much</p>
      <p class="quote-author">Joseph &#8213; Lubbock, TX</p>
    </div>
    <div class="quote">
      <p class="quote-text">Wow! What a great idea! I can't imagine going back to life without TVCrate! I look forward to my new box every month!</p>
      <p class="quote-author">Atticus &#8213; Fort Wayne, IN</p>
    </div>
    <div class="quote">
      <p class="quote-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tecum optime, deinde etiam cum mediocri amico. Ea possunt paria non esse. An nisi populari fama? Zenonis est, inquam, hoc Stoici. (Make sure to replace this once we get our fourth review -AJ)</p>
      <p class="quote-author">Agnes &#8213; Gadsden, AL</p>
    </div>
    <h2>Act today! Don't be like these people:</h2>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/a1ZbwqXQZPo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>
</section>
<section id="pricing">
  <h1>Pricing</h1>
  <ul id="pricing-list">
    <li class="price-box">
      <h2>The Sampler</h2>
      <p>$20 per month</p>
      <ul class="benefit-list">
        <li class="benefit">2 items per box</li>
        <li class="benefit">1 item is exclusive to TVCrate subscribers!</li>
      </ul>
      <button class="btn purchase-btn">Select</button>
    </li>
    <li class="price-box">
      <h2>The Helper</h2>
      <p>$35 per month</p>
      <ul class="benefit-list">
        <li class="benefit">4 items per box</li>
        <li class="benefit">2 items exclusive to TVCrate subscribers!</li>
        <li class="benefit">$2 off coupon for our line of As Seen on TV products</li>
      </ul>
      <button class="btn purchase-btn">Select</button>
    </li>
    <li class="price-box">
      <h2>The Assistant</h2>
      <p>$50 per month</p>
      <ul class="benefit-list">
        <li class="benefit">6 items per box</li>
        <li class="benefit">3 items exclusive to TVCrate subscribers!</li>
        <li class="benefit">Outer box autographed by Anthony "Sully" Sullivan</li>
        <li class="benefit">$2 off coupon for our line of As Seen on TV products</li>
        <li class="benefit">A great value!</li>
      </ul>
      <button class="btn purchase-btn">Select</button>
    </li>
  </ul>
  <p id="assurance">Managing your subscription is painless! You can easily skip a month<sup>*</sup> or cancel<sup>**</sup> at any time.</p>
</section>
<footer>
  <div class="container">
    <div id="copyright">
      <p>Site &copy;2030 by ASOT Enterprises&trade;</p>
      <p>
        Icons made by <a href="http://www.freepik.com" title="Freepik">Freepik</a> and <a href="https://www.flaticon.com/authors/chanut" title="Chanut">Chanut</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>, and are licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>
      </p>
    </div>
    <div id="fine-print">
      <p>
        <sup>*</sup>To skip a month, you must send a self-addressed stamped envelope to ASOT Enterprises&trade;, PO BOX 1031, New York NY 10014. Letters must be recieved two months before the month you intend to cancel, otherwise shipment and charges will proceed as planned.
      </p>
      <p>
        <sup>**</sup>To cancel your subscription, simply send a self-addressed stamped envelope to ASOT Enterprises&trade;, PO BOX 1031, New York NY 10014 with the following: 1) A cancellation request form, which <a href="/retentions">can be found at this link</a>, 2) Two notarized copies of your driver's license, front and back, 3)An envelope pre-stamped with return postage to cover shipping costs of our response back to you.
      </p>
      <p>
        By reading this text, you automatically agree to be bound by our <a href="/termsofuse">terms and conditions</a>, and that you agree to arbritration proceedings for any disputes that may arise from using our services.
      </p>
    </div>
  </div>
</footer>
              
            
!

CSS

              
                /*Constants*/

$header-font: 'Merriweather', serif
$paragraph-font: 'Nunito', sans-serif
$product-font: 'Righteous', cursive

$main-color: #FF2828
$alt-color: #5C91ED
$bg-dark-color: #494949
$bg-light-color: #FCF9F9
$attn-color: #FFA528

$navbarHeight: 50px

/* Common */
body
  background: $bg-light-color
  font-family: $paragraph-font
  
h1, h2
  font-family: $header-font
  
h1
  text-align: center

ul
  margin: 0
  padding: 0
  
a
  text-decoration: none
  color: $attn-color
  
.container
  width: 100%
  max-width: 960px
  margin: 0 auto
  
.product-name
  font-family: $product-font

section
  padding: $navbarHeight 0
  
.slide-container
  height: 100vh
  position: relative
  overflow: hidden
  
.sticky-slide
  padding-bottom: 200px
  
.slide-content
  position: relative
  width: 100%
  height: 100%
  display: flex
  flex-direction: column
  align-content: center
  justify-content: center
  align-items: center
  
  & > *:first-child
    margin-top: $navbarHeight
  
.btn
  background: $attn-color
  width: 100%
  padding: 0.5em
  border: none
  border-radius: 4px
  &:hover
    background: lighten($attn-color, 10)
    border: 2px solid darken($attn-color, 5)
  &:active
    background: darken($attn-color, 10)
    border: 2px solid darken($attn-color, 15)

/* Navigation */
.expand-menu
  display: none
  
#navbar
  position: fixed
  background: $main-color
  width: 100%
  height: $navbarHeight
  z-index: 10
  
  a
    color: $bg-light-color
    line-height: $navbarHeight    
  
#navbar-list
  @extend .container
  display: flex
  justify-content: space-around
  
.navbar-link
  height: $navbarHeight
  display: inline-block
  font-family: $paragraph-font
  margin-right: 2em
  
#branding
  display: inline
  flex-grow: 2
  font-size: 1.5em
  img
    float: left
    height: $navbarHeight * 0.8
    margin: ($navbarHeight * 0.1) 0.5em
    
/* Splash */      
#better-way
  p 
    font-family: $header-font
    margin: 0.5em
    font-size: 1.5em
    color: white
    text-align: center
    text-shadow: 0px 0px 2px black

  strong 
    color: $main-color
    font-size: 1.75em

  .slide-content
    &:before
      z-index: -10
      position: absolute
      content: ''
      width: 100%
      height: 100%
      background: url('https://whoknowsaguy.fitness/wp-content/uploads/2016/08/The-Panic-Attack-for-Beachbody-Coaches.jpg') 50%
      background-size: cover
      filter: grayscale(2) brightness(0.5)
  
#splash
  text-align: center
  background: repeating-linear-gradient(45deg, $alt-color, $alt-color 10px, lighten($alt-color,3) 10px, lighten($alt-color,3) 20px)
  p
    width: 80%
    margin-left: auto
    margin-right: auto
  
.splash-img
  width: auto
  height: 40vh
  padding-top: 50px
  max-height: 500px
  
#splash-text
  margin-top: 3em
  position: relative
  font-size: 1.5em
  color: $bg-light-color

  #intro 
    position: absolute
    top: -.95em
    margin-left: -8.25em
    transform: rotate(-20deg)

  h1
    margin: 0
    color: $main-color
  
#form
  color: $bg-dark-color
  padding-bottom: 50px
  
  h2
    margin-bottom: 0.5em

  input[type=email], .btn
    display: inline-block
    padding: 8px
    margin: 0
    
  input[type=email]
    border: none
    border-right: none
    padding-left: 16px
    padding-right: 16px
    border-radius: 4px 0 0 4px
    
  .btn
    width: auto
    margin-left: -5px
    border-radius: 0 4px 4px 0

/* Breakdown */
#breakdown
  @extend .container
  
.breakdown-container
  display: flex
  flex-wrap: wrap
  justify-content: center
  align-items: center
  margin: 0 5% 1em
  
  img
    max-height: 6em
    width: 20%
    
  .breakdown-text
    width: 76%
    margin-left: 2%
    
  h2
    margin-bottom: 0.25em
    
/* Testimonials */
#testimonials
  background: $bg-dark-color
  color: $bg-light-color
  
  .container
    display: flex
    flex-wrap: wrap
    justify-content: space-evenly
    align-items: stretch
  
  h1
    width: 100%
    
.quote 
  width: 42%
  margin-bottom: 1em

.quote-text 
  font-style: italic
  text-align: justify
  margin-bottom: 0.25em
  line-height: 1.25em

.quote-text:before, .quote-text:after 
  font-size: 1.3em

.quote-text:before 
  margin-right: 0.2em
  margin-left: -0.55em
  content: '\00201C'

.quote-text:after 
  margin-left: 0.2em
  content: '\00201D'

.quote-author
  text-align: right
  
/* Pricing */

#pricing
  @extend .container

#pricing-list
  display: flex
  overflow: hidden
  align-items: stretch
  justify-content: space-around
  padding-top: 1em

.price-box 
  width: 29%
  background: $alt-color
  color: $bg-light-color
  border-radius: 8px
  position: relative
  padding-bottom: 4em
  
  h2, p
    text-align: center
  
  h2
    margin-bottom: 0
    
  p
    margin-top: 0.5em
    font-size: 1.2em

  .benefit-list
    margin: 0 1em 0 2em
    list-style: disc

  .benefit
    margin: 0.5em 0
    
  .btn 
    position: absolute
    width: 80%
    left: 10%
    bottom: 0.75em

#assurance
  margin-top: 2em
  text-align: center
  color: $bg-dark-color
  
/* Footer */
footer
  font-size: 0.75em
  background: $bg-dark-color
  padding: 5px 0 7px
  
  p 
    margin: 0.5em 16px 0
  
#copyright
  color: $bg-light-color

#fine-print
  font-size: 0.5em
  
  p
    margin-top: 1em
    
@media only screen and (max-height: 650px)
  .splash-img
    display: none
    
@media only screen and (max-device-width: 768px)
  body
    font-size: 20pt

  #branding
    font-size: 18pt
  
@media only screen and (max-width: 768px)
  #navbar
    overflow: hidden
    transition: max-height 0.5s linear
    max-height: $navbarHeight
    &.opened
      height: auto
      max-height: $navbarHeight * 10
      
  #branding
    width: 100%
    
  #navbar-list
    flex-direction: column
    align-items: center
    
  .navbar-link
    padding: 12px 0 6px
    
  .expand-menu
    color: $bg-light-color
    display: block
    background: none
    border: none
    position: absolute
    right: 10px
    top: 13px
    
  .breakdown-container
    text-align: center
    img
      width: 100%

  .quote
    width: 90%
    
  .quote-author
    margin-bottom: 0
  
  #pricing-list
    flex-wrap: wrap
    
  .price-box
    width: 90%
    margin: 0 5% 2em
    
  #assurance
    margin: 0 auto
    width: 70%
              
            
!

JS

              
                (function(){
  'use strict';

  /**
  * This function overcomes a CSS limitation in order to allow
  * fixed elements to "slide" over one another.
  */
  function updateSlides() {
    let windowTop = $(document).scrollTop();
    $('.slideshow .slide-container').each(function() {
      let parent = $(this).position().top;
      // Check if slide should "stick" once it's reached
      if ($(this).hasClass('sticky-slide')) {
        /*
        * Use the slide's bottom padding to avoid
        * "snapping" when scrolling quickly
        */
        let padding = parseInt($(this).css('padding-bottom'));
        if (windowTop > $(this).position().top + padding) {
          return;
        }
      }
      $(this).children('.slide-content').css({top: windowTop - parent});
    });
  }

  /**
  * Find occurances of the product name within the page, and add appropriate
  * styling and TM text. Completely unnecessary, but it helped avoid needless
  * repetition during drafting, and something about this just amuses me.
  */
  function callMyLawyer() {
    $('body :not(script)').contents().filter(function() {
      return this.nodeType === 3;
    }).replaceWith(function() {
      return this.nodeValue.replace(/tvcrate/gi, '<span class="product-name">TVCrate</span><sup>&trade;</sup>');
    });
  }

  $(document).ready(function() {
    callMyLawyer();

    // Handle slide scrolling whenever page changes
    $(window).on('scroll resize', function() {
      updateSlides();
    });

    // Expand Menu
    $('.expand-menu').click(function() {
      $(this).parent().toggleClass('opened');
    });
  });

})();
              
            
!
999px

Console