Build a Responsive Beer Parlour Website

Build and publish a responsive beer parlour website with HTML and CSS.

Introduction

30 Second Summary

People checking out a local venue want useful answers within seconds. A cluttered page makes a quick decision feel like work.

In this project, you will build The Copper Tap, a one-page website for a fictional beer parlour. Your finished site stays readable on narrow screens, supports keyboard navigation, and runs publicly through GitHub Pages.

What You'll Build

Picture sharing one public link where visitors can discover the venue, browse the menu, and find everything they need to plan a visit.

By the end of this project, you'll have:

  • A clear visitor journey that guides people from the venue story to the menu, opening hours, and location.
  • A responsive layout that turns the menu and visit grids into readable single-column content on narrow screens.
  • Visible keyboard focus on every link, plus a public GitHub Pages URL you can share.
  • Secret Mission: Stress test the live site with keyboard-only navigation, 200% zoom, and a narrow viewport.

Are there any prerequisites?

Some HTML and CSS experience will help. You'll need Visual Studio Code, Microsoft Edge, and a GitHub account.

Before We Start

A useful hospitality website answers a visitor’s first questions within seconds. Before you create any files, define what customers should understand when they arrive.

Set Up the Local Website

The customer goal is clear. However, the browser still has nothing to load.

You'll use Visual Studio Code to keep two linked files together. Microsoft Edge will show whether the browser can read their connection.

In this step, get ready to:
  • Create a local folder for The Copper Tap website.
  • Link the page structure to its stylesheet.
  • Load the styled starter heading in Microsoft Edge.
Create the local project folder

Windows File Explorer gives your website a predictable home inside Documents\copper-tap. Visual Studio Code can then treat that folder as one project.

  • Press the Windows key to open Windows search.
  • Type File Explorer and press Enter.
  • Select Documents in the left sidebar.
  • Use the new-folder control in the File Explorer toolbar to create copper-tap inside Documents.

That first piece is in place. You'll see an empty copper-tap folder ready to hold your website.

  • Press the Windows key to return to Windows search.
  • Type Visual Studio Code and press Enter.
  • Click File in the top menu bar.
  • Click Open Folder.
  • Select the Documents\copper-tap folder.
  • Confirm the folder selection.

You'll see copper-tap in Visual Studio Code's file list. Your editor is now pointing at the correct location.

Can't find the folder?

  • Return to File Explorer and confirm that copper-tap appears directly inside Documents.
  • Check the folder name for spaces or extra characters.

Still stuck? Help me find and open my Documents\copper-tap folder in Visual Studio Code.

Create the website files

HTML provides the page structure. CSS controls how that structure looks.

The stylesheet link inside index.html connects these two files. Keeping them in the same folder makes that link direct.

  • Use Visual Studio Code's file list to create index.html inside copper-tap.
  • Use the same file list to create styles.css inside copper-tap.

You'll see both files under copper-tap in the file list. This confirms they share the same folder.

  • Select index.html in the file list.
  • Add the starter page structure by copying this code into index.html:
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The Copper Tap</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>The Copper Tap</h1>
</body>
</html>

What does this file do?

  • The document metadata gives the browser a language and a page title.
  • The stylesheet link tells the browser to load styles.css from the same folder.
  • The h1 gives the page one clear main heading.
  • Save index.html using Visual Studio Code's save control.
  • Switch back to the File Explorer window from earlier.
  • Open index.html with Microsoft Edge.

You'll see The Copper Tap as a plain heading. The local HTML file is loading successfully.

Don't see the heading?

  • Check that the file is named index.html instead of index.html.txt.
  • Confirm that the heading text sits between the opening and closing h1 tags.
  • Save index.html before reopening it in Microsoft Edge.

Need another pair of eyes? Help me troubleshoot why my local index.html file does not show The Copper Tap in Microsoft Edge.

Style and verify the starter page

The starter palette uses three CSS custom properties. These reusable values give the page its dark background, cream text, and amber accent.

  • Switch back to Visual Studio Code.
  • Select styles.css in the file list.
  • Add the starter color rules by copying this code into styles.css:
:root {
  --ink: #17120f;
  --cream: #f7f0e4;
  --amber: #f2b84b;
}

body {
  margin: 0;
  padding: 2rem;
  background: var(--ink);
  color: var(--cream);
  font-family: "Segoe UI", Arial, sans-serif;
}

h1 {
  border-bottom: 0.25rem solid var(--amber);
}

What does this file do?

  • The :root rules store the three palette colors under reusable names.
  • The body rules apply spacing, typography, and the main page colors.
  • The h1 rule adds the amber line beneath the venue name.

Before you refresh, do you expect Microsoft Edge to keep the plain page or apply the palette from styles.css?

  • Save styles.css using Visual Studio Code's save control.
  • Switch back to Microsoft Edge.
  • Refresh the local index.html page.

You'll see “The Copper Tap” in cream text on a dark background. A gold line appears beneath the heading.

That is your first visible win. Microsoft Edge is loading the HTML structure and its linked stylesheet together.

Still seeing a plain page?

  • Confirm that styles.css sits beside index.html inside Documents\copper-tap.
  • Check that the stylesheet link uses href="styles.css".
  • Save both files before refreshing Microsoft Edge again.

Still not styled? Help me troubleshoot why styles.css is not applying to my local index.html page.

✔️ Awesome, I've got everything!

Your two files are saved in Documents\copper-tap. Microsoft Edge shows the styled starter heading.

ⓧ I'd like to double check the full code

Compare your index.html with this complete starter file.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The Copper Tap</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>The Copper Tap</h1>
</body>
</html>

What should match in index.html?

Check the stylesheet filename and the main heading carefully. Both must match the file names and text shown above.

Compare your styles.css with this complete starter file.

:root {
  --ink: #17120f;
  --cream: #f7f0e4;
  --amber: #f2b84b;
}

body {
  margin: 0;
  padding: 2rem;
  background: var(--ink);
  color: var(--cream);
  font-family: "Segoe UI", Arial, sans-serif;
}

h1 {
  border-bottom: 0.25rem solid var(--amber);
}

What should match in styles.css?

Check the three color values and each closing brace. A missing brace can stop the browser from applying the rules below it.

Your local foundation is working. Next, you'll turn this starter heading into the complete desktop beer parlour page.

Build the Desktop Beer Parlour Page

The styled starter heading proves your local files are linked. Microsoft Edge can already read the page plus its stylesheet.

A useful venue page needs clear content before it needs mobile refinements. In this step, you will build the complete desktop experience with structured sections plus card-based layouts.

In this step, get ready to:
  • Replace the starter page with the complete venue structure.
  • Style the desktop page with card layouts plus venue colors.
  • Test the navigation before reproducing the narrow-screen limitation.
Replace the starter page structure

Semantic HTML divides the page into meaningful areas such as navigation, main content, sections, articles, plus a footer. This structure gives visitors a predictable journey from the venue introduction to practical visit details.

  • Switch back to index.html in Visual Studio Code.
  • Select all of the starter markup.
  • Replace the selected markup with this document shell:
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta
    name="description"
    content="Explore the beer, snacks, opening hours, and welcoming atmosphere at The Copper Tap."
  >
  <title>The Copper Tap | Local Beer Parlour</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body id="top">
  <a class="skip-link" href="#main-content">Skip to main content</a>

  <header class="site-header">
    <div class="wrap header-inner">
      <a class="brand" href="#top" aria-label="The Copper Tap home">The Copper Tap</a>
      <nav aria-label="Primary navigation">
        <ul>
          <li><a href="#about">About</a></li>
          <li><a href="#menu">Menu</a></li>
          <li><a href="#visit">Visit</a></li>
        </ul>
      </nav>
    </div>
  </header>
</body>
</html>

What Does This Structure Do?

  • The description gives the page a concise summary for services that inspect its metadata.
  • The skip link points directly to main-content for keyboard users.
  • The header groups the brand with links to the three main visitor destinations.
  • Save index.html.
  • Switch back to the existing page in Microsoft Edge.
  • Refresh the page.

You should see The Copper Tap followed by links for About, Menu, plus Visit. The starter stylesheet still controls the basic colors.

Missing the Header Links?

Confirm that the new header sits between the opening and closing body tags. Help me check my document shell.

The hero gives visitors the fastest summary of the venue. It also gives them direct paths to the menu plus visit information.

  • Find the closing </header> line in index.html.
  • Add the main hero structure directly below it:
  <main id="main-content">
    <section class="hero" aria-labelledby="hero-title">
      <div class="wrap hero-grid">
        <div>
          <p class="eyebrow">Your neighbourhood beer parlour</p>
          <h1 id="hero-title">Local pours.<br>Good company.</h1>
          <p class="hero-copy">
            Settle in for rotating taps, simple snacks, and an easygoing room built
            for catching up.
          </p>
          <div class="hero-actions">
            <a class="button button-primary" href="#menu">View the menu</a>
            <a class="button button-secondary" href="#visit">Plan your visit</a>
          </div>
        </div>
      </div>
    </section>
  </main>

How Does the Hero Guide Visitors?

  • The main-content identifier supplies the destination for the skip link.
  • The headline states the venue promise in a short phrase.
  • The two action links move visitors directly to decision-making information.
  • Save index.html.
  • Refresh the page in Microsoft Edge.

You should see the Local pours. Good company. headline with two action links. The content is still using the starter styles.

Hero Missing From the Page?

Check that the new main element appears before the closing </body> tag. Help me find why the hero is missing.

A venue highlight card creates a second visual destination inside the hero. Its event details give the page a timely reason to visit.

  • Locate the closing </div> for the hero text column inside hero-grid.
  • Add this highlight card immediately below that closing tag:
        <aside class="hero-card" aria-label="Tonight at The Copper Tap">
          <p class="card-label">Tonight at the taproom</p>
          <h2>Friday tasting flight</h2>
          <p>Three rotating half-pours selected by the bar team.</p>
          <ul class="feature-list">
            <li>Walk-ins welcome</li>
            <li>Alcohol-free options</li>
            <li>Kitchen open until 9 PM</li>
          </ul>
        </aside>

Why Use an Aside?

The aside identifies supporting content connected to the hero. The accessibility label gives the card a clear purpose.

  • Save index.html.
  • Refresh the page in Microsoft Edge.

You should see Friday tasting flight below the hero actions. Its three venue highlights should appear as a list.

Card Outside the Hero?

Make sure the aside remains inside hero-grid. Help me place the hero card correctly.

The about section explains the venue concept before visitors inspect individual products. Its two-column content will balance a short heading against a longer story.

  • Find the closing </main> line in index.html.
  • Add the about section directly above it:
    <section class="section" id="about" aria-labelledby="about-title">
      <div class="wrap about-grid">
        <div>
          <p class="eyebrow">A better local</p>
          <h2 id="about-title">Beer without the fuss</h2>
        </div>
        <div class="body-copy">
          <p>
            The Copper Tap is a fictional neighbourhood parlour focused on fresh
            pours, friendly recommendations, and a short menu that is easy to love.
          </p>
          <p>
            This demo uses text instead of image-based menus so visitors can read,
            zoom, search, and navigate the important details on any screen.
          </p>
        </div>
      </div>
    </section>

What Does the About Section Add?

The matching about values connect the navigation link to this section. The labelled heading also gives the section a clear accessible name.

  • Save index.html.
  • Refresh the page in Microsoft Edge.
  • Select the About navigation link.

You should move to the Beer without the fuss section. This confirms the first internal navigation destination works.

About Link Does Not Move?

Compare href="#about" in the header with id="about" on the section. Help me repair the About link.

The menu needs a heading before its product cards. A dedicated grid container will hold those cards in the next addition.

  • Find the closing </main> line again.
  • Add this menu section directly above it:
    <section class="section menu-section" id="menu" aria-labelledby="menu-title">
      <div class="wrap">
        <div class="section-heading">
          <div>
            <p class="eyebrow">What is pouring</p>
            <h2 id="menu-title">Beer and bites</h2>
          </div>
          <p>Ask the bar team about today’s rotating taps.</p>
        </div>

        <div class="menu-grid">
        </div>
      </div>
    </section>

Why Separate the Menu Heading?

The heading introduces the whole menu. The supporting sentence handles information that applies to every category.

  • Save index.html.
  • Refresh the page in Microsoft Edge.
  • Select the Menu navigation link.

You should move to the Beer and bites heading. The empty grid does not display cards until you add its articles.

Menu Link Does Not Move?

Confirm that the menu section uses id="menu". Help me check the menu destination.

Each menu category works as an independent article. Consistent item lists make names plus prices easy to scan.

  • Place your cursor between the opening plus closing menu-grid tags.
  • Add these three menu cards inside the grid:
          <article class="menu-card">
            <h3>House favourites</h3>
            <ul class="menu-list">
              <li><span>Copper Lager</span><strong>$7</strong></li>
              <li><span>Dark Mild</span><strong>$7</strong></li>
              <li><span>Apple Cider</span><strong>$8</strong></li>
            </ul>
          </article>

          <article class="menu-card">
            <h3>Fresh and hoppy</h3>
            <ul class="menu-list">
              <li><span>Market Pale Ale</span><strong>$8</strong></li>
              <li><span>West Coast IPA</span><strong>$9</strong></li>
              <li><span>Hazy Session Ale</span><strong>$8</strong></li>
            </ul>
          </article>

          <article class="menu-card">
            <h3>Snacks</h3>
            <ul class="menu-list">
              <li><span>Warm pretzel</span><strong>$6</strong></li>
              <li><span>Spiced nuts</span><strong>$5</strong></li>
              <li><span>Cheese board</span><strong>$12</strong></li>
            </ul>
          </article>

How Are the Menu Cards Organized?

  • Each article holds one self-contained category.
  • Each list item pairs a product name with a bold price.
  • The repeated class names let one set of CSS rules style every card consistently.
  • Save index.html.
  • Refresh the page in Microsoft Edge.

You should see House favourites, Fresh and hoppy, plus Snacks. Each category should contain three priced items.

Menu Items Outside Their Cards?

Check that all three article elements sit between the two menu-grid tags. Help me repair the menu nesting.

The visit section answers the practical questions that turn interest into a visit. Its grid will place opening hours beside the taproom details.

  • Find the closing </main> line again.
  • Add this visit section directly above it:
    <section class="section visit-section" id="visit" aria-labelledby="visit-title">
      <div class="wrap">
        <p class="eyebrow">Come by</p>
        <h2 id="visit-title">Plan your visit</h2>

        <div class="visit-grid">
        </div>
      </div>
    </section>

What Is the Visit Grid For?

The grid groups two related cards under one section heading. The first card handles time information. The second card handles location plus contact information.

  • Save index.html.
  • Refresh the page in Microsoft Edge.
  • Select the Visit navigation link.

You should move to the Plan your visit heading. The empty grid is ready for its two cards.

Visit Link Does Not Move?

Compare href="#visit" with id="visit". Help me repair the Visit link.

A description list connects each day range to its opening time. The contact card uses an address element for the fictional location.

  • Place your cursor between the opening plus closing visit-grid tags.
  • Add these two visit cards inside the grid:
          <article class="visit-card">
            <h3>Opening hours</h3>
            <dl class="hours-list">
              <div><dt>Monday to Thursday</dt><dd>4 PM to 11 PM</dd></div>
              <div><dt>Friday</dt><dd>3 PM to midnight</dd></div>
              <div><dt>Saturday</dt><dd>Noon to midnight</dd></div>
              <div><dt>Sunday</dt><dd>Noon to 9 PM</dd></div>
            </dl>
          </article>

          <article class="visit-card">
            <h3>Find the taproom</h3>
            <address>
              42 Market Lane<br>
              Your City
            </address>
            <p><strong>Phone:</strong> Add your business number</p>
            <p><strong>Email:</strong> Add your business email</p>
            <p class="demo-note">Demo details. Replace these before publishing a real business site.</p>
          </article>

How Do the Visit Cards Help?

The hours list preserves the relationship between each day range plus its time. The demo note prevents fictional contact details from being mistaken for real business information.

  • Save index.html.
  • Refresh the page in Microsoft Edge.

You should see four opening-hour rows followed by the taproom address. You should also see the replacement reminder beneath the contact details.

Hours Look Incomplete?

Confirm that all four day rows remain inside hours-list. Help me check the visit cards.

The footer closes the visitor journey. Its link provides a quick route back to the page header.

  • Find the closing </main> line.
  • Add this footer directly below it:
  <footer class="site-footer">
    <div class="wrap footer-inner">
      <p>The Copper Tap. Demo website.</p>
      <a href="#top">Back to top</a>
    </div>
  </footer>

What Does the Footer Complete?

The footer identifies the page as a demo. The Back to top link targets the top identifier on the body.

  • Save index.html.
  • Refresh the page in Microsoft Edge.
  • Select the Back to top link.

You should return to the top of the page. Your complete venue content now follows a clear beginning-to-end structure.

Back to Top Does Not Move?

Confirm that the body still contains id="top". Help me check the footer link.

✔️ Awesome, I've got everything!

Your complete venue structure is ready. Make sure index.html is saved before styling it.

ⓧ I'd like to double check the full code

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta
    name="description"
    content="Explore the beer, snacks, opening hours, and welcoming atmosphere at The Copper Tap."
  >
  <title>The Copper Tap | Local Beer Parlour</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body id="top">
  <a class="skip-link" href="#main-content">Skip to main content</a>

  <header class="site-header">
    <div class="wrap header-inner">
      <a class="brand" href="#top" aria-label="The Copper Tap home">The Copper Tap</a>
      <nav aria-label="Primary navigation">
        <ul>
          <li><a href="#about">About</a></li>
          <li><a href="#menu">Menu</a></li>
          <li><a href="#visit">Visit</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <main id="main-content">
    <section class="hero" aria-labelledby="hero-title">
      <div class="wrap hero-grid">
        <div>
          <p class="eyebrow">Your neighbourhood beer parlour</p>
          <h1 id="hero-title">Local pours.<br>Good company.</h1>
          <p class="hero-copy">
            Settle in for rotating taps, simple snacks, and an easygoing room built
            for catching up.
          </p>
          <div class="hero-actions">
            <a class="button button-primary" href="#menu">View the menu</a>
            <a class="button button-secondary" href="#visit">Plan your visit</a>
          </div>
        </div>

        <aside class="hero-card" aria-label="Tonight at The Copper Tap">
          <p class="card-label">Tonight at the taproom</p>
          <h2>Friday tasting flight</h2>
          <p>Three rotating half-pours selected by the bar team.</p>
          <ul class="feature-list">
            <li>Walk-ins welcome</li>
            <li>Alcohol-free options</li>
            <li>Kitchen open until 9 PM</li>
          </ul>
        </aside>
      </div>
    </section>

    <section class="section" id="about" aria-labelledby="about-title">
      <div class="wrap about-grid">
        <div>
          <p class="eyebrow">A better local</p>
          <h2 id="about-title">Beer without the fuss</h2>
        </div>
        <div class="body-copy">
          <p>
            The Copper Tap is a fictional neighbourhood parlour focused on fresh
            pours, friendly recommendations, and a short menu that is easy to love.
          </p>
          <p>
            This demo uses text instead of image-based menus so visitors can read,
            zoom, search, and navigate the important details on any screen.
          </p>
        </div>
      </div>
    </section>

    <section class="section menu-section" id="menu" aria-labelledby="menu-title">
      <div class="wrap">
        <div class="section-heading">
          <div>
            <p class="eyebrow">What is pouring</p>
            <h2 id="menu-title">Beer and bites</h2>
          </div>
          <p>Ask the bar team about today’s rotating taps.</p>
        </div>

        <div class="menu-grid">
          <article class="menu-card">
            <h3>House favourites</h3>
            <ul class="menu-list">
              <li><span>Copper Lager</span><strong>$7</strong></li>
              <li><span>Dark Mild</span><strong>$7</strong></li>
              <li><span>Apple Cider</span><strong>$8</strong></li>
            </ul>
          </article>

          <article class="menu-card">
            <h3>Fresh and hoppy</h3>
            <ul class="menu-list">
              <li><span>Market Pale Ale</span><strong>$8</strong></li>
              <li><span>West Coast IPA</span><strong>$9</strong></li>
              <li><span>Hazy Session Ale</span><strong>$8</strong></li>
            </ul>
          </article>

          <article class="menu-card">
            <h3>Snacks</h3>
            <ul class="menu-list">
              <li><span>Warm pretzel</span><strong>$6</strong></li>
              <li><span>Spiced nuts</span><strong>$5</strong></li>
              <li><span>Cheese board</span><strong>$12</strong></li>
            </ul>
          </article>
        </div>
      </div>
    </section>

    <section class="section visit-section" id="visit" aria-labelledby="visit-title">
      <div class="wrap">
        <p class="eyebrow">Come by</p>
        <h2 id="visit-title">Plan your visit</h2>

        <div class="visit-grid">
          <article class="visit-card">
            <h3>Opening hours</h3>
            <dl class="hours-list">
              <div><dt>Monday to Thursday</dt><dd>4 PM to 11 PM</dd></div>
              <div><dt>Friday</dt><dd>3 PM to midnight</dd></div>
              <div><dt>Saturday</dt><dd>Noon to midnight</dd></div>
              <div><dt>Sunday</dt><dd>Noon to 9 PM</dd></div>
            </dl>
          </article>

          <article class="visit-card">
            <h3>Find the taproom</h3>
            <address>
              42 Market Lane<br>
              Your City
            </address>
            <p><strong>Phone:</strong> Add your business number</p>
            <p><strong>Email:</strong> Add your business email</p>
            <p class="demo-note">Demo details. Replace these before publishing a real business site.</p>
          </article>
        </div>
      </div>
    </section>
  </main>

  <footer class="site-footer">
    <div class="wrap footer-inner">
      <p>The Copper Tap. Demo website.</p>
      <a href="#top">Back to top</a>
    </div>
  </footer>
</body>
</html>

What Should Match?

Compare the order of the header, hero, about, menu, visit, plus footer. Check every opening tag against its closing tag.

Build the desktop presentation

CSS Grid controls the main desktop columns. The stylesheet also establishes reusable colors, spacing, typography, cards, buttons, plus focus styling.

Why Plain CSS for This Page?

Plain CSS keeps the layout rules visible inside one local file. A framework would add setup that does not improve this static page.

  • Switch back to styles.css in Visual Studio Code.
  • Select all of the starter CSS.
  • Replace it with these color tokens plus global rules:
:root {
  color-scheme: dark;
  --ink: #17120f;
  --panel: #261c17;
  --panel-light: #33251e;
  --cream: #f7f0e4;
  --muted: #cdbda8;
  --amber: #f2b84b;
  --rust: #a9482f;
  --paper: #efe2cf;
  --line: rgba(247, 240, 228, 0.18);
  --shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.28);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: "Segoe UI", Arial, sans-serif;
  line-height: 1.6;
}

What Do the Foundation Rules Control?

  • The custom properties keep the page palette consistent.
  • The universal box-sizing rule keeps declared widths predictable.
  • The body rule establishes the default background, text color, font, plus line spacing.
  • Save styles.css.
  • Refresh the page in Microsoft Edge.

You should see the page return to a full-width dark background. The previous body padding plus heading underline should be gone.

Starter Underline Still Visible?

Confirm that the old h1 rule was replaced. Help me remove the old starter CSS.

  • Add the link, skip-link, plus width rules at the bottom of styles.css:
a {
  color: inherit;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--amber);
  color: var(--ink);
  font-weight: 800;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.wrap {
  width: min(70rem, calc(100% - 2rem));
  margin-inline: auto;
}

How Does the Page Width Work?

The wrap class limits content to a readable maximum width. The skip link remains above the viewport until keyboard focus reveals it.

  • Save styles.css.
  • Refresh the page in Microsoft Edge.

You should see the main content centered with space along both sides. The skip link should remain hidden above the visible page.

Content Touching the Window Edge?

Check that each major inner container still uses the wrap class. Help me check the wrapper width.

  • Add the sticky header plus brand rules at the bottom of styles.css:
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--line);
  background: rgba(23, 18, 15, 0.94);
}

.header-inner,
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.header-inner {
  min-height: 4.5rem;
}

.brand {
  color: var(--amber);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  font-weight: 700;
  text-decoration: none;
}

How Does the Header Stay Useful?

The sticky position keeps the navigation at the top while visitors scroll. The shared flex rule places header plus footer content at opposite sides of their wrappers.

  • Save styles.css.
  • Refresh the page in Microsoft Edge.
  • Scroll down the page.

You should see the header remain at the top of the browser. Its amber brand should stay visible against the dark background.

Header Scrolls Away?

Confirm that the selector is .site-header with a leading full stop. Help me repair the sticky header.

  • Add the navigation plus hero background rules at the bottom of styles.css:
nav ul {
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

nav a,
.site-footer a {
  font-weight: 700;
  text-underline-offset: 0.35rem;
}

.hero {
  display: grid;
  min-height: 42rem;
  align-items: center;
  background:
    radial-gradient(circle at 85% 20%, rgba(242, 184, 75, 0.2), transparent 24rem),
    linear-gradient(135deg, #17120f 0%, #2b1c16 100%);
}

What Creates the Hero Atmosphere?

The navigation list becomes a horizontal row. Two layered gradients give the hero depth without requiring an image.

  • Save styles.css.
  • Refresh the page in Microsoft Edge.

You should see the navigation in one row. The hero should fill a tall area with a warm glow near its upper-right side.

Hero Background Looks Flat?

Check that both gradient lines remain inside the single background declaration. Help me check the hero background.

  • Add the hero grid plus label rules at the bottom of styles.css:
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
  gap: 4rem;
  align-items: center;
  padding-block: 6rem;
}

.eyebrow,
.card-label {
  margin: 0 0 0.75rem;
  color: var(--amber);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

How Is the Hero Split?

The first grid column receives more space for the headline. The second column keeps a minimum width for the event card.

  • Save styles.css.
  • Refresh the page in Microsoft Edge.

You should see the hero text on the left. The Friday tasting flight card should appear on the right.

Hero Still in One Column?

Confirm that the HTML wrapper uses hero-grid exactly. Help me connect the hero grid styles.

  • Add the main heading typography at the bottom of styles.css:
h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.08;
}

h1 {
  max-width: 12ch;
  margin-bottom: 1.5rem;
  font-size: clamp(3.25rem, 8vw, 6.5rem);
  letter-spacing: -0.055em;
}

h2 {
  margin-bottom: 1.5rem;
  font-size: clamp(2.25rem, 5vw, 4rem);
  letter-spacing: -0.035em;
}

Why Use a Type Scale?

The serif headings separate the venue voice from the body text. The clamp() values let the two largest heading levels scale within controlled limits.

  • Save styles.css.
  • Refresh the page in Microsoft Edge.

You should see a large serif hero headline. The section headings should use the same type family at a smaller size.

Headings Still Look Small?

Check the braces around the h1 plus h2 rules. Help me inspect the heading styles.

  • Add the hero copy, actions, plus base button rules at the bottom of styles.css:
h3 {
  font-size: 1.5rem;
}

.hero-copy {
  max-width: 38rem;
  color: var(--muted);
  font-size: 1.15rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}

.button {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.15rem;
  border: 2px solid var(--amber);
  font-weight: 800;
  text-decoration: none;
}

What Makes the Actions Readable?

The muted hero copy supports the headline without competing with it. The button rule gives both action links a consistent target size plus border.

  • Save styles.css.
  • Refresh the page in Microsoft Edge.

You should see two bordered actions beneath the hero copy. Their labels should sit in the center of each button.

Actions Still Look Like Plain Links?

Confirm that both hero links include the button class. Help me connect the button styles.

  • Add the button variants plus hero-card rules at the bottom of styles.css:
.button-primary {
  background: var(--amber);
  color: var(--ink);
}

.button-secondary {
  color: var(--cream);
}

.button:hover {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--ink);
}

.hero-card {
  padding: 2rem;
  border: 1px solid var(--line);
  background: rgba(38, 28, 23, 0.88);
  box-shadow: var(--shadow);
  transform: rotate(1.5deg);
}

How Does the Hero Gain Contrast?

The primary button uses amber as its fill. The event card combines a translucent panel with a shadow plus a slight rotation.

  • Save styles.css.
  • Refresh the page in Microsoft Edge.
  • Move the pointer over each hero button.

You should see each button switch to a cream background. The event card should look like a raised panel with a slight tilt.

Card Has No Tilt or Shadow?

Check that the card uses class="hero-card" in index.html. Help me check the hero-card styling.

  • Add the card typography plus section layout rules at the bottom of styles.css:
.hero-card h2 {
  font-size: 2rem;
}

.feature-list {
  margin: 1.5rem 0 0;
  padding-left: 1.2rem;
  color: var(--muted);
}

.section {
  padding-block: 6rem;
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(16rem, 1fr));
  gap: 4rem;
  align-items: start;
}

How Do Sections Gain Space?

The shared section rule creates consistent vertical breathing room. The about grid places its heading beside the venue story.

  • Save styles.css.
  • Refresh the page in Microsoft Edge.

You should see Beer without the fuss on the left. The two descriptive paragraphs should appear in a matching column on the right.

About Content Still Stacked?

Confirm that the section wrapper uses about-grid exactly. Help me repair the about columns.

  • Add the body-copy plus menu heading rules at the bottom of styles.css:
.body-copy {
  color: var(--muted);
  font-size: 1.08rem;
}

.menu-section {
  background: var(--panel);
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.section-heading > p {
  max-width: 22rem;
  color: var(--muted);
}

What Separates the Menu Section?

The panel background gives the menu a distinct visual band. The heading row balances the title against the rotating-taps note.

  • Save styles.css.
  • Refresh the page in Microsoft Edge.

You should see a separate dark panel behind Beer and bites. Its supporting note should sit on the right at desktop width.

Menu Background Does Not Change?

Check that the section includes both section plus menu-section classes. Help me check the menu section classes.

  • Add the menu grid plus item rules at the bottom of styles.css:
.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(15rem, 1fr));
  gap: 1.5rem;
}

.menu-card {
  padding: 1.5rem;
  border-top: 0.3rem solid var(--rust);
  background: var(--panel-light);
}

.menu-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.8rem;
  border-bottom: 1px solid var(--line);
}

How Does the Menu Become Scannable?

The grid creates three equal desktop columns with a minimum card width. Each item row pushes its price to the opposite edge.

  • Save styles.css.
  • Refresh the page in Microsoft Edge.

You should see three menu cards in one row. Each card should have a rust-colored top border plus aligned prices.

Menu Cards Not in Three Columns?

Confirm that all three articles remain inside menu-grid. Help me repair the menu columns.

  • Add the final menu rule plus visit-card layout at the bottom of styles.css:
.menu-list li:last-child {
  border-bottom: 0;
}

.visit-section {
  background: var(--paper);
  color: var(--ink);
}

.visit-section .eyebrow {
  color: #71311f;
}

.visit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(18.75rem, 1fr));
  gap: 1.5rem;
}

.visit-card {
  padding: 2rem;
  background: #fffaf2;
  box-shadow: 0 1rem 2rem rgba(67, 42, 25, 0.12);
}

Why Does the Visit Area Use Light Colors?

The paper background separates practical information from the dark venue story. Two equal grid columns give the hours plus location matching importance.

  • Save styles.css.
  • Refresh the page in Microsoft Edge.

You should see a light Plan your visit section. Its opening-hours card should sit beside the taproom card.

Visit Text Is Hard to Read?

Confirm that visit-section sets both its light background plus dark text color. Help me check the visit colors.

  • Add the opening-hours plus address rules at the bottom of styles.css:
.hours-list {
  margin: 0;
}

.hours-list div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.65rem;
  border-bottom: 1px solid rgba(23, 18, 15, 0.15);
}

.hours-list dt {
  font-weight: 700;
}

.hours-list dd {
  margin: 0;
  text-align: right;
}

address {
  margin-bottom: 1.25rem;
  font-style: normal;
  font-size: 1.1rem;
}

How Are the Hours Aligned?

Each description-list row places its day range on the left. The matching time aligns on the right.

  • Save styles.css.
  • Refresh the page in Microsoft Edge.

You should see four separated hour rows. Their day labels plus opening times should align across the card.

Hours Appear as One Block?

Check that each day pair remains inside its own div within hours-list. Help me repair the hours layout.

  • Add the footer plus visible-focus rules at the bottom of styles.css:
.demo-note {
  color: #654c3f;
  font-size: 0.9rem;
}

.site-footer {
  padding-block: 2rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.site-footer p {
  margin-bottom: 0;
}

a:focus-visible {
  outline: 0.2rem solid var(--amber);
  outline-offset: 0.25rem;
}

What Completes the Desktop Styles?

The footer uses muted text plus a subtle border. The focus rule gives keyboard users a gold outline around the active link.

  • Save styles.css.
  • Refresh the page in Microsoft Edge.

You should see a bordered footer beneath the light visit section. The complete desktop page should now look consistent from header to footer.

Final Styles Missing?

Look for a missing closing brace immediately above the first broken section. Help me find the CSS syntax issue.

✔️ Awesome, I've got everything!

Your desktop stylesheet is complete. Make sure styles.css is saved.

ⓧ I'd like to double check the full code

:root {
  color-scheme: dark;
  --ink: #17120f;
  --panel: #261c17;
  --panel-light: #33251e;
  --cream: #f7f0e4;
  --muted: #cdbda8;
  --amber: #f2b84b;
  --rust: #a9482f;
  --paper: #efe2cf;
  --line: rgba(247, 240, 228, 0.18);
  --shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.28);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: "Segoe UI", Arial, sans-serif;
  line-height: 1.6;
}

a {
  color: inherit;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--amber);
  color: var(--ink);
  font-weight: 800;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.wrap {
  width: min(70rem, calc(100% - 2rem));
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--line);
  background: rgba(23, 18, 15, 0.94);
}

.header-inner,
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.header-inner {
  min-height: 4.5rem;
}

.brand {
  color: var(--amber);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  font-weight: 700;
  text-decoration: none;
}

nav ul {
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

nav a,
.site-footer a {
  font-weight: 700;
  text-underline-offset: 0.35rem;
}

.hero {
  display: grid;
  min-height: 42rem;
  align-items: center;
  background:
    radial-gradient(circle at 85% 20%, rgba(242, 184, 75, 0.2), transparent 24rem),
    linear-gradient(135deg, #17120f 0%, #2b1c16 100%);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
  gap: 4rem;
  align-items: center;
  padding-block: 6rem;
}

.eyebrow,
.card-label {
  margin: 0 0 0.75rem;
  color: var(--amber);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.08;
}

h1 {
  max-width: 12ch;
  margin-bottom: 1.5rem;
  font-size: clamp(3.25rem, 8vw, 6.5rem);
  letter-spacing: -0.055em;
}

h2 {
  margin-bottom: 1.5rem;
  font-size: clamp(2.25rem, 5vw, 4rem);
  letter-spacing: -0.035em;
}

h3 {
  font-size: 1.5rem;
}

.hero-copy {
  max-width: 38rem;
  color: var(--muted);
  font-size: 1.15rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}

.button {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.15rem;
  border: 2px solid var(--amber);
  font-weight: 800;
  text-decoration: none;
}

.button-primary {
  background: var(--amber);
  color: var(--ink);
}

.button-secondary {
  color: var(--cream);
}

.button:hover {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--ink);
}

.hero-card {
  padding: 2rem;
  border: 1px solid var(--line);
  background: rgba(38, 28, 23, 0.88);
  box-shadow: var(--shadow);
  transform: rotate(1.5deg);
}

.hero-card h2 {
  font-size: 2rem;
}

.feature-list {
  margin: 1.5rem 0 0;
  padding-left: 1.2rem;
  color: var(--muted);
}

.section {
  padding-block: 6rem;
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(16rem, 1fr));
  gap: 4rem;
  align-items: start;
}

.body-copy {
  color: var(--muted);
  font-size: 1.08rem;
}

.menu-section {
  background: var(--panel);
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.section-heading > p {
  max-width: 22rem;
  color: var(--muted);
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(15rem, 1fr));
  gap: 1.5rem;
}

.menu-card {
  padding: 1.5rem;
  border-top: 0.3rem solid var(--rust);
  background: var(--panel-light);
}

.menu-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.8rem;
  border-bottom: 1px solid var(--line);
}

.menu-list li:last-child {
  border-bottom: 0;
}

.visit-section {
  background: var(--paper);
  color: var(--ink);
}

.visit-section .eyebrow {
  color: #71311f;
}

.visit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(18.75rem, 1fr));
  gap: 1.5rem;
}

.visit-card {
  padding: 2rem;
  background: #fffaf2;
  box-shadow: 0 1rem 2rem rgba(67, 42, 25, 0.12);
}

.hours-list {
  margin: 0;
}

.hours-list div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.65rem;
  border-bottom: 1px solid rgba(23, 18, 15, 0.15);
}

.hours-list dt {
  font-weight: 700;
}

.hours-list dd {
  margin: 0;
  text-align: right;
}

address {
  margin-bottom: 1.25rem;
  font-style: normal;
  font-size: 1.1rem;
}

.demo-note {
  color: #654c3f;
  font-size: 0.9rem;
}

.site-footer {
  padding-block: 2rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.site-footer p {
  margin-bottom: 0;
}

a:focus-visible {
  outline: 0.2rem solid var(--amber);
  outline-offset: 0.25rem;
}

What Should Match?

Your file should end with the a:focus-visible rule. It should not contain any media queries yet.

Test the desktop page and expose the layout limit

The wide layout is now ready for a complete visitor journey. Testing each internal link confirms that the content hierarchy works before you challenge the layout at a smaller width.

  • Maximize the Microsoft Edge window.
  • Refresh index.html.
  • Select the About navigation link.

You should move to Beer without the fuss.

  • Select the Menu navigation link.

You should move to three menu cards arranged in one row.

  • Select the Visit navigation link.

You should move to two visit cards arranged side by side.

  • Select the Back to top link in the footer.

You should return to the sticky header. That is the desktop journey working from beginning to end.

A Navigation Link Lands in the Wrong Place?

Compare each link fragment with the matching section identifier. Help me trace the internal links.

Before you narrow the window, do you think all five desktop columns can keep their minimum widths inside a phone-sized viewport?

  • Drag the right edge of Microsoft Edge toward the left until the page becomes narrow.
  • Inspect the bottom edge of the page for horizontal scrolling.

You should see a horizontal scrollbar. Parts of the menu plus visit cards should extend beyond the viewport.

Why Did the Page Overflow?

The menu grid requires three columns with a minimum width of 15rem each. The visit grid requires two columns with a minimum width of 18.75rem each.

Those desktop constraints exceed the available width. You reproduced the limitation on purpose so the responsive repair has a clear result to prove.

Your complete desktop venue page is working. Next, you will turn the overflow you just reproduced into a responsive one-column experience.

Repair the Mobile Layout and Accessibility

Your desktop page now presents the full Copper Tap experience. However, the horizontal scrollbar exposes how the fixed minimum widths in the CSS Grid layouts squeeze narrow screens.

Responsive breakpoints let the layout adapt when space becomes limited. In this step, you will repair the overflow before testing visible keyboard focus across the page.

In this step, get ready to:
  • Convert the main page areas into single-column layouts below the desktop width.
  • Make the action buttons fit very narrow screens.
  • Verify the focus order with keyboard-only navigation.
Stack the layout below 780 pixels

A responsive breakpoint applies different layout rules when the viewport reaches a defined width. The first set of rules reorganizes the header before removing the fixed page height from the hero.

  • Switch back to styles.css in Visual Studio Code.
  • Append these rules below the existing a:focus-visible rule:
@media (max-width: 780px) {
  .header-inner,
  .section-heading,
  .footer-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .header-inner {
    padding-block: 1rem;
  }

  nav ul {
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
  }

  .hero {
    min-height: auto;
  }
}

What do these rules change?

  • The grouped header selectors stack their contents vertically when the viewport is no wider than 780px.
  • The navigation list wraps its links when one row has too little space.
  • The hero can shrink to match its content instead of keeping its desktop minimum height.
  • Save styles.css.
  • Return to the Microsoft Edge preview from earlier.
  • Refresh the page.
  • Narrow the browser below 780px.

You should see the brand sit above the navigation. The footer content should also form a vertical stack.

Still seeing horizontal header content?

  • Confirm that the new media query sits after the desktop rules in styles.css.
  • Check that the breakpoint starts with @media (max-width: 780px).
  • Confirm that the media query has one opening brace plus one matching closing brace.

Still stuck? Help me check why the responsive header rules are not applying.

The header now responds to limited space. The menu grid plus the visit grid still preserve their desktop columns, so the next rules target the overflow itself.

  • Return to the new @media (max-width: 780px) block in styles.css.
  • Place your cursor before its final closing brace.
  • Insert these remaining responsive rules:
  .hero-grid,
  .about-grid,
  .menu-grid,
  .visit-grid {
    grid-template-columns: 1fr;
  }

  .hero-grid {
    gap: 2rem;
    padding-block: 4rem;
  }

  .hero-card {
    transform: none;
  }

  .section {
    padding-block: 4rem;
  }

  .hours-list div {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.15rem;
  }

  .hours-list dd {
    text-align: left;
  }

How does this repair the overflow?

  • The four grid selectors switch to one flexible column, so their children can fit the available width.
  • The hero receives a smaller gap plus shorter vertical spacing for narrow screens.
  • The hero card loses its rotation, which keeps its corners inside the viewport.
  • Each opening-hours row stacks its label above its value, which gives longer text enough room to wrap.

Before you refresh, predict whether the menu cards will still force the page beyond the viewport.

  • Save styles.css.
  • Return to the narrow Microsoft Edge preview.
  • Refresh the page.
  • Scroll through the page from the hero to the visit section.

You should see one menu card per row. The visit cards should also form one column with no horizontal scrollbar.

That is the main repair complete. Your content now reflows within the available viewport instead of extending past it.

Still seeing a horizontal scrollbar?

  • Check that .menu-grid appears inside the grouped selector that sets grid-template-columns: 1fr.
  • Check that .visit-grid appears in the same grouped selector.
  • Confirm that the inserted rules remain inside the @media (max-width: 780px) braces.

Need another pair of eyes? Help me find the CSS rule that still causes horizontal overflow.

Fit buttons on very narrow screens

Phone-sized screens give side-by-side action buttons very little room. A smaller breakpoint makes each button use the full available width.

Some visitors also configure their device to reduce motion. The final media query respects that preference by removing smooth scrolling.

  • Append the final two media queries at the bottom of styles.css:
@media (max-width: 480px) {
  .hero-actions,
  .button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

What do the final queries do?

  • The 480px breakpoint gives the hero action container plus each button the full available width.
  • The reduced-motion query changes smooth scrolling to an immediate jump when the visitor has requested less motion.
  • Save styles.css.
  • Return to Microsoft Edge.
  • Refresh the page.
  • Narrow the browser below 480px.

You should see the two hero buttons fill the content width on separate rows. Text should remain visible inside every card without overlapping nearby content.

Buttons still sharing one row?

  • Confirm that both .hero-actions plus .button appear inside the 480px query.
  • Check that the width value is 100%.
  • Make sure the browser is narrower than the breakpoint.

Want help checking the breakpoint? Help me diagnose why the hero buttons are not full width.

Use the tabs below to compare your completed stylesheet with the final version.

✔️ Awesome, I've got everything!

Your stylesheet now contains the desktop design plus all three responsive media queries. Keep styles.css saved before moving to the keyboard test.

ⓧ I'd like to double check the full code

:root {
  color-scheme: dark;
  --ink: #17120f;
  --panel: #261c17;
  --panel-light: #33251e;
  --cream: #f7f0e4;
  --muted: #cdbda8;
  --amber: #f2b84b;
  --rust: #a9482f;
  --paper: #efe2cf;
  --line: rgba(247, 240, 228, 0.18);
  --shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.28);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: "Segoe UI", Arial, sans-serif;
  line-height: 1.6;
}

a {
  color: inherit;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--amber);
  color: var(--ink);
  font-weight: 800;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.wrap {
  width: min(70rem, calc(100% - 2rem));
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--line);
  background: rgba(23, 18, 15, 0.94);
}

.header-inner,
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.header-inner {
  min-height: 4.5rem;
}

.brand {
  color: var(--amber);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  font-weight: 700;
  text-decoration: none;
}

nav ul {
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

nav a,
.site-footer a {
  font-weight: 700;
  text-underline-offset: 0.35rem;
}

.hero {
  display: grid;
  min-height: 42rem;
  align-items: center;
  background:
    radial-gradient(circle at 85% 20%, rgba(242, 184, 75, 0.2), transparent 24rem),
    linear-gradient(135deg, #17120f 0%, #2b1c16 100%);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
  gap: 4rem;
  align-items: center;
  padding-block: 6rem;
}

.eyebrow,
.card-label {
  margin: 0 0 0.75rem;
  color: var(--amber);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.08;
}

h1 {
  max-width: 12ch;
  margin-bottom: 1.5rem;
  font-size: clamp(3.25rem, 8vw, 6.5rem);
  letter-spacing: -0.055em;
}

h2 {
  margin-bottom: 1.5rem;
  font-size: clamp(2.25rem, 5vw, 4rem);
  letter-spacing: -0.035em;
}

h3 {
  font-size: 1.5rem;
}

.hero-copy {
  max-width: 38rem;
  color: var(--muted);
  font-size: 1.15rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}

.button {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.15rem;
  border: 2px solid var(--amber);
  font-weight: 800;
  text-decoration: none;
}

.button-primary {
  background: var(--amber);
  color: var(--ink);
}

.button-secondary {
  color: var(--cream);
}

.button:hover {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--ink);
}

.hero-card {
  padding: 2rem;
  border: 1px solid var(--line);
  background: rgba(38, 28, 23, 0.88);
  box-shadow: var(--shadow);
  transform: rotate(1.5deg);
}

.hero-card h2 {
  font-size: 2rem;
}

.feature-list {
  margin: 1.5rem 0 0;
  padding-left: 1.2rem;
  color: var(--muted);
}

.section {
  padding-block: 6rem;
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(16rem, 1fr));
  gap: 4rem;
  align-items: start;
}

.body-copy {
  color: var(--muted);
  font-size: 1.08rem;
}

.menu-section {
  background: var(--panel);
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.section-heading > p {
  max-width: 22rem;
  color: var(--muted);
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(15rem, 1fr));
  gap: 1.5rem;
}

.menu-card {
  padding: 1.5rem;
  border-top: 0.3rem solid var(--rust);
  background: var(--panel-light);
}

.menu-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.8rem;
  border-bottom: 1px solid var(--line);
}

.menu-list li:last-child {
  border-bottom: 0;
}

.visit-section {
  background: var(--paper);
  color: var(--ink);
}

.visit-section .eyebrow {
  color: #71311f;
}

.visit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(18.75rem, 1fr));
  gap: 1.5rem;
}

.visit-card {
  padding: 2rem;
  background: #fffaf2;
  box-shadow: 0 1rem 2rem rgba(67, 42, 25, 0.12);
}

.hours-list {
  margin: 0;
}

.hours-list div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.65rem;
  border-bottom: 1px solid rgba(23, 18, 15, 0.15);
}

.hours-list dt {
  font-weight: 700;
}

.hours-list dd {
  margin: 0;
  text-align: right;
}

address {
  margin-bottom: 1.25rem;
  font-style: normal;
  font-size: 1.1rem;
}

.demo-note {
  color: #654c3f;
  font-size: 0.9rem;
}

.site-footer {
  padding-block: 2rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.site-footer p {
  margin-bottom: 0;
}

a:focus-visible {
  outline: 0.2rem solid var(--amber);
  outline-offset: 0.25rem;
}

@media (max-width: 780px) {
  .header-inner,
  .section-heading,
  .footer-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .header-inner {
    padding-block: 1rem;
  }

  nav ul {
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
  }

  .hero {
    min-height: auto;
  }

  .hero-grid,
  .about-grid,
  .menu-grid,
  .visit-grid {
    grid-template-columns: 1fr;
  }

  .hero-grid {
    gap: 2rem;
    padding-block: 4rem;
  }

  .hero-card {
    transform: none;
  }

  .section {
    padding-block: 4rem;
  }

  .hours-list div {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.15rem;
  }

  .hours-list dd {
    text-align: left;
  }
}

@media (max-width: 480px) {
  .hero-actions,
  .button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

What should match?

  • The desktop rules should finish with the gold a:focus-visible outline.
  • The 780px query should contain every single-column layout repair.
  • The stylesheet should end with the 480px query plus the reduced-motion query.
Test the keyboard focus order

Visible focus shows keyboard users which link is ready to activate. Your existing skip-link behavior plus the gold a:focus-visible outline should make every stop clear.

Before you press Tab, predict which link will receive focus first.

  • Return to the Microsoft Edge preview from earlier.
  • Keep the browser narrower than 780px.
  • Click the address bar.
  • Put the mouse aside.
  • Press Tab once.

You should see the Skip to main content link move into view with a gold focus outline.

  • Continue pressing Tab through every link.
  • Press Shift+Tab to move backward through the links.

Focus should move through the brand, navigation, hero actions, plus the footer link in page order. Every focused link should have a visible gold outline.

The completed page should remain one column throughout the test. You should see no horizontal scrollbar at the narrow width.

Focus outline missing?

  • Start from the address bar before pressing Tab so focus enters the page from its first link.
  • Confirm that a:focus-visible remains above the media queries in styles.css.
  • Check that the outline uses var(--amber).

Need help tracing the focus state? Help me diagnose why keyboard focus is not visible on every link.

Your local site now reflows without horizontal overflow. Next up, you will publish the finished Copper Tap page through GitHub Pages.

Publish with GitHub Pages

The responsive Copper Tap page now works locally in Microsoft Edge. A local file still cannot be shared with customers or employers.

GitHub gives the site a public home. GitHub Pages publishes the same static files without adding a build system.

In this step, get ready to:
  • Create a public GitHub repository with a README.
  • Upload the completed website files to the repository root.
  • Deploy the site through GitHub Pages and verify the public version.
Create the public repository

A repository stores the files for one project. Adding a README creates the repository's default branch before you upload the website.

Your Site Will Be Public

Your repository becomes public in this step. Your published website also becomes public.

That visibility is intentional for this GitHub Free workflow. The account plan costs $0 per month for this public-repository path.

  • Open a new tab in Microsoft Edge.
  • Go to the GitHub website.
  • Sign in to your GitHub account.
  • Open the user menu in the upper-right corner of the GitHub page.
  • Select New repository.

The README gives the repository a starting file. It also establishes the branch that GitHub Pages publishes from.

  • Enter copper-tap in the Repository name field.
  • Select Public for the repository visibility.
  • Select Add a README file.
  • Select Create repository.

You should see the new copper-tap repository with README.md in its file list. The repository now has a default branch ready for your website.

The repository now needs the exact files that already power your local site. Uploading them through the browser keeps this deployment free from command-line dependencies.

  • Select Add file above the repository file list.
  • Select Upload files.
  • Select choose your files.
  • Browse to Documents\copper-tap in the file picker.
  • Select index.html plus styles.css.
  • Select Open in the file picker.

You should see index.html plus styles.css listed on the upload page. This confirms that both completed files are queued for the same repository location.

  • Keep Commit directly to the main branch selected.
  • Select Commit changes.

Your repository file list should now show README.md, index.html, plus styles.css. That is the complete file set GitHub Pages needs for this static site.

Files Missing From the Repository?

  • Confirm that index.html plus styles.css appear beside README.md.
  • Repeat the browser upload for any missing file from Documents\copper-tap.
  • Remove any nested folder from the upload so both website files sit in the repository root.

Still stuck? Help me check why my Copper Tap files are missing or nested in my GitHub repository.

Configure GitHub Pages

GitHub Pages can publish index.html plus its linked stylesheet directly from a branch. Your project has no build process to configure.

Why Branch Publishing?

Branch publishing fits a static site because each change to the selected branch can update the public website. GitHub recommends this approach when custom build control is unnecessary.

A custom GitHub Actions workflow would add build logic that this two-file project does not need. The branch remains the shortest path from your files to the public page.

Selecting Save starts the deployment. Publishing can take up to 10 minutes, so a short wait here is normal.

  • Select the repository's Settings tab.
  • Select Pages from the repository settings menu.
  • Find the Build and deployment section.
  • Set Source to Deploy from a branch.
  • Select the repository's default branch.
  • Select / as the source folder.
  • Select Save.

GitHub now has a publishing source for the website. New changes to that branch plus root folder can trigger another Pages deployment.

Verify the live website

Before you open the public site, do you expect it to match the completed local page at both desktop width and narrow width?

  • Wait for the GitHub Pages deployment to finish.
  • Refresh the Pages settings screen.
  • Select Visit site when the live-site control appears.

You should see the Copper Tap hero with the menu plus visit information below it. The cream text plus gold accents should match your local version.

  • Record the public URL from the Microsoft Edge address bar here: https://username.github.io/copper-tap/.
  • Maximize the Microsoft Edge window.

At desktop width, you should see the full hero beside the tasting card. You should also see three menu cards plus two visit cards.

  • Narrow the Microsoft Edge window below 780 pixels.

The page should switch to one-column layouts without a horizontal scrollbar. The live site now matches the responsive behavior of your local file.

Live Site Not Ready?

  • Allow the full 10-minute publishing window before checking again.
  • Return to Settings to confirm the selected source is your default branch.
  • Return to Pages to confirm the source folder is /.
  • Confirm that index.html sits in the repository root beside styles.css.

Need another pair of eyes? Help me troubleshoot why my GitHub Pages site is not showing the Copper Tap website.

You made it public. The Copper Tap now has a shareable URL with the same desktop layout plus responsive behavior you tested locally.

Secret mission

Run an Accessibility Stress Test

Put the live Copper Tap website through keyboard-only navigation, 200% zoom, and a narrow viewport. Diagnose any failure, publish the smallest CSS repair, and repeat the test until every check passes.

Clean Up Your Resources

Clean Up Your Resources

This public-repository workflow costs $0 USD per month with GitHub Free. Decide whether to keep your verified site online, unpublish the deployment for later, or delete the project entirely.

Resources you used:

  • A public GitHub Pages deployment containing the verified Copper Tap website.
  • A public GitHub repository named copper-tap containing the final site files.
  • A local Documents\copper-tap folder containing index.html and styles.css.

Keep everything running

No action needed. Choose this if you want the verified Copper Tap website to remain available from its public link.

  • Your GitHub Pages deployment remains online.
  • Your public copper-tap repository remains available.
  • Your Documents\copper-tap folder remains on your computer.

Pause - I'll come back to this later

Unpublish the GitHub Pages deployment so the public site goes offline. Your repository content and local files remain ready for later.

  • Return to the copper-tap repository on GitHub.
  • Select Settings.
  • Select Pages.
  • Open the menu beside the Your site is live at message.
  • Select Unpublish site.

Your public page is now offline. The copper-tap repository and Documents\copper-tap folder remain intact.

Delete - I don't want to use this again

Deleting the repository is permanent, so this option removes the public project only when you are ready to let it go. Your local folder stays available until you remove it in the final actions.

  • Return to the copper-tap repository on GitHub.
  • Select Settings.
  • Select Pages.
  • Open the menu beside the Your site is live at message.
  • Select Unpublish site.

The GitHub Pages deployment is now removed. Next, remove the repository that stored the published files.

  • Return to the repository's Settings page.
  • Scroll to Danger Zone.
  • Select Delete this repository.
  • Read the repository deletion warnings.
  • Enter copper-tap as the repository name.
  • Select Delete this repository to confirm the deletion.

The public repository is now deleted. Finish the cleanup by removing the local copy from your computer.

  • Press the Windows key to open search.
  • Type File Explorer and press Enter.
  • Select Documents in the File Explorer sidebar.
  • Select the copper-tap folder.
  • Press Delete.

You should no longer see the copper-tap folder inside Documents. Your local and online project resources are now cleaned up.

Nice Work!

Nice Work!

You did it! The Copper Tap is live through GitHub Pages with its responsive experience verified under accessibility stress tests.

You've learned how to:

  • Built a complete one-page venue experience with Semantic HTML. Visitors can use clear internal navigation to reach the venue story. The menu, opening hours, and location stay on the same page.
  • Reproduced the narrow-screen overflow. Repaired the layout with CSS Grid plus responsive breakpoints. Added a visible keyboard focus treatment. Added reduced-motion behavior.
  • Published the finished static site from a public GitHub repository through GitHub Pages. Verified the public design at desktop width. Verified it again at narrow width.
  • Completed the optional Secret Mission by stress-testing the live site in Microsoft Edge. Confirmed keyboard-only navigation, 200% zoom, and narrow-width reflow. Finished with a documented pass for every check.

Ready to quiz yourself?