Project Templates · Visual Playground

Template 1

Restaurant

Inside: top bar · food hero · menu grid · hours & location · reserve CTA · footer

Olive & AshMenu Hours Reserve

Seasonal. Local. Honest.

Book a table

Tonight's menu

Open 5–11pm · 123 Garden St · (703) 555‑0199

See it as a full multi-page site: open the Restaurant example → — a complete responsive Home page plus Menu / About / Gallery / Contact, with a mobile menu that slides in from the right. It's an example only — study how it's built, but write your capstone in your own words.

View full home-page code — copy it all into a new index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Olive &amp; Ash</title>
  <script src="https://unpkg.com/@phosphor-icons/web"></script>
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: 'Helvetica Neue', Arial, sans-serif; color: #2a1a10; background: #fffaf2; line-height: 1.6; }
    img { max-width: 100%; display: block; }

    /* top bar */
    .topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; background: #2a1a10; color: #fff; position: sticky; top: 0; z-index: 40; }
    .topbar .logo { font-family: Georgia, serif; font-weight: 800; font-size: 1.3rem; }
    .nav-links { display: flex; gap: 22px; align-items: center; }
    .nav-links a { color: #f5d6a8; text-decoration: none; font-size: .92rem; }
    .nav-links a:hover { color: #fff; }
    .nav-links .reserve { background: #e8a04e; color: #2a1a10; padding: 8px 16px; border-radius: 999px; font-weight: 700; }
    .burger { display: none; background: none; border: none; color: #fff; font-size: 1.7rem; cursor: pointer; }

    /* right-side mobile drawer */
    .scrim { position: fixed; inset: 0; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 50; }
    .scrim.open { opacity: 1; pointer-events: auto; }
    .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(280px, 80vw); background: #2a1a10; color: #fff;
      transform: translateX(100%); transition: transform .35s cubic-bezier(.4,0,.2,1); z-index: 60; padding: 20px; box-shadow: -10px 0 30px rgba(0,0,0,.4); }
    .drawer.open { transform: translateX(0); }
    .drawer .dhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
    .drawer .close { background: none; border: none; color: #fff; font-size: 1.6rem; cursor: pointer; }
    .drawer a { display: flex; align-items: center; gap: 12px; color: #f5d6a8; text-decoration: none; padding: 13px 8px; border-radius: 8px; }
    .drawer a:hover { background: rgba(232,160,78,.18); color: #fff; }
    .drawer a i { color: #e8a04e; font-size: 1.3rem; }

    /* hero */
    .hero { position: relative; min-height: 380px; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff;
      background: linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.55)), url('hero.jpg') center/cover; padding: 40px 24px; }
    .hero h1 { font-family: Georgia, serif; font-size: clamp(2rem, 6vw, 3.6rem); }
    .btn { display: inline-block; background: #e8a04e; color: #2a1a10; padding: 13px 30px; border-radius: 999px; font-weight: 700; text-decoration: none; margin-top: 18px; }

    .wrap { max-width: 1000px; margin: 0 auto; padding: 56px 24px; }
    .menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .dish { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 26px rgba(80,50,20,.1); }
    .dish img { height: 150px; width: 100%; object-fit: cover; }
    .dish .d-body { padding: 16px; }
    .footer { background: #1a0f08; color: #b89a78; text-align: center; padding: 26px; font-size: .85rem; }

    /* responsive: show the right-side menu on phones */
    @media (max-width: 760px) {
      .nav-links { display: none; }
      .burger { display: block; }
      .menu-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 480px) { .menu-grid { grid-template-columns: 1fr; } }
  </style>
</head>
<body>

  <header class="topbar">
    <span class="logo">Olive &amp; Ash</span>
    <nav class="nav-links">
      <a href="index.html">Home</a>
      <a href="menu.html">Menu</a>
      <a href="about.html">About</a>
      <a href="contact.html" class="reserve">Reserve</a>
    </nav>
    <button class="burger" id="burger" aria-label="Open menu"><i class="ph-bold ph-list"></i></button>
  </header>

  <!-- right-side mobile drawer -->
  <div class="scrim" id="scrim"></div>
  <nav class="drawer" id="drawer">
    <div class="dhead"><strong>Olive &amp; Ash</strong><button class="close" id="drawerClose" aria-label="Close"><i class="ph-bold ph-x"></i></button></div>
    <a href="index.html"><i class="ph-duotone ph-house"></i> Home</a>
    <a href="menu.html"><i class="ph-duotone ph-fork-knife"></i> Menu</a>
    <a href="about.html"><i class="ph-duotone ph-users-three"></i> About</a>
    <a href="contact.html"><i class="ph-duotone ph-phone"></i> Contact</a>
  </nav>

  <section class="hero">
    <div>
      <h1>Seasonal. Local. Honest food.</h1>
      <a href="contact.html" class="btn">Book a table</a>
    </div>
  </section>

  <div class="wrap">
    <div class="menu-grid">
      <article class="dish"><img src="dish1.jpg" alt=""><div class="d-body"><h3>Wood-fired plate</h3><span>$18</span></div></article>
      <article class="dish"><img src="dish2.jpg" alt=""><div class="d-body"><h3>Garden bowl</h3><span>$15</span></div></article>
      <article class="dish"><img src="dish3.jpg" alt=""><div class="d-body"><h3>Seasonal special</h3><span>$22</span></div></article>
      <!-- add more dishes -->
    </div>
  </div>

  <footer class="footer">© 2026 Olive &amp; Ash</footer>

  <script>
    // right-side mobile drawer
    var burger = document.getElementById('burger'),
        drawer = document.getElementById('drawer'),
        scrim  = document.getElementById('scrim'),
        close  = document.getElementById('drawerClose');
    function openMenu()  { drawer.classList.add('open');  scrim.classList.add('open');  }
    function closeMenu() { drawer.classList.remove('open'); scrim.classList.remove('open'); }
    burger.addEventListener('click', openMenu);
    close.addEventListener('click', closeMenu);
    scrim.addEventListener('click', closeMenu);                       // tap outside to close
    document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closeMenu(); });
  </script>
</body>
</html>

Template 2

Event / Conference

Inside: nav · hero with date · speaker grid · register CTA · footer

DevConf '26Speakers Schedule Register

MARCH 14–16 · 2026 · ONLINE

Build the future web

Get your ticket

Speakers

A. Verdi

J. Park

M. Cole

See it as a full multi-page site: open the Event example → — a responsive Home page plus Speakers / Schedule / Venue / Tickets, with a right-side mobile menu. Example only — learn from it, build your own.

View full home-page code — copy it all into a new index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DevConf '26</title>
  <script src="https://unpkg.com/@phosphor-icons/web"></script>
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: 'Helvetica Neue', Arial, sans-serif; background: #0f1030; color: #e8e8ff; line-height: 1.6; }
    img { max-width: 100%; display: block; }
    .topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; position: sticky; top: 0; background: rgba(15,16,48,.92); backdrop-filter: blur(8px); z-index: 40; }
    .logo { font-weight: 800; font-size: 1.2rem; }
    .nav-links { display: flex; gap: 20px; align-items: center; }
    .nav-links a { color: #a5b4fc; text-decoration: none; font-size: .9rem; }
    .nav-links a:hover { color: #fff; }
    .nav-links .reg { background: #6366f1; color: #fff; padding: 8px 16px; border-radius: 999px; font-weight: 700; }
    .burger { display: none; background: none; border: none; color: #fff; font-size: 1.7rem; cursor: pointer; }
    .scrim { position: fixed; inset: 0; background: rgba(0,0,0,.6); opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 50; }
    .scrim.open { opacity: 1; pointer-events: auto; }
    .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(280px,80vw); background: #1a1b44;
      transform: translateX(100%); transition: transform .35s cubic-bezier(.4,0,.2,1); z-index: 60; padding: 20px; }
    .drawer.open { transform: translateX(0); }
    .drawer .dhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
    .drawer .close { background: none; border: none; color: #fff; font-size: 1.6rem; cursor: pointer; }
    .drawer a { display: flex; align-items: center; gap: 12px; color: #a5b4fc; text-decoration: none; padding: 13px 8px; border-radius: 8px; }
    .drawer a:hover { background: rgba(99,102,241,.2); color: #fff; }
    .drawer a i { color: #818cf8; font-size: 1.3rem; }
    .hero { text-align: center; padding: 64px 24px; background: radial-gradient(circle at 50% 0, #3730a3, transparent 70%); }
    .hero .date { font-size: .8rem; letter-spacing: .2em; color: #a5b4fc; }
    .hero h1 { font-size: clamp(2.2rem, 7vw, 4rem); font-weight: 900; margin: 8px 0 16px; }
    .btn { display: inline-block; background: linear-gradient(135deg,#6366f1,#ec4899); color: #fff; padding: 14px 32px; border-radius: 999px; font-weight: 800; text-decoration: none; }
    .wrap { max-width: 1000px; margin: 0 auto; padding: 50px 24px; }
    .spk { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; text-align: center; }
    .spk figure { background: #181a44; border-radius: 14px; padding: 18px; }
    .spk img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin: 0 auto 10px; }
    @media (max-width: 760px) { .nav-links { display: none; } .burger { display: block; } .spk { grid-template-columns: 1fr 1fr; } }
  </style>
</head>
<body>
  <header class="topbar">
    <span class="logo">DevConf '26</span>
    <nav class="nav-links">
      <a href="index.html">Home</a><a href="speakers.html">Speakers</a><a href="schedule.html">Schedule</a>
      <a href="tickets.html" class="reg">Register</a>
    </nav>
    <button class="burger" id="burger" aria-label="Open menu"><i class="ph-bold ph-list"></i></button>
  </header>

  <div class="scrim" id="scrim"></div>
  <nav class="drawer" id="drawer">
    <div class="dhead"><strong>DevConf '26</strong><button class="close" id="drawerClose"><i class="ph-bold ph-x"></i></button></div>
    <a href="index.html"><i class="ph-duotone ph-house"></i> Home</a>
    <a href="speakers.html"><i class="ph-duotone ph-microphone-stage"></i> Speakers</a>
    <a href="schedule.html"><i class="ph-duotone ph-calendar-dots"></i> Schedule</a>
    <a href="tickets.html"><i class="ph-duotone ph-ticket"></i> Tickets</a>
  </nav>

  <section class="hero">
    <div class="date">MARCH 14–16 · 2026</div>
    <h1>Build the future web</h1>
    <a href="tickets.html" class="btn">Get your ticket</a>
  </section>

  <div class="wrap">
    <div class="spk">
      <figure><img src="speaker1.jpg" alt=""><figcaption>A. Verdi</figcaption></figure>
      <figure><img src="speaker2.jpg" alt=""><figcaption>J. Park</figcaption></figure>
      <figure><img src="speaker3.jpg" alt=""><figcaption>M. Cole</figcaption></figure>
      <!-- add more speakers -->
    </div>
  </div>

  <script>
    var burger = document.getElementById('burger'), drawer = document.getElementById('drawer'),
        scrim = document.getElementById('scrim'), close = document.getElementById('drawerClose');
    function openMenu()  { drawer.classList.add('open');  scrim.classList.add('open');  }
    function closeMenu() { drawer.classList.remove('open'); scrim.classList.remove('open'); }
    burger.addEventListener('click', openMenu);
    close.addEventListener('click', closeMenu);
    scrim.addEventListener('click', closeMenu);
    document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closeMenu(); });
  </script>
</body>
</html>

Template 3

Travel / Destination

Inside: nav · scenic hero · destination cards · book CTA · footer

WanderTrips Deals Book

Find your next escape

Paris

Amalfi

Maldives

Wander · plan · go ✈

See it as a full multi-page site: open the Travel example → — a responsive Home page plus Destinations / Tours / Deals / Contact, with a right-side mobile menu. Example only — learn from it, build your own.

View full home-page code — copy it all into a new index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Wander</title>
  <script src="https://unpkg.com/@phosphor-icons/web"></script>
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: 'Helvetica Neue', Arial, sans-serif; background: #fff; color: #0f2e3d; line-height: 1.6; }
    img { max-width: 100%; display: block; }
    .topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; position: sticky; top: 0; background: rgba(255,255,255,.95); backdrop-filter: blur(8px); z-index: 40; box-shadow: 0 1px 0 #e2e8f0; }
    .logo { font-weight: 800; font-size: 1.3rem; color: #0891b2; }
    .nav-links { display: flex; gap: 22px; align-items: center; }
    .nav-links a { color: #334155; text-decoration: none; font-size: .92rem; }
    .nav-links a:hover { color: #0891b2; }
    .nav-links .book { background: #0891b2; color: #fff; padding: 8px 18px; border-radius: 999px; font-weight: 700; }
    .burger { display: none; background: none; border: none; color: #0891b2; font-size: 1.7rem; cursor: pointer; }
    .scrim { position: fixed; inset: 0; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 50; }
    .scrim.open { opacity: 1; pointer-events: auto; }
    .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(280px,80vw); background: #0f2e3d; color: #fff;
      transform: translateX(100%); transition: transform .35s cubic-bezier(.4,0,.2,1); z-index: 60; padding: 20px; }
    .drawer.open { transform: translateX(0); }
    .drawer .dhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
    .drawer .close { background: none; border: none; color: #fff; font-size: 1.6rem; cursor: pointer; }
    .drawer a { display: flex; align-items: center; gap: 12px; color: #a5f3fc; text-decoration: none; padding: 13px 8px; border-radius: 8px; }
    .drawer a:hover { background: rgba(8,145,178,.25); color: #fff; }
    .drawer a i { color: #22d3ee; font-size: 1.3rem; }
    .hero { position: relative; min-height: 400px; display: flex; align-items: flex-end; padding: 40px 24px; color: #fff;
      background: linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.5)), url('hero.jpg') center/cover; }
    .hero h1 { font-size: clamp(2.2rem, 7vw, 4rem); font-weight: 800; max-width: 600px; }
    .btn { display: inline-block; background: #0891b2; color: #fff; padding: 13px 30px; border-radius: 999px; font-weight: 700; text-decoration: none; margin-top: 14px; }
    .wrap { max-width: 1000px; margin: 0 auto; padding: 54px 24px; }
    .dest { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
    .card { border-radius: 14px; overflow: hidden; box-shadow: 0 10px 26px rgba(15,46,61,.1); }
    .card img { height: 170px; width: 100%; object-fit: cover; }
    .card .c-body { padding: 14px 16px; }
    @media (max-width: 760px) { .nav-links { display: none; } .burger { display: block; } .dest { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 480px) { .dest { grid-template-columns: 1fr; } }
  </style>
</head>
<body>
  <header class="topbar">
    <span class="logo">Wander</span>
    <nav class="nav-links">
      <a href="index.html">Home</a><a href="destinations.html">Destinations</a><a href="tours.html">Tours</a>
      <a href="contact.html" class="book">Book</a>
    </nav>
    <button class="burger" id="burger" aria-label="Open menu"><i class="ph-bold ph-list"></i></button>
  </header>

  <div class="scrim" id="scrim"></div>
  <nav class="drawer" id="drawer">
    <div class="dhead"><strong>Wander</strong><button class="close" id="drawerClose"><i class="ph-bold ph-x"></i></button></div>
    <a href="index.html"><i class="ph-duotone ph-house"></i> Home</a>
    <a href="destinations.html"><i class="ph-duotone ph-globe-hemisphere-west"></i> Destinations</a>
    <a href="tours.html"><i class="ph-duotone ph-path"></i> Tours</a>
    <a href="contact.html"><i class="ph-duotone ph-envelope"></i> Contact</a>
  </nav>

  <section class="hero">
    <div><h1>Find your next escape.</h1><a href="destinations.html" class="btn">Explore</a></div>
  </section>

  <div class="wrap">
    <div class="dest">
      <article class="card"><img src="paris.jpg" alt=""><div class="c-body"><h3>Paris</h3></div></article>
      <article class="card"><img src="amalfi.jpg" alt=""><div class="c-body"><h3>Amalfi</h3></div></article>
      <article class="card"><img src="maldives.jpg" alt=""><div class="c-body"><h3>Maldives</h3></div></article>
      <!-- add more destinations -->
    </div>
  </div>

  <script>
    var burger = document.getElementById('burger'), drawer = document.getElementById('drawer'),
        scrim = document.getElementById('scrim'), close = document.getElementById('drawerClose');
    function openMenu()  { drawer.classList.add('open');  scrim.classList.add('open');  }
    function closeMenu() { drawer.classList.remove('open'); scrim.classList.remove('open'); }
    burger.addEventListener('click', openMenu);
    close.addEventListener('click', closeMenu);
    scrim.addEventListener('click', closeMenu);
    document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closeMenu(); });
  </script>
</body>
</html>

Template 4

Photography portfolio

Inside: minimal nav · name hero · full-bleed photo grid · contact footer

LENS · MAYA R.Work About Contact

Light, captured.

hello@mayar.photo · @mayar

See it as a full multi-page site: open the Photography example → — a responsive Home gallery plus Portfolio / About / Services / Contact, with a right-side mobile menu. Example only — learn from it, build your own.

View full home-page code — copy it all into a new index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LENS</title>
  <script src="https://unpkg.com/@phosphor-icons/web"></script>
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: 'Helvetica Neue', Arial, sans-serif; background: #111; color: #fff; line-height: 1.6; }
    img { max-width: 100%; display: block; }
    .topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; position: sticky; top: 0; background: rgba(17,17,17,.92); backdrop-filter: blur(8px); z-index: 40; }
    .logo { font-weight: 800; letter-spacing: .12em; }
    .nav-links { display: flex; gap: 24px; align-items: center; }
    .nav-links a { color: #aaa; text-decoration: none; font-size: .88rem; }
    .nav-links a:hover { color: #fff; }
    .burger { display: none; background: none; border: none; color: #fff; font-size: 1.7rem; cursor: pointer; }
    .scrim { position: fixed; inset: 0; background: rgba(0,0,0,.7); opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 50; }
    .scrim.open { opacity: 1; pointer-events: auto; }
    .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(280px,80vw); background: #1a1a1a;
      transform: translateX(100%); transition: transform .35s cubic-bezier(.4,0,.2,1); z-index: 60; padding: 20px; }
    .drawer.open { transform: translateX(0); }
    .drawer .dhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
    .drawer .close { background: none; border: none; color: #fff; font-size: 1.6rem; cursor: pointer; }
    .drawer a { display: flex; align-items: center; gap: 12px; color: #aaa; text-decoration: none; padding: 13px 8px; border-radius: 8px; }
    .drawer a:hover { background: rgba(255,255,255,.08); color: #fff; }
    .drawer a i { color: #fff; font-size: 1.3rem; }
    .hero { text-align: center; padding: 70px 24px 40px; }
    .hero h1 { font-size: clamp(2rem, 7vw, 3.6rem); font-weight: 300; letter-spacing: .04em; }
    .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px; }
    .gallery img { width: 100%; height: 230px; object-fit: cover; transition: transform .4s; }
    .gallery a:hover img { transform: scale(1.02); }
    @media (max-width: 760px) { .nav-links { display: none; } .burger { display: block; } .gallery { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 460px) { .gallery { grid-template-columns: 1fr; } }
  </style>
</head>
<body>
  <header class="topbar">
    <span class="logo">LENS · MAYA R.</span>
    <nav class="nav-links">
      <a href="index.html">Home</a><a href="portfolio.html">Portfolio</a><a href="about.html">About</a><a href="contact.html">Contact</a>
    </nav>
    <button class="burger" id="burger" aria-label="Open menu"><i class="ph-bold ph-list"></i></button>
  </header>

  <div class="scrim" id="scrim"></div>
  <nav class="drawer" id="drawer">
    <div class="dhead"><strong>LENS</strong><button class="close" id="drawerClose"><i class="ph-bold ph-x"></i></button></div>
    <a href="index.html"><i class="ph-duotone ph-house"></i> Home</a>
    <a href="portfolio.html"><i class="ph-duotone ph-images-square"></i> Portfolio</a>
    <a href="about.html"><i class="ph-duotone ph-user"></i> About</a>
    <a href="contact.html"><i class="ph-duotone ph-envelope"></i> Contact</a>
  </nav>

  <section class="hero"><h1>Light, captured.</h1></section>

  <section class="gallery">
    <a href="portfolio.html"><img src="photo1.jpg" alt=""></a>
    <a href="portfolio.html"><img src="photo2.jpg" alt=""></a>
    <a href="portfolio.html"><img src="photo3.jpg" alt=""></a>
    <!-- add more photos -->
  </section>

  <script>
    var burger = document.getElementById('burger'), drawer = document.getElementById('drawer'),
        scrim = document.getElementById('scrim'), close = document.getElementById('drawerClose');
    function openMenu()  { drawer.classList.add('open');  scrim.classList.add('open');  }
    function closeMenu() { drawer.classList.remove('open'); scrim.classList.remove('open'); }
    burger.addEventListener('click', openMenu);
    close.addEventListener('click', closeMenu);
    scrim.addEventListener('click', closeMenu);
    document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closeMenu(); });
  </script>
</body>
</html>

Template 5

Résumé / Personal

Inside: header with avatar · about · skills · experience timeline · contact

Jordan Green

Front-End Developer · Annandale, VA

Skills

HTMLCSSJavaScript

Experience

Web Intern — Acme · 2025
Built responsive landing pages.

jordan@example.com · github.com/jgreen

See it as a full multi-page site: open the Résumé example → — a responsive Home page plus About / Experience / Projects / Contact, with a right-side mobile menu. Example only — learn from it, build your own.

View full home-page code — copy it all into a new index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Jordan Green</title>
  <script src="https://unpkg.com/@phosphor-icons/web"></script>
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: 'Helvetica Neue', Arial, sans-serif; background: #f4f5fb; color: #1f2937; line-height: 1.6; }
    .topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; position: sticky; top: 0; background: rgba(255,255,255,.95); backdrop-filter: blur(8px); z-index: 40; box-shadow: 0 1px 0 #e5e7eb; }
    .logo { font-weight: 800; color: #4338ca; }
    .nav-links { display: flex; gap: 22px; align-items: center; }
    .nav-links a { color: #475569; text-decoration: none; font-size: .92rem; }
    .nav-links a:hover { color: #4338ca; }
    .burger { display: none; background: none; border: none; color: #4338ca; font-size: 1.7rem; cursor: pointer; }
    .scrim { position: fixed; inset: 0; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 50; }
    .scrim.open { opacity: 1; pointer-events: auto; }
    .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(280px,80vw); background: #1e1b4b; color: #fff;
      transform: translateX(100%); transition: transform .35s cubic-bezier(.4,0,.2,1); z-index: 60; padding: 20px; }
    .drawer.open { transform: translateX(0); }
    .drawer .dhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
    .drawer .close { background: none; border: none; color: #fff; font-size: 1.6rem; cursor: pointer; }
    .drawer a { display: flex; align-items: center; gap: 12px; color: #c7d2fe; text-decoration: none; padding: 13px 8px; border-radius: 8px; }
    .drawer a:hover { background: rgba(99,102,241,.25); color: #fff; }
    .drawer a i { color: #a5b4fc; font-size: 1.3rem; }
    .profile { display: flex; align-items: center; gap: 18px; max-width: 760px; margin: 0 auto; padding: 44px 24px 20px; }
    .avatar { width: 84px; height: 84px; border-radius: 50%; background: linear-gradient(135deg,#6366f1,#ec4899); color: #fff;
      display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.8rem; flex-shrink: 0; }
    .profile h1 { font-size: 1.8rem; }
    .profile .role { color: #6b7280; }
    .wrap { max-width: 760px; margin: 0 auto; padding: 10px 24px 50px; }
    .label { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: #6366f1; font-weight: 700; margin-top: 26px; }
    .tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
    .tag { background: #eef2ff; color: #4338ca; border-radius: 999px; padding: 4px 12px; font-size: .82rem; }
    .item { border-left: 2px solid #e5e7eb; padding-left: 14px; margin-top: 12px; }
    .item b { display: block; }
    .item span { color: #6b7280; font-size: .9rem; }
    footer { text-align: center; padding: 24px; color: #6366f1; font-size: .9rem; }
    @media (max-width: 760px) { .nav-links { display: none; } .burger { display: block; } }
  </style>
</head>
<body>
  <header class="topbar">
    <span class="logo">Jordan Green</span>
    <nav class="nav-links">
      <a href="index.html">Home</a><a href="about.html">About</a><a href="experience.html">Experience</a><a href="contact.html">Contact</a>
    </nav>
    <button class="burger" id="burger" aria-label="Open menu"><i class="ph-bold ph-list"></i></button>
  </header>

  <div class="scrim" id="scrim"></div>
  <nav class="drawer" id="drawer">
    <div class="dhead"><strong>Jordan Green</strong><button class="close" id="drawerClose"><i class="ph-bold ph-x"></i></button></div>
    <a href="index.html"><i class="ph-duotone ph-house"></i> Home</a>
    <a href="about.html"><i class="ph-duotone ph-user"></i> About</a>
    <a href="experience.html"><i class="ph-duotone ph-briefcase"></i> Experience</a>
    <a href="contact.html"><i class="ph-duotone ph-envelope"></i> Contact</a>
  </nav>

  <header class="profile">
    <div class="avatar">JG</div>
    <div><h1>Jordan Green</h1><div class="role">Front-End Developer · Annandale, VA</div></div>
  </header>

  <main class="wrap">
    <div class="label">Skills</div>
    <div class="tags"><span class="tag">HTML</span><span class="tag">CSS</span><span class="tag">JavaScript</span></div>

    <div class="label">Experience</div>
    <div class="item"><b>Web Intern — Acme</b><span>2025 · Built responsive landing pages.</span></div>
    <!-- add more experience items -->
  </main>

  <footer>jordan@example.com · github.com/jgreen</footer>

  <script>
    var burger = document.getElementById('burger'), drawer = document.getElementById('drawer'),
        scrim = document.getElementById('scrim'), close = document.getElementById('drawerClose');
    function openMenu()  { drawer.classList.add('open');  scrim.classList.add('open');  }
    function closeMenu() { drawer.classList.remove('open'); scrim.classList.remove('open'); }
    burger.addEventListener('click', openMenu);
    close.addEventListener('click', closeMenu);
    scrim.addEventListener('click', closeMenu);
    document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closeMenu(); });
  </script>
</body>
</html>

Template 6

Product / App launch

Inside: nav · hero with app shot · feature row · pricing CTA · footer

TaskyFeatures Pricing Get the app

Get more done, calmly.

The to-do app that doesn't stress you out.

Download free

✓ Sync everywhere✓ Offline mode✓ Free forever

See it as a full multi-page site: open the Product example → — a responsive Home page plus Features / Pricing / Download / FAQ, with a right-side mobile menu. Example only — learn from it, build your own.

View full home-page code — copy it all into a new index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tasky</title>
  <script src="https://unpkg.com/@phosphor-icons/web"></script>
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: 'Helvetica Neue', Arial, sans-serif; background: #fff; color: #0f172a; line-height: 1.6; }
    img { max-width: 100%; display: block; }
    .topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; position: sticky; top: 0; background: rgba(255,255,255,.95); backdrop-filter: blur(8px); z-index: 40; box-shadow: 0 1px 0 #e5e7eb; }
    .logo { font-weight: 800; font-size: 1.2rem; }
    .nav-links { display: flex; gap: 22px; align-items: center; }
    .nav-links a { color: #475569; text-decoration: none; font-size: .92rem; }
    .nav-links a:hover { color: #111; }
    .nav-links .pill { background: #111; color: #fff; padding: 8px 18px; border-radius: 999px; font-weight: 700; }
    .burger { display: none; background: none; border: none; color: #111; font-size: 1.7rem; cursor: pointer; }
    .scrim { position: fixed; inset: 0; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 50; }
    .scrim.open { opacity: 1; pointer-events: auto; }
    .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(280px,80vw); background: #0f172a; color: #fff;
      transform: translateX(100%); transition: transform .35s cubic-bezier(.4,0,.2,1); z-index: 60; padding: 20px; }
    .drawer.open { transform: translateX(0); }
    .drawer .dhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
    .drawer .close { background: none; border: none; color: #fff; font-size: 1.6rem; cursor: pointer; }
    .drawer a { display: flex; align-items: center; gap: 12px; color: #cbd5e1; text-decoration: none; padding: 13px 8px; border-radius: 8px; }
    .drawer a:hover { background: rgba(99,102,241,.25); color: #fff; }
    .drawer a i { color: #818cf8; font-size: 1.3rem; }
    .hero { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; max-width: 1000px; margin: 0 auto; padding: 60px 24px; }
    .hero h1 { font-size: clamp(1.8rem, 5vw, 3rem); font-weight: 800; line-height: 1.1; }
    .hero p { color: #64748b; margin: 14px 0 20px; }
    .btn { display: inline-block; background: #6366f1; color: #fff; padding: 13px 30px; border-radius: 999px; font-weight: 700; text-decoration: none; }
    .hero img { width: 100%; height: 260px; object-fit: cover; border-radius: 14px; }
    .features { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; background: #f8fafc; padding: 30px 24px; color: #334155; font-weight: 600; }
    .features span i { color: #22c55e; vertical-align: -2px; }
    footer { text-align: center; padding: 24px; color: #6366f1; font-size: .9rem; }
    @media (max-width: 760px) { .nav-links { display: none; } .burger { display: block; } .hero { grid-template-columns: 1fr; } }
  </style>
</head>
<body>
  <header class="topbar">
    <span class="logo">Tasky</span>
    <nav class="nav-links">
      <a href="features.html">Features</a><a href="pricing.html">Pricing</a><a href="download.html" class="pill">Get the app</a>
    </nav>
    <button class="burger" id="burger" aria-label="Open menu"><i class="ph-bold ph-list"></i></button>
  </header>

  <div class="scrim" id="scrim"></div>
  <nav class="drawer" id="drawer">
    <div class="dhead"><strong>Tasky</strong><button class="close" id="drawerClose"><i class="ph-bold ph-x"></i></button></div>
    <a href="index.html"><i class="ph-duotone ph-house"></i> Home</a>
    <a href="features.html"><i class="ph-duotone ph-sparkle"></i> Features</a>
    <a href="pricing.html"><i class="ph-duotone ph-tag"></i> Pricing</a>
    <a href="download.html"><i class="ph-duotone ph-download-simple"></i> Download</a>
  </nav>

  <section class="hero">
    <div>
      <h1>Get more done, calmly.</h1>
      <p>The to-do app that doesn't stress you out.</p>
      <a href="download.html" class="btn">Download free</a>
    </div>
    <img src="app.jpg" alt="App preview">
  </section>

  <section class="features">
    <span><i class="ph-bold ph-check"></i> Sync everywhere</span>
    <span><i class="ph-bold ph-check"></i> Offline mode</span>
    <span><i class="ph-bold ph-check"></i> Free forever</span>
  </section>

  <footer>Tasky · © 2026</footer>

  <script>
    var burger = document.getElementById('burger'), drawer = document.getElementById('drawer'),
        scrim = document.getElementById('scrim'), close = document.getElementById('drawerClose');
    function openMenu()  { drawer.classList.add('open');  scrim.classList.add('open');  }
    function closeMenu() { drawer.classList.remove('open'); scrim.classList.remove('open'); }
    burger.addEventListener('click', openMenu);
    close.addEventListener('click', closeMenu);
    scrim.addEventListener('click', closeMenu);
    document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closeMenu(); });
  </script>
</body>
</html>

How to use these: pick a template, copy its structure, then swap the images (free at Unsplash) and text for your own. Build the pieces with Landing Pages, style them with any look from the design pages, and add motion from Interactive Features.