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="grid">
<svg id ="lill" viewBox="0 0 572 648" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse class= "eye" cx="377" cy="237" rx="12" ry="11" fill="var(--color-eye)" stroke="var(--color-lill)" stroke-width="0.5" opacity="0"></ellipse>
<ellipse class= "eye" cx="479" cy="247" rx="12" ry="11" fill="var(--color-eye)" stroke="var(--color-lill)" stroke-width="0.5" opacity="0"></ellipse>
<path d="M276 350 L347 432 L395 444 L435 432 L455 396 L483 341 L501 285 L495 258 L511 228 L503 153" stroke="var(--color-lill)" stroke-width="5"/>
<path d="M426 217 L424 199 L381 187 L337 199 L365 198 L392 197 L426 217Z" stroke="var(--color-lill)" stroke-width="5"/>
<path d="M483 204 L507 204 L508 218 L491 212 L465 221 L468 210Z" stroke="var(--color-lill)" stroke-width="5"/>
<path d="M457 227 L452 248 L460 288 L465 316 C465 326 456 327 453 328 C449 327 444 326 436 320 L426 321 C420 325 414 322 412 320 L416 305" stroke="var(--color-lill)" stroke-width="5"/>
<path d="M382 371 L410 364 L424 364 L432 369 L451 367 L454 376 L382 371" stroke="var(--color-lill)" stroke-width="5"/>
<path d="M382 371 L413 389 L438 391 L454 376" stroke="var(--color-lill)" stroke-width="5"/>
<path d="M407 444 L397 469 L400 498 L417 527 M417 606 L266 616 L236 572" stroke="var(--color-lill)" stroke-width="5"/>
<path d="M346 236 L362 249 L405 248 L396 230 L386 226 L368 223 L353 229 L346 236Z" stroke="var(--color-lill)" stroke-width="5"/>
<path d="M456 248 L465 239 L478 234 L500 242 L495 258 L474 259 L463 255 L456 248Z" stroke="var(--color-lill)" stroke-width="5"/>
<path d="M3 640 C8 612 0 584 5 557 C17 532 33 509 35 481 C38 465 65 465 66 448 C67 437 38 395 39 384 C43 356 73 365 81 338 C96 306 89 252 119 233 C149 207 152 166 166 131 C182 97 201 63 235 44 C261 27 290 13 320 7 C349 0 379 4 409 3" stroke="var(--color-lill)" stroke-width="7"/>
<path d="M563 600 C577 581 557 556 544 542 C518 512 530 512 526 490 C515 459 531 411 540 382 C541 353 536 323 543 293 C545 270 550 248 557 225 C565 205 562 184 559 164 C558 141 546 123 525 114 C506 92 504 62 481 43 C467 24 439 15 420 3" stroke="var(--color-lill)" stroke-width="7"/>
<path d="M414 33 C414 33 439 33 438 55 C440 74 458 65 465 76 C475 95 489 112 504 127 C514 148 517 174 520 197 C524 224 506 247 508 274 C515 299 505 322 497 345 C485 368 482 395 461 413 C439 432 433 462 426 488 C421 512 418 538 425 562 C433 583 436 605 439 628" stroke="var(--color-lill)" stroke-width="7"/>
<path d="M425 70 C351 84 317 150 309 168 C296 184 281 198 281 220 C275 252 279 284 278 317 C279 340 278 366 262 385 C244 406 227 427 229 457 C231 481 224 504 216 527 C219 551 211 575 210 600 C206 614 215 638 197 644" stroke="var(--color-lill)" stroke-width="7"/>
</svg>
<div class = text-area>
<h1 id ="side">Welcome to the ligth side!</h1>
<h3> We have cookies </h3>
</div>
<div class= "container">
<div class="toggle-container">
<p> Light / Dark mode</p>
<input type="checkbox" id = "switch" name = "theme"/>
<label for="switch">Toggle</label>
<h2 id="citat">Never underestimate an old greyhaired lady</h2>
</div>
</div>
</div>
html{
height: 100%;
font-family: sans-serif;
display:grid;
align-items:center;
justify-items:center;
--bg: #FFF4E3;
--bg-box: #FFCDAB;
--color-headings:#3F3B3B;
--color-text: #575151;
--color-lill: #807777;
--color-eye:#24543C;
}
html[data-theme="dark"]{
--bg: #575151;
--bg-box: #3F3B3B;
--color-headings:#FFFFFF;
--color-text: #FFF4E3;
--color-lill: #FFFFFF;
--color-eye:#BADA55;
}
body {
background-color: var(--bg);
}
.grid{
display:grid;
grid-template-columns: 40% 5% auto;
grid-template-rows:auto auto;
grid-template-areas:
"text-area text-area text-area"
"lill container container "
}
.container{
grid-area:container;
background-color:var(--bg-box);
margin:1em 1em;
padding:2em;
border-radius: 15px;
display:grid;
}
.text-area{
grid-area:text-area;
justify-self:center;
}
.toggle-container{
grid-area:switch;
}
h1{
font-size: 2.4em;
color:var(--color-headings);
}
#citat{
position: relative;
font-size: 1em;
}
#citat::before{
position: absolute;
left: -0.6em;
content: open-quote;
font-size: 2em;
margin-bottom: 0;
}
#citat::after{
position: absolute;
right: 0.8em;
content: close-quote;
font-size: 2em;
}
h2, h3, p{
color: var(--color-text);
line-height: 1.4em;
}
input[type=checkbox]{
height:0;
width:0;
visibility:hidden;
}
label{
cursor:pointer;
text-indent:-9999px; /* need label for screenreaders*/
width:54px;
height:27px;
background:grey;
float:left;
border-radius:100px;
position:relative;
}
label:after{
content:"";
position:absolute;
top:3px;
left:3px;
width:20px;
height:20px;
background:var(--color-eye);
border-radius:90px;
transition: 0.3s;
}
input:checked + label{
background: var(--color-text);
}
input:checked + label:after{
left: calc(100% - 5px);
transform:translateX(-100%);
}
label:active:after{
width:45px;
}
#lill{
display:grid;
grid-area:lill;
margin-right:3em;
}
#lill path:nth-child(3){
stroke-dasharray:499px;
stroke-dashoffset:499px;
animation:line 2s ease forwards;
}
#lill path:nth-child(4){
stroke-dasharray:204px;
stroke-dashoffset:204px;
animation:line 2s ease forwards 0.5s;
}
#lill path:nth-child(5){
stroke-dasharray:115px;
stroke-dashoffset:115px;
animation:line 2s ease forwards 0.5s;
}
#lill path:nth-child(6){
stroke-dasharray:171px;
stroke-dashoffset:171px;
animation:line 2s ease forwards 0.8s;
}
#lill path:nth-child(7){
stroke-dasharray:155px;
stroke-dashoffset:155px;
animation:line 2s ease forwards 1.1s;
}
#lill path:nth-child(8){
stroke-dasharray:85px;
stroke-dashoffset:85px;
animation:line 2s ease forwards 1.1s;
}
#lill path:nth-child(9){
stroke-dasharray:296px;
stroke-dashoffset:296px;
animation:line 2s ease forwards 1.1s;
}
#lill path:nth-child(10){
stroke-dasharray:139px;
stroke-dashoffset:139px;
animation:line 2s ease forwards 2s;
}
#lill path:nth-child(11){
stroke-dasharray:111px;
stroke-dashoffset:111px;
animation:line 2s ease forwards 2s;
}
#lill path:nth-child(12){
stroke-dasharray:971px;
stroke-dashoffset:971px;
animation:line 2s ease forwards 2.2s;
}
#lill path:nth-child(13){
stroke-dasharray:676px;
stroke-dashoffset:676px;
animation:line 2s ease forwards 2.2s;
}
#lill path:nth-child(14){
stroke-dasharray:666px;
stroke-dashoffset:666px;
animation:line 2s ease forwards 2.4s;
}
#lill path:nth-child(15){
stroke-dasharray:662px;
stroke-dashoffset:662px;
animation:line 2s ease forwards 2.4s;
}
.eye{
animation:color 1s forwards 4s;
}
@keyframes line{
to{
stroke-dashoffset:0;
}
}
@keyframes color{
from{
opacity:0;
}
to{
opacity:0.7;
}
}
html.transition,
html.transition *,
html.transition *:before,
html.transition *:after {
transition: all 750ms !important;
transition-delay: 0 !important;
}
var checkbox = document.querySelector('input[name=theme]');
var headText = document.getElementById("side");
checkbox.addEventListener('change', function(){
changeText()
if(this.checked) {
trans()
document.documentElement.setAttribute('data-theme', 'dark')
} else{
trans()
document.documentElement.setAttribute('data-theme', 'light')
}
});
let trans = () => {
document.documentElement.classList.add('transition');
window.setTimeout(() => {
document.documentElement.classList.remove('transition')
}, 1000)
};
function changeText() {
if (headText.innerHTML === "Welcome to the ligth side!") {
headText.innerHTML = "Welcome to the dark side!";
}else {
headText.innerHTML ="Welcome to the ligth side!";
}
}
Also see: Tab Triggers