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
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:
Clone the repository:
git clone https://github.com/abhishekgurjar-in/Foodie-Hamburger.git
Open the project directory:
cd Foodie-Hamburger
Run the project:
- Open the
index.html
file in a web browser to view the Foodie Hamburger Website.
- Open the
Usage
Open the website in a web browser.
Navigate through the sections using the top menu or the hamburger menu on smaller screens.
Explore different burger options and special deals.
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">☰</span>
</div>
</div>
<nav>
<span class="close-icon">×</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>
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;
}
}
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');
});
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
Abhishek Gurjar