Wine Shop Website Using HTML CSS JavaScript

Wine Shop Website Using HTML CSS JavaScript

Introduction:

Hello Friends, Welcome to our new blog. In this guide, you’ll learn how to build a Wine Shop Website Using HTML CSS JavaScript. This website will have 5 full-screen sections that scroll smoothly. It will also include arrows to navigate between sections, a progress counter, and a modern look. This project is great for beginners who want to improve their front-end skills.

Prerequisites:

Before starting this tutorial, make sure you’re familiar with the basics of:

  • HTML (tags, divs, and semantic layout)
  • CSS (selectors, flexbox, media queries, transitions)
  • JavaScript (DOM manipulation, events)

You’ll also need:

  • A code editor like VS Code
  • Basic folder setup with images (logo, arrows, section backgrounds)

Step 1: Understanding the HTML Structure:

In this project, all content is built within a single HTML file. The structure consists of five main full-screen sections.
Let’s break down what each part of the HTML does:

<!DOCTYPE html> and <html> Tags

The HTML document starts with the <DOCTYPE html> declaration (for HTML5) and the root tag which defines language and structure.

<head> section:

  • Meta tags for responsiveness
  • A Google Fonts link (Cormorant Garamond is used for a classic look)
  • The external stylesheet (style.css)
  • Favicon and page title setup

<body> section:

Navigation Bar:

A fixed navbar contains the wine brand’s logo and five navigation links: Home, Vineyards, Grapes, Wine, Contact. These are not just static links — they are styled with hover effects and made responsive using media queries and JavaScript toggle actions for mobile view.

Navigation Arrows:

On the left and right side of the screen, there are arrow buttons. Clicking these buttons moves between the different full-screen sections.

Progress Tracker:

At the bottom-left corner of the screen, a counter (like 1/5, 2/5, etc.) updates as the user scrolls. Small circular indicators also update their color to show the current section.

Content Sections:

  • Section 1: Hero banner with a headline
  • Section 2: Sales promotion with a wine bag and bottle
  • Section 3: Brand quality highlight with images of grapes
  • Section 4: New product releases
  • Section 5: Footer with contact details

All sections are wrapped inside a div.wrapper, which ensures they are stacked in the same viewable area.

Step 2: Styling the Website with CSS:

The CSS plays a huge role in creating the elegant, premium look for this wine website. The stylesheet (style.css) controls layout, colors, font sizes, background images, responsiveness, and interactive transitions.

Typography & Reset:

The first part of the CSS resets default margins and paddings using the universal selector. A serif font (Cormorant Garamond) is applied across the site for a sophisticated, winery-inspired feel.

Section Layout:

Each section is styled to take up the entire width and height of the viewport:

  • Sections are position: absolute, allowing them to overlap each other.
  • The .wrapper container controls the layout.
  • Backgrounds include high-resolution images overlaid with linear gradients for readability.

Navigation & Interactions:

The nav bar uses flexbox for layout and includes hover animations where a red overlay slides across each nav item.

  • Fixed positioning
  • CSS transitions
  • Rotated images to indicate direction

Step 3: Making It Interactive with JavaScript:

JavaScript is used to control how the user interacts with the website — both through scroll gestures and button clicks. Let’s break down its core functionality:

Scroll Navigation

The website listens to mouse scroll events using addEventListener(“wheel”). It detects whether the user scrolled up or down, and then shifts the next or previous section into view using:

  • section.style.left = “-100vw” or 0
  • Scaling animations via transform: scale(1.5) and scale(1)

This gives the feeling that each section slides in horizontally, one after the other.

Section Counter & Progress Dots

A counter is dynamically updated to show the current section out of five. Small circular indicators (like page dots) change color based on which section is active.

  • Modifying the inner text of a heading tag (1/5, 2/5, etc.)
  • Looping through circle elements and updating their background color

Left & Right Navigation Buttons

Clicking the left or right buttons performs the same transition logic as scrolling — advancing or going back one section. JavaScript ensures that if you go past the last section, it loops back to the beginning. Similarly, going before the first section wraps around to the end. This improves user flow and creates an infinite scroll effect.

Hover Interaction on Grapes

  • The entire background dims to focus attention on the grapes.
  • When the cursor leaves, the background returns to normal.

Mobile Navigation Toggle

On small screens, the hamburger icon toggles the visibility of the nav menu. This is done using a class toggle on the nav wrapper.

Index.html:

<div class="container">
      <div class="navbar">
        <a href="#" class="logo-link">
          <img src="images/logo.png" alt="Logo" class="logo" />
        </a>

        <a href="#" class="menu">
          <div class="menu-line menu-line-1"></div>
          <div class="menu-line menu-line-2"></div>
          <div class="menu-line menu-line-3"></div>
        </a>

        <nav class="nav-list">
          <a href="#" class="nav-link">Home</a>
          <a href="#" class="nav-link">Vineyards</a>
          <a href="#" class="nav-link">Grapes</a>
          <a href="#" class="nav-link">Wine</a>
          <a href="#" class="nav-link">Contact</a>
        </nav>
      </div>

      <button class="page-btn left-btn">
        <img src="images/arrow.png" />
      </button>
      <button class="page-btn right-btn">
        <img src="images/arrow.png" />
      </button>

      <div class="progress-wrapper">
        <div class="progress">
          <h2>1/5</h2>
        </div>
        <div class="circle-wrapper">
          <div class="circle circle-1"></div>
          <div class="circle circle-2"></div>
          <div class="circle circle-3"></div>
          <div class="circle circle-4"></div>
          <div class="circle circle-5"></div>
        </div>
      </div>

      <div class="wrapper">
        <section class="section-1">
          <div class="section-wrapper section-1-wrapper">
            <div class="section-1-heading-wrapper">
              <h1 class="section-1-heading">The best wines around the world</h1>
            </div>
          </div>
        </section>
        <section class="section-2">
          <div class="section-wrapper section-2-wrapper">
            <div class="sale">
              <img src="images/bag.png" alt="Sale Bag" class="sale-bag" />
              <button class="sale-btn">order now!</button>
            </div>
            <img
              src="images/wine-bottle.png"
              alt="Wine Bottle"
              class="wine-bottle"
            />
          </div>
        </section>
        <section class="section-3">
          <div class="section-wrapper section-3-wrapper">
            <h1 class="section-3-heading">the best quality</h1>
            <img src="images/frame.png" alt="Grapes Frame" class="frame-img" />
            <img src="images/grapes.png" alt="Grapes" class="grapes-img" />
          </div>
        </section>
        <section class="section-4">
          <div class="section-wrapper section-4-wrapper">
            <div class="section-4-bg"></div>
            <h1 class="section-4-heading">Newly Released Wines</h1>
            <img
              src="images/section-4-bg.jpg"
              alt="New Wines"
              class="new-wines-img"
            />
          </div>
        </section>
        <section class="section-5">
          <div class="section-wrapper section-5-wrapper">
            <ul class="footer-list">
              <li>Contact</li>
              <li>NY</li>
              <li>1039 Stanley Avenue</li>
              <li>Open Daily</li>
              <li>By appointment only</li>
            </ul>
            <img src="images/footer-img.png" class="footer-img" />
            <ul class="footer-list">
              <li>Connect</li>
              <li>PN: 516-448-2763</li>
              <li>MN: 631-742-8400</li>
              <li>example@winehouse.com</li>
              <li>Join our mailing list</li>
            </ul>
            <p class="copyright">
              Copyright &copy; CodeAndCreate. All Rights Reserved
            </p>
          </div>
        </section>
      </div>
    </div>

Style.css:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  text-decoration: none;
  list-style-type: none;
  font-family: "Cormorant Garamond", serif;
}

html {
  font-size: 62.5%;
}

.navbar {
  position: fixed;
  z-index: 100;
  width: 100%;
  top: 1rem;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.menu {
  display: none;
}

.logo {
  height: 6rem;
}

.nav-list {
  display: flex;
  justify-content: center;
}

.nav-link {
  font-size: 1.5rem;
  color: #fff;
  width: 15rem;
  margin: 0 3rem;
  text-transform: uppercase;
  border: 0.1rem solid #fff;
  text-align: center;
  padding: 0.2rem 0;
  letter-spacing: 0.1rem;
  position: relative;
  overflow: hidden;
}

.nav-link::before {
  content: "";
  position: absolute;
  width: 150%;
  height: 5rem;
  background-color: #d50000;
  left: -20%;
  transform: rotate(-40deg) translateX(-4rem);
  transform-origin: left bottom;
  opacity: 0.8;
  transition: left 0.3s;
}

.nav-link:hover::before {
  left: 110%;
}

.page-btn {
  position: fixed;
  z-index: 100;
  top: 50%;
  transform: translateY(-50%);
  background-color: transparent;
  border: none;
}

.left-btn {
  left: 4rem;
}

.left-btn img {
  transform: rotate(-90deg);
}

.right-btn {
  right: 4rem;
}

.right-btn img {
  transform: rotate(90deg);
}

.page-btn img {
  width: 4rem;
  opacity: 0.4;
  cursor: pointer;
  transition: opacity 0.2s;
}

.page-btn img:hover {
  opacity: 1;
}

.progress-wrapper {
  position: fixed;
  z-index: 100;
  bottom: 2rem;
  left: 3rem;
}

.progress {
  margin: 1rem 0;
  text-align: center;
}

.progress h2 {
  font-size: 2.5rem;
  font-weight: 300;
  color: #fff;
}

.circle-wrapper {
  display: flex;
}

.circle {
  width: 1rem;
  height: 1rem;
  border: 0.1rem solid #fff;
  border-radius: 50%;
  margin: 0 0.3rem;
  transition: background-color 0.3s;
}

.circle-1 {
  background-color: #ddd;
}

.wrapper {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

section {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  overflow: hidden;
  transition: left 1.5s;
}

.section-1 {
  z-index: 50;
}

.section-wrapper {
  width: inherit;
  height: inherit;
  transform: scale(1.5);
  transition: all 2s;
}

.section-1-wrapper {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.4)),
    url(images/section-1-bg.jpg) center no-repeat;
  background-size: cover;
}

.section-1-heading-wrapper {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.section-1-heading {
  font-size: 10rem;
  font-weight: 300;
  color: #fff;
  text-transform: capitalize;
  letter-spacing: 0.1rem;
  border-bottom: 0.2rem solid #d50000;
  text-align: right;
  user-select: none;
}

.section-2 {
  z-index: 40;
}

.section-2-wrapper {
  background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9)),
    url(images/section-2-bg.jpg) center no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.sale {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.sale-bag {
  opacity: 0.9;
  width: 45rem;
}

.sale-btn {
  width: 20rem;
  height: 5rem;
  font-size: 2rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  background-color: transparent;
  color: #fff;
  margin-top: 4rem;
  border: 0.1rem solid #fff;
  transition: background-color 0.2s;
}

.sale-btn:hover {
  background-color: #d50000;
}

.wine-bottle {
  opacity: 0.6;
  width: 80rem;
}

.section-3 {
  z-index: 30;
  background-color: #000;
}

.section-3-wrapper {
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.9)),
    url(images/section-3-bg.jpg) center no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-3-heading {
  font-size: 20rem;
  color: #ccc;
  text-transform: uppercase;
  transform: rotate(-20deg);
  text-align: center;
  text-shadow: 0 0.5rem 1.5rem #000;
  user-select: none;
}

.frame-img {
  width: 100rem;
  position: absolute;
  opacity: 0.5;
}

.grapes-img {
  width: 40rem;
  position: absolute;
  opacity: 0.7;
  transition: all 1.5s;
}

.grapes-img:hover {
  opacity: 1;
  transform: scale(2);
}

.section-4 {
  z-index: 20;
}

.section-4-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.section-4-bg {
  width: 110%;
  height: 110%;
  position: absolute;
  background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.7)),
    url(images/section-4-bg.jpg) center no-repeat;
  background-size: cover;
  z-index: -1;
  filter: blur(0.5rem);
}

.section-4-heading {
  font-size: 10rem;
  font-weight: 300;
  text-align: center;
  margin-bottom: 7rem;
  color: #d50000;
  user-select: none;
}

.new-wines-img {
  width: 70rem;
  border: 0.1rem solid #fff;
  padding: 1rem;
  opacity: 0.7;
}

.section-5 {
  z-index: 10;
}

.section-5-wrapper {
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)),
    url(images/section-5-bg.jpg) center no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-list li {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.1rem;
  color: #ddd;
  margin: 1rem 0;
}

.footer-list li:first-child {
  text-transform: uppercase;
  color: #fff;
}

.footer-img {
  width: 60rem;
  margin: 0 20rem;
  opacity: 0.9;
}

.copyright {
  position: absolute;
  bottom: 2rem;
  font-size: 2rem;
  font-weight: 600;
  text-align: center;
  color: #eee;
  letter-spacing: 0.2rem;
}

@media (max-width: 1600px) {
  .sale-bag {
    width: 35rem;
  }

  .wine-bottle {
    width: 65rem;
  }

  .footer-img {
    width: 45rem;
    margin: 0 12rem;
  }
}

@media (max-width: 1300px) {
  .sale-bag {
    width: 30rem;
  }

  .wine-bottle {
    width: 60rem;
  }

  .footer-img {
    width: 35rem;
    margin: 0 10rem;
  }
}

@media (max-width: 1200px) {
  .nav-link {
    margin: 0 1.5rem;
  }

  .section-1-heading-wrapper {
    width: 80%;
  }

  .section-1-heading {
    font-size: 8rem;
  }

  .sale-bag {
    width: 25rem;
  }

  .sale-btn {
    width: 15rem;
    height: 4rem;
    font-size: 1.7rem;
  }

  .wine-bottle {
    width: 50rem;
  }

  .footer-img {
    width: 25rem;
    margin: 0 7rem;
  }
}

@media (max-width: 1000px) {
  .navbar {
    justify-content: start;
    padding-left: 2rem;
  }

  .menu {
    display: block;
    width: 4rem;
    height: 2.5rem;
    position: absolute;
    top: 1rem;
    right: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .menu-line {
    width: 100%;
    height: 0.3rem;
    background-color: #d50000;
    transition: transform 0.5s;
  }

  .change .menu-line-1 {
    transform: rotate(40deg) translate(0.5rem, 1rem);
  }

  .change .menu-line-2 {
    transform: translate(-0.2rem, 2rem);
  }

  .change .menu-line-3 {
    transform: rotate(-40deg) translate(0.5rem, -1rem);
  }

  .nav-list {
    position: absolute;
    top: 5rem;
    right: -21rem;
    flex-direction: column;
    height: calc(100vh - 5rem);
    background-color: #333;
    justify-content: start;
    padding: 2rem;
    border-radius: 0.5rem 0 0 0;
    transition: right 0.5s;
  }

  .change .nav-list {
    right: 0;
  }

  .nav-link {
    margin: 1rem;
  }

  .section-2-wrapper {
    flex-direction: column;
  }

  .sale {
    order: 1;
  }

  .section-3-heading {
    font-size: 12rem;
  }

  .frame-img {
    width: 70rem;
  }

  .grapes-img {
    width: 25rem;
  }

  .section-4-heading {
    font-size: 8rem;
  }

  .new-wines-img {
    width: 60rem;
  }

  .section-5-wrapper {
    flex-direction: column;
  }

  .footer-img {
    width: 20rem;
    order: 1;
  }

  .footer-list {
    width: 20rem;
    margin: 2rem auto;
  }
}

@media (max-width: 800px) {
  .left-btn {
    left: 2rem;
  }

  .right-btn {
    right: 2rem;
  }

  .section-1-heading {
    font-size: 6rem;
  }

  .sale-bag {
    width: 20rem;
  }

  .wine-bottle {
    width: 40rem;
  }

  .section-3-heading {
    font-size: 11rem;
    opacity: 0.7;
  }

  .frame-img {
    width: 60rem;
  }

  .new-wines-img {
    width: 45rem;
  }

  .progress-wrapper {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (max-width: 600px) {
  .section-1-heading {
    font-size: 4rem;
  }

  .sale-bag {
    width: 15rem;
  }

  .wine-bottle {
    width: 30rem;
  }

  .sale-btn {
    width: 12rem;
    height: 3rem;
    font-size: 1.4rem;
  }

  .section-3-heading {
    font-size: 10rem;
  }

  .frame-img {
    width: 35rem;
  }

  .section-4-heading {
    font-size: 6rem;
  }

  .new-wines-img {
    width: 35rem;
  }
}

@media (max-width: 500px) {
  html {
    font-size: 45%;
  }

  .left-btn {
    left: 0.5rem;
  }

  .right-btn {
    right: 0.5rem;
  }

  .nav-list {
    top: 6.5rem;
  }

  .section-3-heading {
    font-size: 8rem;
  }

  .grapes-img {
    width: 15rem;
  }

  .grapes-img:hover {
    width: 25rem;
  }
}

Script.js:

let counter1 = 0;
let counter2 = 1;
let bool = true;

const sections = document.querySelectorAll("section");
const progress = document.querySelector(".progress h2");
const circles = document.querySelectorAll(".circle");
const menu = document.querySelector(".menu");
const section1wrapper = document.querySelector(".section-1-wrapper");
const section5wrapper = document.querySelector(".section-5-wrapper");

section1wrapper.style.transform = "scale(1)";

const progressCounter = () => {
  progress.textContent = `${counter2}/${sections.length}`;

  Array.from(circles).forEach((circle) => {
    circle.style.backgroundColor = "transparent";
  });
  document.querySelector(`.circle-${counter2}`).style.backgroundColor = "#ddd";
};

const pageController = () => {
  bool = true;
  if (counter1 === 5) {
    Array.from(sections).forEach((section) => {
      section.style.left = "0";
    });
    counter1 = 0;
    counter2 = 1;
    section1wrapper.style.transform = "scale(1)";
    section5wrapper.style.transform = "scale(1.5)";
    progressCounter();
    bool = false;
  }

  if (counter1 === -1) {
    Array.from(sections).forEach((section) => {
      if (section.classList[0] === "section-5") {
        return;
      }
      section.style.left = "-100vw";
    });
    counter1 = 4;
    counter2 = 5;
    section1wrapper.style.transform = "scale(1.5)";
    section5wrapper.style.transform = "scale(1)";
    progressCounter();
    bool = false;
  }
  progressCounter();
  return bool;
};

window.addEventListener("wheel", (e) => {
  const deltaY = e.deltaY > 0;

  if (deltaY) {
    counter1++;
    counter2++;
  } else {
    counter1--;
    counter2--;
  }

  pageController();
  progressCounter();
  console.log(counter1, counter2);

  if (bool) {
    document.querySelector(
      `.section-${deltaY ? counter1 : counter2}`
    ).style.left = `${deltaY ? "-100vw" : "0"}`;

    document.querySelector(
      `.section-${deltaY ? counter1 : counter2}-wrapper`
    ).style.transform = `scale(${deltaY ? "1.5" : "1"})`;

    document.querySelector(
      `.section-${deltaY ? counter1 + 1 : counter2 + 1}-wrapper`
    ).style.transform = `scale(${deltaY ? "1" : "1.5"})`;
  }
});

document.querySelector(".left-btn").addEventListener("click", () => {
  counter1--;
  counter2--;
  pageController() &&
    (document.querySelector(`.section-${counter2}`).style.left = "0");

  if (bool) {
    document.querySelector(`.section-${counter2}-wrapper`).style.transform =
      "scale(1)";
    document.querySelector(`.section-${counter2 + 1}-wrapper`).style.transform =
      "scale(1.5)";
  }
});

document.querySelector(".right-btn").addEventListener("click", () => {
  counter1++;
  counter2++;
  pageController() &&
    (document.querySelector(`.section-${counter1}`).style.left = "-100vw");

  if (bool) {
    document.querySelector(`.section-${counter2}-wrapper`).style.transform =
      "scale(1)";
    document.querySelector(`.section-${counter1}-wrapper`).style.transform =
      "scale(1.5)";
  }
});

document.querySelector(".grapes-img").addEventListener("mouseover", () => {
  document.querySelector(".section-3-wrapper").style.opacity = ".5";
});

document.querySelector(".grapes-img").addEventListener("mouseout", () => {
  document.querySelector(".section-3-wrapper").style.opacity = "1";
});

menu.addEventListener("click", () => {
  document.querySelector(".navbar").classList.toggle("change");
});