Studio Vanta creative agency hero
PicartWeb/hero-section-collection@87193fd823cb · 3 code file(s)

Licence notice — required by the licence; keep it with this code:

MIT License

Copyright (c) 2026 Picart Web

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

--- index.html ---
<!DOCTYPE html>
<!--
MIT License

Copyright (c) 2026 Picart Web

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
-->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Creative Agency | Hero Section Collection</title>
  <link rel="stylesheet" href="style.css">
</head>
<body class="editorial-stack">
  <header class="site-header">
    <nav class="nav-shell" aria-label="Primary navigation">
      <a class="brand" href="../index.html" aria-label="Studio Vanta home"><span>03</span>Studio Vanta</a>
      <button class="menu-toggle" type="button" aria-label="Open navigation menu" aria-controls="navLinks" aria-expanded="false"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg></button>
      <div class="nav-links" id="navLinks">
        <a href="#branding">Branding</a><a href="#motion">Motion</a><a href="#web">Web</a>
      </div>
    </nav>
  </header>

  <main>
    <section class="hero" aria-labelledby="hero-title">
      <div class="hero-copy">
        <p class="eyebrow">Creative Agency</p>
        <h1 id="hero-title">Campaigns with edge, craft, and measurable momentum.</h1>
        <p class="subtitle">A bold brand studio for launches, identities, films, and digital systems that move culture forward.</p>
        <div class="hero-actions" aria-label="Hero calls to action">
          <a class="primary-cta" href="#demo">Book Studio <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
          <a class="secondary-cta" href="#learn"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5v14l11-7-11-7Z"/></svg> See Work</a>
        </div>
        <div class="badge-row" aria-label="Highlights"><span>Branding</span><span>Motion</span><span>Web</span></div>
        <dl class="stats">
          <div><dt>148 launches</dt><dd data-count="148">148 launches</dd></div>
          <div><dt>32 awards</dt><dd>32 awards</dd></div>
        </dl>
      </div>
      <div class="hero-art editorial-stack" aria-label="Creative Agency illustration" role="img">
      <div class="art-orbit"></div>
      <div class="art-card card-a"><span>03</span><strong>Agency</strong></div>
      <div class="art-card card-b"><small>148 launches</small><b>32 awards</b></div>
      <div class="art-shape shape-one"></div>
      <div class="art-shape shape-two"></div>
      <div class="art-lines"><i></i><i></i><i></i><i></i></div>
    </div>
      <a class="scroll-indicator" href="#demo" aria-label="Scroll to demo section"><span></span>Scroll</a>
    </section>

    <section class="demo-strip" id="demo" aria-label="Creative Agency demo information">
      <article>
        <strong>Studio Vanta</strong>
        <p>This standalone hero includes responsive navigation, working CTAs, animated artwork, badges, stats, and a polished mobile layout.</p>
      </article>
      <article id="learn">
        <strong>Production Ready</strong>
        <p>Copy this folder into a project and customize the brand, palette, CTAs, and illustration directly in the HTML and CSS.</p>
      </article>
    </section>

    <section class="nav-targets" aria-label="Studio Vanta navigation preview sections">
      <article id="branding"><span>01</span><strong>Branding</strong><p>Studio Vanta includes a polished branding section placeholder ready for real agency content.</p></article><article id="motion"><span>02</span><strong>Motion</strong><p>Studio Vanta includes a polished motion section placeholder ready for real agency content.</p></article><article id="web"><span>03</span><strong>Web</strong><p>Studio Vanta includes a polished web section placeholder ready for real agency content.</p></article>
    </section>
  </main>

  <p class="live-status" role="status" aria-live="polite"></p>
  <script src="script.js"></script>
</body>
</html>

--- script.js ---
/*!
MIT License

Copyright (c) 2026 Picart Web

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/
const body = document.body;
const menuToggle = document.querySelector(".menu-toggle");
const navLinks = document.getElementById("navLinks");
const statusBox = document.querySelector(".live-status");
const ctas = document.querySelectorAll(".primary-cta, .secondary-cta");

function closeMenu() {
  body.classList.remove("menu-open");
  menuToggle?.setAttribute("aria-expanded", "false");
}

function showStatus(message) {
  if (!statusBox) return;
  statusBox.textContent = message;
  statusBox.classList.add("show");
  clearTimeout(showStatus.timer);
  showStatus.timer = setTimeout(() => statusBox.classList.remove("show"), 1800);
}

// Mobile navigation keeps aria-expanded synchronized for assistive technology.
menuToggle?.addEventListener("click", () => {
  const isOpen = body.classList.toggle("menu-open");
  menuToggle.setAttribute("aria-expanded", String(isOpen));
});

navLinks?.addEventListener("click", (event) => {
  if (event.target.closest("a")) closeMenu();
});

document.addEventListener("keydown", (event) => {
  if (event.key === "Escape") closeMenu();
});

ctas.forEach((cta) => {
  cta.addEventListener("click", () => {
    showStatus("Studio Vanta: " + cta.textContent.trim() + " selected.");
  });
});

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) entry.target.classList.add("in-view");
  });
}, { threshold: 0.25 });

document.querySelectorAll(".hero-art, .stats div, .demo-strip article").forEach((item) => observer.observe(item));

--- style.css ---
/*!
MIT License

Copyright (c) 2026 Picart Web

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/
/* Theme variables make each standalone hero easy to rebrand. */
:root{--accent:#f97316;--accent-2:#ec4899;--bg:#fff7ed;--ink:#20131b;--muted:color-mix(in srgb,var(--ink) 64%,transparent);--surface:color-mix(in srgb,var(--bg) 84%,white);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 12% 8%,color-mix(in srgb,var(--accent) 24%,transparent),transparent 30%),var(--bg);color:var(--ink);overflow-x:hidden}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.site-header{position:fixed;top:0;left:0;right:0;z-index:20;padding:18px clamp(16px,4vw,64px)}
.nav-shell{display:flex;align-items:center;justify-content:space-between;gap:18px;max-width:1240px;margin:auto;padding:12px 14px;border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);border-radius:999px;background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(18px)}
.brand{display:flex;align-items:center;gap:10px;font-weight:900}.brand span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--accent);color:white}
.nav-links{display:flex;align-items:center;gap:8px}.nav-links a{padding:10px 13px;border-radius:999px;color:var(--muted);font-weight:800;font-size:.9rem;transition:.22s ease}.nav-links a:hover{color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.menu-toggle{display:none;border:0;width:42px;height:42px;border-radius:50%;background:var(--accent);color:white}
.hero{position:relative;min-height:100vh;display:grid;align-items:center;gap:clamp(28px,5vw,72px);padding:132px clamp(18px,5vw,74px) 76px;max-width:1440px;margin:auto}
.hero-copy{position:relative;z-index:2;animation:rise .65s ease both}.eyebrow{margin:0 0 14px;color:var(--accent);font-weight:900;letter-spacing:.14em;text-transform:uppercase;font-size:.78rem}
h1{font-size:clamp(2.65rem,7vw,6.6rem);line-height:.92;letter-spacing:0;margin:0 0 22px;max-width:850px}
.subtitle{font-size:clamp(1rem,2vw,1.22rem);line-height:1.8;color:var(--muted);max-width:690px;margin:0 0 28px}
.hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-bottom:22px}.primary-cta,.secondary-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:14px 18px;border-radius:999px;font-weight:900;transition:.22s ease}.primary-cta{background:var(--accent);color:white;box-shadow:0 16px 40px color-mix(in srgb,var(--accent) 28%,transparent)}.secondary-cta{border:1px solid color-mix(in srgb,var(--ink) 16%,transparent);background:color-mix(in srgb,var(--bg) 70%,transparent)}
.primary-cta:hover,.secondary-cta:hover,.nav-links a:hover{transform:translateY(-2px)}
a:focus-visible,button:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 62%,white);outline-offset:4px}
.badge-row{display:flex;flex-wrap:wrap;gap:10px}.badge-row span{padding:8px 11px;border-radius:999px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);font-weight:900;font-size:.78rem}
.stats{display:flex;gap:16px;flex-wrap:wrap;margin:26px 0 0}.stats div{min-width:138px;padding:14px 16px;border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);border-radius:20px;background:color-mix(in srgb,var(--bg) 70%,transparent)}dt{color:var(--muted);font-size:.78rem}dd{margin:4px 0 0;font-weight:950;font-size:1.2rem}
/* CSS-only artwork keeps the template dependency-free and copy-paste ready. */
.hero-art{position:relative;min-height:470px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 20%,var(--bg)),color-mix(in srgb,var(--accent-2) 16%,var(--bg)));box-shadow:0 30px 100px color-mix(in srgb,var(--accent) 18%,transparent);overflow:hidden;animation:floatIn .75s ease both}
.art-orbit{position:absolute;inset:12%;border:2px dashed color-mix(in srgb,var(--accent) 42%,transparent)}
.art-card{position:absolute;z-index:3;padding:18px;min-width:170px;background:color-mix(in srgb,var(--bg) 84%,white);border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);box-shadow:0 18px 50px rgba(0,0,0,.12)}.art-card span{display:block;color:var(--accent);font-weight:950}.art-card strong,.art-card b{display:block;font-size:1.35rem}.art-card small{color:var(--muted)}
.card-a{left:10%;top:18%}.card-b{right:10%;bottom:16%}
.art-shape{position:absolute;background:linear-gradient(135deg,var(--accent),var(--accent-2));opacity:.86}.shape-one{width:34%;height:34%;left:38%;top:30%;border-radius:34px}.shape-two{width:28%;height:26%;right:12%;top:14%;border-radius:999px;opacity:.42}
.art-lines{position:absolute;left:9%;right:9%;bottom:10%;display:grid;gap:10px}.art-lines i{height:12px;border-radius:999px;background:color-mix(in srgb,var(--ink) 20%,white);animation:pulse 1.8s ease-in-out infinite}.art-lines i:nth-child(2){width:72%;animation-delay:.15s}.art-lines i:nth-child(3){width:54%;animation-delay:.3s}.art-lines i:nth-child(4){width:86%;animation-delay:.45s}
.scroll-indicator{position:absolute;left:clamp(18px,5vw,74px);bottom:22px;display:inline-flex;align-items:center;gap:9px;color:var(--muted);font-weight:800}.scroll-indicator span{width:22px;height:36px;border:2px solid currentColor;border-radius:999px;position:relative}.scroll-indicator span:after{content:"";position:absolute;left:50%;top:7px;width:4px;height:8px;border-radius:999px;background:currentColor;transform:translateX(-50%);animation:scrollDot 1.4s ease-in-out infinite}
.demo-strip,.nav-targets{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:1180px;margin:0 auto 56px;padding:0 clamp(18px,5vw,74px)}.demo-strip article,.nav-targets article{padding:24px;border-radius:24px;background:color-mix(in srgb,var(--bg) 78%,white);border:1px solid color-mix(in srgb,var(--ink) 10%,transparent)}.demo-strip p,.nav-targets p{color:var(--muted);line-height:1.7}.nav-targets{grid-template-columns:repeat(3,minmax(0,1fr));scroll-margin-top:110px}.nav-targets article{scroll-margin-top:110px}.nav-targets span{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent);color:white;font-weight:950;margin-bottom:12px}.live-status{position:fixed;left:50%;bottom:18px;z-index:30;transform:translateX(-50%) translateY(90px);padding:12px 16px;border-radius:999px;background:var(--ink);color:var(--bg);box-shadow:0 20px 50px rgba(0,0,0,.22);transition:.3s ease}.live-status.show{transform:translateX(-50%) translateY(0)}
.hero{grid-template-columns:.82fr 1.18fr}.hero-copy{order:2}.hero-art{order:1;border-radius:0 80px 0 80px;transform:rotate(-2deg)}.art-card{transform:rotate(4deg)}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}@keyframes floatIn{from{opacity:0;transform:translateY(28px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes pulse{50%{opacity:.42;transform:scaleX(.92)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes equalize{50%{height:35%}}@keyframes scrollDot{50%{transform:translate(-50%,10px);opacity:.35}}
@media (max-width:980px){.menu-toggle{display:grid;place-items:center}.nav-links{position:fixed;inset:82px 16px auto 16px;display:grid;gap:8px;padding:16px;border-radius:24px;background:color-mix(in srgb,var(--bg) 92%,white);box-shadow:0 24px 80px rgba(0,0,0,.22);transform:translateY(-18px);opacity:0;pointer-events:none;transition:.25s ease}.menu-open .nav-links{transform:translateY(0);opacity:1;pointer-events:auto}.hero,.hero-copy,.hero-art{grid-template-columns:1fr!important;order:initial!important;text-align:left}.hero{padding-top:118px;min-height:auto}.hero-art{min-height:360px;clip-path:none!important;transform:none!important}.law-columns .hero-copy{border-left:0;padding-left:0}.demo-strip,.nav-targets{grid-template-columns:1fr}}
@media (max-width:640px){.site-header{padding:12px}.brand{font-size:.95rem}.hero{padding-left:16px;padding-right:16px}.hero-actions a{width:100%}.stats{display:grid;grid-template-columns:1fr 1fr}.hero-art{min-height:310px}.art-card{min-width:138px;padding:14px}.scroll-indicator{display:none}.demo-strip,.nav-targets{padding-left:16px;padding-right:16px}h1{font-size:2.55rem}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}