A food website is an essential tool for restaurants, food bloggers, and online meal delivery services. With a visually appealing food dashboard, you can showcase delicious dishes, provide online ordering, and enhance the user experience. In this guide, we’ll walk you through the process of building a responsive food website using HTML, CSS, and JavaScript. explore the food dashboard design with HTML and CSS.
Food website is more than just an online menu—it’s a powerful tool for attracting customers and enhancing user engagement. Whether you’re running a restaurant, a food blog, or an online meal delivery service, a well-designed food dashboard ensures seamless navigation, eye-catching visuals, and interactive features. In this guide, we’ll show you how to create a responsive food website using HTML, CSS, and JavaScript, making it both functional and visually appealing.
Why Build a Food Website?
A well-designed food website offers several benefits, including:
- Online Presence: Attract more customers with a professional website.
- Easy Navigation: Help users browse menus, view food categories, and place orders.
- Mobile-Friendly Experience: Ensure accessibility across all devices.
- Interactive Elements: Enhance engagement with animations and dynamic content.
Key Features of a Food Website
Before starting, let’s outline some essential features your food website should include:
- Homepage: An eye-catching design with high-quality food images and a welcoming message.
- Menu Page: A structured layout displaying food items with descriptions and prices.
- Search & Filter: Let users easily find specific dishes.
- Order System: Enable online ordering with a simple checkout process.
- Contact Page: Include a contact form, social media links, and location map.
Steps to Build a Food Website
1. Plan Your Website Structure
Before coding, define the layout of your food website. Consider pages like:
- Home (Landing page with featured dishes and offers)
- Menu (Categorized food listings with pricing)
- About Us (Business story and mission)
- Contact (Address, phone number, and contact form)
2. Design the Website Using HTML
HTML (HyperText Markup Language) structures your website’s content. Use semantic elements like <header>, <nav>, <section>, and <footer> to create a well-organized layout.
3. Style with CSS for a Stunning Look
CSS (Cascading Style Sheets) enhances the visual appeal of your food website by:
- Using a color palette that aligns with the food industry (warm tones like red, orange, and brown work well).
- Adding a responsive layout using CSS Grid or Flexbox.
- Enhancing typography with stylish fonts for readability.
- Implementing animations and hover effects for an interactive feel.
4. Add Interactivity with JavaScript
JavaScript helps make your website dynamic and user-friendly. Some interactive features include:
- Search functionality for filtering food items.
- Animated menu transitions for smooth navigation.
- Cart system for users to add or remove items before checkout.
- Form validation on the contact page for error-free submissions.
5. Optimize for SEO and Performance
To ensure your food website ranks well on search engines:
- Use relevant keywords like food website, restaurant website, food dashboard naturally in content, headings, and meta tags.
- Optimize images by compressing them without losing quality.
- Ensure fast loading times by minifying CSS and JavaScript files.
- Make it mobile-friendly by using a responsive design.
Best Practices for a Successful Food Website
To make your food website more engaging and effective:
- Use high-quality food images to attract visitors.
- Maintain a user-friendly interface with clear navigation.
- Ensure mobile compatibility for a seamless experience on all devices.
- Update content regularly to keep menus and offers fresh.
- Integrate social media links to encourage sharing and engagement.
Source code
If you like this design, then feel free to use it. Copy the code by clicking on Copy button provided below. First, you have to create three files. One is HTML other is CSS and last one is JavaScript after creating these files, paste the code provided below.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CRAFT | Premium Fast Food Experience</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600&family=Outfit:wght@200;300;400;500;600;700&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Header & Navigation -->
<header class="header">
<div class="container">
<nav class="navbar">
<a href="#" class="logo">CRAFT</a>
<ul class="nav-menu">
<li><a href="#home" class="nav-link active">Home</a></li>
<li><a href="#about" class="nav-link">About</a></li>
<li><a href="#menu" class="nav-link">Menu</a></li>
<li><a href="#special" class="nav-link">Specials</a></li>
<li><a href="#testimonials" class="nav-link">Testimonials</a></li>
<li><a href="#contact" class="nav-link">Contact</a></li>
</ul>
<div class="nav-buttons">
<a href="#" class="nav-icon">
<i class="fas fa-search"></i>
</a>
<a href="#" class="nav-icon">
<i class="fas fa-shopping-cart"></i>
<span class="cart-count">3</span>
</a>
<a href="#" class="btn btn-primary">Order Now</a>
</div>
<div class="mobile-toggle">
<span></span>
<span></span>
<span></span>
</div>
</nav>
</div>
</header>
<!-- Hero Section -->
<section class="hero" id="home">
<div class="container">
<div class="hero-content">
<p class="hero-subtitle">Artisanal Fast Food</p>
<h1 class="hero-title">
Gourmet Burgers & <span>Crafted</span> Delights
</h1>
<p class="hero-description">
Experience the perfect blend of convenience and culinary artistry.
Our chef-crafted fast food uses premium ingredients for an elevated
dining experience.
</p>
<div class="hero-buttons">
<a href="#menu" class="btn btn-secondary">View Menu</a>
<a href="#" class="btn hero-btn-outline">Order Online</a>
</div>
</div>
</div>
<div class="hero-scroll">
<i class="fas fa-chevron-down"></i>
Scroll Down
</div>
</section>
<!-- About Section -->
<section class="about" id="about">
<div class="container">
<div class="about-grid">
<div class="about-content">
<p class="section-subtitle">Our Story</p>
<h2 class="section-title">Premium Fast Food Reinvented</h2>
<p class="about-text">
CRAFT began with a simple idea: fast food doesn't have to
compromise on quality. We combine the convenience of quick service
with the artistry of gourmet cuisine, using premium ingredients
and chef-developed recipes.
</p>
<p class="about-text">
Our commitment to quality extends from our carefully sourced
ingredients to our made-to-order preparation. Every burger,
sandwich, and side is crafted with attention to detail and a
passion for exceptional flavor.
</p>
<div class="about-features">
<div class="about-feature">
<div class="about-feature-icon">
<i class="fas fa-leaf"></i>
</div>
<div>
<h4 class="about-feature-title">Premium Ingredients</h4>
<p class="about-feature-text">
Locally sourced, highest quality produce and meats.
</p>
</div>
</div>
<div class="about-feature">
<div class="about-feature-icon">
<i class="fas fa-utensils"></i>
</div>
<div>
<h4 class="about-feature-title">Chef-Crafted</h4>
<p class="about-feature-text">
Recipes developed by award-winning chefs.
</p>
</div>
</div>
<div class="about-feature">
<div class="about-feature-icon">
<i class="fas fa-bolt"></i>
</div>
<div>
<h4 class="about-feature-title">Quick Service</h4>
<p class="about-feature-text">
Made-to-order without sacrificing speed.
</p>
</div>
</div>
<div class="about-feature">
<div class="about-feature-icon">
<i class="fas fa-heart"></i>
</div>
<div>
<h4 class="about-feature-title">Made With Love</h4>
<p class="about-feature-text">
Passion and care in every bite.
</p>
</div>
</div>
</div>
</div>
<div class="about-image">
<div class="about-img"></div>
<div class="about-badge">Since 2018</div>
</div>
</div>
</div>
</section>
<!-- Menu Section -->
<section class="menu" id="menu">
<div class="container">
<div class="menu-header">
<p class="menu-subtitle">Our Menu</p>
<h2 class="menu-title">Premium Fast Food Selection</h2>
<p class="menu-description">
Explore our curated selection of gourmet fast food options, crafted
with premium ingredients and culinary expertise. From artisanal
burgers to hand-cut fries, each item is made with care.
</p>
</div>
<div class="menu-tabs">
<div class="menu-tab active">All</div>
<div class="menu-tab">Signature Burgers</div>
<div class="menu-tab">Sandwiches</div>
<div class="menu-tab">Sides</div>
<div class="menu-tab">Desserts</div>
<div class="menu-tab">Drinks</div>
</div>
<div class="menu-grid">
<!-- Menu Item 1 -->
<div class="menu-item">
<div class="menu-item-img"></div>
<div class="menu-item-badge">Bestseller</div>
<div class="menu-item-content">
<p class="menu-item-category">Signature Burgers</p>
<h3 class="menu-item-name">Truffle Aioli Burger</h3>
<p class="menu-item-description">
Prime beef patty, aged cheddar, arugula, caramelized onions, and
black truffle aioli on a brioche bun.
</p>
<div class="menu-item-bottom">
<div class="menu-item-price">$14.95</div>
<div class="menu-item-btn">
<i class="fas fa-plus"></i>
</div>
</div>
</div>
</div>
<!-- Menu Item 2 -->
<div class="menu-item">
<div class="menu-item-img"></div>
<div class="menu-item-content">
<p class="menu-item-category">Sandwiches</p>
<h3 class="menu-item-name">Herb-Crusted Chicken Sandwich</h3>
<p class="menu-item-description">
Free-range herb-crusted chicken breast, honey mustard, pickled
vegetables, and mixed greens on artisanal sourdough.
</p>
<div class="menu-item-bottom">
<div class="menu-item-price">$12.95</div>
<div class="menu-item-btn">
<i class="fas fa-plus"></i>
</div>
</div>
</div>
</div>
<!-- Menu Item 3 -->
<div class="menu-item">
<div class="menu-item-img"></div>
<div class="menu-item-badge">New</div>
<div class="menu-item-content">
<p class="menu-item-category">Signature Burgers</p>
<h3 class="menu-item-name">Umami Mushroom Burger</h3>
<p class="menu-item-description">
Grass-fed beef patty, sautéed wild mushrooms, Swiss cheese,
garlic aioli, and balsamic glaze on a pretzel bun.
</p>
<div class="menu-item-bottom">
<div class="menu-item-price">$15.95</div>
<div class="menu-item-btn">
<i class="fas fa-plus"></i>
</div>
</div>
</div>
</div>
<!-- Menu Item 4 -->
<div class="menu-item">
<div class="menu-item-img"></div>
<div class="menu-item-content">
<p class="menu-item-category">Sides</p>
<h3 class="menu-item-name">Truffle Parmesan Fries</h3>
<p class="menu-item-description">
Hand-cut kennebec potato fries tossed with truffle oil, grated
parmesan, and fresh herbs. Served with roasted garlic aioli.
</p>
<div class="menu-item-bottom">
<div class="menu-item-price">$8.95</div>
<div class="menu-item-btn">
<i class="fas fa-plus"></i>
</div>
</div>
</div>
</div>
<!-- Menu Item 5 -->
<div class="menu-item">
<div class="menu-item-img"></div>
<div class="menu-item-content">
<p class="menu-item-category">Sides</p>
<h3 class="menu-item-name">Crispy Brussels Sprouts</h3>
<p class="menu-item-description">
Crispy fried brussels sprouts tossed with honey balsamic glaze,
toasted almonds, and dried cranberries.
</p>
<div class="menu-item-bottom">
<div class="menu-item-price">$7.95</div>
<div class="menu-item-btn">
<i class="fas fa-plus"></i>
</div>
</div>
</div>
</div>
<!-- Menu Item 6 -->
<div class="menu-item">
<div class="menu-item-img"></div>
<div class="menu-item-badge">Popular</div>
<div class="menu-item-content">
<p class="menu-item-category">Desserts</p>
<h3 class="menu-item-name">Salted Caramel Milkshake</h3>
<p class="menu-item-description">
Handcrafted vanilla bean ice cream blended with house-made
salted caramel sauce, topped with whipped cream and caramel
drizzle.
</p>
<div class="menu-item-bottom">
<div class="menu-item-price">$7.95</div>
<div class="menu-item-btn">
<i class="fas fa-plus"></i>
</div>
</div>
</div>
</div>
</div>
<div class="text-center mt-5">
<a href="#" class="btn btn-primary">View Full Menu</a>
</div>
</div>
</section>
<!-- Special Section -->
<section class="special" id="special">
<div class="container special-container">
<div class="special-header">
<p class="special-subtitle">Limited Time Offers</p>
<h2 class="special-title">Seasonal Specials</h2>
<p class="special-description">
Indulge in our chef's seasonal creations, featuring premium
ingredients at their peak freshness. These limited-time offerings
showcase innovative flavor combinations.
</p>
</div>
<div class="special-grid">
<!-- Special Item 1 -->
<div class="special-item">
<div class="special-item-header">
<div>
<h3 class="special-item-title">Summer Harvest Burger</h3>
<p class="special-item-subtitle">
Available until September 30th
</p>
</div>
<div class="special-item-price">$16.95</div>
</div>
<div class="special-item-features">
<div class="special-item-feature">
<i class="fas fa-check"></i>
<span>Grass-fed beef patty with heirloom tomatoes</span>
</div>
<div class="special-item-feature">
<i class="fas fa-check"></i>
<span>Fresh burrata cheese and basil pesto</span>
</div>
<div class="special-item-feature">
<i class="fas fa-check"></i>
<span>Balsamic reduction and arugula</span>
</div>
<div class="special-item-feature">
<i class="fas fa-check"></i>
<span>Served on a toasted ciabatta bun</span>
</div>
</div>
<div class="special-item-footer">
<a href="#" class="btn btn-secondary">Order Now</a>
<div class="special-item-badge">Limited Edition</div>
</div>
</div>
<!-- Special Item 2 -->
<div class="special-item">
<div class="special-item-header">
<div>
<h3 class="special-item-title">Artisanal Meal Deal</h3>
<p class="special-item-subtitle">Perfect for sharing</p>
</div>
<div class="special-item-price">$29.95</div>
</div>
<div class="special-item-features">
<div class="special-item-feature">
<i class="fas fa-check"></i>
<span>Two signature burgers of your choice</span>
</div>
<div class="special-item-feature">
<i class="fas fa-check"></i>
<span>Large truffle parmesan fries to share</span>
</div>
<div class="special-item-feature">
<i class="fas fa-check"></i>
<span>Two craft sodas or iced teas</span>
</div>
<div class="special-item-feature">
<i class="fas fa-check"></i>
<span>One dessert to share</span>
</div>
</div>
<div class="special-item-footer">
<a href="#" class="btn btn-secondary">Order Now</a>
<div class="special-item-badge">Best Value</div>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section class="testimonials" id="testimonials">
<div class="container">
<div class="testimonial-header">
<p class="testimonial-subtitle">Customer Reviews</p>
<h2 class="testimonial-title">What Our Patrons Say</h2>
<p class="testimonial-description">
We take pride in providing an exceptional dining experience. Here's
what our customers have to say about our gourmet fast food.
</p>
</div>
<div class="testimonial-slider">
<div class="testimonial-item">
<div class="testimonial-quote">"</div>
<p class="testimonial-content">
CRAFT has completely changed my perception of fast food. The
Truffle Aioli Burger is a masterpiece—perfectly cooked, incredibly
flavorful, and with ingredients that you can tell are top quality.
Fast food with the quality of fine dining.
</p>
<div class="testimonial-author">
<div class="testimonial-author-img"></div>
<div>
<h4 class="testimonial-author-name">Michael Roberts</h4>
<p class="testimonial-author-title">Food Enthusiast</p>
<div class="testimonial-rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Order Section -->
<section class="order">
<div class="container">
<h2 class="order-title">Ready to Experience Premium Fast Food?</h2>
<p class="order-text">
Order online for pickup or delivery and enjoy our chef-crafted
delights in the comfort of your home or office. Fast, convenient, and
exceptionally delicious.
</p>
<a href="#" class="order-btn">Order Now</a>
</div>
</section>
<!-- Footer -->
<footer class="footer" id="contact">
<div class="container">
<div class="footer-grid">
<div>
<a href="#" class="footer-logo">CRAFT</a>
<p class="footer-text">
Redefining fast food with premium ingredients, chef-crafted
recipes, and exceptional flavors. Quick service without
compromising on quality.
</p>
<div class="footer-social">
<a href="#" class="footer-social-link"
><i class="fab fa-facebook-f"></i
></a>
<a href="#" class="footer-social-link"
><i class="fab fa-instagram"></i
></a>
<a href="#" class="footer-social-link"
><i class="fab fa-twitter"></i
></a>
<a href="#" class="footer-social-link"
><i class="fab fa-pinterest-p"></i
></a>
</div>
</div>
<div>
<h3 class="footer-heading">Quick Links</h3>
<ul class="footer-links">
<li class="footer-link">
<a href="#home"><i class="fas fa-chevron-right"></i> Home</a>
</li>
<li class="footer-link">
<a href="#about"
><i class="fas fa-chevron-right"></i> About Us</a
>
</li>
<li class="footer-link">
<a href="#menu"><i class="fas fa-chevron-right"></i> Menu</a>
</li>
<li class="footer-link">
<a href="#special"
><i class="fas fa-chevron-right"></i> Specials</a
>
</li>
<li class="footer-link">
<a href="#testimonials"
><i class="fas fa-chevron-right"></i> Testimonials</a
>
</li>
<li class="footer-link">
<a href="#"><i class="fas fa-chevron-right"></i> Careers</a>
</li>
</ul>
</div>
<div>
<h3 class="footer-heading">Hours</h3>
<ul class="footer-links">
<li class="footer-link">
<a href="#">Monday - Friday: 11AM - 10PM</a>
</li>
<li class="footer-link"><a href="#">Saturday: 10AM - 11PM</a></li>
<li class="footer-link"><a href="#">Sunday: 10AM - 9PM</a></li>
<li class="footer-link"><a href="#">Order Online 24/7</a></li>
</ul>
</div>
<div>
<h3 class="footer-heading">Contact</h3>
<div class="footer-info">
<i class="fas fa-map-marker-alt"></i>
<div>
123 Gourmet Avenue, Culinary District, New York, NY 10001
</div>
</div>
<div class="footer-info">
<i class="fas fa-phone-alt"></i>
<div>(212) 555-1234</div>
</div>
<div class="footer-info">
<i class="fas fa-envelope"></i>
<div>[email protected]</div>
</div>
</div>
</div>
<div class="footer-bottom">
<p>
© 2025 CRAFT Premium Fast Food. All rights reserved. | Website
by <a href="codingvox.com">CodingVox</a>
</p>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>
CSS Code
:root {
--primary: #9d2e33;
--primary-dark: #7a1f24;
--primary-light: #c8686d;
--secondary: #d4a96a;
--secondary-dark: #b3894c;
--secondary-light: #efd3a7;
--accent: #405e4c;
--dark: #1d1d1d;
--dark-gray: #2d2d2d;
--medium-gray: #5a5a5a;
--light-gray: #e9e5e0;
--off-white: #f8f6f3;
--white: #ffffff;
--shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 8px;
--spacing-xs: 0.5rem;
--spacing-sm: 1rem;
--spacing-md: 1.5rem;
--spacing-lg: 2rem;
--spacing-xl: 3rem;
--spacing-xxl: 5rem;
--font-heading: "Playfair Display", serif;
--font-body: "Outfit", sans-serif;
--transition-fast: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
--transition-normal: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
--transition-slow: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
/* Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 80px;
}
body {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.7;
color: var(--dark);
background-color: var(--off-white);
overflow-x: hidden;
font-weight: 300;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-heading);
font-weight: 600;
line-height: 1.3;
color: var(--dark);
}
a {
text-decoration: none;
color: inherit;
transition: var(--transition-normal);
}
img {
max-width: 100%;
height: auto;
display: block;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--spacing-md);
}
.btn {
display: inline-block;
padding: 0.85rem 2rem;
font-family: var(--font-body);
font-weight: 500;
font-size: 0.95rem;
letter-spacing: 0.5px;
border-radius: var(--radius-sm);
transition: var(--transition-normal);
text-align: center;
cursor: pointer;
border: none;
}
.btn-primary {
background-color: var(--primary);
color: var(--white);
box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
background-color: var(--primary-dark);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn-secondary {
background-color: var(--secondary);
color: var(--dark);
}
.btn-secondary:hover {
background-color: var(--secondary-dark);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn-outline {
background-color: transparent;
border: 1px solid var(--dark);
color: var(--dark);
}
.btn-outline:hover {
background-color: var(--dark);
color: var(--white);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.text-center {
text-align: center;
}
.mb-1 {
margin-bottom: var(--spacing-xs);
}
.mb-2 {
margin-bottom: var(--spacing-sm);
}
.mb-3 {
margin-bottom: var(--spacing-md);
}
.mb-4 {
margin-bottom: var(--spacing-lg);
}
.mb-5 {
margin-bottom: var(--spacing-xl);
}
.mt-1 {
margin-top: var(--spacing-xs);
}
.mt-2 {
margin-top: var(--spacing-sm);
}
.mt-3 {
margin-top: var(--spacing-md);
}
.mt-4 {
margin-top: var(--spacing-lg);
}
.mt-5 {
margin-top: var(--spacing-xl);
}
/* Header & Navigation */
.header {
background-color: transparent;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
padding: var(--spacing-sm) 0;
transition: var(--transition-normal);
}
.header.scrolled {
background-color: var(--white);
box-shadow: var(--shadow-sm);
padding: var(--spacing-xs) 0;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-family: var(--font-heading);
font-size: 1.8rem;
font-weight: 700;
color: var(--white);
letter-spacing: 2px;
}
.header.scrolled .logo {
color: var(--dark);
}
.nav-menu {
display: flex;
list-style: none;
gap: var(--spacing-xl);
}
.nav-link {
font-weight: 400;
color: var(--white);
text-transform: uppercase;
letter-spacing: 1px;
font-size: 0.9rem;
position: relative;
}
.header.scrolled .nav-link {
color: var(--dark);
}
.nav-link::after {
content: "";
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 1px;
background-color: var(--secondary);
transition: var(--transition-normal);
}
.nav-link:hover::after,
.nav-link.active::after {
width: 100%;
}
.nav-link:hover,
.nav-link.active {
color: var(--secondary);
}
.nav-buttons {
display: flex;
align-items: center;
gap: var(--spacing-md);
}
.nav-icon {
color: var(--white);
font-size: 1.2rem;
position: relative;
cursor: pointer;
}
.header.scrolled .nav-icon {
color: var(--dark);
}
.cart-count {
position: absolute;
top: -8px;
right: -8px;
background-color: var(--secondary);
color: var(--dark);
font-size: 0.7rem;
font-weight: 600;
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.mobile-toggle {
display: none;
cursor: pointer;
width: 24px;
height: 18px;
position: relative;
z-index: 1001;
}
.mobile-toggle span {
display: block;
width: 100%;
height: 2px;
background-color: var(--white);
position: absolute;
left: 0;
transition: var(--transition-normal);
}
.header.scrolled .mobile-toggle span {
background-color: var(--dark);
}
.mobile-toggle span:nth-child(1) {
top: 0;
}
.mobile-toggle span:nth-child(2) {
top: 8px;
}
.mobile-toggle span:nth-child(3) {
top: 16px;
}
.mobile-toggle.active span:nth-child(1) {
transform: rotate(45deg);
top: 8px;
}
.mobile-toggle.active span:nth-child(2) {
opacity: 0;
}
.mobile-toggle.active span:nth-child(3) {
transform: rotate(-45deg);
top: 8px;
}
/* Hero Section */
.hero {
height: 100vh;
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
url("https://images.pexels.com/photos/1639562/pexels-photo-1639562.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2")
center/cover no-repeat;
display: flex;
align-items: center;
color: var(--white);
position: relative;
}
.hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
}
.hero-content {
position: relative;
z-index: 1;
max-width: 650px;
}
.hero-subtitle {
font-family: var(--font-heading);
font-size: 1.2rem;
font-weight: 400;
font-style: italic;
color: var(--secondary);
margin-bottom: var(--spacing-sm);
}
.hero-title {
font-size: 4rem;
margin-bottom: var(--spacing-md);
color: var(--white);
line-height: 1.2;
}
.hero-title span {
color: var(--secondary);
position: relative;
display: inline-block;
}
.hero-description {
font-size: 1.1rem;
margin-bottom: var(--spacing-xl);
max-width: 550px;
color: rgba(255, 255, 255, 0.9);
font-weight: 300;
}
.hero-buttons {
display: flex;
gap: var(--spacing-md);
}
.hero-btn-outline {
background-color: transparent;
border: 1px solid var(--secondary);
color: var(--secondary);
}
.hero-btn-outline:hover {
background-color: var(--secondary);
color: var(--dark);
border-color: var(--secondary);
}
.hero-scroll {
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
color: var(--white);
font-size: 0.9rem;
letter-spacing: 2px;
text-transform: uppercase;
gap: 10px;
opacity: 0.8;
transition: var(--transition-normal);
}
.hero-scroll:hover {
opacity: 1;
}
.hero-scroll i {
font-size: 1.5rem;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%,
20%,
50%,
80%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
}
}
/* About Section */
.about {
padding: var(--spacing-xxl) 0;
background-color: var(--white);
}
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-xl);
align-items: center;
}
.about-image {
position: relative;
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.about-img {
width: 100%;
height: 500px;
object-fit: cover;
background: url("https://img.freepik.com/free-psd/close-up-hamburger-isolated_23-2151604186.jpg?t=st=1742657029~exp=1742660629~hmac=0dce3b9e84b0e34ac76986bd10cfbc23f1cf65566346e62dc558fd5bb3c84f05&w=826")
center/cover no-repeat;
}
.about-badge {
position: absolute;
bottom: 30px;
right: 30px;
background-color: var(--secondary);
color: var(--dark);
padding: 0.75rem 1.5rem;
font-family: var(--font-heading);
font-size: 1.2rem;
font-weight: 600;
border-radius: var(--radius-sm);
box-shadow: var(--shadow-md);
}
.section-subtitle {
font-family: var(--font-heading);
font-size: 1.2rem;
font-style: italic;
color: var(--primary);
margin-bottom: var(--spacing-sm);
}
.section-title {
font-size: 2.8rem;
margin-bottom: var(--spacing-md);
position: relative;
padding-bottom: var(--spacing-sm);
}
.section-title::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 2px;
background-color: var(--secondary);
}
.text-center .section-title::after {
left: 50%;
transform: translateX(-50%);
}
.about-text {
font-size: 1.05rem;
color: var(--medium-gray);
margin-bottom: var(--spacing-lg);
}
.about-features {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-md);
}
.about-feature {
display: flex;
align-items: flex-start;
gap: var(--spacing-sm);
}
.about-feature-icon {
width: 40px;
height: 40px;
background-color: rgba(157, 46, 51, 0.1);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: var(--primary);
font-size: 1.1rem;
flex-shrink: 0;
}
.about-feature-title {
font-family: var(--font-heading);
font-size: 1.1rem;
margin-bottom: 5px;
font-weight: 600;
}
.about-feature-text {
font-size: 0.95rem;
color: var(--medium-gray);
}
/* Menu Section */
.menu {
padding: var(--spacing-xxl) 0;
background-color: var(--off-white);
position: relative;
}
.menu-header {
text-align: center;
max-width: 700px;
margin: 0 auto var(--spacing-xl);
}
.menu-subtitle {
font-family: var(--font-heading);
font-size: 1.2rem;
font-style: italic;
color: var(--primary);
margin-bottom: var(--spacing-sm);
}
.menu-title {
font-size: 2.8rem;
margin-bottom: var(--spacing-md);
position: relative;
padding-bottom: var(--spacing-sm);
}
.menu-title::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 2px;
background-color: var(--secondary);
}
.menu-description {
font-size: 1.05rem;
color: var(--medium-gray);
}
.menu-tabs {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: var(--spacing-md);
margin-bottom: var(--spacing-xl);
}
.menu-tab {
font-family: var(--font-heading);
font-size: 1.1rem;
color: var(--medium-gray);
cursor: pointer;
transition: var(--transition-normal);
padding-bottom: 5px;
position: relative;
}
.menu-tab::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--secondary);
transition: var(--transition-normal);
}
.menu-tab:hover::after,
.menu-tab.active::after {
width: 100%;
}
.menu-tab:hover,
.menu-tab.active {
color: var(--dark);
}
.menu-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: var(--spacing-lg);
}
.menu-item {
background-color: var(--white);
border-radius: var(--radius-sm);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: var(--transition-normal);
}
.menu-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
}
.menu-item-img {
height: 220px;
width: 100%;
object-fit: cover;
background: url("https://img.freepik.com/free-psd/close-up-hamburger-isolated_23-2151604186.jpg?t=st=1742657029~exp=1742660629~hmac=0dce3b9e84b0e34ac76986bd10cfbc23f1cf65566346e62dc558fd5bb3c84f05&w=826")
center/cover no-repeat;
position: relative;
}
.menu-item-badge {
position: absolute;
top: 15px;
right: 15px;
background-color: var(--secondary);
color: var(--dark);
padding: 0.4rem 0.8rem;
border-radius: var(--radius-sm);
font-size: 0.8rem;
font-weight: 600;
font-family: var(--font-heading);
box-shadow: var(--shadow-sm);
}
.menu-item-content {
padding: var(--spacing-md);
}
.menu-item-category {
font-family: var(--font-heading);
font-size: 0.9rem;
font-style: italic;
color: var(--primary);
margin-bottom: var(--spacing-xs);
}
.menu-item-name {
font-size: 1.4rem;
margin-bottom: var(--spacing-xs);
font-family: var(--font-heading);
}
.menu-item-description {
color: var(--medium-gray);
font-size: 0.95rem;
margin-bottom: var(--spacing-md);
line-height: 1.6;
}
.menu-item-bottom {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--light-gray);
padding-top: var(--spacing-sm);
}
.menu-item-price {
font-family: var(--font-heading);
font-size: 1.3rem;
font-weight: 600;
color: var(--dark);
}
.menu-item-btn {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--primary);
color: var(--white);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: var(--transition-normal);
}
.menu-item-btn:hover {
background-color: var(--primary-dark);
transform: scale(1.1);
}
/* Special Section */
.special {
padding: var(--spacing-xxl) 0;
background-color: var(--dark);
color: var(--white);
position: relative;
overflow: hidden;
}
.special::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("https://img.freepik.com/free-psd/close-up-hamburger-isolated_23-2151604186.jpg?t=st=1742657029~exp=1742660629~hmac=0dce3b9e84b0e34ac76986bd10cfbc23f1cf65566346e62dc558fd5bb3c84f05&w=826")
center/cover no-repeat;
opacity: 0.15;
}
.special-container {
position: relative;
z-index: 1;
}
.special-header {
text-align: center;
max-width: 700px;
margin: 0 auto var(--spacing-xl);
}
.special-subtitle {
font-family: var(--font-heading);
font-size: 1.2rem;
font-style: italic;
color: var(--secondary);
margin-bottom: var(--spacing-sm);
}
.special-title {
font-size: 2.8rem;
margin-bottom: var(--spacing-md);
position: relative;
padding-bottom: var(--spacing-sm);
color: var(--white);
}
.special-title::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 2px;
background-color: var(--secondary);
}
.special-description {
font-size: 1.05rem;
color: rgba(255, 255, 255, 0.8);
}
.special-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-xl);
margin-top: var(--spacing-xl);
}
.special-item {
background-color: rgba(255, 255, 255, 0.05);
border-radius: var(--radius-sm);
padding: var(--spacing-lg);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: var(--transition-normal);
}
.special-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
background-color: rgba(255, 255, 255, 0.08);
}
.special-item-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: var(--spacing-md);
}
.special-item-title {
font-size: 1.8rem;
color: var(--white);
margin-bottom: var(--spacing-xs);
font-family: var(--font-heading);
}
.special-item-price {
font-family: var(--font-heading);
font-size: 1.8rem;
font-weight: 600;
color: var(--secondary);
}
.special-item-subtitle {
color: rgba(255, 255, 255, 0.7);
font-size: 1rem;
margin-bottom: var(--spacing-sm);
}
.special-item-features {
margin-bottom: var(--spacing-md);
}
.special-item-feature {
display: flex;
align-items: center;
gap: var(--spacing-xs);
margin-bottom: var(--spacing-xs);
color: rgba(255, 255, 255, 0.8);
}
.special-item-feature i {
color: var(--secondary);
font-size: 0.9rem;
}
.special-item-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: var(--spacing-md);
}
.special-item-badge {
font-family: var(--font-heading);
font-size: 1.1rem;
color: var(--secondary);
text-transform: uppercase;
letter-spacing: 1px;
}
/* Testimonials */
.testimonials {
padding: var(--spacing-xxl) 0;
background-color: var(--white);
}
.testimonial-header {
text-align: center;
max-width: 700px;
margin: 0 auto var(--spacing-xl);
}
.testimonial-subtitle {
font-family: var(--font-heading);
font-size: 1.2rem;
font-style: italic;
color: var(--primary);
margin-bottom: var(--spacing-sm);
}
.testimonial-title {
font-size: 2.8rem;
margin-bottom: var(--spacing-md);
position: relative;
padding-bottom: var(--spacing-sm);
}
.testimonial-title::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 2px;
background-color: var(--secondary);
}
.testimonial-description {
font-size: 1.05rem;
color: var(--medium-gray);
}
.testimonial-slider {
margin-top: var(--spacing-xl);
position: relative;
}
.testimonial-item {
background-color: var(--off-white);
border-radius: var(--radius-sm);
padding: var(--spacing-xl);
max-width: 800px;
margin: 0 auto;
position: relative;
}
.testimonial-quote {
font-size: 5rem;
color: rgba(157, 46, 51, 0.1);
position: absolute;
top: 10px;
left: 20px;
font-family: Georgia, serif;
line-height: 1;
}
.testimonial-content {
font-family: var(--font-heading);
font-size: 1.3rem;
color: var(--dark);
margin-bottom: var(--spacing-md);
position: relative;
z-index: 1;
line-height: 1.6;
font-style: italic;
}
.testimonial-author {
display: flex;
align-items: center;
gap: var(--spacing-md);
}
.testimonial-author-img {
width: 70px;
height: 70px;
border-radius: 50%;
overflow: hidden;
background: url("https://img.freepik.com/free-psd/close-up-hamburger-isolated_23-2151604186.jpg?t=st=1742657029~exp=1742660629~hmac=0dce3b9e84b0e34ac76986bd10cfbc23f1cf65566346e62dc558fd5bb3c84f05&w=826")
center/cover no-repeat;
border: 3px solid var(--white);
box-shadow: var(--shadow-sm);
}
.testimonial-author-name {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 5px;
font-family: var(--font-heading);
}
.testimonial-author-title {
font-size: 0.95rem;
color: var(--medium-gray);
}
.testimonial-rating {
color: var(--secondary);
font-size: 1rem;
margin-top: var(--spacing-xs);
}
/* Order Section */
.order {
padding: var(--spacing-xl) 0;
background-color: var(--primary);
color: var(--white);
text-align: center;
}
.order-title {
font-size: 2.2rem;
margin-bottom: var(--spacing-md);
color: var(--white);
}
.order-text {
font-size: 1.1rem;
max-width: 700px;
margin: 0 auto var(--spacing-lg);
color: rgba(255, 255, 255, 0.9);
}
.order-btn {
background-color: var(--secondary);
color: var(--dark);
font-weight: 600;
padding: 1rem 2.5rem;
font-size: 1.05rem;
border-radius: var(--radius-sm);
letter-spacing: 1px;
display: inline-block;
transition: var(--transition-normal);
box-shadow: var(--shadow-md);
}
.order-btn:hover {
background-color: var(--secondary-dark);
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}
/* Footer */
.footer {
background-color: var(--dark);
color: var(--white);
padding: var(--spacing-xxl) 0 var(--spacing-md);
position: relative;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: var(--spacing-xl);
margin-bottom: var(--spacing-xl);
}
.footer-logo {
font-family: var(--font-heading);
font-size: 2rem;
color: var(--white);
margin-bottom: var(--spacing-md);
display: inline-block;
font-weight: 700;
letter-spacing: 2px;
}
.footer-text {
color: rgba(255, 255, 255, 0.7);
margin-bottom: var(--spacing-lg);
font-size: 0.95rem;
max-width: 400px;
line-height: 1.8;
}
.footer-social {
display: flex;
gap: var(--spacing-sm);
}
.footer-social-link {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.1);
display: flex;
justify-content: center;
align-items: center;
color: var(--white);
transition: var(--transition-normal);
}
.footer-social-link:hover {
background-color: var(--primary);
transform: translateY(-3px);
}
.footer-heading {
font-family: var(--font-heading);
font-size: 1.3rem;
margin-bottom: var(--spacing-md);
color: var(--white);
position: relative;
padding-bottom: var(--spacing-xs);
}
.footer-heading::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 2px;
background-color: var(--secondary);
}
.footer-links {
list-style: none;
}
.footer-link {
margin-bottom: var(--spacing-sm);
}
.footer-link a {
color: rgba(255, 255, 255, 0.7);
transition: var(--transition-fast);
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 0.95rem;
}
.footer-link a:hover {
color: var(--secondary);
transform: translateX(5px);
}
.footer-link i {
font-size: 0.8rem;
}
.footer-info {
margin-bottom: var(--spacing-md);
display: flex;
gap: var(--spacing-sm);
color: rgba(255, 255, 255, 0.7);
font-size: 0.95rem;
}
.footer-info i {
color: var(--secondary);
font-size: 1rem;
margin-top: 5px;
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: var(--spacing-md);
color: rgba(255, 255, 255, 0.5);
font-size: 0.9rem;
text-align: center;
}
.footer-bottom a {
color: var(--secondary);
}
/* Responsive Design */
@media (max-width: 1200px) {
.hero-title {
font-size: 3.5rem;
}
.section-title,
.menu-title,
.special-title,
.testimonial-title {
font-size: 2.5rem;
}
}
@media (max-width: 992px) {
.nav-menu {
display: none;
}
.mobile-toggle {
display: block;
}
.hero-title {
font-size: 3rem;
}
.about-grid {
grid-template-columns: 1fr;
gap: var(--spacing-lg);
}
.about-image {
order: -1;
max-width: 600px;
margin: 0 auto;
}
.special-grid {
grid-template-columns: 1fr;
gap: var(--spacing-lg);
}
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: var(--spacing-lg);
}
}
@media (max-width: 768px) {
.hero-title {
font-size: 2.5rem;
}
.section-title,
.menu-title,
.special-title,
.testimonial-title {
font-size: 2.2rem;
}
.hero-buttons {
flex-direction: column;
}
.menu-grid {
grid-template-columns: 1fr;
}
.menu-tabs {
flex-direction: column;
gap: var(--spacing-sm);
align-items: center;
}
.footer-grid {
grid-template-columns: 1fr;
gap: var(--spacing-lg);
}
}
@media (max-width: 576px) {
.hero-title {
font-size: 2rem;
}
.about-features {
grid-template-columns: 1fr;
}
.special-item-header {
flex-direction: column;
gap: var(--spacing-xs);
}
.testimonial-content {
font-size: 1.1rem;
}
}
JS Code
document.addEventListener("DOMContentLoaded", function () {
const header = document.querySelector(".header");
function checkScroll() {
if (window.scrollY > 100) {
header.classList.add("scrolled");
} else {
header.classList.remove("scrolled");
}
}
checkScroll();
window.addEventListener("scroll", checkScroll);
const mobileToggle = document.querySelector(".mobile-toggle");
mobileToggle.addEventListener("click", function () {
this.classList.toggle("active");
});
const menuTabs = document.querySelectorAll(".menu-tab");
menuTabs.forEach((tab) => {
tab.addEventListener("click", () => {
menuTabs.forEach((t) => t.classList.remove("active"));
tab.classList.add("active");
});
});
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
anchor.addEventListener("click", function (e) {
e.preventDefault();
if (this.getAttribute("href") === "#") return;
const targetElement = document.querySelector(this.getAttribute("href"));
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: "smooth",
});
}
});
});
const addButtons = document.querySelectorAll(".menu-item-btn");
const cartCount = document.querySelector(".cart-count");
let count = 3;
addButtons.forEach((button) => {
button.addEventListener("click", () => {
count++;
cartCount.textContent = count;
button.style.transform = "scale(1.2)";
setTimeout(() => {
button.style.transform = "";
}, 200);
});
});
});
Conclusion
A well-designed food website with a user-friendly food dashboard can enhance your online presence and attract more customers. By using HTML, CSS, and JavaScript, you can create an interactive and visually appealing platform for your audience. Start building your food website today and make your business stand out in the digital world!
