HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
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.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
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.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
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.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<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">☰</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 “Cleaning,” “Around the House,” and “Extra Mobility”</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 ― 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 ― 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 ― 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 ― 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 ©2030 by ASOT Enterprises™</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™, 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™, 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>
/*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%
(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>™</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');
});
});
})();
Also see: Tab Triggers