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.
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.
Here’s an overview of the project structure:
Foodie-Hamburger/ ├── index.html ├── style.css └── script.js
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:
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="Build a Foodie Hamburger Website">
<img src="./images/Build a Foodie Hamburger Website.svg" alt="Build a Foodie Hamburger Website">
</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>
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;
}
.Build a Foodie Hamburger Website {
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;
}
.Build a Foodie Hamburger Website {
width: 30px;
}
}
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');
});
You can check out the live demo of the Foodie Hamburger Website project here.
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!
This project was developed as part of my continuous learning journey in web development.
The above is the detailed content of Build a Foodie Hamburger Website. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
