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 class="creativeButtons">
<div class="facebook">
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Facebook">
<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M0 50.2792C0 75.1375 18.0542 95.8083 41.6667 100V63.8875H29.1667V50H41.6667V38.8875C41.6667 26.3875 49.7208 19.4458 61.1125 19.4458C64.7208 19.4458 68.6125 20 72.2208 20.5542V33.3333H65.8333C59.7208 33.3333 58.3333 36.3875 58.3333 40.2792V50H71.6667L69.4458 63.8875H58.3333V100C81.9458 95.8083 100 75.1417 100 50.2792C100 22.625 77.5 0 50 0C22.5 0 0 22.625 0 50.2792Z" fill="white"/>
</g>
</svg>
<p>Facebook</p>
</div>
<div class="twitter">
<svg width="100" height="100" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Twitter" d="M44 0.25C19.8398 0.25 0.25 19.8398 0.25 44C0.25 68.1602 19.8398 87.75 44 87.75C68.1602 87.75 87.75 68.1602 87.75 44C87.75 19.8398 68.1602 0.25 44 0.25ZM65.0254 33.2285C65.0547 33.6875 65.0547 34.166 65.0547 34.6348C65.0547 48.9707 54.1367 65.4844 34.1855 65.4844C28.0332 65.4844 22.3301 63.6973 17.5254 60.6211C18.4043 60.7188 19.2441 60.7578 20.1426 60.7578C25.2207 60.7578 29.8887 59.0391 33.6094 56.1289C28.8438 56.0313 24.8398 52.9063 23.4727 48.6094C25.1426 48.8535 26.6465 48.8535 28.3652 48.4141C25.9114 47.9155 23.7058 46.5828 22.1232 44.6424C20.5406 42.702 19.6786 40.2735 19.6836 37.7695V37.6328C21.1191 38.4434 22.8086 38.9414 24.5762 39.0098C23.0903 38.0195 21.8717 36.6778 21.0284 35.1038C20.1852 33.5298 19.7434 31.772 19.7422 29.9863C19.7422 27.9648 20.2695 26.1191 21.2168 24.5176C23.9405 27.8705 27.3392 30.6127 31.192 32.5661C35.0449 34.5194 39.2657 35.6402 43.5801 35.8555C42.0469 28.4824 47.5547 22.5156 54.1758 22.5156C57.3008 22.5156 60.1133 23.8242 62.0957 25.9336C64.5469 25.4746 66.8906 24.5566 68.9805 23.3262C68.1699 25.8359 66.4707 27.9551 64.2148 29.293C66.4023 29.0586 68.5117 28.4531 70.4648 27.6035C68.9902 29.7715 67.1445 31.6953 65.0254 33.2285V33.2285Z" fill="white"/>
</svg>
<p>Twitter</p>
</div>
<div class="pinterest">
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Pinterest" d="M0 50C0 71.3458 13.3792 89.5708 32.2083 96.7417C31.75 92.8375 31.2625 86.4 32.3125 81.8833C33.2167 78 38.15 57.1417 38.15 57.1417C38.15 57.1417 36.6625 54.1625 36.6625 49.75C36.6625 42.8333 40.6708 37.6667 45.6667 37.6667C49.9167 37.6667 51.9667 40.8542 51.9667 44.675C51.9667 48.9458 49.2458 55.3292 47.8417 61.25C46.6708 66.2042 50.3292 70.2458 55.2125 70.2458C64.0583 70.2458 70.8625 60.9167 70.8625 47.45C70.8625 35.5292 62.2958 27.2 50.0667 27.2C35.9083 27.2 27.5958 37.8208 27.5958 48.8C27.5958 53.0792 29.2417 57.6625 31.3 60.1583C31.4755 60.3468 31.5995 60.5773 31.66 60.8276C31.7206 61.0779 31.7157 61.3396 31.6458 61.5875C31.2667 63.1625 30.425 66.5417 30.2625 67.2333C30.0417 68.1417 29.5417 68.3375 28.5958 67.8958C22.3792 65.0042 18.4958 55.9167 18.4958 48.6167C18.4958 32.9125 29.9 18.4958 51.3792 18.4958C68.6458 18.4958 82.0667 30.8 82.0667 47.2417C82.0667 64.3958 71.2542 78.2042 56.2375 78.2042C51.1917 78.2042 46.4542 75.5792 44.8292 72.4833C44.8292 72.4833 42.3333 81.9917 41.7292 84.3167C40.5542 88.8333 37.2958 94.55 35.275 97.7958C39.9333 99.2292 44.875 100 50 100C77.6125 100 100 77.6125 100 50C100 22.3875 77.6125 0 50 0C22.3875 0 0 22.3875 0 50Z" fill="white"/>
</svg>
<p>Pinterest</p>
</div>
<div class="instagram">
<svg width="100" height="100" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Instagram" d="M40 26.9824C32.832 26.9824 26.9824 32.832 26.9824 40C26.9824 47.1679 32.832 53.0176 40 53.0176C47.1679 53.0176 53.0175 47.1679 53.0175 40C53.0175 32.832 47.1679 26.9824 40 26.9824ZM79.0429 40C79.0429 34.6094 79.0918 29.2676 78.789 23.8867C78.4863 17.6367 77.0605 12.0898 72.4902 7.51951C67.9101 2.93943 62.373 1.52341 56.123 1.22068C50.7324 0.917944 45.3906 0.966772 40.0097 0.966772C34.6191 0.966772 29.2773 0.917944 23.8965 1.22068C17.6465 1.52341 12.0996 2.94919 7.52927 7.51951C2.94919 12.0996 1.53318 17.6367 1.23044 23.8867C0.927709 29.2773 0.976538 34.6191 0.976538 40C0.976538 45.3808 0.927709 50.7324 1.23044 56.1133C1.53318 62.3633 2.95896 67.9101 7.52927 72.4804C12.1093 77.0605 17.6465 78.4765 23.8965 78.7793C29.2871 79.082 34.6289 79.0332 40.0097 79.0332C45.4004 79.0332 50.7422 79.082 56.123 78.7793C62.373 78.4765 67.9199 77.0508 72.4902 72.4804C77.0703 67.9004 78.4863 62.3633 78.789 56.1133C79.1015 50.7324 79.0429 45.3906 79.0429 40V40ZM40 60.0293C28.916 60.0293 19.9707 51.084 19.9707 40C19.9707 28.916 28.916 19.9707 40 19.9707C51.084 19.9707 60.0293 28.916 60.0293 40C60.0293 51.084 51.084 60.0293 40 60.0293ZM60.8496 23.8281C58.2617 23.8281 56.1718 21.7383 56.1718 19.1504C56.1718 16.5625 58.2617 14.4726 60.8496 14.4726C63.4375 14.4726 65.5273 16.5625 65.5273 19.1504C65.5281 19.7649 65.4076 20.3735 65.1728 20.9414C64.938 21.5092 64.5935 22.0252 64.159 22.4597C63.7244 22.8943 63.2085 23.2388 62.6406 23.4736C62.0727 23.7084 61.4641 23.8289 60.8496 23.8281V23.8281Z" fill="white"/>
</svg>
<p>Instagram</p>
</div>
</div>
.creativeButtons {
width: 100vw;
height: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.facebook,
.twitter,
.pinterest,
.instagram {
margin: 3rem;
width: 15rem;
height: 25rem;
background-color: #484a4f;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border-radius: 35px;
-webkit-transition: 0.5s ease-in-out;
transition: 1s ease-in-out;
}
.facebook svg,
.twitter svg,
.pinterest svg,
.instagram svg {
z-index: 3;
}
.facebook p,
.twitter p,
.pinterest p,
.instagram p {
font-size: 2rem;
font-weight: bold;
color: white;
z-index: 3;
}
.facebook:hover {
cursor: pointer;
background-color: #4064ac;
-webkit-box-shadow: 0px 30px 35px -7px #4064ac;
box-shadow: 0px 30px 35px -7px #4064ac;
}
.facebook:hover svg {
-webkit-animation: svg 0.5s ease-in-out;
animation: svg 0.5s ease-in-out;
}
@-webkit-keyframes svg {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes svg {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.facebook:hover p {
display: none;
}
.twitter:hover {
cursor: pointer;
background-color: #1c9ceb;
-webkit-box-shadow: 0px 30px 35px -7px #1c9ceb;
box-shadow: 0px 30px 35px -7px #1c9ceb;
}
.twitter:hover svg {
-webkit-animation: svg 0.5s ease-in-out;
animation: svg 0.5s ease-in-out;
}
@keyframes svg {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.twitter:hover p {
display: none;
}
.pinterest:hover {
cursor: pointer;
background-color: #e20017;
-webkit-box-shadow: 0px 30px 35px -7px #e20017;
box-shadow: 0px 30px 35px -7px #e20017;
}
.pinterest:hover svg {
-webkit-animation: svg 0.5s ease-in-out;
animation: svg 0.5s ease-in-out;
}
@keyframes svg {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.pinterest:hover p {
display: none;
}
.instagram::after {
content: "";
position: absolute;
width: 15rem;
height: 25rem;
border-radius: 35px;
-webkit-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
z-index: 2;
background-image: -webkit-gradient(linear, left bottom, left top, from(#f5723b), color-stop(#ea4142), to(#c33cbe));
background-image: linear-gradient(to top, #f5723b, #ea4142, #c33cbe);
opacity: 0;
}
.instagram:hover::after {
cursor: pointer;
opacity: 1;
}
.instagram:hover {
-webkit-box-shadow: 0px 30px 35px -7px #f5723b;
box-shadow: 0px 30px 35px -7px #f5723b;
}
.instagram:hover svg {
-webkit-animation: svg 0.5s ease-in-out;
animation: svg 0.5s ease-in-out;
}
@keyframes svg {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.instagram:hover p {
display: none;
}
@media only screen and (max-width: 480px) {
.facebook,
.twitter,
.pinterest,
.instagram {
width: 15rem;
height: 13rem;
}
p{
font-size:1.2rem !important;
}
.instagram::after {
width: 15rem;
height: 13rem;
}
}
Also see: Tab Triggers