Search Results Page

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #fff;
  color: #1a1a2e;
  line-height: 1.6;
  min-height: 100vh;
}

a {
  text-decoration: none;
}

/* ── Header / Search Bar ─────────────────────── */

.search-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 24px;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  color: #4f46e5;
  flex-shrink: 0;
}

.search-bar {
  display: flex;
  flex: 1;
  max-width: 640px;
}

.search-input {
  flex: 1;
  padding: 10px 16px;
  border: 1px solid #d1d5db;
  border-right: none;
  border-radius: 8px 0 0 8px;
  font-size: 15px;
  color: #1a1a2e;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-input:focus {
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 1px solid #4f46e5;
  border-radius: 0 8px 8px 0;
  background: #4f46e5;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease;
}

.search-btn:hover {
  background: #4338ca;
}

/* ── Type Tabs ───────────────────────────────── */

.type-tabs {
  display: flex;
  gap: 4px;
  padding: 0 24px;
  border-bottom: 1px solid #e5e7eb;
  overflow-x: auto;
}

.type-tab {
  padding: 10px 16px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.type-tab:hover {
  color: #1a1a2e;
}

.type-tab.active {
  color: #4f46e5;
  border-bottom-color: #4f46e5;
}

/* ── Layout ──────────────────────────────────── */

.search-layout {
  display: flex;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Filter Sidebar ──────────────────────────── */

.filter-sidebar {
  width: 240px;
  flex-shrink: 0;
  padding: 24px 20px 24px 0;
  border-right: 1px solid #f0f1f3;
}

.filter-group {
  margin-bottom: 24px;
}

.filter-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
  margin-bottom: 10px;
}

.filter-radio,
.filter-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
}

.filter-radio input,
.filter-check input {
  accent-color: #4f46e5;
  width: 15px;
  height: 15px;
}

.filter-select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  color: #374151;
  background: #fff;
  cursor: pointer;
  outline: none;
}

.filter-select:focus {
  border-color: #4f46e5;
}

#mobileFilterClose {
  display: none;
}

/* ── Results Main ────────────────────────────── */

.results-main {
  flex: 1;
  min-width: 0;
  padding: 24px 0 40px 32px;
}

.results-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.results-count {
  font-size: 13px;
  color: #6b7280;
}

.results-count strong {
  color: #1a1a2e;
}

.mobile-filter-btn {
  display: none;
}

.filter-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: #374151;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.filter-toggle-btn:hover {
  background: #f9fafb;
}

/* ── Result Cards ────────────────────────────── */

.result-card {
  padding: 20px 0;
  border-bottom: 1px solid #f0f1f3;
}

.result-card:last-child {
  border-bottom: none;
}

.result-title {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 4px;
}

.result-title a {
  color: #1a0dab;
  transition: color 0.1s ease;
}

.result-title a:hover {
  text-decoration: underline;
}

.result-title a:visited {
  color: #681da8;
}

.result-url {
  font-size: 13px;
  color: #188038;
  margin-bottom: 6px;
}

.result-url mark {
  background: none;
  color: #188038;
  font-weight: 600;
}

.result-desc {
  font-size: 14px;
  color: #4d5156;
  line-height: 1.5;
}

.result-desc mark {
  background: #fef3c7;
  color: #1a1a2e;
  padding: 1px 2px;
  border-radius: 2px;
  font-weight: 600;
}

.result-tags {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.tag {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  font-size: 11px;
  color: #6b7280;
  background: #f9fafb;
}

/* ── Pagination ──────────────────────────────── */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #f0f1f3;
}

.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fff;
  color: #374151;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.page-btn:hover:not(:disabled):not(.active) {
  background: #f3f4f6;
  border-color: #d1d5db;
}

.page-btn.active {
  background: #4f46e5;
  border-color: #4f46e5;
  color: #fff;
  font-weight: 600;
}

.page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.page-ellipsis {
  padding: 0 6px;
  color: #9ca3af;
  font-size: 14px;
}

/* ── Empty State ─────────────────────────────── */

.empty-results {
  text-align: center;
  padding: 60px 20px;
}

.empty-icon {
  margin-bottom: 16px;
}

.empty-results h3 {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a2e;
  margin-bottom: 8px;
}

.empty-results p {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 16px;
}

.empty-results ul {
  list-style: none;
  font-size: 14px;
  color: #6b7280;
}

.empty-results li {
  padding: 3px 0;
}

.empty-results li::before {
  content: "\2022";
  color: #9ca3af;
  margin-right: 8px;
}

/* ── Responsive ──────────────────────────────── */

@media (max-width: 768px) {
  .search-header {
    padding: 12px 16px;
    gap: 12px;
  }

  .logo span {
    display: none;
  }

  .type-tabs {
    padding: 0 16px;
  }

  .search-layout {
    flex-direction: column;
    padding: 0 16px;
  }

  .filter-sidebar {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    width: 100%;
    background: #fff;
    padding: 24px;
    border-right: none;
    overflow-y: auto;
  }

  .filter-sidebar.open {
    display: block;
  }

  #mobileFilterClose {
    display: block;
    width: 100%;
    margin-top: 16px;
    text-align: center;
  }

  .mobile-filter-btn {
    display: inline-flex;
  }

  .results-main {
    padding: 16px 0 40px;
  }

  .result-title {
    font-size: 16px;
  }

  .page-btn {
    min-width: 32px;
    height: 32px;
    font-size: 13px;
  }
}

(() => {
  const searchForm = document.getElementById("searchForm");
  const searchInput = document.getElementById("searchInput");
  const resultsList = document.getElementById("resultsList");
  const resultsCount = document.getElementById("resultsCount");
  const emptyResults = document.getElementById("emptyResults");
  const pagination = document.getElementById("pagination");
  const sortSelect = document.getElementById("sortSelect");
  const typeTabs = document.querySelectorAll(".type-tab");
  const filterSidebar = document.getElementById("filterSidebar");
  const mobileFilterOpen = document.getElementById("mobileFilterOpen");
  const mobileFilterClose = document.getElementById("mobileFilterClose");

  let activeType = "all";
  let currentPage = 1;

  function getCards() {
    return Array.from(resultsList.querySelectorAll(".result-card"));
  }

  /* ── Highlight Search Terms ────────────────── */

  function highlightTerms(query) {
    const cards = getCards();
    const terms = query
      .toLowerCase()
      .split(/\s+/)
      .filter((t) => t.length > 2);

    cards.forEach((card) => {
      const desc = card.querySelector(".result-desc");
      const url = card.querySelector(".result-url");

      [desc, url].forEach((el) => {
        if (!el.dataset.original) {
          el.dataset.original = el.textContent;
        }
        let text = el.dataset.original;
        if (terms.length > 0) {
          const regex = new RegExp(
            `(${terms.map((t) => t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|")})`,
            "gi"
          );
          text = text.replace(regex, "<mark>$1</mark>");
        }
        el.innerHTML = text;
      });
    });
  }

  /* ── Filter by Type Tab ────────────────────── */

  function filterByType() {
    const cards = getCards();
    cards.forEach((card) => {
      const cardType = card.getAttribute("data-type");
      card.style.display = activeType === "all" || cardType === activeType ? "" : "none";
    });
  }

  /* ── Filter by Category Checkboxes ─────────── */

  function getActiveCategories() {
    const checks = filterSidebar.querySelectorAll('.filter-check input[type="checkbox"]');
    return Array.from(checks)
      .filter((c) => c.checked)
      .map((c) => c.value);
  }

  function filterByCategory() {
    const active = getActiveCategories();
    const cards = getCards();
    cards.forEach((card) => {
      const cat = card.getAttribute("data-cat");
      if (card.style.display === "none") return; /* already hidden by type */
      if (active.length > 0 && !active.includes(cat)) {
        card.style.display = "none";
      }
    });
  }

  /* ── Sort ───────────────────────────────────── */

  function sortResults() {
    const val = sortSelect.value;
    const cards = getCards();

    cards.sort((a, b) => {
      if (val === "newest") {
        return new Date(b.getAttribute("data-date")) - new Date(a.getAttribute("data-date"));
      }
      if (val === "popular") {
        return parseInt(b.getAttribute("data-pop"), 10) - parseInt(a.getAttribute("data-pop"), 10);
      }
      return 0; /* relevance = original order */
    });

    cards.forEach((card) => resultsList.appendChild(card));
  }

  /* ── Update UI ─────────────────────────────── */

  function updateResults() {
    /* Reset visibility */
    getCards().forEach((c) => (c.style.display = ""));

    filterByType();
    filterByCategory();
    sortResults();

    const visible = getCards().filter((c) => c.style.display !== "none");
    const query = searchInput.value.trim();
    const total = visible.length;

    if (total === 0) {
      emptyResults.style.display = "";
      pagination.style.display = "none";
      resultsCount.textContent = `No results for \u201c${query}\u201d`;
    } else {
      emptyResults.style.display = "none";
      pagination.style.display = "";
      resultsCount.innerHTML = `About ${total * 31} results for &ldquo;<strong>${escapeHtml(query)}</strong>&rdquo; (0.${Math.floor(Math.random() * 9) + 1}${Math.floor(Math.random() * 9)}s)`;
    }

    highlightTerms(query);
  }

  function escapeHtml(str) {
    const div = document.createElement("div");
    div.textContent = str;
    return div.innerHTML;
  }

  /* ── Event Listeners ───────────────────────── */

  /* Search form */
  searchForm.addEventListener("submit", (e) => {
    e.preventDefault();
    currentPage = 1;
    updateResults();
  });

  /* Type tabs */
  typeTabs.forEach((tab) => {
    tab.addEventListener("click", () => {
      typeTabs.forEach((t) => t.classList.remove("active"));
      tab.classList.add("active");
      activeType = tab.getAttribute("data-type");
      currentPage = 1;
      updateResults();
    });
  });

  /* Category checkboxes */
  filterSidebar.querySelectorAll('.filter-check input[type="checkbox"]').forEach((cb) => {
    cb.addEventListener("change", () => updateResults());
  });

  /* Date radios (simulated filter) */
  filterSidebar.querySelectorAll('.filter-radio input[type="radio"]').forEach((r) => {
    r.addEventListener("change", () => updateResults());
  });

  /* Sort */
  sortSelect.addEventListener("change", () => updateResults());

  /* Pagination */
  pagination.addEventListener("click", (e) => {
    const btn = e.target.closest(".page-btn");
    if (!btn || btn.disabled) return;

    if (btn.classList.contains("prev")) {
      if (currentPage > 1) currentPage--;
    } else if (btn.classList.contains("next")) {
      currentPage++;
    } else {
      currentPage = parseInt(btn.getAttribute("data-page"), 10);
    }

    /* Update active state */
    pagination.querySelectorAll(".page-btn[data-page]").forEach((p) => {
      p.classList.toggle("active", parseInt(p.getAttribute("data-page"), 10) === currentPage);
    });

    const prevBtn = pagination.querySelector(".prev");
    const nextBtn = pagination.querySelector(".next");
    prevBtn.disabled = currentPage <= 1;
    nextBtn.disabled = currentPage >= 25;

    /* Scroll to top */
    window.scrollTo({ top: 0, behavior: "smooth" });
  });

  /* Mobile filter toggle */
  mobileFilterOpen.addEventListener("click", () => {
    filterSidebar.classList.add("open");
  });

  mobileFilterClose.addEventListener("click", () => {
    filterSidebar.classList.remove("open");
  });

  /* ── Init ──────────────────────────────────── */
  highlightTerms(searchInput.value);
})();

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Search Results</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="search-page">
    <!-- Top Bar -->
    <header class="search-header">
      <a href="#" class="logo">
        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#4f46e5" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
        <span>SearchApp</span>
      </a>
      <form class="search-bar" id="searchForm">
        <input type="text" class="search-input" id="searchInput" value="design systems" placeholder="Search..." />
        <button type="submit" class="search-btn" aria-label="Search">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
        </button>
      </form>
    </header>

    <!-- Type Tabs -->
    <nav class="type-tabs" role="tablist">
      <button class="type-tab active" role="tab" data-type="all">All</button>
      <button class="type-tab" role="tab" data-type="article">Articles</button>
      <button class="type-tab" role="tab" data-type="doc">Documentation</button>
      <button class="type-tab" role="tab" data-type="video">Videos</button>
      <button class="type-tab" role="tab" data-type="image">Images</button>
    </nav>

    <div class="search-layout">
      <!-- Sidebar Filters -->
      <aside class="filter-sidebar" id="filterSidebar">
        <div class="filter-group">
          <h3 class="filter-title">Date</h3>
          <label class="filter-radio"><input type="radio" name="date" value="any" checked /> Any time</label>
          <label class="filter-radio"><input type="radio" name="date" value="week" /> Past week</label>
          <label class="filter-radio"><input type="radio" name="date" value="month" /> Past month</label>
          <label class="filter-radio"><input type="radio" name="date" value="year" /> Past year</label>
        </div>

        <div class="filter-group">
          <h3 class="filter-title">Category</h3>
          <label class="filter-check"><input type="checkbox" value="tutorials" checked /> Tutorials</label>
          <label class="filter-check"><input type="checkbox" value="guides" checked /> Guides</label>
          <label class="filter-check"><input type="checkbox" value="api" checked /> API Reference</label>
          <label class="filter-check"><input type="checkbox" value="blog" checked /> Blog Posts</label>
        </div>

        <div class="filter-group">
          <h3 class="filter-title">Sort by</h3>
          <select class="filter-select" id="sortSelect">
            <option value="relevance">Relevance</option>
            <option value="newest">Newest</option>
            <option value="popular">Most Popular</option>
          </select>
        </div>

        <button class="filter-toggle-btn" id="mobileFilterClose">Close Filters</button>
      </aside>

      <!-- Main Results -->
      <main class="results-main">
        <div class="results-meta">
          <p class="results-count" id="resultsCount">About 247 results for &ldquo;<strong>design systems</strong>&rdquo; (0.24 seconds)</p>
          <button class="filter-toggle-btn mobile-filter-btn" id="mobileFilterOpen">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
            Filters
          </button>
        </div>

        <div class="results-list" id="resultsList">
          <article class="result-card" data-type="article" data-cat="tutorials" data-date="2026-03-18" data-pop="94">
            <h3 class="result-title"><a href="#">Introduction to Design Systems: A Complete Guide</a></h3>
            <p class="result-url">designsystems.com &rsaquo; guides &rsaquo; introduction</p>
            <p class="result-desc">Learn the fundamentals of <mark>design systems</mark> and how they help teams build consistent, scalable interfaces. This comprehensive guide covers tokens, components, patterns, and governance.</p>
            <div class="result-tags"><span class="tag">Guide</span><span class="tag">Beginner</span></div>
          </article>

          <article class="result-card" data-type="article" data-cat="blog" data-date="2026-03-15" data-pop="87">
            <h3 class="result-title"><a href="#">Building Scalable Design Systems with React and Figma</a></h3>
            <p class="result-url">medium.com &rsaquo; ux-collective &rsaquo; building-scalable</p>
            <p class="result-desc">A practical walkthrough of creating a <mark>design system</mark> that bridges the gap between <mark>design</mark> and development. Covers component libraries, token syncing, and automated documentation.</p>
            <div class="result-tags"><span class="tag">React</span><span class="tag">Figma</span></div>
          </article>

          <article class="result-card" data-type="doc" data-cat="api" data-date="2026-03-10" data-pop="76">
            <h3 class="result-title"><a href="#">Design Tokens Specification &mdash; W3C Community Group</a></h3>
            <p class="result-url">design-tokens.github.io &rsaquo; community-group &rsaquo; format</p>
            <p class="result-desc">The official specification for <mark>design</mark> tokens, providing a standard file format for sharing <mark>design system</mark> values across tools and platforms.</p>
            <div class="result-tags"><span class="tag">Specification</span><span class="tag">Tokens</span></div>
          </article>

          <article class="result-card" data-type="article" data-cat="tutorials" data-date="2026-02-28" data-pop="91">
            <h3 class="result-title"><a href="#">Design System Architecture: From Tokens to Patterns</a></h3>
            <p class="result-url">smashingmagazine.com &rsaquo; <mark>design</mark>-<mark>system</mark>-architecture</p>
            <p class="result-desc">Explore the multi-layered architecture of modern <mark>design systems</mark>. Understand how tokens, primitives, components, and patterns compose into a cohesive <mark>system</mark>.</p>
            <div class="result-tags"><span class="tag">Architecture</span><span class="tag">Advanced</span></div>
          </article>

          <article class="result-card" data-type="video" data-cat="tutorials" data-date="2026-02-20" data-pop="82">
            <h3 class="result-title"><a href="#">Design Systems in Practice &mdash; Conference Talk 2026</a></h3>
            <p class="result-url">youtube.com &rsaquo; watch &rsaquo; ds-in-practice-2026</p>
            <p class="result-desc">A 45-minute conference talk on implementing <mark>design systems</mark> at scale. Real-world case studies from teams at Shopify, GitHub, and Atlassian.</p>
            <div class="result-tags"><span class="tag">Video</span><span class="tag">45 min</span></div>
          </article>

          <article class="result-card" data-type="article" data-cat="guides" data-date="2026-02-14" data-pop="68">
            <h3 class="result-title"><a href="#">Color Systems for Design: Theory and Application</a></h3>
            <p class="result-url">material.io &rsaquo; <mark>design</mark> &rsaquo; color &rsaquo; the-color-<mark>system</mark></p>
            <p class="result-desc">Understanding color <mark>systems</mark> within <mark>design systems</mark>. Covers semantic tokens, accessible palettes, dark mode support, and dynamic color generation.</p>
            <div class="result-tags"><span class="tag">Color</span><span class="tag">Accessibility</span></div>
          </article>

          <article class="result-card" data-type="doc" data-cat="api" data-date="2026-01-30" data-pop="72">
            <h3 class="result-title"><a href="#">Storybook &mdash; Document and Test Your Design System</a></h3>
            <p class="result-url">storybook.js.org &rsaquo; docs &rsaquo; get-started</p>
            <p class="result-desc">Official Storybook documentation for building, testing, and documenting your <mark>design system</mark> components in isolation. Supports React, Vue, Angular, and more.</p>
            <div class="result-tags"><span class="tag">Storybook</span><span class="tag">Docs</span></div>
          </article>

          <article class="result-card" data-type="article" data-cat="blog" data-date="2026-01-22" data-pop="59">
            <h3 class="result-title"><a href="#">Lessons Learned Maintaining a Design System for 5 Years</a></h3>
            <p class="result-url">blog.github.com &rsaquo; <mark>design</mark>-<mark>system</mark>-lessons</p>
            <p class="result-desc">GitHub's Primer <mark>design system</mark> team shares five years of learnings: governance models, breaking changes, deprecation strategies, and community contribution workflows.</p>
            <div class="result-tags"><span class="tag">Case Study</span><span class="tag">GitHub</span></div>
          </article>
        </div>

        <!-- Pagination -->
        <nav class="pagination" id="pagination" aria-label="Pagination">
          <button class="page-btn prev" disabled aria-label="Previous">&larr;</button>
          <button class="page-btn active" data-page="1">1</button>
          <button class="page-btn" data-page="2">2</button>
          <button class="page-btn" data-page="3">3</button>
          <button class="page-btn" data-page="4">4</button>
          <button class="page-btn" data-page="5">5</button>
          <span class="page-ellipsis">&hellip;</span>
          <button class="page-btn" data-page="25">25</button>
          <button class="page-btn next" aria-label="Next">&rarr;</button>
        </nav>

        <!-- Empty State -->
        <div class="empty-results" id="emptyResults" style="display: none;">
          <div class="empty-icon">
            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg>
          </div>
          <h3>No results found</h3>
          <p>Try different keywords or remove some filters.</p>
          <ul>
            <li>Check your spelling</li>
            <li>Use more general terms</li>
            <li>Remove filters to broaden your search</li>
          </ul>
        </div>
      </main>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>