https://freefrontend.com/html-code-examples/

html freefrontend.com collected 2026-09-25 04:06:21 UTC 78,460 bytes, 30 lines download raw bytes

1<!doctype html><html lang=en-us dir=ltr><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1,viewport-fit=cover"><title>HTML Examples
2</title><meta name=description content="Welcome to our collection of HTML examples! In this curated compilation, we have gathered a diverse range of HTML code snippets that showcase various functionalities and techniques."><meta name=twitter:card content="summary_large_image"><meta name=twitter:creator content="@FreeFrontend"><meta property="twitter:domain" content="freefrontend.com"><meta property="og:url" content="https://freefrontend.com/html-code-examples/"><meta property="twitter:url" content="https://freefrontend.com/html-code-examples/"><meta property="og:updated_time" content="2025-02-02T00:00:00Z"><meta property="og:type" content="article"><meta property="og:title" content="HTML Examples"><meta name=twitter:title content="HTML Examples"><meta property="og:description" content="Welcome to our collection of HTML examples! In this curated compilation, we have gathered a diverse range of HTML code snippets that showcase various functionalities and techniques."><meta name=twitter:description content="Welcome to our collection of HTML examples! In this curated compilation, we have gathered a diverse range of HTML code snippets that showcase various functionalities and techniques."><meta property="og:image" content="https://freefrontend.com/logo.png"><meta name=twitter:image content="https://freefrontend.com/logo.png"><link rel=icon href=https://freefrontend.com/favicon.ico><link rel=alternate type=application/rss+xml href=https://freefrontend.com/sitemap.xml title=FreeFrontend><style>:root{--ff-monospace:ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;--ff-sans-serif:Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;--transition:all 0.3s ease}:root,html[data-theme=dark]{--background-color:#191919;--surface-color:#21262d;--surface-hover:rgba(255,255,255,5%);--border-color:#30363d;--border-subtle:#222222;--title-font-color:#FFFFFF;--main-font-color:rgba(255, 255, 255, 0.85);--muted-font-color:#9CA3AF;--dim-font-color:#6B7280;--link-accent:#FFFFFF;--accent-blue:#93c5fd;--accent-cyan:#93c5fd;--ad-bg:#212121;--btn-demo-bg:#222222;--btn-demo-border:#1b1b1b;--btn-demo-color:#f3f4f6;--input-bg:rgba(255, 255, 255, 0.05);--c14:#0d1117;--badge-bg:#242424}html[data-theme=light]{--background-color:#F8FAFC;--surface-color:#FFFFFF;--surface-hover:#F1F5F9;--border-color:#E2E8F0;--border-subtle:#E2E8F0;--title-font-color:#0F172A;--main-font-color:#334155;--muted-font-color:#64748B;--dim-font-color:#94A3B8;--link-accent:#0284C7;--accent-blue:#0284C7;--accent-cyan:#0284C7;--ad-bg:#f8f9fa;--btn-demo-bg:#F1F5F9;--btn-demo-border:#CBD5E1;--btn-demo-color:#0F172A;--input-bg:#FFFFFF;--commas:rgba(0,0,0,.6);--e14:#0d1117}@media(prefers-color-scheme:light){:root:not([data-theme=dark]){--background-color:#F8FAFC;--surface-color:#FFFFFF;--surface-hover:#F1F5F9;--border-color:#E2E8F0;--border-subtle:#E2E8F0;--title-font-color:#0F172A;--main-font-color:#334155;--muted-font-color:#64748B;--dim-font-color:#94A3B8;--link-accent:#0284C7;--accent-blue:#0284C7;--accent-cyan:#0284C7;--ad-bg:#F1F5F9;--btn-demo-bg:#F1F5F9;--btn-demo-border:#CBD5E1;--btn-demo-color:#0F172A;--input-bg:#FFFFFF}}*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}html{scrollbar-gutter:stable;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}html:has([popover]:popover-open){overflow:hidden;overscroll-behavior:none}body{width:100%;font-family:var(--ff-sans-serif);font-size:15px;color:var(--main-font-color);background-color:var(--background-color);word-break:break-word;transition:background-color .2s ease,color .2s ease}body:has([popover]:popover-open){overflow:hidden}:target{scroll-margin-top:20px}@media(max-width:1480px){:target{scroll-margin-top:80px}}a{color:var(--main-font-color)}a:hover{color:var(--accent-cyan)}h2{line-height:2;font-size:2rem;color:var(--title-font-color)}h3{line-height:2;font-size:1.4rem;color:var(--title-font-color)}p{max-width:75ch;margin:.2rem 0 1.5rem;font-size:1.25rem;line-height:1.7;color:var(--muted-font-color)}section{max-width:860px;margin:0 auto}img,video{width:100%}ol{margin-left:1.5rem}ul{margin:0 0 0 18px}li{font-size:1.25rem}code{margin:0 .16px;font-size:95%;letter-spacing:.2px;vertical-align:baseline;font-weight:600}.yt{width:100%;aspect-ratio:16/9}.pagefind-ui__search-input.svelte-e9gkc3{border:none}

2.pagefind-ui--reset *:where(:not(html,iframe,canvas,img,svg,video):not(svg *,symbol *)){outline:none}.pagefind-ui mark{background-color:transparent}.pagefind-ui__result.svelte-j9e30.svelte-j9e30{padding:1em}.pagefind-ui__result-thumb.svelte-j9e30.svelte-j9e30{max-width:200px}.pagefind-ui__results-area.svelte-e9gkc3{border-right:1px solid var(--border-subtle);border-top:1px solid var(--border-subtle)}.pagefind-ui__message.svelte-e9gkc3{padding-left:2%}#search{min-height:55px;max-width:100%;margin-bottom:2rem;padding-left:1rem;padding-right:1rem;padding-bottom:1px;border-bottom:1px solid var(--border-subtle)}.container{display:flex;position:relative}.content{padding-top:1rem;padding-left:300px;width:100%;max-width:1600px;margin:0 auto}.sidebar::-webkit-scrollbar{display:none}.ad-container{margin:0 auto 3rem;min-height:280px;position:relative}.ad-container-header{margin:2rem auto}.ad-container .block{width:100%;min-height:510px;margin:0 auto;overflow:hidden;background:var(--ad-bg);border:1px solid var(--border-color);border-radius:12px;text-align:center;padding:1rem 16px 2rem}.ad-label{display:block;font-family:var(--ff-monospace);font-size:.65rem;color:var(--dim-font-color);text-transform:uppercase;letter-spacing:.1em;margin:0 0 1rem}.sidebar{display:flex;flex-direction:column;border-right:1px solid var(--border-subtle);background-color:var(--background-color);bottom:0;flex-shrink:0;overflow-x:hidden;overflow-y:auto;position:fixed;top:0;width:300px;z-index:10;padding-top:1rem;font-family:var(--ff-monospace);transition:background-color .2s ease,border-color .2s ease}.sidebar .wrapper{display:flex;flex-direction:column;flex-grow:1;min-height:100%}.sidebar .logo-container{padding-left:1rem;padding-bottom:.7rem;border-bottom:1px solid var(--border-subtle)}.sidebar .logo-container a,.sidebar .logo-container h1,.sidebar .logo-container span{margin:0;font-size:1.5rem;font-weight:800;color:var(--title-font-color);text-decoration:none;letter-spacing:-.03em;font-family:var(--ff-sans-serif)}.sidebar .logo-container h1 span,.sidebar .logo-container span span{margin-left:.2rem;font-size:.8rem}.sidebar .nav-group{margin:2rem 0 2rem 1.1rem}.sidebar .nav-title{font-size:.75rem;text-transform:uppercase;color:var(--dim-font-color);letter-spacing:.05em;font-weight:600}.sidebar .nav-group .nav-list{list-style:none;padding:0;margin:0}.sidebar .nav-group .nav-link{display:flex;justify-content:space-between;align-items:center;padding:.5rem .75rem;margin:0 -.75rem;border-radius:6px;text-decoration:none;font-size:.9rem;color:var(--main-font-color);transition:all .2s}.sidebar .nav-group .nav-link:hover{color:var(--title-font-color);background:var(--surface-hover)}.sidebar .nav-group .nav-link[data-tech=html]:hover{color:#ffaa8a}.sidebar .nav-group .nav-link[data-tech=css]:hover{color:#93c5fd}.sidebar .nav-group .nav-link[data-tech=javascript]:hover{color:#e5c15b}.sidebar .nav-group .nav-link[data-tech=bootstrap]:hover{color:#a78bfa}.sidebar .nav-group .nav-link[data-tech=tailwind]:hover{color:#74a9cd}.sidebar .nav-group .badge{font-size:.75rem;color:var(--dim-font-color);background:var(--surface-hover);padding:2px 6px;border-radius:10px;margin-right:1.1rem}.related-nav-list{list-style:none;padding:0;margin:0;border-left:1px solid var(--border-color);margin-left:4px}.related-nav-link{position:relative;display:block;padding:4px 20px;color:var(--muted-font-color);font-size:13px;text-decoration:none;transition:all .25s cubic-bezier(.4,0,.2,1)}.related-nav-link::before{content:"";position:absolute;left:-1px;top:50%;transform:translateY(-50%);width:2px;height:0;background-color:var(--title-font-color);transition:all .25s ease;border-radius:2px}.related-nav-link:hover{color:var(--title-font-color);background:var(--surface-hover)}.related-nav-link:hover::before{height:60%}.related-nav-link[data-tech=bootstrap]:hover::before{background-color:#a78bfa}.related-nav-link[data-tech=tailwind]:hover::before{background-color:#74a9cd}.related-nav-link[data-tech=javascript]:hover::before{background-color:#fde047}.related-nav-link[data-tech=css]:hover::before{background-color:#93c5fd}.related-nav-link[data-tech=html]:hover::before{background-color:#ffaa8a}

2.related-nav-link[data-tech=react]:hover::before{background-color:#a5f3fc}.related-nav-link[data-tech=vue]:hover::before{background-color:#86efac}.theme-switch-container{margin-bottom:1.5rem}.theme-toggle-btn{display:flex;align-items:center;gap:10px;width:100%;padding:.5rem .75rem;background:var(--surface-hover);border:1px solid var(--border-color);border-radius:8px;color:var(--main-font-color);font-family:var(--ff-monospace);font-size:.85rem;cursor:pointer;transition:all .2s ease}.theme-toggle-btn:hover{color:var(--title-font-color);border-color:var(--accent-blue)}.theme-icon{flex-shrink:0}html[data-theme=dark] .sun-icon{display:block}html[data-theme=dark] .moon-icon{display:none}html[data-theme=light] .sun-icon{display:none}html[data-theme=light] .moon-icon{display:block}.sidebar .sidebar-footer{margin:auto 1.1rem 1.1rem}.sidebar .social-links{display:flex;gap:.8rem;margin-top:.5rem;flex-wrap:wrap}.sidebar .social-btn{color:var(--dim-font-color);transition:all .3s ease;display:flex;align-items:center}.sidebar .social-btn:hover{color:var(--title-font-color);transform:translateY(-2px)}.filter-box{position:relative;margin-bottom:3rem;max-width:100%}.filter-box .search-icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--dim-font-color);pointer-events:none}#catalog-filter{width:100%;padding:1rem 1rem 1rem 3rem;background:var(--input-bg);border:1px solid var(--border-color);border-radius:8px;color:var(--title-font-color);font-family:var(--ff-sans-serif);font-size:1rem;outline:none;transition:all .2s ease}#catalog-filter:focus{border-color:var(--accent-blue);box-shadow:0 0 0 4px rgba(56,189,248,.1)}#catalog-filter::placeholder{color:var(--dim-font-color)}.section-list h2{position:sticky;top:0;z-index:5;background:var(--background-color);margin:4rem 0 1rem;font-family:var(--ff-monospace);font-size:1.1rem;text-transform:uppercase;letter-spacing:-.02em;color:var(--accent-cyan);display:flex}.section-list h2::before{content:"// ";margin-right:.5rem;color:var(--accent-cyan)}.section-list ul{list-style:none;padding:0;margin:0;columns:200px auto;column-gap:3rem}.section-list ul li{margin-bottom:.2rem;break-inside:avoid;font-size:.95rem;color:var(--muted-font-color)}.section-list ul li a{color:var(--muted-font-color);text-decoration:none;font-size:.95rem;display:inline-block}.section-list ul li a:hover{color:var(--title-font-color)}.section-list ul ul{columns:1;margin-top:.5rem;margin-bottom:1.5rem;padding-left:1rem;border-left:1px solid var(--border-color)}.section-list ul ul li a{font-size:.9rem;color:var(--dim-font-color)}.section-list ul ul li a:hover{color:var(--accent-cyan)}.toc+ol{display:flex;flex-wrap:wrap;gap:.8rem;padding:0;list-style:none;margin:1rem 0 4rem}.toc+ol li a{display:inline-block;padding:.5rem 1rem;background:var(--surface-hover);border:1px solid var(--border-color);border-radius:100px;color:var(--main-font-color);text-decoration:none;font-family:var(--ff-monospace);font-size:.85rem}.toc+ol li a:hover{background:var(--title-font-color);color:var(--background-color);border-color:var(--title-font-color);transform:translateY(-2px)}.container-single h2,.container-single h3,.container-single strong{font-family:var(--ff-monospace)}.container-single li{list-style:circle}.page-header,.intro{max-width:100%}.intro.full{margin:0 5%}.page-header h1,.intro h1{margin-bottom:1rem;line-height:1.2;letter-spacing:-.02em;font-size:2.5rem;font-weight:800;color:var(--title-font-color);text-wrap:balance}.page-header h1 span{font-size:.6em;color:var(--dim-font-color)}.page-header .meta-info{display:flex;flex-wrap:wrap;gap:.75rem;

2align-items:center;margin-bottom:2rem;font-family:var(--ff-monospace);font-size:.8rem;color:var(--dim-font-color);letter-spacing:.04em;line-height:1.5}.page-header .meta-info .separator{opacity:.35;font-size:.7em;color:var(--dim-font-color);user-select:none}.page-header .meta-info .date time{color:var(--muted-font-color);font-variant-numeric:tabular-nums}.page-header .meta-info .author a{text-decoration:none;color:var(--title-font-color);display:inline-flex;align-items:center;gap:4px;transition:color .2s ease}.page-header .meta-info .author a span:first-child{color:var(--dim-font-color);font-style:italic;text-transform:lowercase;font-weight:400}.page-header .meta-info .author a span:last-child{font-weight:600;border-bottom:1px dotted rgba(255,255,255,.2)}.page-header .meta-info .author a:hover{color:var(--accent-blue)}.page-header .meta-info .author a:hover span:last-child{border-bottom-color:var(--accent-blue)}.page-header .meta-info .read-time{color:var(--muted-font-color)}.postintro{margin-bottom:2rem}.postintro ul{list-style-type:circle;color:var(--muted-font-color)}.postintro ul li{margin:1rem 0}.snippet-card{background-color:var(--ad-bg);border:1px solid transparent;border-radius:16px;margin:0 0 3.5rem;overflow:hidden;content-visibility:auto;contain-intrinsic-size:700px;box-shadow:0 4px 20px -2px rgba(0,0,0,5%);transition:transform .25s cubic-bezier(.4,0,.2,1),border-color .25s ease,box-shadow .25s ease}.snippet-card:hover{border-color:var(--border-color)}.snippet-card code{font-weight:600}.card-media-wrapper{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;cursor:pointer}.card-media-wrapper img,.card-media-wrapper video,.video-as-poster{width:100%!important;height:100%!important;aspect-ratio:16/9;object-fit:cover;display:block;border:none;border-radius:0;transition:transform .4s cubic-bezier(.4,0,.2,1)}.card-media-wrapper .media-overlay{position:absolute;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s ease;z-index:3}.card-media-wrapper:hover .media-overlay{opacity:1}.snippet-card img{aspect-ratio:16/9}.media-overlay-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 22px;border-radius:100px;background:var(--surface-hover);color:var(--title-font-color);font-family:var(--ff-monospace);font-size:.82rem;font-weight:600;border:1px solid rgba(255,255,255,.2);box-shadow:0 10px 25px rgba(0,0,0,.4);transform:translateY(6px);transition:transform .25s ease;cursor:pointer}.card-media-wrapper:hover .media-overlay-btn{transform:translateY(0)}.card-body{padding:1.5rem 1.75rem 1.25rem;display:flex;flex-direction:column;gap:1.25rem}.snippet-card .inner{padding:1.5rem 1.75rem 1.25rem}.card-header-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}.card-title-wrap{flex:1;min-width:260px}.card-title-wrap h3{margin:0;font-size:1.35rem;font-weight:700;line-height:1.3;display:flex;align-items:center;gap:8px}.card-title-link{color:var(--title-font-color);text-decoration:none;transition:color .15s ease}.card-title-link:hover{color:var(--accent-blue)}.badge-a11y{color:var(--accent-cyan);display:inline-flex;vertical-align:middle}.card-actions-toolbar{display:flex;align-items:center;gap:10px}.actions-icon-group{display:flex;align-items:center;height:36px;gap:2px;background:var(--surface-hover);border:1px solid var(--border-color);padding:0 4px;border-radius:8px}.actions-icon-group button{height:28px;background:0 0;border:none;padding:0 6px;border-radius:6px;color:var(--muted-font-color);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:5px;font-family:var(--ff-monospace);font-size:.8rem;transition:all .15s ease}.actions-icon-group button:hover{color:var(--title-font-color);background:rgba(255,255,255,8%)}.actions-icon-group .card-copy-btn.copied{color:#4ade80!important}.actions-icon-group .card-stash-btn .stash-icon-saved{display:none}.actions-icon-group .card-stash-btn.is-saved{color:var(--accent-blue)!important}.actions-icon-group .card-stash-btn.is-saved .stash-icon-save{display:none}.actions-icon-group .card-stash-btn.is-saved .stash-icon-saved{dis

2play:block}.actions-icon-group .github-star-btn.active{color:#facc15!important}.actions-icon-group .github-star-btn.active .star-icon-svg{fill:currentColor}.btn-card-demo-cta{display:inline-flex;align-items:center;height:36px;gap:8px;padding:0 16px;border-radius:8px;background:var(--title-font-color);color:var(--background-color);border:1px solid transparent;font-family:var(--ff-monospace);font-size:.8rem;font-weight:700;cursor:pointer;white-space:nowrap!important;box-shadow:0 2px 8px rgba(0,0,0,8%);transition:all .2s cubic-bezier(.4,0,.2,1)}.btn-card-demo-cta:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(2,132,199,.25);background:var(--accent-blue);color:#fff}.btn-card-demo-cta svg{transition:transform .2s ease}.btn-card-demo-cta:hover svg{transform:scale(1.15)}.card-description p{font-size:1.05rem;line-height:1.6;color:var(--muted-font-color);margin:0;max-width:100%}.dep-chips-list{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.chip-dep{display:inline-flex;align-items:center;gap:5px;font-family:var(--ff-monospace);font-size:.72rem;font-weight:600;padding:2px 8px;border-radius:5px;background:rgba(245,158,11,5%);color:#f59e0b;border:1px solid rgba(245,158,11,.25);white-space:nowrap!important}.chip-dep svg{color:#f59e0b;flex-shrink:0}.card-meta-block{display:flex;flex-direction:column;gap:12px;padding:1rem 1.25rem;background:var(--surface-hover);border:1px solid var(--border-color);border-radius:10px}.meta-pills-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.pills-group{display:flex;flex-wrap:wrap;gap:6px}.chip-tech{font-family:var(--ff-monospace);font-size:.72rem;font-weight:700;padding:4px 9px;border-radius:6px;background:var(--ad-bg);border:1px solid var(--border-color);color:var(--main-font-color);white-space:nowrap!important}.chip-tech.chip-html,.chip-tech.chip-haml,.chip-tech.chip-pug{color:#ff8a65;border-color:rgba(255,138,101,.25)}.chip-tech.chip-css,.chip-tech.chip-scss,.chip-tech.chip-stylus,.chip-tech.chip-less,.chip-tech.chip-postcss{color:#60a5fa;border-color:rgba(96,165,250,.25)}.chip-tech.chip-javascript,.chip-tech.chip-js,.chip-tech.chip-babel,.chip-tech.chip-typescript{color:#facc15;border-color:rgba(250,204,21,.25)}.chip-tech.chip-svg{color:#38bdf8;border-color:rgba(56,189,248,.25)}.chip-feature{font-family:var(--ff-sans-serif);font-size:.75rem;padding:4px 9px;border-radius:6px;background:0 0;border:1px dashed var(--border-color);color:var(--dim-font-color);white-space:nowrap!important}.meta-details-grid{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--border-color);padding-top:10px;margin-top:2px}.meta-spec-item{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.spec-label{font-family:var(--ff-monospace);font-size:.65rem;text-transform:uppercase;color:var(--dim-font-color);font-weight:700;letter-spacing:.05em;white-space:nowrap!important;flex-shrink:0}.spec-value{color:var(--main-font-color);font-size:.8rem}.spec-value.mono{font-family:var(--ff-monospace)}.browser-chips{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.browser-mini-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--ff-monospace);font-size:.75rem;color:var(--muted-font-color);white-space:nowrap!important;word-break:normal!important}.browser-mini-tag img{width:15px!important;min-width:15px!important;max-width:15px!important;height:15px!important;display:block!important;flex-shrink:0!important}.browser-mini-tag span{white-space:nowrap!important}.card-footer-bar{display:flex;align-items:center;justify-content:space-between;padding-top:.25rem;font-family:var(--ff-monospace);font-size:.8rem}.footer-left,.footer-right{display:flex;align-items:center;gap:12px}.author-cell{display:inline-flex;align-items:center;gap:8px;white-space:nowrap!important;word-break:normal!important;flex-shrink:0}.author-prefix{color:var(--dim-font-color);font-size:.75rem;white-space:nowrap!important}.author-avatar-img{width:24px!important;min-width:24px!important;max-width:24px!important;height:24px!important;aspect-ratio:1/1!important;border-radius:50%!important;object-fit:cover!important;display:inline-block!important;flex-shrink:0!important;border:1px solid var(--border-color)}.author-avatar-fallback{width:24px;height:24px;min-width:24px;border-radius:50%;background:var(--surface-hover);color:var(--title-font-color);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;flex-shrink:0}.author-link,.author-plain{color:var(--title-font-color);text-decoration:none;font-weight:600;white-space:nowrap!important;word-break:normal!important}.author-link:hover{color:var(--accent-blue);text-decoration:underline}.badge-difficulty-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:100px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;border:1px solid transparent;white-space:nowrap!important}

2.diff-dot{width:6px;height:6px;border-radius:50%}.badge-difficulty-pill.beginner{background:rgba(74,222,128,.1);color:#4ade80;border-color:rgba(74,222,128,.25)}.badge-difficulty-pill.beginner .diff-dot{background:#4ade80}.badge-difficulty-pill.intermediate{background:rgba(250,204,21,.1);color:#facc15;border-color:rgba(250,204,21,.25)}.badge-difficulty-pill.intermediate .diff-dot{background:#facc15}.badge-difficulty-pill.advanced{background:rgba(244,114,182,.1);color:#f472b6;border-color:rgba(244,114,182,.25)}.badge-difficulty-pill.advanced .diff-dot{background:#f472b6}.license-tag{color:var(--dim-font-color);font-size:.72rem;font-weight:600;text-transform:uppercase;background:var(--surface-hover);padding:3px 8px;border-radius:4px;border:1px solid var(--border-color);white-space:nowrap!important}.video-container+.inner{padding:1.5rem 1.75rem 1.25rem}@media(max-width:650px){.card-body{padding:1.25rem 1rem}.card-header-bar{flex-direction:column;align-items:stretch;gap:.85rem}.card-actions-toolbar{justify-content:space-between}.btn-card-demo-cta{flex:1;justify-content:center}.browser-chips{gap:10px}.card-footer-bar{flex-direction:column;align-items:flex-start;gap:12px}.footer-right{width:100%;justify-content:space-between}}.cp_embed_wrapper,iframe{height:100%}[popover]{position:fixed;inset:0;margin:auto;width:90vw;height:90vh;max-height:100%;padding-top:30px;background-color:var(--background-color);overflow-y:auto;overscroll-behavior:contain}[popover]::backdrop{background-color:rgba(0,0,0,.7);cursor:not-allowed}button.demo,a.btn-demo{background-color:var(--btn-demo-bg);color:var(--btn-demo-color);border:1px solid var(--btn-demo-border);border-radius:100vmax;padding:0 1.25em;font-size:.8rem;line-height:2;font-weight:500;text-transform:lowercase;letter-spacing:.5px;cursor:pointer;font-family:var(--ff-monospace);display:inline-flex;align-items:center;gap:8px;box-shadow:inset 0 1px rgba(255,255,255,.1);transition:all .2s cubic-bezier(.4,0,.2,1)}button.demo::before,a.btn-demo::before{content:"";display:inline-block;width:6px;height:6px;background-color:#99f6e4;border-radius:50%;box-shadow:0 0 5px #99f6e4;transition:transform .2s ease}button.demo:hover,a.btn-demo:hover{background-color:var(--surface-hover);color:var(--title-font-color)}button.demo:active{transform:translateY(1px)}button.demo:focus-visible{outline:2px solid var(--accent-blue);outline-offset:2px}button.close-btn{position:absolute;top:0;right:0;padding:6px 20px;border-radius:0;font-size:.9rem;background-color:var(--accent-cyan);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;transition:color .2s}button.close-btn::before{display:none}.pagination-wrapper{margin:4rem 0 2rem;padding-top:2rem;border-top:1px solid var(--border-color);display:flex;justify-content:center}.pagination{display:flex;gap:.5rem;list-style:none;padding:0;margin:0}.page-link{display:flex;align-items:center;justify-content:center;min-width:2.5rem;height:2.5rem;padding:0 .5rem;font-family:var(--ff-monospace);font-size:.9rem;color:var(--muted-font-color);text-decoration:none;border-radius:6px;background:0 0;border:1px solid transparent;transition:all .2s ease}.page-link:hover:not(.active){color:var(--title-font-color);border-color:var(--border-color)}.page-item.active .page-link{color:var(--title-font-color);font-weight:700;border-color:var(--accent-blue);cursor:default}.page-item.disabled .page-link{color:var(--dim-font-color);opacity:.5;cursor:not-allowed;pointer-events:none}#back-to-top{position:fixed;bottom:1rem;right:.8rem;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:99;background:var(--surface-hover);border:1px solid var(--border-color);color:var(--main-font-color);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transform:translateY(10px);transition:all .3s ease}#back-to-top:hover{background:var(--title-font-color);border-color:var(--title-font-color);color:var(--background-color);transform:translateY(-2px)}#back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0)}.footer{display:flex;margin:2rem auto 0;padding:2rem;border-top:1px solid var(--border-color)}footer span,footer a{font-size:.9rem}footer span.separator{margin:0 5px}img.external{width:14px;

2height:14px;vertical-align:text-top;transition-duration:.3s;transition-timing-function:cubic-bezier(.645,.045,.355,1)}html[data-theme=dark] img.external{filter:invert(1)}a:hover img.external{transform:translate(.15em,0)rotate(12deg)}.container-single{max-width:1100px;margin:0 auto}.single-breadcrumbs{font-family:var(--ff-monospace);font-size:.8rem;color:var(--dim-font-color);margin-bottom:2rem}.single-breadcrumbs a{text-decoration:none;color:var(--dim-font-color);text-wrap:nowrap}.single-breadcrumbs a:hover{color:var(--title-font-color)}.single-breadcrumbs .sep{margin:0 .5rem;opacity:.5}.single-breadcrumbs .current{color:var(--main-font-color)}.single-header{margin:2rem 0;border-bottom:1px solid var(--border-color);padding-bottom:1.5rem}.single-title{font-size:2.5rem;font-weight:800;color:var(--title-font-color);margin-bottom:1rem;line-height:1.1}.single-meta-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;font-family:var(--ff-monospace);font-size:.85rem}.meta-left{color:var(--dim-font-color)}.meta-sep{margin:0 .8rem;opacity:.3}.badge-difficulty{padding:4px 10px;border-radius:100px;text-transform:uppercase;font-size:.7rem;letter-spacing:.05em;border:1px solid transparent;background:var(--surface-hover)}.badge-difficulty.beginner{color:#4ade80;border-color:rgba(74,222,128,.2)}.badge-difficulty.intermediate{color:#facc15;border-color:rgba(250,204,21,.2)}.badge-difficulty.advanced{color:#f472b6;border-color:rgba(244,114,182,.2)}.badge-a11y{display:inline-flex;align-items:center;margin-left:10px;color:var(--accent-cyan);margin-right:1rem}.single-demo-area{margin-bottom:4rem}.codepen{grid-column:1/-1}.codepen-wrapper,.image-wrapper{border:1px solid var(--border-color);overflow:hidden;background:#000;height:600px}.demo-actions{margin-top:1.5rem;display:flex;justify-content:flex-end;gap:1.5rem}.btn-source{font-family:var(--ff-monospace);font-size:.8rem;color:var(--muted-font-color);text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:all .2s ease;padding:4px 0;border-bottom:1px solid transparent}.btn-source:hover{color:var(--title-font-color);border-bottom-color:var(--title-font-color)}.btn-download:hover{color:var(--accent-blue);border-bottom-color:var(--accent-blue)}.btn-source svg{opacity:.7}.btn-source:hover svg{opacity:1;transform:translateY(1px)}.specs-dashboard{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:4rem}.spec-card{background:var(--surface-color);border:1px solid var(--border-color);border-radius:6px;padding:1.5rem}.spec-card h3{font-family:var(--ff-monospace);font-size:.75rem;text-transform:uppercase;color:var(--dim-font-color);letter-spacing:.1em;margin:0 0 1rem}.tech-tag{display:inline-block;font-family:var(--ff-monospace);font-size:.8rem;padding:4px 10px;border-radius:4px;margin:0 6px 6px 0;text-decoration:none;font-weight:600;color:var(--main-font-color);background:var(--surface-hover);border:1px solid var(--border-color)}.tech-tag.tech-html{color:#ff5722;background:rgba(227,79,38,.15);border-color:rgba(227,79,38,.3)}.tech-tag.tech-css{color:var(--accent-blue);background:rgba(56,189,248,.15);border-color:rgba(56,189,248,.3)}.tech-tag.tech-javascript,.tech-tag.tech-js{color:#f7df1e;background:rgba(247,223,30,.1);border-color:rgba(247,223,30,.3)}.feature-list{list-style:none;padding:0;margin:0}.feature-list li{font-size:.9rem;margin-bottom:.5rem;color:var(--muted-font-color);display:flex;gap:8px}.feature-list .check{color:#4ade80;font-weight:700}.env-item{margin-bottom:.8rem;font-size:.9rem}.env-item .label{display:block;color:var(--dim-font-color);font-size:.75rem;margin-bottom:2px}.env-item .value{color:var(--main-font-color);font-family:var(--ff-monospace)}.env-item .value.highlight-green{color:#4ade80}.single-content h3{font-size:1.5rem;margin-bottom:1.5rem;margin-top:2rem;color:var(--accent-blue);border-bottom:1px solid var(--border-color);padding-bottom:.5rem}.container-single .markdown-body h3,span.attention{color:var(--accent-blue)}.markdown-body{font-size:1.1rem;line-height:1.7;color:var(--muted-font-color)}.markdown-body h2,.single-content h2{margin-top:2rem;color:var(--title-font-color)}.markdown-body ul{margin-bottom:1.5rem}.markdown-body p{margin-bottom:1.5rem}.markdown-body pre{background:var(--code-bg)!important;color:var(--main-font-color);padding:1.5rem;border-radius:8px;border:1px solid var(--border-color);overflow-x:auto;margin:1.5rem 0;position:relative;padding-top:2.5rem;max-width:calc(100vw - 2rem);box-sizing:border-box}.markdown-body pre code{background-color:transparent!important;padding:0!important;border-radius:0!important;font-family:var(--ff-monospace);font-size:.9rem;color:inherit;white-space:pre-wrap;word-break:break-word}.markdown-body pre::before{content:attr(data-lang);position:absolute;top:0;left:0;background:var(--surface-hover);color:var(--dim-font-color);font-family:var(--ff-sans-serif);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:4px 12px;border-bottom-right-radius:6px;border-right:1px solid var(--border-color);border-bottom:1px solid var(--border-color);display:block}.copy-code-btn{position:absolute;top:.2rem;right:.5rem;background:var(--surface-hover);border:1px solid var(--border-color);color:var(--muted-font-color);font-family:var(--ff-sans-serif);font-size:.75rem;padding:4px 8px;border-radius:4px;cursor:pointer;opacity:0;transition:all .2s}.markdown-body pre:hover .copy-code-btn{opacity:1}.copy-code-btn:hover{background:var(--accent-blue);color:#fff;border-color:var(--accent-blue)}.code-expand-wrapper{position:relative;overflow:hidden;margin-bottom:1.5rem;border-radius:8px}

2.code-expand-wrapper.collapsed{max-height:400px}.code-expand-wrapper.collapsed::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:120px;background:linear-gradient(to bottom,transparent,var(--background-color) 90%);pointer-events:none}.expand-code-btn{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);z-index:10;background:var(--accent-blue);color:#fff;border:none;font-family:var(--ff-monospace);font-size:.8rem;font-weight:600;padding:.5rem 1.5rem;border-radius:100px;cursor:pointer;box-shadow:0 4px 15px rgba(0,0,0,.2);transition:all .2s ease;display:none}.expand-code-btn:hover{background:var(--title-font-color);color:var(--background-color);transform:translateX(-50%)translateY(-2px)}.code-expand-wrapper.collapsed .expand-code-btn{display:block}.related-posts{margin:5rem 0;padding-top:2rem;border-top:1px solid var(--border-color)}.related-title{font-family:var(--ff-monospace);font-size:.9rem;color:var(--dim-font-color);text-transform:uppercase;margin-bottom:1.5rem}.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}.related-card{background:var(--surface-color);border:1px solid var(--border-color);border-radius:8px;overflow:hidden;text-decoration:none;transition:all .3s ease}.related-img{width:100%;aspect-ratio:16/9;overflow:hidden;background:#000}.related-img img{width:100%;height:100%;object-fit:cover;opacity:.8;transition:transform .5s ease}.related-info{padding:1rem}.related-info h4{font-size:.95rem;margin:0 0 .5rem;color:var(--title-font-color);line-height:1.4}.related-tag{font-family:var(--ff-monospace);font-size:.7rem;color:var(--dim-font-color)}.related-card:hover{border-color:var(--accent-blue);transform:translateY(-4px)}.faq-section{margin-top:5rem;padding-top:3.5rem;border-top:1px solid var(--border-color)}.faq-header{margin-bottom:2rem;max-width:65ch}.faq-kicker{display:inline-block;font-family:var(--ff-monospace);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-blue);margin-bottom:.5rem}.faq-title{font-size:1.8rem;font-weight:700;color:var(--title-font-color);letter-spacing:-.02em;line-height:1.25;margin:0 0 .5rem}.faq-subtitle{font-size:.95rem;line-height:1.5;color:var(--muted-font-color);margin:0}.faq-container{display:flex;flex-direction:column;gap:10px;max-width:860px}.faq-item{background:var(--ad-bg);border:1px solid var(--border-color);border-radius:12px;overflow:hidden;transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease}.faq-item:hover{border-color:var(--accent-blue)}.faq-item[open]{border-color:var(--accent-blue);box-shadow:0 4px 16px -4px rgba(0,0,0,8%)}.faq-question{list-style:none;padding:1.15rem 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer;user-select:none;transition:color .15s ease}.faq-question::-webkit-details-marker{display:none}.faq-question-text{font-size:1.05rem;font-weight:600;color:var(--title-font-color);line-height:1.4;transition:color .2s ease}.faq-icon-wrap{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--surface-hover);border:1px solid var(--border-color);flex-shrink:0;transition:all .25s cubic-bezier(.4,0,.2,1)}.faq-chevron{color:var(--dim-font-color);transition:transform .25s cubic-bezier(.4,0,.2,1),color .2s ease}.faq-item[open] .faq-chevron{transform:rotate(180deg);color:var(--accent-blue)}.faq-item[open] .faq-icon-wrap{border-color:var(--accent-blue)}.faq-answer{padding:0 1.25rem 1.25rem;animation:faq-fade-in .25s ease}@keyframes faq-fade-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.faq-answer-content{font-size:.95rem;line-height:1.65;color:var(--muted-font-color);border-top:1px dashed var(--border-color);padding-top:1rem}.faq-answer-content p{margin:0 0 .75rem;font-size:.95rem;max-width:100%}.faq-answer-content p:last-child{margin-bottom:0}.faq-answer-content code{font-family:var(--ff-monospace);font-size:.85em;padding:2px 6px;border-radius:4px;background:var(--surface-hover);border:1px solid var(--border-color);color:var(--accent-cyan)}.faq-answer-content a{color:var(--accent-blue);text-decoration:underline;text-underline-offset:3px}.faq-answer-content a:hover{color:var(--title-font-color)}.faq-answer-content ul,.faq-answer-content ol{margin:.5rem 0 .75rem 1.25rem;padding:0}.faq-answer-content li{font-size:.92rem;margin-bottom:.35rem;color:var(--muted-font-color)}@media(max-width:600px){.faq-title{font-size:1.45rem}.faq-question{padding:1rem}.faq-question-text{font-size:.95rem}.faq-answer{padding:0 1rem 1rem}}.custom-preview-popover{position:fixed!important;inset:0!important;margin:auto!important;width:95vw!important;height:95vh!important;max-width:1600px!important;max-height:95vh!important;background-color:var(--background-color)!important;border:1px solid var(--border-color)!important;border-radius:12px!important;padding:0!important;overflow:hidden!important;box-shadow:0 25px 50px -12px rgba(0,0,0,.5)!important;color:var(--main-font-color)!important;font-family:var(--ff-sans-serif)!important}.custom-preview-popover::backdrop{background-color:rgba(0,0,0,.8)!important;backdrop-filter:blur(5px)!important}.custom-preview-popover button[popovertarget].btn-close-popup{background:var(--surface-hover);border:1px solid var(--border-color);color:#ffaa8a;font-size:12px}.custom-preview-popover button[popovertarget].btn-close-popup:hover{background:#ffaa8a;color:#fff;border-color:#ffaa8a;transform:translateY(0);box-shadow:none}.block-preview-container{display:flex;flex-direction:column;height:100%;width:100%}.preview-header-bar{display:flex;justify-content:space-between;align-items:center;padding:12px 24px;background:var(--surface-color);border-bottom:1px solid var(--border-color)}.mode-toggles,.viewport-toggles{display:flex;background:var(--surface-hover);padding:4px;border-radius:8px;border:1px solid var(--border-color)}.mode-btn,.vp-btn{background:0 0;border:none;color:var(--muted-font-color);padding:6px 16px;font-size:13px;font-weight:600;cursor:pointer;border-radius:6px;transition:all .2s}.mode-btn:hover,.vp-btn:hover{color:var(--title-font-color)}.mode-btn.active{background:var(--surface-color);color:var(--accent-cyan);box-shadow:0 1px 3px rgba(0,0,0,.1)}.vp-btn.active{background:var(--surface-color);color:var(--title-font-color);box-shadow:0 1px 3px rgba(0,0,0,.1)}.export-actions{display:flex;gap:10px}.export-btn{background:0 0;border:1px solid var(--border-color);color:var(--main-font-color);padding:6px 12px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s}button[popovertarget].export-btn::before{display:none}.export-btn:hover{background:var(--accent-cyan);color:#000;border-color:var(--accent-cyan)}

2.btn-run-code.has-changes{background:var(--surface-hover)!important;border-color:var(--accent-cyan)!important;color:var(--accent-cyan)!important}.block-preview-container.mode-preview .iframe-wrapper{display:flex;flex:1}.block-preview-container.mode-preview .viewport-toggles{display:flex}.block-preview-container.mode-preview .code-tabs-container{display:none}.block-preview-container.mode-code .iframe-wrapper{display:none}.block-preview-container.mode-code .viewport-toggles{display:none}.block-preview-container.mode-code .code-tabs-container{display:flex;flex-direction:column;flex:1}.iframe-wrapper{background:#000;justify-content:center;align-items:center;overflow:auto;transition:width .3s cubic-bezier(.4,0,.2,1);margin:0 auto}.iframe-wrapper.desktop-width{width:100%}.iframe-wrapper.tablet-width{width:800px;max-width:100%}.iframe-wrapper.mobile-width{width:376px;max-width:100%}.preview-iframe{width:100%;height:100%;min-height:450px;border:1px solid var(--border-color);background:#fff}.code-tabs-container{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.tabs-nav{display:flex;background:var(--surface-color);border-bottom:1px solid var(--border-color);padding:0 16px;flex-shrink:0}.tab-trigger{background:0 0;border:none;color:var(--muted-font-color);padding:12px 20px;font-size:13px;font-family:var(--ff-monospace);cursor:pointer;border-bottom:2px solid transparent}.tab-trigger.active{color:var(--accent-cyan);border-bottom-color:var(--accent-cyan)}.tabs-content{flex:1;min-height:0;overflow:hidden;position:relative}.tab-panel{position:absolute;inset:0;display:none;overflow:hidden}.tab-panel.active{display:block}.Í¼14 .cm-activeLineGutter{background-color:var(--e14)}.cm-editor-wrapper{height:100%;overflow:hidden;position:relative}.cm-editor-wrapper .cm-editor{height:100%}.cm-editor-wrapper .cm-scroller{overflow:auto!important;font-family:cascadia code,fira code,jetbrains mono,ui-monospace,monospace!important;font-size:14px!important;line-height:1.6!important}.cm-editor-wrapper .cm-content{padding:24px;font-family:cascadia code,fira code,jetbrains mono,ui-monospace,monospace!important}.cm-editor-wrapper .cm-gutters{display:flex;background-color:var(--surface-color);color:var(--dim-font-color);border-right:1px solid var(--border-color);min-width:48px}.cm-editor-wrapper .cm-content{padding-left:10px!important}.cm-editor-wrapper.modified{box-shadow:inset 3px 0 #f59e0b}.cm-editor-wrapper .cm-scroller::-webkit-scrollbar{width:8px;height:8px}.cm-editor-wrapper .cm-scroller::-webkit-scrollbar-track{background:0 0}.cm-editor-wrapper .cm-scroller::-webkit-scrollbar-thumb{background:rgba(128,128,128,.2);border-radius:4px}.cm-editor-wrapper .cm-scroller::-webkit-scrollbar-thumb:hover{background:rgba(128,128,128,.4)}.tab-panel>.copy-tab-code{display:none!important}.cm-copy-btn{position:absolute;top:16px;right:16px;z-index:100;background:var(--surface-hover);border:1px solid var(--border-color);color:var(--muted-font-color);padding:6px 12px;border-radius:6px;font-size:11px;font-family:var(--ff-sans-serif);font-weight:600;cursor:pointer;transition:all .2s}.cm-copy-btn:hover{color:var(--title-font-color);border-color:var(--accent-blue)}@media(max-width:1480px){.container{padding:1rem}.sidebar{position:fixed;top:0;left:0;width:100%;height:60px;flex-direction:row;align-items:center;padding:0 0 0 1rem;border-right:none;border-bottom:1px solid var(--border-color);background:var(--background-color);overflow-y:hidden;white-space:nowrap}.content{max-width:1000px;padding:60px 0 0}.sidebar .wrapper{flex-direction:row;align-items:center;width:100%}.sidebar .logo-container{border-bottom:none;padding:0;margin-right:1rem}.sidebar .logo-container a{font-size:1.2rem}.sidebar-nav{display:flex;flex-grow:1;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;align-items:center;height:100%;padding-right:1rem}.sidebar-nav::-webkit-scrollbar{display:none}.sidebar .nav-group{margin:0;display:flex;align-items:center}.sidebar .nav-group .nav-list{display:flex;gap:.5rem;margin-left:.5rem}.sidebar .nav-group .nav-link{background:var(--surface-hover);border:1px solid var(--border-color);border-radius:100px;padding:.3rem .8rem;margin:0;font-size:.8rem}.sidebar .nav-group .nav-link span{margin:0}.sidebar .nav-group .badge,.sidebar .sidebar-footer,.sidebar .nav-group .nav-title{display:none}.related-nav-list{display:flex;gap:8px;border-left:none;margin-left:10px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}.related-nav-link{background:var(--surface-hover);border:1px solid var(--border-color);border-radius:100px;padding:.2rem .4rem;margin:0;font-size:.8rem}.related-nav-link:before{display:none}}

2@media(max-width:900px){.custom-preview-popover{width:100vw!important;height:100vh!important;max-width:100vw!important;max-height:100vh!important;border-radius:0}.preview-header-bar{flex-direction:column;gap:12px;padding:16px}.export-actions{margin-right:0;width:100%;justify-content:center}.specs-dashboard{grid-template-columns:1fr}.single-title{font-size:2rem}.single-container{padding:1rem}}@media(max-width:768px){.markdown-body pre code{font-size:.8rem;line-height:1.2}.related-grid{grid-template-columns:1fr}}@media(max-width:600px){.page-header .meta-info,.meta-item{display:block}nav.single-breadcrumbs,span.meta-sep{display:none}.card-meta-info{grid-template-columns:1fr;gap:2px}.meta-row{margin-bottom:8px}.meta-label{opacity:.8}.demo-actions{justify-content:space-between;gap:10px}.btn-source{font-size:.75rem}.related-topics{padding:2rem 1rem}.share-buttons.smart a{margin-left:15px;width:100%;display:inline-block}.preview-iframe{min-height:300px}}@media(max-width:450px){.block-preview-container.mode-preview .viewport-toggles{display:none}.ad-container{padding:.1rem}.page-link{min-width:2rem}.snippet-card{padding:1.5rem .8rem!important}.snippet-card::before,.snippet-card::after{display:none!important}.card-meta-info,.specs-dashboard{grid-template-columns:1fr!important;gap:1rem}.btn-demo,button[popovertarget]{text-align:center}.export-btn{padding:3px 6px}}@media(prefers-reduced-motion:reduce){.btn-run-code{animation:none!important}.run-status{animation:none!important}}.iframe-wrapper{position:relative}.iframe-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--muted-font-color);font-family:var(--ff-monospace);font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;z-index:1;pointer-events:none;animation:pulse-loader 1.5s ease-in-out infinite}@keyframes pulse-loader{0%,100%{opacity:.4}50%{opacity:1}}.preview-iframe{position:relative;z-index:2;opacity:0;transition:opacity .4s ease,width .3s cubic-bezier(.4,0,.2,1)!important}.preview-iframe.loaded{opacity:1}.sticky-toolbar{position:fixed;bottom:84px;right:24px;z-index:999;background-color:var(--ad-bg);border:1px solid var(--border-color);border-radius:12px;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,5%);padding:8px;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;visibility:hidden;transform:translateY(20px);transition:all .3s cubic-bezier(.4,0,.2,1)}.sticky-toolbar.is-visible{opacity:1;visibility:visible;transform:translateY(0)}.btn-theme-toggle{width:14px;height:14px;border-radius:8px;border:none;background-color:transparent;color:var(--title-font-color);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.btn-theme-toggle:hover{color:var(--accent-blue);transform:scale(1.15)}html[data-theme=dark] .sun-icon{display:block}html[data-theme=dark] .moon-icon{display:none}html[data-theme=light] .sun-icon{display:none}html[data-theme=light] .moon-icon{display:block}

2.toolbar-share-group{display:flex;flex-direction:column;gap:6px}.toolbar-share-group a{padding:0!important;margin:0!important}.toolbar-share-group a .a2a_svg{filter:grayscale(75%);opacity:.6;border-radius:8px!important;transition:all .2s ease!important}.toolbar-share-group a:hover .a2a_svg{filter:grayscale(0%);opacity:1}.toolbar-divider{width:100%;height:1px;background-color:var(--border-color);margin:4px 0}.btn-scroll-top{width:32px;height:32px;border-radius:8px;border:none;background-color:transparent;color:var(--title-font-color);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.btn-scroll-top:hover{transform:scale(1.3)}@media(max-width:1070px){.toolbar-share-group,.toolbar-divider{display:none!important}.sticky-toolbar{padding:4px;bottom:16px;right:16px}.btn-scroll-top{width:40px;height:40px;color:var(--title-font-color);border-radius:50%}.btn-theme-toggle,.btn-scroll-top{width:36px;height:36px}}.card-copy-btn{margin-top:1px;background:0 0;border:none;color:var(--muted-font-color);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .2s ease}.card-copy-btn:hover{color:var(--title-font-color)}.card-copy-btn.copied{color:#4ade80!important}.guide-tab-content{background-color:var(--c14);color:#8b949e;font-family:var(--ff-monospace);font-size:13px;line-height:1.6;padding:24px;min-height:100%;overflow-y:auto}.guide-tab-content ul{list-style:none;padding-left:0;margin:0;max-width:850px}.guide-tab-content li{position:relative;margin-bottom:1.25rem;font-size:14px}.guide-tab-content li:last-child{margin-bottom:0}.guide-tab-content li strong{color:#4ade80;font-weight:600}.guide-tab-content code{color:var(--accent-blue);white-space:nowrap}.toolbar-scroll-progress{font-family:var(--ff-monospace);font-size:.65rem;font-weight:700;color:var(--accent-cyan);text-align:center;padding:2px 0;margin-bottom:2px;user-select:none;pointer-events:none}.meta-values-list .meta-value:not(:last-child)::after{content:", ";color:var(--commas)}.adblock-notice{margin-bottom:1rem;padding:14px 16px;background-color:var(--background-color);border:1px solid var(--border-color);display:flex;gap:12px;align-items:flex-start;font-family:var(--ff-sans-serif);transition:border-color .2s ease,box-shadow .2s ease;box-shadow:0 2px 8px rgba(0,0,0,5%)}.adblock-notice:hover{border-color:rgba(244,114,182,.35);box-shadow:0 4px 15px rgba(0,0,0,.15)}.adblock-notice-icon{font-size:.7rem;line-height:1;flex-shrink:0;margin-top:1px;transition:transform .2s ease}.adblock-notice:hover .adblock-notice-icon{transform:scale(1.2)}.adblock-notice-text{text-wrap:balance;font-size:.7rem;line-height:1.45;color:var(--muted-font-color)}.adblock-notice-text strong{color:var(--title-font-color);font-size:.8rem;font-weight:600;display:inline-block;margin-bottom:2px}@media(max-width:1480px){.adblock-notice{display:none!important}}.editors-choice-section{margin:2rem auto 5rem;padding:2rem;background:var(--ad-bg);border:1px solid var(--border-color);border-radius:12px;position:relative;overflow:hidden}.choice-section-header{margin-bottom:2rem;max-width:65ch}.choice-kicker{font-family:var(--ff-monospace);font-size:.8rem;font-weight:700;text-transform:uppercase;color:var(--accent-blue);display:block;margin-bottom:.5rem}.choice-main-title{font-size:1.8rem;line-height:1.2;margin:0 0 .5rem;color:var(--title-font-color)}.choice-subtitle{font-size:1rem;line-height:1.5;margin:0;color:var(--muted-font-color)}.editors-choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}.choice-card{background:var(--background-color);border:1px solid var(--border-color);border-radius:12px;display:flex;flex-direction:column;overflow:hidden;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;position:relative}.choice-card-production:hover{border-color:#52d689}.choice-card-performance:hover{border-color:#49b4e7}.choice-card-creative:hover{border-color:#b67bf2}.choice-badge{position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:100px;background:rgba(15,23,42,.85);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.15);font-family:var(--ff-monospace);font-size:.7rem;font-weight:700;color:#fff;box-shadow:0 4px 10px rgba(0,0,0,.3)}.choice-media{width:100%;aspect-ratio:16/9;overflow:hidden;position:relative}.choice-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}.choice-content{padding:1.25rem;display:flex;flex-direction:column;flex-grow:1}.choice-title{font-size:1.15rem;line-height:1.3;margin:0 0 .85rem;color:var(--title-font-color)}.curator-note{background:var(--surface-hover);border-left:3px solid var(--accent-blue);border-radius:0 6px 6px 0;padding:8px 12px;margin-bottom:1.25rem;display:flex;gap:8px;align-items:flex-start}.choice-card-production .curator-note{border-left-color:#52d689}.choice-card-performance .curator-note{border-left-color:#49b4e7}.choice-card-creative .curator-note{border-left-color:#b67bf2}.curator-text{font-size:.825rem;line-height:1.45;margin:0;color:var(--muted-font-color)}.curator-text strong{color:var(--title-font-color);font-weight:600}.choice-actions{margin-top:auto}.btn-choice-demo{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;background:var(--surface-color);border:1px solid var(--border-color);border-radius:8px;color:var(--title-font-color);font-family:var(--ff-monospace);font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s ease}.choice-card-production .btn-choice-demo:hover{color:#52d689}.choice-card-performance .btn-choice-demo:hover{color:#49b4e7}.choice-card-creative .btn-choice-demo:hover{color:#b67bf2}.btn-choice-demo svg{transition:transform .2s ease}.btn-choice-demo:hover svg{transform:translateX(3px)}.choice-card-production svg{color:#52d689}.choice-card-performance svg{color:#49b4e7}.choice-card-creative svg{color:#b67bf2}@media(max-width:1024px){.editors-choice-grid{grid-template-columns:1fr;gap:1.25rem}.editors-choice-section{padding:1.5rem 1rem}}.snippet-card [popover]{content-visibility:visible!important}.btn-stash-toggle{position:relative;width:32px;height:32px;border:none;background:0 0;color:var(--title-font-color);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:all .2s ease}.btn-stash-toggle:hover{color:var(--accent-blue);transform:scale(1.1)}.stash-toolbar-icon{display:block}.stash-count{position:absolute;top:0;right:0;min-width:15px;height:15px;padding:0 3px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--accent-blue);color:var(--background-color);font-family:var(--ff-monospace);font-size:9px;line-height:1;font-weight:700;animation:stash-badge-pop .25s cubic-bezier(.175,.885,.32,1.275)}.stash-count[hidden],.stash-count:empty{display:none!important}@keyframes stash-badge-pop{0%{transform:scale(0);opacity:0}

2100%{transform:scale(1);opacity:1}}.sticky-toolbar.is-peeking{opacity:1!important;visibility:visible!important;transform:translateY(0)!important}.btn-stash-toggle.stash-attention{color:var(--accent-blue)!important;animation:stash-wobble .8s ease-in-out}.btn-stash-toggle.stash-attention::after{content:"";position:absolute;inset:-4px;border-radius:10px;border:2px solid var(--accent-blue);pointer-events:none;animation:stash-radar 1.2s cubic-bezier(0,0,.2,1)infinite}@keyframes stash-wobble{0%,100%{transform:scale(1)rotate(0)}20%{transform:scale(1.3)rotate(-14deg)}40%{transform:scale(1.3)rotate(14deg)}60%{transform:scale(1.15)rotate(-6deg)}80%{transform:scale(1.1)rotate(3deg)}}@keyframes stash-radar{0%{transform:scale(.85);opacity:1}75%,100%{transform:scale(1.8);opacity:0}}.stash-hint{position:absolute;right:calc(100% + 14px);top:50%;transform:translateY(-50%)translateX(10px);background:var(--surface-color);color:var(--title-font-color);border:1px solid var(--accent-blue);font-family:var(--ff-monospace);font-size:.72rem;font-weight:700;white-space:nowrap;padding:6px 12px;border-radius:8px;box-shadow:0 10px 25px -5px rgba(0,0,0,.3);pointer-events:none;opacity:0;visibility:hidden;transition:opacity .25s ease,transform .25s ease;z-index:1001}.stash-hint::after{content:"";position:absolute;top:50%;left:100%;transform:translateY(-50%);border-width:5px;border-style:solid;border-color:transparent transparent transparent var(--accent-blue)}.stash-hint.is-visible{opacity:1;visibility:visible;transform:translateY(-50%)translateX(0)}.card-stash-btn{margin-top:1px;background:0 0;border:none;color:var(--muted-font-color);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .2s ease}.card-stash-btn:hover{color:var(--title-font-color)}.card-stash-btn .stash-icon-saved{display:none}.card-stash-btn.is-saved{color:var(--accent-blue)}.card-stash-btn.is-saved .stash-icon-save{display:none}.card-stash-btn.is-saved .stash-icon-saved{display:block}.stash-drawer{position:fixed;inset:0;z-index:2000;visibility:hidden;pointer-events:none}.stash-drawer.is-open{visibility:visible;pointer-events:auto}.stash-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(2px);opacity:0;transition:opacity .25s ease}.stash-drawer.is-open .stash-backdrop{opacity:1}.stash-panel{position:absolute;top:0;right:0;width:min(440px,100%);height:100%;background:var(--background-color);border-left:1px solid var(--border-color);box-shadow:-10px 0 30px rgba(0,0,0,.25);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1)}.stash-drawer.is-open .stash-panel{transform:translateX(0)}.stash-header{display:flex;align-items:flex-start;justify-content:space-between;padding:24px;border-bottom:1px solid var(--border-color)}.stash-kicker{display:block;margin-bottom:4px;font-family:var(--ff-monospace);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-blue)}.stash-header h2{margin:0;color:var(--title-font-color);font-size:1.4rem;line-height:1.2}.stash-close{width:32px;height:32px;border:none;border-radius:8px;background:0 0;color:var(--muted-font-color);font-size:24px;line-height:1;cursor:pointer;transition:all .2s ease}.stash-close:hover{background:var(--surface-hover);color:var(--title-font-color)}.stash-toolbar{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;border-bottom:1px solid var(--border-color);font-family:var(--ff-monospace);font-size:11px;color:var(--muted-font-color)}.stash-actions{display:flex;gap:8px}.stash-action{border:none;background:0 0;color:var(--muted-font-color);font-family:var(--ff-monospace);font-size:11px;cursor:pointer;transition:color .15s ease}.stash-action:hover{color:var(--title-font-color)}.stash-action-danger:hover{color:#ef4444}.stash-list{flex:1;overflow-y:auto}.stash-item{display:flex;align-items:center;border-bottom:1px solid var(--border-color);transition:background-color .15s ease}.stash-item:hover{background:var(--surface-hover)}.stash-item-link{flex:1;min-width:0;padding:10px 14px 10px 20px;color:var(--title-font-color);text-decoration:none;display:flex;align-items:center;gap:14px}.stash-item-thumb{width:68px;height:40px;flex-shrink:0;border-radius:6px;overflow:hidden;background:var(--surface-color);border:1px solid var(--border-color);display:flex;align-items:center;justify-content:center;position:relative}.stash-thumb-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}.stash-thumb-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--surface-color);color:var(--dim-font-color)}.stash-thumb-placeholder svg{opacity:.6}.stash-item-details{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px}.stash-item-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.88rem;font-weight:600;color:var(--title-font-color);line-height:1.3;transition:color .15s ease}

2.stash-item:hover .stash-item-title{color:var(--accent-blue)}.stash-item-meta{font-family:var(--ff-monospace);font-size:.65rem;color:var(--dim-font-color);text-transform:uppercase;letter-spacing:.04em}.stash-item-remove{flex:none;width:38px;height:38px;margin-right:12px;border:none;border-radius:6px;background:0 0;color:var(--dim-font-color);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease}.stash-item-remove:hover{color:#ef4444;background:rgba(239,68,68,.1)}.stash-empty{padding:60px 30px;text-align:center;color:var(--muted-font-color)}.stash-empty-icon{margin-bottom:12px;font-size:28px;color:var(--accent-blue)}.stash-empty strong{display:block;margin-bottom:8px;color:var(--title-font-color)}.stash-empty p{max-width:280px;margin:0 auto;font-size:.85rem;line-height:1.5}.stash-empty[hidden]{display:none}body.stash-open{overflow:hidden}.stash-footer{padding:16px 20px;border-top:1px solid var(--border-color);background:var(--ad-bg);display:flex;flex-direction:column;gap:12px}.stash-storage-note{display:flex;align-items:flex-start;gap:8px;font-size:.72rem;color:var(--dim-font-color);line-height:1.4}.stash-storage-note svg{flex-shrink:0;margin-top:2px;color:var(--accent-blue)}.stash-footer-actions{display:flex;gap:8px}.stash-footer-btn{flex:1;padding:6px 10px;font-family:var(--ff-monospace);font-size:.72rem;font-weight:600;border-radius:6px;border:1px solid var(--border-color);background:var(--surface-hover);color:var(--main-font-color);cursor:pointer;transition:all .2s ease;text-align:center}.stash-footer-btn:hover{color:var(--title-font-color);border-color:var(--accent-blue)}@media(max-width:1070px){.btn-stash-toggle{width:36px;height:36px}.stash-count{top:0;right:0}}@media(max-width:600px){.stash-panel{width:100%;border-left:none}.stash-header{padding:20px 16px}.stash-toolbar{padding-left:16px;padding-right:16px}.stash-item-link{padding-left:14px;padding-right:8px;gap:10px}.stash-item-thumb{width:58px;height:34px}.stash-item-remove{margin-right:6px}}@media(prefers-reduced-motion:reduce){.btn-stash-toggle.stash-attention{animation:none!important}.btn-stash-toggle.stash-attention::after{display:none!important}.stash-count{animation:none!important}}.github-star-btn{margin-top:1px;background:0 0;border:none;color:var(--muted-font-color);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:var(--ff-monospace);font-size:.85rem;transition:all .2s ease}.github-star-btn:hover{color:var(--title-font-color)}.github-star-btn.active{color:var(--accent-blue)}.github-star-btn.active .star-icon-svg{fill:currentColor}.github-star-btn .star-count{font-weight:600;line-height:1;margin-top:1px}.single-breadcrumbs{margin-bottom:.75rem;font-family:var(--ff-monospace);font-size:.7rem;line-height:1.3}.single-breadcrumbs .breadcrumbs-list{display:flex;flex-wrap:wrap;align-items:center;list-style:none;padding:0;margin:0}.single-breadcrumbs .breadcrumb-item{display:inline-flex;align-items:center}.single-breadcrumbs .breadcrumb-item:not(:last-child)::after{content:"/";margin:0 .4rem;color:var(--dim-font-color);opacity:.3;font-size:.7rem;user-select:none}.single-breadcrumbs .breadcrumb-item a{text-decoration:none;color:var(--dim-font-color);transition:color .15s ease;font-size:.8rem}.single-breadcrumbs .breadcrumb-item a:hover{color:var(--title-font-color)}.single-breadcrumbs .breadcrumb-item.current{color:var(--muted-font-color);font-weight:500;font-size:.8rem}.sub-nav{margin:2rem 0 3rem;padding:1.25rem 1.5rem;background:var(--ad-bg);border:1px solid var(--border-color);border-radius:10px}.sub-nav-label{display:block;font-family:var(--ff-monospace);font-size:.8rem;font-weight:700;line-height:1;color:var(--accent-blue);text-transform:uppercase;margin-bottom:.85rem}.sub-nav-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.6rem}.sub-nav-link{display:flex;align-items:center;justify-content:space-between;padding:.6rem .85rem;background:var(--background-color);border:1px solid var(--border-color);border-radius:6px;color:var(--main-font-color);text-decoration:none;font-size:.875rem;font-weight:500;transition:all .2s ease}.sub-nav-link:hover{color:var(--title-font-color);border-color:var(--accent-blue)}.sub-nav-arrow{color:var(--dim-font-color);flex-shrink:0;margin-left:8px;transition:transform .2s ease,color .2s ease}.sub-nav-link:hover .sub-nav-arrow{color:var(--accent-blue);transform:translateX(3px)}</style><link rel=canonical href=https://freefrontend.com/html-code-examples/><link rel=preconnect href=https://esm.sh crossorigin><link rel=preconnect href=https://public.codepenassets.com crossorigin><link rel=preconnect href=https://codepen.io crossorigin><link rel=dns-prefetch href=https://codepen.io>

2<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7958472158675518" crossorigin=anonymous></script>

vendor: 63 bytes, line 2

2<script async src="https://www.googletagmanager.com/gtag/js?id=

2G-WDG25XV6ED

vendor: 11 bytes, line 2

2"></script>

2<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-WDG25XV6ED")</script>

2<script src=https://analytics.ahrefs.com/analytics.js data-key=Th9ztPLDOFodUfgMRnFFag async></script>

2<script>(function(){const e=localStorage.getItem("theme");if(e)document.documentElement.setAttribute("data-theme",e);else{const e=window.matchMedia("(prefers-color-scheme: dark)").matches;document.documentElement.setAttribute("data-theme",e?"dark":"light")}})()</script>

2</head><body class=google-anno-skip><div class=container><aside class=sidebar itemscope itemtype=https://schema.org/WPSideBar><div class=wrapper><div class=logo-container><a href=https://freefrontend.com/ class=logo aria-label=FreeFrontend><span>FreeFrontend<span>.</span></span></a></div><nav class=sidebar-nav itemscope itemtype=https://schema.org/SiteNavigationElement><div class=nav-group><span class=nav-title>Languages</span><ul class=nav-list><li><a href=/html-code-examples/ class=nav-link itemprop=url data-tech=html><span itemprop=name>HTML</span>
3<span class=badge>36</span></a></li><li><a href=/css-code-examples/ class=nav-link itemprop=url data-tech=css><span itemprop=name>CSS</span>
4<span class=badge>282</span></a></li><li><a href=/javascript-code-examples/ class=nav-link itemprop=url data-tech=javascript><span itemprop=name>JavaScript</span>
5<span class=badge>218</span></a></li></ul></div><div class=nav-group><span class=nav-title>Frameworks</span><ul class=nav-list><li><a href=/bootstrap-code-examples/ class=nav-link itemprop=url data-tech=bootstrap><span itemprop=name>Bootstrap</span>
6<span class=badge>65</span></a></li><li><a href=/tailwind-code-examples/ class=nav-link itemprop=url data-tech=tailwind><span itemprop=name>Tailwind CSS</span>
7<span class=badge>78</span></a></li></ul></div></nav><div class=sidebar-footer><div class=adblock-notice><div class=adblock-notice-icon>â¤ï¸</div><div class=adblock-notice-text><strong>Help keep FreeFrontend free.</strong><br>It's a one-person project, and ads help cover the costs of running it.
8If you're using an ad blocker, adding the site to your allowlist is a great way to support it.</div></div><span class=nav-title>Community</span><div class=social-links><a href=https://t.me/fr0ntend_news class=social-btn aria-label=Telegram target=_blank rel="noopener me"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentcolor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.48-.94-2.4-1.54-1.06-.7-.37-1.09.23-1.7l1.54-1.42c.07-.06.13-.18.03-.27-.1-.09-.3-.06-.44-.03L8.85 13.2c-.66.2-1.28.2-1.88.03-.68-.18-1.46-.38-1.46-.38s1.08-.82 2.62-1.44c6.33-2.58 8.16-3.1 8.51-3.1.33.0.49.08.49.08z"/></svg>
9</a><a href=https://x.com/FreeFrontend class=social-btn aria-label=Twitter target=_blank rel="noopener me"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentcolor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
10</a><a href=https://www.facebook.com/freefrontend/ class=social-btn aria-label=Facebook target=_blank rel="noopener me"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentcolor"><path d="M14 13.5h2.5l1-4H14v-2c0-1.03.0-2 2-2h1.5V2.14c-.326-.043-1.557-.14-2.857-.14C11.928 2 10 3.657 10 6.7v2.8H7v4h3V22h4v-8.5z"/></svg>
11</a><a href=https://www.linkedin.com/groups/13807698/ class=social-btn aria-label=LinkedIn target=_blank rel="noopener me"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentcolor"><path d="M19 3a2 2 0 012 2v14a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h14m-.5 15.5v-5.3a3.26 3.26.0 00-3.26-3.26c-.85.0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4.0 011.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68.0 001.68-1.68c0-.93-.75-1.69-1.68-1.69A1.69 1.69.0 005.19 6.88c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z"/></svg>
12</a><a href=https://www.pinterest.com/freefrontend/ class=social-btn aria-label=Pinterest target=_blank rel="noopener me"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentcolor"><path d="M9.04 21.54c.96.29 1.93.46 2.96.46a10 10 0 0010-10A10 10 0 0012 2 10 10 0 002 12c0 4.25 2.67 7.9 6.44 9.34-.09-.78-.18-2.07.0-3.04l.58-2.3c-.22-.61-.22-1.55.45-2.22.61-.62 1.77-.25 1.57 1.05-.18 1.1-.96 2.05-.03 2.95 1.06 1.02 3.19.08 3.52-2.58.26-2.14-1.5-3.8-3.7-3.8-3.03.0-4.32 2.15-3.9 4.1.2.9.89.85.89.85-.3.94-1.37.56-1.67-.18-.58-1.43.08-3.99 2.5-5.18 3.65-1.8 7.37.86 6.35 4.97-.73 2.95-2.56 2.92-3.32 1.92-.38-.48-.28-1.3-.28-1.3l-.68 2.6c-.34 1.25-.56 2.19-.24 3.32z"/></svg>
13</a><a href=https://freefrontend-blog.tumblr.com class=social-btn aria-label=Tumblr target=_blank rel="noopener me"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentcolor"><path d="M14.5 2H12c-1 0-1 1-1 2v3.3H8.7v2.8H11v5.6c0 1.9 1 3.3 3.4 3.3H17v

13-3h-1.6c-.7.0-.9-.3-.9-.9V10H17V7.2h-2.5V4c0-.7.0-2 0-2z"/></svg></a></div></div></div></aside><main class=content><div class="intro full"><h1>HTML Examples</h1><div class=section-list><p>This collection demonstrates how HTML5 enables interactivity without heavy JS code, using tags like <code>&lt;details></code> and <code>&lt;summary></code> to create accordions or show/hide widgets. You&rsquo;ll see how to structure complex data with <strong>global attributes</strong> (<code>data-*</code>) for JavaScript interaction and how to effectively use the <code>&lt;template></code> tag for reusable content fragments. These techniques help build fast, modern, and easily maintainable interfaces.</p><nav aria-label="Table of Contents"><h2 class=toc>Table of Contents</h2><ol><li><a href=#tags>Tags</a></li><li><a href=#apis>APIs</a></li><li><a href=#templates>Templates</a></li><li><a href=#other>Other</a></li></ol></nav><div class=filter-box><svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
14<input type=text id=catalog-filter placeholder="Type to filter examples (e.g., 'grid', 'animation')..." aria-label="Filter HTML Examples" autocomplete=off></div><div class="ad-container ad-container-header"><div class=block><ins class=adsbygoogle style=display:block data-ad-client=ca-pub-7958472158675518 data-ad-slot=1316597813 data-ad-format=auto data-full-width-responsive=true></ins></div></div><h2 id=tags>Tags</h2><ul><li><a href=/html-datalist/><code>&lt;datalist></code></a></li><li><a href=/html-del-ins/><code>&lt;del>, &lt;ins></code></a></li><li><a href=/html-details-summary/><code>&lt;details>, &lt;summary></code></a></li><li><a href=/html-dialog/><code>&lt;dialog></code></a></li><li><a href=/html-dt-dd/><code>&lt;dt>, &lt;dd></code></a></li><li><a href=/html-figure-figcaption/><code>&lt;figure>, &lt;figcaption></code></a></li><li><a href=/html-hr/><code>&lt;hr></code></a></li><li><a href=/html-progress/><code>&lt;progress></code></a></li><li><a href=/html-sup-sub/><code>&lt;sup>, &lt;sub></code></a></li><li><a href=/html-table/><code>&lt;table></code></a></li></ul><h2 id=apis>APIs</h2><ul><li><a href=/html-canvas-api/>Canvas API</a></li><li><a href=/clipboard-api/>Clipboard API</a></li><li><a href=/deck-of-cards-api/>Deck of Cards API</a></li><li><a href=/fetch-api/>Fetch API</a></li><li><a href=/css-houdini-api/>Houdini APIs</a></li><li><a href=/dom-rect-api/>DOMRect API</a></li><li><a href=/html-drag-and-drop-api/>HTML Drag and Drop API</a></li><li><a href=/file-api/>File API</a></li><li><a href=/fullscreen-api/>Fullscreen API</a></li><li><a href=/gamepad-api/>Gamepad API</a></li><li><a href=/github-api/>GitHub API</a></li><li><a href=/intersection-observer-api/>Intersection Observer API</a></li><li><a href=/pointer-events-api/>Pointer Events API</a></li><li><a href=/html-popover-api/>Popover API</a></li><li><a href=/html-resize-observer-api/>Resize Observer API</a></li><li><a href=/unsplash-api/>Unsplash API</a></li><li><a href=/url-api/>URL API</a></li><li><a href=/view-transition-api/>View Transition API</a></li><li><a href=/web-animations-api/>Web Animations API</a></li><li><a href=/web-audio-api/>Web Audio API</a></li><li><a href=/web-crypto-api/>Web Crypto API</a></li><li><a href=/webgl/>WebGL</a></li><li><a href=/youtube-api/>YouTube API</a></li></ul><h2 id=templates>HTML Templates</h2><ul><li><a href=/html-401-templates/>401 Pages</a></li><li><a href=/html-403-templates/>403 Pages</a></li><li><a href=/html-404-templates/>404 Pages</a></li><li><a href=/html-404-funny-templates/>Funny 404 Pages</a></li><li><a href=/html-408-templates/>408 Pages</a></li><li><a href=/html-500-templates/>500 Pages</a></li><li><a href=/html-resume-templates/>CV/Resume</a></li></ul><h2 id=other>Other</h2><ul><li><a href=/html-data-attributes/>data-* Attributes</a></li><li><a href=/html-lazy-loading/>Lazy Loading</a></li></ul></div></div><footer class=footer itemscope itemtype=https://schema.org/WPFooter><div class=footer-links><small class=copyright><span itemprop=copyrightYear>2016 - 2026</span>
15&copy;
16<span itemprop=copyrightHolder itemscope itemtype=https://schema.org/Organization><span itemprop=name>FreeFrontend</span>
17</span></small><span class=separator aria-hidden=true>&#8728;</span>
18<a href=/about-me/ rel=nofollow>About Me</a>
19<span class=separator aria-hidden=true>&#8728;</span>
20<a href=/privacy-policy/ rel=nofollow>Privacy Policy</a>
21<span class=separator aria-hidden=true>&#8728;</span>

22<a href=/cookies-policy/ rel=nofollow>Cookies Policy</a></div></footer></main></div><div id=sticky-toolbar class=sticky-toolbar><div class="a2a_kit a2a_kit_size_32 a2a_vertical_style toolbar-share-group"><a class=a2a_button_x></a><a class=a2a_button_telegram></a><a class=a2a_dd href=https://www.addtoany.com/share></a></div><div class=toolbar-divider></div><button id=theme-toggle-btn class=btn-theme-toggle aria-label="Toggle theme" title="Toggle theme"><svg class="theme-icon sun-icon" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg><svg class="theme-icon moon-icon" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg></button><div class=toolbar-divider></div><button id=stash-toggle-btn class=btn-stash-toggle type=button aria-label="Open saved snippets" title="Saved snippets">
23<svg class="stash-toolbar-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="1.8"><path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/></svg>
24<span id=stash-count class=stash-count hidden>0</span>
25<span id=stash-hint class=stash-hint aria-live=polite>Saved to stash!</span></button><div class=toolbar-divider></div><div id=toolbar-scroll-progress class=toolbar-scroll-progress aria-hidden=true>0%</div><button id=btn-scroll-top class=btn-scroll-top aria-label="Scroll to top"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentcolor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"/></svg></button></div><div id=stash-drawer class=stash-drawer aria-hidden=true><div class=stash-backdrop data-stash-close></div><aside class=stash-panel role=dialog aria-modal=true aria-labelledby=stash-title><div class=stash-header><div><span class=stash-kicker>// LOCAL STORAGE</span><h2 id=stash-title>Saved Snippets</h2></div><button class=stash-close type=button aria-label="Close saved snippets" data-stash-close>Ã</button></div><div class=stash-toolbar><span id=stash-summary>0 saved</span><div class=stash-actions><button id=stash-clear type=button class="stash-action stash-action-danger">
26Clear all</button></div></div><div id=stash-list class=stash-list></div><div class=stash-footer><div class=stash-storage-note><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
27<span>Bookmarks are stored in this browser. Copy links to keep them in your notes.</span></div><button id=stash-copy-markdown type=button class=stash-footer-btn style=width:100%>
28<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
29<span class=btn-text>Copy all links</span></button></div><div id=stash-empty class=stash-empty><div class=stash-empty-icon>â</div><strong>Your stash is empty</strong><p>Save snippets while browsing and theyâll stay here.</p></div></aside></div>

29<script>document.addEventListener("DOMContentLoaded",()=>{const e=document.querySelectorAll(".ad-container .block");if(!e.length)return;const t=new IntersectionObserver((e,t)=>{e.forEach(e=>{if(!e.isIntersecting)return;t.unobserve(e.target);try{(window.adsbygoogle=window.adsbygoogle||[]).push({})}catch(e){console.error("AdSense push error:",e)}})},{rootMargin:"70px 0px"});e.forEach(e=>t.observe(e))})</script>

29<script>var a2a_config=a2a_config||{};a2a_config.num_services=4</script>

29<script defer src=https://static.addtoany.com/menu/page.js></script>

29<script defer src=/js/main.92a458d6d9fc334405d0b06ec8e70af8e77c0f2563f46e99d052121324f4275f.js integrity="sha256-kqRY1tn8M0QF0LBuyOcK+Od8DyVj9G6Z0FISEyT0J18=" crossorigin=anonymous></script>

29<script async src=https://public.codepenassets.com/embed/index.js></script>

29<script>(function(){function c(){var b=a.contentDocument||(a.contentWindow&&a.contentWindow.document);if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'a40727dde90a34d9',t:'MTc5MDMwOTE4MQ=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>

29<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"97791655c0a0482fa6c994cbcaf11dd9","r":1,"spa":2}' crossorigin="anonymous"></script>

29
30</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.