TheLazy.Dev
Portfolio GitHub

Blog

html |css |javascript |foodiehamberger

Build a Foodie Hamburger Website

abhishekgurjar

Abhishek Gurjar

Posted on August 30, 2024

Build a Foodie Hamburger Website

Introduction

Hello, developers! I’m excited to share my latest project: a Foodie Hamburger Website. This project is perfect for those looking to build a visually engaging and functional website showcasing various burger options. It’s a great way to enhance your frontend development skills using HTML, CSS, and JavaScript while creating a delightful web experience for users.

Project Overview

The Foodie Hamburger Website is a web application designed to showcase different burger menus and special offers. With a clean and modern design, it allows users to easily navigate through various sections, such as Top Picks, Whopper, Stunner Menu, New Foodie Collection, and Deal of the Day. This project demonstrates how to create an interactive and aesthetically pleasing website.

Features

  • Interactive Navigation: A hamburger menu that collapses and expands on smaller screens for better usability.
  • Responsive Design: Ensures the website looks great on both desktop and mobile devices.
  • Clean Layout: Provides a visually appealing way to display different burger options and special deals.

Technologies Used

  • HTML: Provides the structure for the Foodie Hamburger Website.
  • CSS: Styles the website to create a modern and responsive design.
  • JavaScript: Manages the interactive elements, including the hamburger menu functionality.

Project Structure

Here’s an overview of the project structure:

Foodie-Hamburger/
├── index.html
├── style.css
└── script.js
Enter fullscreen mode Exit fullscreen mode
  • index.html: Contains the HTML structure for the Foodie Hamburger Website.
  • style.css: Includes CSS styles to create an engaging and responsive design.
  • script.js: Manages the interactive elements of the website, such as the hamburger menu.

Installation

To get started with the project, follow these steps:

  1. Clone the repository:

    git clone https://github.com/abhishekgurjar-in/Foodie-Hamburger.git

  2. Open the project directory:

    cd Foodie-Hamburger

  3. Run the project:

    • Open the index.html file in a web browser to view the Foodie Hamburger Website.

Usage

  1. Open the website in a web browser.
  2. Navigate through the sections using the top menu or the hamburger menu on smaller screens.
  3. Explore different burger options and special deals.
  4. Click the hamburger menu icon to open or close the navigation on smaller screens.

Code Explanation

HTML

The index.html file defines the structure of the Foodie Hamburger Website, including navigation, sections for different burger options, and the footer. Here’s a snippet:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Foodie Hamburger</title>
  <link href="https://fonts.googleapis.com/css?family=Poppins:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <script src="./script.js" defer></script>
</head>
<body>
  <div class="main-content">
    <header>
      <div class="header-content">
        <div class="logo">
          <img src="./images/logo.svg" alt="logo">
        </div>
        <div class="hamburger-menu-container">
          <div class="hamburger-menu">
            <span class="hamburger-icon">&#9776;</span>
          </div>
        </div>
        <nav>
          <span class="close-icon">&times;</span>
          <a href="#top-picks">Top Picks</a>
          <a href="#whooper">Whopper</a>
          <a href="#stunner-menu">Stunner Menu</a>
          <a href="#new-foodie-collection">New Foodie Collection</a>
          <a href="#deal-of-the-day">Deal of the Day</a>
        </nav>
      </div>
    </header>
    <main>
      <section class="hero-section">
        <div class="img-container">
          <img src="./images/hero-image.png" alt="hero-image">
        </div>
        <p>Well, You can’t resist anymore!</p>
      </section>
      <section id="top-picks" class="section">
        <h2>Top Picks</h2>
        <div class="img-container">
          <img src="./images/burger-1.png" alt="burger-1">
        </div>
      </section>
      <section id="whooper" class="section">
        <h2>Whopper</h2>
        <div class="img-container">
          <img src="./images/burger-2.png" alt="burger-2">
        </div>
      </section>
      <section id="stunner-menu" class="section">
        <h2>Stunner Menu</h2>
        <div class="img-container">
          <img src="./images/burger-3.png" alt="burger-3">
        </div>
      </section>
      <section id="new-foodie-collection" class="section">
        <h2>New Foodie Collection</h2>
        <div class="img-container">
          <img src="./images/burger-4.png" alt="burger-4">
        </div>
      </section>
      <section id="deal-of-the-day" class="section">
        <h2>Deal of the Day</h2>
        <div class="img-container">
          <img src="./images/burger-5.png" alt="burger-5">
        </div>
      </section>
      <footer>
        <h3 class="go-to-top"><a href="#">Go to Top</a></h3>
        <p class="footer-text">Made with ❤️ by Abhishek Gurjar</p>
      </footer>
    </main>
  </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

CSS

The style.css file styles the Foodie Hamburger Website, ensuring it’s visually appealing and responsive. Below are some key styles:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: #f6f0eb;
  font-family: 'Poppins', sans-serif;
}

.main-content {
  overflow-x: hidden;
  height: 100vh;
  scroll-behavior: smooth;
}

a {
  text-decoration-line: none;
  color: inherit;
}

header {
  background-color: #fff;
  padding: 24px;
}

.header-content {
  max-width: 1290px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
}

nav {
  display: flex;
  /* gap: 60px; */
}

nav a {
  font-weight: 700;
  font-size: 20px;
  color: #492118;
}

nav a + a {
  margin-left: 60px;
}

.logo {
  width: 50px;
}

img {
  width: 100%;
}

main {
  padding: 0 24px;
}

.hero-section {
  margin-top: 100px;
}

.img-container {
  max-width: 1290px;
  margin: 0 auto;
}

.hero-section p {
  color: #492118;
  text-align: center;
  font-size: 24px;
}

.section {
  margin-top: 120px;
}

.section .img-container {
  max-width: 960px;
}

.section h2 {
  font-weight: 700;
  font-size: 48px;
  color: #492118;
  text-align: center;
}

.go-to-top {
  text-align: right;
  max-width: 960px;
  margin: 0 auto;
  font-size: 32px;
  margin-top: 80px;
}

.go-to-top a {
  text-decoration-line: underline;
}

.footer-text {
  text-align: center;
  color: #858585;
  font-size: 24px;
  margin-top: 64px;
}

.close-icon {
  position: absolute;
  top: 8px;
  right: 12px;
  cursor: pointer;
  display: none;
}

.hamburger-menu-container {
  overflow: hidden;
  position: relative;
  width: 40px;
  height: 40px;
  display: none;
}

.hamburger-menu {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  top: -64px;
  right: -58px;
  background-color: white;
  cursor: pointer;
}

.hamburger-icon {
  font-size: 16px;
  position: absolute;
  bottom: 10px;
  left: 20px;
}

@media (max-width: 1200px) {
  nav a {
    font-size: 16px;
  }

  nav a + a {
    margin-left: 48px;
  }

  header {
    padding: 16px 24px;
  }
}

@media (max-width: 960px) {
  nav a {
    font-size: 12px;
  }

  nav a + a {
    margin-left: 32px;
  }

  .hero-section {
    margin-top: 32px;
  }

  .section {
    margin-top: 42px;
  }

  .hero-section p {
    font-size: 10px;
  }

  .section h2 {
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  header {
    background-color: #f6f0ebb7;
    backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    padding: 8px 24px;
  }

  .header-content {
    min-height: 40px;
  }

  nav {
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    flex-direction: column;
    padding: 24px;
    right: -200px;
    top: 16px;
    transition: right 0.25s ease-in-out;
    /* display: none; */
  }

  nav a + a {
    margin: 0;
    margin-top: 16px;
  }

  .close-icon,
  .hamburger-menu-container {
    display: block;
  }

  .menu-open nav {
    /* display: flex; */
    right: 24px;
  }

  .menu-open .hamburger-menu-container {
    display: none;
  }

  .go-to-top {
    font-size: 12px;
    margin-top: 40px;
  }

  .footer-text {
    font-size: 10px;
    margin-top: 32px;
  }

  .logo {
    width: 30px;
  }
}
Enter fullscreen mode Exit fullscreen mode

JavaScript

The script.js file contains the logic for menu bar popup based on user input tab switching . Here’s a snippet:

const hamburgerIcon = document.querySelector('.hamburger-menu-container');
const headerContent = document.querySelector('.header-content');
const closeIcon = document.querySelector('.close-icon');
const nav = document.querySelector('nav');

hamburgerIcon.addEventListener('click', (e) => {
  e.stopPropagation();
  headerContent.classList.add('menu-open');
});

nav.addEventListener('click', (e) => {
  e.stopPropagation();
});

closeIcon.addEventListener('click', () => {
  headerContent.classList.remove('menu-open');
});

window.addEventListener('click', () => {
  headerContent.classList.remove('menu-open');
});
Enter fullscreen mode Exit fullscreen mode

Live Demo

You can check out the live demo of the Foodie Hamburger Website project here.

Conclusion

Building the Foodie Hamburger Website was a fantastic opportunity to create a visually engaging and interactive web experience. This project showcases various burger options and special deals, providing a delightful browsing experience for users. By applying HTML, CSS, and JavaScript, we created a responsive and user-friendly website that highlights essential frontend development skills. I hope this project inspires you to explore creative ways to build engaging web experiences. Happy coding!

Credits

This project was developed as part of my continuous learning journey in web development.

Author

💖 💪 🙅 🚩
abhishekgurjar
Abhishek Gurjar

Posted on August 30, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Build a Foodie Hamburger Website
html Build a Foodie Hamburger Website

August 30, 2024