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.
<!--Header
<div class="contain-to-grid fixed">
<div class="row">
<div class="large-3 columns">
Logo Here
</div>
<div class="large-9 columns">
Phone and Social media Icons here
</div>
</div>
</div>
End Header-->
<!-- Top Bar -->
<div class="contain-to-grid fixed">
<nav class="top-bar">
<ul class="title-area">
<li class="name">
<h1>
<a href="#">Company Name</a>
</h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li><a href="#">Home</a></li>
<li class="divider"></li>
<li><a href="#">About</a></li>
<li class="divider"></li>
<li><a href="#">Services</a></li>
<li class="has-dropdown">
<a href="services.html">Services</a>
<ul class="dropdown">
<li><a href="#">Services 01</a></li>
<li><a href="#">Services 02</a></li>
<li><a href="#">Services 03</a></li>
</ul>
</li>
<li class="divider"></li>
<li><a href="team.html">Another link</a></li>
<li class="divider"></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</section>
</nav>
</div>
<!-- End Top Bar -->
<!-- Home page banner-->
<div class="row panel-banner">
<div class="large-12 columns-banner">
<img src="http://www.carlosdiazdesigns.com/northpoint/img/placeholderX1200.jpg">
</div>
</div>
<!-- End Home page banner--->
<!-- Content Slider -->
<div class="row">
<div class="large-12 columns" data-orbit>
<div>
<h1>Responsive Prototype</h1>
<p class="lead">Use this prototype for any responsive website, use your imagination
and make it look prety :)</p>
<p class="button-group radius">
<a class="medium button success" href="#">Leave me a comment if you like this</a>
<a class="medium button hide-for-small" data-reveal-id="formModal">Or follow me :)</a>
</p>
</div>
<div>
<h1>Follow me for more ideas or updates</h1>
<p class="lead">You also can leave a comment or question
Also you can give me a heart.</p>
<p><a class="medium button radius" href="#">Lets be friends</a>
</div>
<div>
<h1>Give me a like or a comment</h1>
<p class="lead">I'm posting this for you. You will love it
And if you like it.. let me know. </p>
<p><a class="medium button radius" href="#">Share this with friends</a></p>
</div>
</div>
</div>
<!-- End Content Slider -->
<!-- Content Panel -->
<div class="row panel">
<div class="large-12 columns">
<div>
<h1>Responsive for Ipad and Smarth phones</h1>
<p class="lead">Use this prototype for any of your projects and if you have any question let me know. Also share it! :)</p>
<p><a class="medium button radius" href="#">Follow me for more</a>
</div>
</div>
</div>
<!-- End Content Panel -->
<!-- Three column center -->
<div class="row">
<div class="large-4 columns">
<i class="fi-torsos"></i>
<h3>Use Icon fonts</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p><a class="medium button radius" href="#">Read more</a></p>
</div>
<div class="large-4 columns">
<i class="fi-torsos"></i>
<h3>Use Icon fonts</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p><a class="medium button radius" href="#">Read more</a></p>
</div>
<div class="large-4 columns">
<i class="fi-torsos"></i>
<h3>Use Icon fonts</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p><a class="medium button radius" href="#">Read more</a></p>
</div>
</div>
<!-- End Three column center -->
<!-- Left panel and Right panel-->
<div class="row">
<div class="large-8 columns">
<h2>This is a Left panel layout</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
<div class="large-4 panel columns">
<h2>Right panel</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
</div>
<!-- End Left panel and Right panel-->
<!-- Feature Content for small and wide devices
Small-4 will prevent to divs to stack on top of another -->
<div id="firstStop" class="row">
<div class="small-4 columns">
<h3>Small layout</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div class="small-4 columns">
<h3>Small layout</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div class="small-4 columns">
<h3>Small layout</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
<!-- End Feature Content for small and wide devices -->
<!-- Offsetting Grid Columns -->
<div class="row">
<hr>
<div id="secondStop" class="large-4 large-offset-2 columns">
<h4>Offset divs here</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
<div class="large-4 columns">
<h4>Panel</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<a href="#" class="medium button success radius">Read more</a>
</div>
</div>
<!-- End Offsetting Grid Columns -->
<!-- Even Columns -->
<div class="row">
<hr>
<div id="thirdStop" class="large-6 columns">
<h4>text section with small Thumb with video</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<!-- The following is a nested grid and row-->
<div class="row">
<div class="large-6 push-6 columns">
<!--Interchange allow you to set diferent images acording to each device-->
<img class="th radius" data-reveal-id="vidModal" src="img/thumb.jpg" data-interchange="[http://www.carlosdiazdesigns.com/northpoint/img/thumb_sm.jpg, (only screen and (min-width: 1px))], [http://www.carlosdiazdesigns.com/northpoint/img/thumb_lg.jpg, (only screen and (-webkit-min-device-pixel-ratio: 2))]">
</div>
<div class="large-6 pull-6 columns">
<p><em>This is an image comment</em></p>
<p><a href="#">Learn more</a></p>
</div>
</div>
<!-- End of nested grid and row-->
</div>
<div class="large-6 columns">
<h4>More info</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<a href="#" class="medium button success radius">Learn more</a>
</div>
</div>
<!-- End Even Columns -->
<!-- Page Footer -->
<div class="row">
<hr>
<div class="large-5 large-centered columns">
<p>© 2014 Company Name - Terms</p>
</div>
</div>
<!-- End Page Footer -->
<!-- Form Modal -->
<div id="formModal" class="reveal-modal small">
<h3>We'll Text You the Link</h3>
<a href="#" class="close-reveal-modal">×</a>
<form class="custom">
<fieldset>
<input type"tel" placeholder="Mobile Phone">
<select>
<option>iOS</option>
<option>Android</option>
</select>
<button type="submit" class="small button">Tex Me!</button>
</fieldset>
</form>
</div>
<!-- End Form Modal -->
<!-- Video Modal -->
<div id="vidModal" class="reveal-modal">
<div class="flex-video">
<iframe width="560" height="315" src="//www.youtube.com/embed/Lxn1-pKY-9I?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<a href="#" class="close-reveal-modal">×</a>
</div>
<!-- End Video Modal -->
<!-- Joyride -->
<ol class="joyride-list" data-joyride>
<li data-id="firstStop" data-text="Go!" data-options="tipLocation:top; tipAnimation:fade; scrollSpeed:600;">
<p>Start learning about our services</p>
</li>
<li data-id="secondStop" data-text="Next">
<p>This is how and what we do it...</p>
</li>
<li data-id="thirdStop" data-button="End">
<p>And more about what we do bla bla</p>
</li>
</ol>
<!-- End Joyride -->
<script>
document.write('<script src=' +
('__proto__' in {} ? 'http://www.carlosdiazdesigns.com/northpoint/js/vendor/zepto' : 'http://www.carlosdiazdesigns.com/northpoint/js/vendor/jquery') +
'.js><\/script>')
</script>
<script src="http://www.carlosdiazdesigns.com/northpoint/js/foundation.min.js"></script>
<script>
$(document).foundation();
$(document).foundation('joyride','start');
</script>
body {
font-family: 'Quattrocento Sans', "Helvetica", Helvetica, Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Quattrocento', "Helvetica", Helvetica, Arial, sans-serif;
}
.orbit-container {
text-align: center;
padding: 30px 20px 0;
margin-top: 20px;
margin-bottom: 40px;
}
.orbit-container div {
background: whitesmoke;
}
.button-group,
.orbit-bullets {
display: inline-block;
margin-left: auto;
margin-right: auto;
}
.panel-banner {
margin-top: 40px;
border-style: solid;
border-width: 1px;
border-color: #d9d9d9;
margin-bottom: 1.25em;
/*padding: 1.25em;*/
background: #f2f2f2 url("http://www.carlosdiazdesigns.com/northpoint/img/thumb.jpg"); }
/*.column,*/ .columns-banner {
position: relative;
float: left;
}
/* Icons
================================ */
[class*="fi-"] {
font-size: 6em;
text-align: center;
color: #2ba6cb;
display: block;
}
/* Media Queries
================================ */
@media (max-width: 768px) {
.orbit-prev,
.orbit-next {
display: none;
}
}
Also see: Tab Triggers