⚡ COLOR · FONT-SIZE · TEXT-ALIGN · BACKGROUND · BORDER · PADDING · RADIUS · LINKS · IMAGES · RAINBOW · WAVY · TYPEWRITER · FLASHING · SANDBOX MODE · 13 MISSIONS · ⚡   
Khold Dev
HTML
QUEST
KV2 · SANDBOX EDITION
Learn HTML the fun & easy way!
Style text then Sandbox for deeper control.
Quick inserts and a full reference guide.
13 MISSIONS
✍️ STYLE TEXT
🧪 SANDBOX
HTML QUEST © 2026 by Khold Dev
SELECT MISSION · COMPLETE IN ORDER · HINT = HALF POINTS · ORANGE TAG = NEEDS FULL HTML FILE (NOT ITCH.IO INLINE) ·   
SCORE: 0
0 / 13 DONE
MISSION
100 PTS
🎯 TARGET — MATCH THIS
📋 MISSION BRIEF
✏️ CODE EDITOR
👁 LIVE PREVIEW
🧪 SANDBOX MODE · FREE PLAY · ANIMATIONS WORK HERE · CLICK QUICK INSERTS TO ADD CODE ·   
🧪 SANDBOX · FREE PLAY
🧊 ITCH MODE ON — ANIMS + MARQUEE hidden · all options shown work on Itch.io · toggle off for full HTML options
✏️ HTML EDITOR
⚡ QUICK INSERT — click to add at cursor
CSS props go inside style="" on your tag
👁 LIVE PREVIEW
📖 QUICK REFERENCE
📝 HTML TAGS
<h1>–<h6> Headings — h1 biggest, h6 smallest
<p> Paragraph · <b> Bold · <i> Italic · <u> Underline
<a href="URL">text</a> Clickable link
<img src="URL" width="200"> Image
<a href="URL"><img src="URL"></a> Clickable image
<ul><li>item</li></ul> Bullet list
<ol><li>item</li></ol> Numbered list
<div> Block box · <span> Inline box
<br> Line break · <hr> Horizontal line
<blockquote> Indented quote block
🎨 CSS PROPERTIES (inline style="")
color: cyan · red · #ff00ff · rgb(0,255,255)
font-size: 24px · 32px · 50px
text-align: center · left · right (needs width!)
background: #1a1a2e · black · transparent
border: 2px solid cyan · 3px dashed #ff00ff
padding: 20px space INSIDE box · margin: 10px OUTSIDE
border-radius: 10px · 50% (50% = circle)
width: 100% · 300px · opacity: 0.5
font-weight: bold · text-decoration: none · underline
bg-image: background-image:url('img.gif'); background-size:cover;
✨ ANIMATIONS (full HTML only — not Itch.io inline)
⚠ These need <style> tags — work here & in full HTML files but NOT on Itch.io inline.

Rainbow: @keyframes r { 0%{color:red} 50%{color:blue} 100%{color:red} }
apply: animation: r 2s infinite;

Wavy: wrap each letter in <span>, set display:inline-block
@keyframes w { 50%{transform:translateY(-15px)} }
stagger: animation-delay:0.1s per letter

Flashing: @keyframes f { 50%{opacity:0} }animation:f 0.8s infinite

Typewriter: overflow:hidden; white-space:nowrap;
animation:typing 3s steps(20) forwards;
@keyframes typing { from{width:0} to{width:100%} }

Pulse: @keyframes p { 50%{opacity:.5;transform:scale(1.05)} }
✍️ STYLE MY TEXT · TYPE YOUR TEXT · CLICK BUTTONS TO STYLE · COPY THE OUTPUT ·   
✍️ STYLE MY TEXT
🧊 ITCH MODE ON — ANIMS + MARQUEE hidden · CSS + ITCH TAGS only · toggle off to unlock full HTML animations
✏️ YOUR TEXT
🎨 CLICK TO APPLY STYLE
Styles stack up · ↩ UNDO removes last · ↺ CLEAR resets all · toggle 🧊 ITCH MODE to unlock animations
👁 LIVE PREVIEW
📋 GENERATED CODE
⎘ COPY — copies just this tag · → SANDBOX — opens sandbox with this code loaded
📊 ACTIVE STYLES
no styles applied yet — click buttons above
🏆 QUEST
COMPLETE!
SCORE: 0
You mastered inline HTML & CSS for Itch.io!
Everything using style="" works on Itch.io.
Head to the 🧪 sandbox to experiment more!
SKILLS UNLOCKED
✓ color · font-size · text-align · background
✓ border · padding · border-radius
✓ <a href=""> links · <img> image links
✓ rainbow · wavy · typewriter animations
✓ combined multi-property inline styles