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.
<div id="menu-trigrad">
<i class="fa fa-bars"></i>
<i style="display:none" class="fa fa-times"></i>
</div>
<div id="menu-body">
<div class="menu-wrap">
<ul class="menu">
<li class="wow slideInLeft" data-wow-delay=".200s"><a href="#">Home</a></li>
<li class="wow slideInLeft" data-wow-delay=".500s"><a href="#">Blog</a></li>
<li class="wow slideInLeft" data-wow-delay=".800s"><a href="#">Portfolio</a></li>
<li class="wow slideInLeft" data-wow-delay=".1200s"><a href="#">Gallery</a></li>
<li class="wow slideInLeft" data-wow-delay=".1500s"><a href="#">Contact</a></li>
</ul>
</div>
</div>
<!--=========================== Contents =========================== -->
<br />
<br />
<br />
<br />
<br />
<br />
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="page-header text-center">
<a style="font-size:35px" href="https://codepen.io/kingRayhan/pen/wMgzaK">View source code</a>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis eius placeat provident voluptates veritatis accusamus, itaque suscipit delectus doloribus dolorem reiciendis minima earum, consequatur laboriosam atque assumenda porro expedita
quaerat animi incidunt. Eius dicta sunt illum asperiores est voluptas, cum pariatur adipisci deserunt, fugiat quas architecto consectetur placeat dolor rem itaque animi labore assumenda quo aspernatur, aliquid eveniet ratione! Id sapiente sit
dolor, nobis inventore, quae eum quam illo eligendi eius, autem ut officia asperiores temporibus. Quia veniam repudiandae nostrum natus. Voluptatem ad quibusdam sed atque facere consequuntur excepturi ea, cumque enim aliquam blanditiis facilis
quam sint aperiam eos ex non nesciunt voluptate hic vel saepe consequatur, debitis accusantium. Asperiores fugiat hic qui deserunt architecto, reprehenderit repudiandae ad molestias dolorum aut voluptates consequuntur et mollitia quisquam dolor
aspernatur quidem ab a odio vel repellendus iusto recusandae. Asperiores voluptatum perferendis ex, nam sed illum fugit incidunt hic cumque! Tempore fuga dolorem reiciendis, fugit dolores, recusandae eum! Fugiat neque ipsam nesciunt culpa commodi.
Repellat necessitatibus dolore dolorem voluptatibus, molestiae nesciunt perferendis quae id reiciendis eius libero facere nobis, quia labore quos vitae ipsa nemo. Quos numquam, hic repellat illum temporibus repudiandae, laboriosam, quae quod dolorem
tempore eveniet eligendi. Eum obcaecati totam aliquid, doloremque eos quisquam sunt deserunt provident quam consequatur explicabo dolor fugit asperiores assumenda corporis harum incidunt omnis id adipisci praesentium maxime debitis ratione! Distinctio
porro neque, iste odit dolor consectetur rem tempora temporibus labore fugiat ipsam beatae? Esse expedita aliquid quibusdam quis, harum rem assumenda eum obcaecati explicabo reprehenderit nihil ut magni enim vitae aspernatur ratione, velit magnam
alias aperiam libero earum delectus in sit? Animi nesciunt repudiandae atque quasi odio commodi eveniet doloremque quia dolorem architecto nemo modi aut ex, cumque accusamus. Magni, aperiam minima quisquam neque distinctio mollitia asperiores
voluptatem beatae quas nulla. Facere culpa velit tempora excepturi officiis, reiciendis, doloribus numquam saepe aut quos, recusandae laborum dolore, fugiat ducimus architecto. Molestias, explicabo, tempora. Placeat incidunt corporis a ratione.
Nam repellendus impedit quaerat quo, sit necessitatibus sequi ut iure, facere beatae delectus consequuntur hic tempore dolorum commodi eius atque, cumque, asperiores est tempora. Voluptates, harum quis fugit impedit modi mollitia recusandae neque
accusamus dolorum praesentium ipsam, laudantium aspernatur atque eius itaque provident facere deserunt quia totam earum nam blanditiis alias enim. Labore rem libero iste accusamus inventore, at consequatur tempora quisquam dolorum, porro iure
consequuntur dolorem! Animi doloribus fuga ex delectus voluptatem dolorem odit deleniti illo minus repudiandae aspernatur expedita nisi totam at mollitia, adipisci, quas tempore sunt tempora. Reiciendis distinctio porro temporibus quaerat delectus,
deleniti sed corrupti quibusdam vel, ex enim debitis fugiat voluptatibus! Dolorum nemo cumque id voluptas eaque culpa minus excepturi. Illo eaque, dolores quam id atque vitae quaerat a cumque molestias nisi incidunt quasi neque dolorem voluptate
adipisci, esse accusamus. Facere consectetur rem delectus libero repellat ipsa maxime enim nemo. Neque odio ducimus distinctio corporis, obcaecati minus maxime est tempore atque deleniti, blanditiis praesentium iste eligendi cum adipisci similique
maiores nesciunt incidunt, recusandae quibusdam explicabo. Ipsum hic ducimus consequuntur in adipisci autem nulla modi quidem ipsam nobis. Ducimus ullam iure dolores quasi expedita molestiae culpa modi, non, eius officia ad nesciunt veniam laborum
aliquid tempore inventore dolor, deserunt consequatur aperiam dolorem suscipit! Quas delectus, unde amet magnam totam voluptate similique eveniet praesentium incidunt consequuntur quo illum dignissimos numquam provident est asperiores officiis
reprehenderit ducimus libero officia quisquam dolor nisi. Labore consequatur, hic, pariatur dignissimos atque, quae, at placeat beatae reiciendis odit illum magni officiis. Distinctio officiis recusandae in quam ratione impedit sed voluptatem
assumenda sint, itaque maxime, omnis voluptatum quibusdam suscipit, tempore adipisci saepe nihil deleniti earum ea iure. Labore rerum cumque numquam, nostrum ipsam, ullam dolore, voluptatum cupiditate iste, delectus magni adipisci hic! Non atque
voluptas tempora libero, necessitatibus repellendus excepturi facere, cumque suscipit, maxime eius itaque aliquid error animi magni quidem rem tempore ratione reiciendis esse! Voluptatibus, at itaque vitae, molestiae est saepe consequatur rerum.
Inventore consectetur labore optio consequuntur ad aspernatur, animi aperiam, omnis quod nemo praesentium sequi rem? Voluptate maiores, deserunt qui, aperiam harum unde tempore molestias eaque iusto fuga officiis placeat labore voluptatum repellendus,
sed animi sint voluptatem. Laudantium, dolore. Similique odit, tempore repudiandae! Eligendi veniam dolorem quaerat fugiat tenetur nesciunt iusto, vel magni libero eaque aspernatur consectetur consequatur similique maxime explicabo reprehenderit
voluptates. Consequatur repudiandae tempore explicabo aut provident facere suscipit vel, enim distinctio eveniet placeat, laudantium itaque quibusdam. Modi ut culpa harum dolore eaque eum iure dignissimos delectus, maxime fugit. Minima eveniet
repellendus suscipit quidem maiores doloremque qui laboriosam accusamus, quia dolore saepe sit molestiae labore a, ea non repudiandae corporis. Dignissimos eaque optio dolor explicabo tenetur. Doloribus omnis nesciunt odio, maxime dolores praesentium
ratione assumenda ut reprehenderit perferendis voluptates quidem ipsam. Eos voluptatibus alias ex dolorem excepturi voluptates labore eveniet modi quos neque aliquam nesciunt blanditiis cumque, quaerat reiciendis, ratione repellat, velit soluta
magni culpa iusto autem doloribus! Dolore ut ea, dolorem ipsam a iure voluptatum nobis, atque animi delectus doloremque itaque molestiae quis nemo ullam vitae tenetur magni dolor aut inventore quae placeat sed. Consectetur fugiat doloribus placeat
sequi, nemo perferendis eveniet quam vero autem aperiam pariatur, libero delectus atque quidem? Soluta necessitatibus fuga excepturi, corporis maxime, iusto quam eveniet molestias ea cum optio quo repudiandae impedit magni. Placeat exercitationem
repudiandae praesentium deleniti neque, labore non modi officiis cumque, sed libero, iure maxime! Voluptates deleniti id eveniet quas omnis facilis veniam exercitationem dicta qui voluptatibus labore fugit facere eaque, porro sint saepe beatae
tempora, autem magnam. Dicta perspiciatis nobis accusamus accusantium quasi dolor, facilis eligendi et minus pariatur in ipsa voluptatem vitae mollitia quo blanditiis recusandae nihil laborum fugiat aperiam! Quia harum debitis quibusdam nobis
consectetur aliquam at quidem culpa iusto eius sint officia impedit ratione, asperiores suscipit molestiae nam quo, aperiam id officiis quod. Repellendus excepturi minus dignissimos magni saepe neque iste blanditiis molestiae quasi voluptatem
ab, vel aspernatur eveniet velit quibusdam praesentium dolorum. Expedita aspernatur velit cum! Fuga dolore vero totam animi facilis, dolor quod corporis repudiandae unde ea vel magni et quasi ad, placeat pariatur officiis? Minus harum quo maxime,
eos pariatur vitae perferendis quibusdam eum alias incidunt illum repellat modi corporis nostrum magni cumque eius, hic excepturi laborum voluptatem accusantium possimus! Deleniti molestias quia saepe libero nisi, soluta corporis laborum, perferendis,
explicabo delectus cumque qui eius. Natus amet vero ratione sapiente similique aut quod fugit, a, architecto, voluptatem aliquam dolores laudantium error autem? Repellat, aperiam. Ex consequuntur itaque, tenetur voluptate perspiciatis dicta in
fugiat nostrum deserunt quia quis, qui illum cumque, voluptatem similique harum ea cum neque quae animi illo veniam numquam provident? Iusto aut, officia vel a enim culpa obcaecati, quod earum saepe, ullam ipsa quidem, cumque quae voluptatem maiores
tenetur fugit aliquam magnam? Neque earum, iste aperiam maiores velit totam non debitis delectus impedit, commodi enim. Repudiandae fuga ratione, ex aliquam rem velit eius minima odit asperiores sequi hic earum ducimus cupiditate labore debitis
sint ea tenetur saepe nisi modi. Odio tempore ratione illo error laudantium blanditiis mollitia sit, inventore similique pariatur, eum neque omnis sint voluptates voluptas! Illum neque sed deleniti, fugit quam voluptatem quas perferendis aliquid
ab laudantium, illo ducimus ipsa. Pariatur minus consectetur, dolorem odit sit aperiam. Magnam, alias! Unde maxime labore recusandae deserunt perspiciatis odio sed rem deleniti. Quidem laudantium magnam hic quod, impedit eum ullam aspernatur minus
in neque tenetur nam non rem, iusto incidunt, beatae esse modi eligendi a ipsum amet culpa! Ab, minus veniam delectus doloremque, laudantium nulla, odio atque exercitationem expedita odit eos ipsa! Necessitatibus, saepe incidunt, eveniet modi
minus at libero eligendi esse! Porro quis, obcaecati reiciendis incidunt mollitia saepe, deleniti eaque voluptatem, cupiditate ea fuga perferendis iure. Repellat provident iusto explicabo hic labore, natus a, harum optio maxime minus nulla! Itaque
deserunt sunt quod, dolor minima non impedit mollitia maiores ratione tempora sequi corporis repellendus laborum. Magni eveniet similique corporis soluta ex enim ab provident, exercitationem accusantium quo blanditiis commodi aliquam nesciunt
explicabo doloremque laboriosam non officiis harum tempore rerum. Explicabo ducimus perspiciatis tempore temporibus illo, quod ipsa tempora porro laudantium quisquam dolorum ea minus ad, dolores ipsum sed cum iusto iste quaerat qui veritatis voluptatum
quam voluptate. Vel deleniti cumque odio natus praesentium error iste! Labore ratione ea quisquam nam illum expedita veritatis possimus doloremque sunt consectetur explicabo optio quaerat hic ad consequatur quae, commodi sit eius ipsum! Itaque
maxime blanditiis voluptates libero animi obcaecati laboriosam modi temporibus numquam quibusdam autem accusamus molestias eveniet totam non esse id, magnam, reprehenderit minima pariatur? Alias dolor itaque molestias velit similique, impedit
enim dicta ea repellat quaerat consectetur quam aspernatur voluptate, quas, quasi? Inventore magni, eaque ipsum saepe, minus mollitia reiciendis? Eos et, quasi laborum, temporibus praesentium nulla distinctio, doloremque architecto ut qui provident
deserunt nisi. Nulla in repellendus dolorem minus molestias, aliquam voluptatem, doloribus autem ex dicta quibusdam quae delectus. In, voluptatem alias iusto! Officia optio velit ea expedita. Mollitia repellat veniam dolorem consectetur praesentium
quibusdam eum minima, voluptatum eveniet alias, tenetur soluta neque corporis, optio rerum dolorum laudantium. Nam cumque placeat at atque repellendus debitis beatae quae, neque, velit voluptate obcaecati quo sunt nostrum possimus autem ipsam
nesciunt odit.</p>
</div>
</div>
</div>
.menu {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
.menu li {
border-bottom: 1px solid #ddd;
}
.menu li:last-child {
border-bottom: none;
}
.menu li a {
color: #eee;
font-family: verdana;
font-size: 25px;
text-decoration: none;
transition: .2s;
padding: 15px 0;
display: block;
}
.menu li a:hover {
font-size: 40px;
}
.menu-wrap {
width: 300px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -150px;
}
#menu-trigrad {
font-size: 35px;
cursor: pointer;
position: fixed;
top: 0;
left: 0;
background: #ddd;
padding: 16px 26px;
z-index: 9999
}
#menu-trigrad:hover {
background-color: #000;
color: #fff;
}
#menu-body {
background-color: rgba(0, 0, 0, .8);
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
$(document).ready(function() {
new WOW().init();
function fullscreen() {
$('#menu-body').css({
'width': $(window).width() + 'px',
'height': $(window).height() + 'px',
});
}
fullscreen();
$(window).resize(function() {
fullscreen();
});
$('#menu-trigrad').on('click', function() {
$('#menu-body').fadeToggle();
$(this).find('i').eq(0).toggle();
$(this).find('i').eq(1).toggle();
});
});
Also see: Tab Triggers