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="bg">
<div class="title">
<svg width="400" height="120" viewBox="0 0 202 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.24 59.864C6.448 59.864 4.784 59.64 3.248 59.192C1.712 58.808 0.944 58.136 0.944 57.176C0.944 56.536 1.296 55.96 2 55.448C2.768 54.936 3.664 54.552 4.688 54.296C5.776 53.976 6.736 53.816 7.568 53.816C10.32 53.816 12.976 54.232 15.536 55.064C18.096 55.832 20.72 56.632 23.408 57.464C26.16 58.232 29.104 58.616 32.24 58.616C36.08 58.616 39.76 57.816 43.28 56.216C46.8 54.616 49.936 52.44 52.688 49.688C55.44 46.936 57.584 43.832 59.12 40.376C60.72 36.856 61.52 33.208 61.52 29.432C61.52 25.4 60.816 21.88 59.408 18.872C58.064 15.864 55.888 13.528 52.88 11.864C49.936 10.2 46.096 9.368 41.36 9.368C37.776 9.368 34.288 10.104 30.896 11.576C27.504 12.984 24.464 14.84 21.776 17.144C19.088 19.384 16.944 21.816 15.344 24.44C13.744 27.064 12.944 29.528 12.944 31.832C12.944 33.048 13.424 34.296 14.384 35.576C15.344 36.856 17.008 37.496 19.376 37.496C21.616 37.496 24.048 36.92 26.672 35.768C29.296 34.552 31.792 32.952 34.16 30.968C36.592 28.92 38.672 26.648 40.4 24.152C42.128 21.592 43.184 18.968 43.568 16.28C43.696 15.448 43.888 15.064 44.144 15.128C44.4 15.192 44.528 15.576 44.528 16.28C44.528 19.032 43.824 21.752 42.416 24.44C41.008 27.064 39.152 29.432 36.848 31.544C34.544 33.656 31.984 35.352 29.168 36.632C26.416 37.912 23.632 38.552 20.816 38.552C18.32 38.552 16.336 38.136 14.864 37.304C13.392 36.472 12.336 35.448 11.696 34.232C11.056 32.952 10.736 31.704 10.736 30.488C10.736 28.056 11.472 25.56 12.944 23C14.48 20.376 16.592 17.976 19.28 15.8C22.032 13.624 25.232 11.864 28.88 10.52C32.592 9.176 36.592 8.504 40.88 8.504C44.848 8.504 48.272 9.048 51.152 10.136C54.032 11.16 56.4 12.6 58.256 14.456C60.112 16.248 61.488 18.36 62.384 20.792C63.344 23.16 63.824 25.688 63.824 28.376C63.824 32.856 62.96 37.016 61.232 40.856C59.568 44.632 57.264 47.928 54.32 50.744C51.376 53.56 48.016 55.768 44.24 57.368C40.464 58.904 36.528 59.672 32.432 59.672C29.424 59.672 26.608 59.32 23.984 58.616C21.36 57.912 18.8 57.24 16.304 56.6C13.872 55.896 11.28 55.544 8.528 55.544C7.952 55.544 7.12 55.576 6.032 55.64C5.008 55.704 4.08 55.864 3.248 56.12C2.416 56.312 2 56.664 2 57.176C2 57.624 2.384 57.976 3.152 58.232C3.92 58.488 4.816 58.648 5.84 58.712C6.864 58.776 7.696 58.808 8.336 58.808C11.28 58.808 14.096 58.264 16.784 57.176C19.472 56.024 22.064 54.456 24.56 52.472C27.056 50.488 29.424 48.248 31.664 45.752C33.968 43.192 36.176 40.504 38.288 37.688C40.976 34.04 43.856 30.584 46.928 27.32C50 24.056 53.136 21.176 56.336 18.68C59.536 16.12 62.672 14.136 65.744 12.728C68.816 11.256 71.696 10.52 74.384 10.52C75.216 10.52 75.536 10.68 75.344 11C75.152 11.256 74.8 11.384 74.288 11.384C72.112 11.384 69.776 12.12 67.28 13.592C64.784 15.064 62.224 17.048 59.6 19.544C57.04 22.04 54.576 24.792 52.208 27.8C49.84 30.808 47.696 33.848 45.776 36.92C44.176 39.48 42.192 42.104 39.824 44.792C37.456 47.48 34.704 49.976 31.568 52.28C28.432 54.52 24.912 56.344 21.008 57.752C17.104 59.16 12.848 59.864 8.24 59.864ZM88.6468 42.2C88.3908 42.712 88.0068 43.16 87.4948 43.544C87.0468 43.928 86.6948 44.184 86.4388 44.312C86.2468 44.376 86.3108 44.184 86.6308 43.736C87.7828 42.328 88.5188 41.016 88.8388 39.8C89.2228 38.584 89.2228 37.624 88.8388 36.92C88.5188 36.152 87.8788 35.768 86.9188 35.768C85.6388 35.768 84.1348 36.28 82.4068 37.304C80.6788 38.328 78.8868 39.672 77.0308 41.336C75.2388 43 73.5428 44.792 71.9428 46.712C70.4068 48.568 69.1588 50.392 68.1988 52.184C67.2387 53.912 66.7587 55.416 66.7587 56.696C66.7587 57.656 66.9507 58.264 67.3347 58.52C67.7188 58.776 68.1028 58.904 68.4868 58.904C69.9588 58.904 71.6548 58.232 73.5748 56.888C75.5588 55.48 77.5748 53.72 79.6228 51.608C81.6708 49.496 83.6228 47.352 85.4788 45.176C87.3348 42.936 88.9348 40.92 90.2788 39.128C91.6868 37.336 92.6468 36.12 93.1588 35.48C93.8628 35.736 94.6948 35.832 95.6548 35.768C96.6788 35.704 97.5428 35.64 98.2468 35.576C98.1188 35.768 97.4468 36.568 96.2308 37.976C95.0788 39.384 93.6708 41.08 92.0068 43.064C90.4068 44.984 88.7748 46.968 87.1108 49.016C85.5108 51.064 84.1668 52.856 83.0788 54.392C81.9908 55.928 81.4468 56.952 81.4468 57.464C81.4468 58.104 81.5748 58.52 81.8307 58.712C82.1508 58.84 82.6308 58.904 83.2708 58.904C84.0388 58.84 85.1588 58.488 86.6308 57.848C88.1028 57.144 89.9908 55.8 92.2948 53.816C94.5988 51.832 97.3828 48.888 100.647 44.984C100.647 44.984 100.775 45.08 101.031 45.272C101.351 45.464 101.511 45.56 101.511 45.56C97.6708 50.04 94.1188 53.56 90.8548 56.12C87.5908 58.616 84.6148 59.864 81.9268 59.864C80.5188 59.864 79.5588 59.64 79.0468 59.192C78.5988 58.744 78.3748 58.104 78.3748 57.272C78.3748 56.632 78.6308 55.864 79.1428 54.968C79.7188 54.008 80.3588 53.08 81.0628 52.184C81.7668 51.288 82.3428 50.584 82.7908 50.072C82.7908 50.072 82.7268 50.04 82.5988 49.976C82.4708 49.912 82.4068 49.88 82.4068 49.88C80.9348 51.672 79.3668 53.336 77.7028 54.872C76.0388 56.408 74.3748 57.624 72.7108 58.52C71.1108 59.416 69.5428 59.864 68.0068 59.864C66.4067 59.864 65.2867 59.48 64.6467 58.712C64.0067 57.88 63.6867 56.632 63.6867 54.968C63.6867 53.368 64.1987 51.448 65.2227 49.208C66.2467 46.904 67.7188 44.664 69.6388 42.488C71.5588 40.248 73.8628 38.392 76.5508 36.92C79.3028 35.448 82.3748 34.712 85.7668 34.712C87.4308 34.712 88.5828 35.032 89.2228 35.672C89.8628 36.248 90.1508 36.952 90.0868 37.784C90.0228 38.616 89.8308 39.448 89.5108 40.28C89.1908 41.112 88.9028 41.752 88.6468 42.2ZM110.129 34.712C110.769 34.776 111.633 34.872 112.721 35C113.873 35.064 114.961 35 115.985 34.808C114.961 35.896 113.649 37.272 112.049 38.936C110.449 40.536 108.721 42.232 106.865 44.024C105.073 45.816 103.377 47.576 101.777 49.304C100.241 51.032 98.961 52.568 97.937 53.912C96.913 55.256 96.401 56.28 96.401 56.984C96.401 57.624 96.593 58.104 96.977 58.424C97.361 58.744 98.033 58.904 98.993 58.904C100.017 58.904 101.425 58.52 103.217 57.752C105.073 56.984 107.057 55.96 109.169 54.68C111.281 53.4 113.329 51.96 115.313 50.36C117.297 48.696 118.961 47 120.305 45.272C121.713 43.48 122.545 41.72 122.801 39.992C122.993 38.84 123.089 37.656 123.089 36.44C123.089 35.736 123.377 35.096 123.953 34.52C124.593 33.88 125.233 33.56 125.873 33.56C127.281 33.56 127.985 34.392 127.985 36.056C127.985 37.528 127.249 39.288 125.777 41.336C124.369 43.384 122.481 45.496 120.113 47.672C117.809 49.784 115.281 51.768 112.529 53.624C109.841 55.48 107.185 56.984 104.561 58.136C102.001 59.288 99.761 59.864 97.841 59.864C96.689 59.864 95.761 59.576 95.057 59C94.289 58.424 93.905 57.592 93.905 56.504C93.905 55.288 94.417 53.816 95.441 52.088C96.465 50.36 97.777 48.536 99.377 46.616C100.913 44.696 102.449 42.872 103.985 41.144C105.585 39.416 106.961 37.976 108.113 36.824C109.265 35.672 109.937 34.968 110.129 34.712ZM119.537 46.904L120.305 47.48C119.665 48.056 119.121 48.664 118.673 49.304C118.289 49.88 118.097 50.52 118.097 51.224C118.097 52.248 118.705 52.76 119.921 52.76C121.073 52.76 122.289 52.28 123.569 51.32C124.913 50.36 126.225 49.24 127.505 47.96C128.785 46.68 129.873 45.624 130.769 44.792L131.537 45.368C130.641 46.328 129.521 47.48 128.177 48.824C126.897 50.104 125.521 51.224 124.049 52.184C122.577 53.144 121.201 53.624 119.921 53.624C118.065 53.624 117.137 52.856 117.137 51.32C117.137 50.424 117.297 49.72 117.617 49.208C117.937 48.632 118.577 47.864 119.537 46.904ZM128.799 59.864C127.903 59.864 126.911 59.608 125.823 59.096C124.671 58.648 124.095 57.88 124.095 56.792C124.095 55.448 124.703 53.752 125.919 51.704C127.135 49.656 128.639 47.544 130.431 45.368C132.159 43.192 133.855 41.144 135.519 39.224C137.183 37.304 138.431 35.8 139.263 34.712C139.967 34.776 140.799 34.808 141.759 34.808C142.783 34.808 143.679 34.776 144.447 34.712C143.551 35.8 142.367 37.176 140.895 38.84C139.487 40.504 137.983 42.296 136.383 44.216C134.847 46.072 133.343 47.896 131.871 49.688C130.463 51.48 129.311 53.08 128.415 54.488C127.519 55.896 127.071 56.92 127.071 57.56C127.071 58.008 127.263 58.328 127.647 58.52C128.031 58.712 128.671 58.808 129.567 58.808C131.103 58.808 132.799 58.232 134.655 57.08C136.575 55.864 138.431 54.424 140.223 52.76C142.015 51.096 143.615 49.528 145.023 48.056C146.431 46.52 147.423 45.4 147.999 44.696L148.767 45.368C148.191 46.008 147.199 47.128 145.791 48.728C144.447 50.264 142.815 51.896 140.895 53.624C139.039 55.352 137.055 56.824 134.943 58.04C132.895 59.256 130.847 59.864 128.799 59.864ZM147.999 27.416C147.231 27.416 146.655 27.192 146.271 26.744C145.887 26.232 145.695 25.656 145.695 25.016C145.695 24.312 146.079 23.576 146.847 22.808C147.615 22.04 148.415 21.656 149.247 21.656C150.143 21.656 150.783 21.912 151.167 22.424C151.551 22.872 151.743 23.32 151.743 23.768C151.743 24.728 151.359 25.592 150.591 26.36C149.823 27.064 148.959 27.416 147.999 27.416ZM148.739 59.864C146.947 59.864 145.699 59.448 144.995 58.616C144.291 57.72 143.939 56.344 143.939 54.488C143.939 52.568 144.579 50.456 145.859 48.152C147.139 45.848 148.835 43.672 150.947 41.624C153.123 39.512 155.555 37.784 158.243 36.44C160.931 35.096 163.683 34.424 166.499 34.424C168.035 34.424 169.091 34.744 169.667 35.384C170.307 35.96 170.627 36.664 170.627 37.496C170.691 38.328 170.499 39.032 170.051 39.608C170.051 39.608 169.859 39.8 169.475 40.184C169.155 40.568 168.835 40.984 168.515 41.432C168.195 41.816 168.035 42.008 168.035 42.008C169.315 39.768 169.763 38.168 169.379 37.208C169.059 36.184 168.163 35.672 166.691 35.672C165.603 35.672 164.227 36.184 162.563 37.208C160.963 38.232 159.235 39.576 157.379 41.24C155.587 42.904 153.891 44.696 152.291 46.616C150.691 48.536 149.379 50.392 148.355 52.184C147.395 53.976 146.915 55.512 146.915 56.792C146.915 57.432 147.139 57.912 147.587 58.232C148.035 58.552 148.611 58.712 149.315 58.712C150.275 58.712 151.395 58.328 152.675 57.56C153.955 56.792 155.267 55.832 156.611 54.68C157.955 53.528 159.203 52.376 160.355 51.224C161.507 50.072 162.435 49.08 163.139 48.248C163.907 47.416 164.323 46.936 164.387 46.808C164.643 46.488 165.379 45.432 166.595 43.64C167.875 41.848 169.475 39.608 171.395 36.92C173.315 34.232 175.363 31.32 177.539 28.184C179.779 24.984 181.987 21.816 184.163 18.68C186.339 15.48 188.355 12.568 190.211 9.944C192.067 7.32 193.571 5.176 194.723 3.512C195.875 1.848 196.515 0.951998 196.643 0.823999C197.283 1.144 197.891 1.368 198.467 1.496C199.107 1.56 200.067 1.528 201.347 1.4C201.219 1.592 200.451 2.68 199.043 4.664C197.635 6.584 195.811 9.112 193.571 12.248C191.331 15.384 188.899 18.808 186.275 22.52C183.651 26.232 180.995 29.944 178.307 33.656C175.683 37.368 173.251 40.792 171.011 43.928C168.771 47.064 166.947 49.624 165.539 51.608C164.131 53.528 163.363 54.584 163.235 54.776C162.979 55.16 162.691 55.672 162.371 56.312C162.115 56.888 161.987 57.432 161.987 57.944C161.987 58.456 162.243 58.712 162.755 58.712C164.675 58.712 166.563 58.168 168.419 57.08C170.339 55.928 172.131 54.552 173.795 52.952C175.523 51.352 177.027 49.816 178.307 48.344C179.587 46.808 180.611 45.624 181.379 44.792L182.147 45.368C181.443 46.264 180.387 47.512 178.979 49.112C177.571 50.712 175.939 52.344 174.083 54.008C172.291 55.608 170.403 56.984 168.419 58.136C166.435 59.288 164.515 59.864 162.659 59.864C161.443 59.864 160.515 59.64 159.875 59.192C159.235 58.808 158.915 58.264 158.915 57.56C158.915 56.728 159.203 55.8 159.779 54.776C160.419 53.752 161.091 52.792 161.795 51.896C162.499 50.936 163.011 50.264 163.331 49.88C163.331 49.88 163.267 49.88 163.139 49.88C163.075 49.816 163.043 49.784 163.043 49.784C162.979 49.848 162.467 50.392 161.507 51.416C160.611 52.44 159.427 53.624 157.955 54.968C156.547 56.248 155.043 57.4 153.443 58.424C151.843 59.384 150.275 59.864 148.739 59.864Z" fill="white"/>
</svg>
</div>
</div>
.bg{
background-image: url('https://images.unsplash.com/photo-1731011632083-2b8913a4ac37?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
background-size: 100%;
background-position: center;
width: 100%;
height: 100vh;
position: relative;
display: flex;
align-items: center;
justify-content: center;
animation: backgroundZoom 4s ease-in-out forwards;
}
.bg:after{
inset: 0;
position: absolute;
content: '';
background-color: #000;
opacity: .5;
}
.title{
position: relative;
z-index: 1;
}
.title svg path {
fill: transparent;
stroke: #fff;
stroke-width: .2;
stroke-dasharray: 600;
stroke-dashoffset: 600;
animation: textAnimation 6s ease-in-out forwards;
}
@keyframes textAnimation {
0% {
stroke-dashoffset: 600;
}
80% {
fill: transparent;
}
100% {
stroke-dashoffset: 0;
fill: #fff;
}
}
@keyframes backgroundZoom {
0% {
background-size: 100%;
}
100% {
background-size: 110%;
}
}
Also see: Tab Triggers