Project Gallery
Explore BLAZE | Fire-Driven Fast Food Experience in detail
1
/1
100%
Project Overview
BLAZE | Fire-Driven Fast Food Experience
Project Description
BLAZE is a modern fast-food brand redefining flavor through fire, passion, and premium ingredients. From double-smash burgers to spicy chicken and loaded sides, every item is crafted for bold taste and unforgettable satisfaction.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BLAZE | Modern Fast Food Culture</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"
/>
</head>
<body>
<header class="header">
<div class="container">
<nav class="navbar">
<a href="#" class="logo">BLAZE.</a>
<ul class="nav-menu">
<li><a href="#home" class="nav-link active">Home</a></li>
<li><a href="#about" class="nav-link">Philosophy</a></li>
<li><a href="#menu" class="nav-link">Menu</a></li>
<li><a href="#specials" class="nav-link">Ignite</a></li>
<li><a href="#reviews" class="nav-link">Reviews</a></li>
<li><a href="#contact" class="nav-link">Connect</a></li>
</ul>
<div class="nav-buttons" style="display: flex; gap: 1rem; align-items: center">
<a href="#" class="nav-icon"><i class="fas fa-search"></i></a>
<a href="#" class="nav-icon"><i class="fas fa-shopping-bag"></i><span class="cart-count">2</span></a>
<a href="#" class="btn btn-primary" style="padding: 0.5rem 1.4rem">🔥 Order</a>
</div>
<div class="mobile-toggle">
<span></span><span></span><span></span>
</div>
</nav>
</div>
</header>
<section class="hero" id="home">
<div class="container">
<div class="hero-content">
<p class="hero-subtitle">FIRE + FLAVOR</p>
<h1 class="hero-title">Fast Food <span>Reignited</span> 🔥</h1>
<p class="hero-description">Smash-burgers, spicy chicken, loaded fries — all crafted with bold ingredients, live-fire techniques, and zero compromise.</p>
<div class="hero-buttons">
<a href="#menu" class="btn btn-secondary">Explore Menu →</a>
<a href="#" class="btn btn-outline">Grab a Deal</a>
</div>
</div>
</div>
</section>
<section class="about" id="about">
<div class="container">
<div class="about-grid">
<div>
<p class="section-subtitle">The Philosophy</p>
<h2 class="section-title">Bold flavors, real fire.</h2>
<p style="color: var(--medium-gray); margin: 1.2rem 0; font-size: 1.05rem">
At BLAZE, we don't just cook — we ignite. Every patty is smashed on a 500°F flat-top, every sauce is made from scratch, and every ingredient tells a story.
We’re redefining fast food with audacious taste and quality that hits different.
</p>
<div style="display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem">
<div style="display: flex; gap: 12px"><i class="fas fa-fire" style="color: var(--primary); font-size: 1.3rem"></i> <span>Double-smash technique for crispy edges</span></div>
<div style="display: flex; gap: 12px"><i class="fas fa-pepper-hot" style="color: var(--primary); font-size: 1.3rem"></i> <span>House-made ghost pepper & chipotle aioli</span></div>
<div style="display: flex; gap: 12px"><i class="fas fa-truck-fast" style="color: var(--primary); font-size: 1.3rem"></i> <span>Lightning-fast delivery under 20 min</span></div>
</div>
</div>
<div class="about-image-wrap">
<div class="about-img"></div>
<div class="about-badge">🔥 LIVE FIRE KITCHEN</div>
</div>
</div>
</div>
</section>
<section class="menu" id="menu">
<div class="container">
<div style="text-align: center; margin-bottom: 3rem">
<p class="section-subtitle">Fuel up</p>
<h2 class="section-title" style="display: block">Signature Blaze Menu</h2>
<p style="max-width: 600px; margin: 1rem auto 0; color: var(--medium-gray)">Smash burgers, crispy chicken, and sides that slap.</p>
</div>
<div class="menu-tabs">
<div class="menu-tab active">🔥 All Items</div>
<div class="menu-tab">🍔 Smash Burgers</div>
<div class="menu-tab">🐓 Spicy Chicken</div>
<div class="menu-tab">🍟 Loaded Sides</div>
</div>
<div class="menu-grid" id="menuGrid"></div>
<div class="text-center mt-5" style="margin-top: 2.5rem; text-align: center">
<a href="#" class="btn btn-primary">View Full 🔥 Menu →</a>
</div>
</div>
</section>
<section class="specials" id="specials">
<div class="container">
<div style="text-align: center; margin-bottom: 3rem">
<p class="section-subtitle" style="color: var(--secondary)">Limited Inferno</p>
<h2 class="section-title" style="color: white; display: block">Weekly Blaze Drops</h2>
</div>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem">
<div class="special-card">
<h3 style="font-size: 1.8rem">Dragon's Breath Burger</h3>
<p style="margin: 0.5rem 0; opacity: 0.8">Habenero glaze, pepper jack, jalapeño crunch</p>
<div style="font-size: 2rem; font-weight: 700; color: var(--secondary); margin: 1rem 0">$15.90</div>
<a href="#" class="btn btn-secondary">Order Now →</a>
</div>
<div class="special-card">
<h3 style="font-size: 1.8rem">Truffle Fire Fries</h3>
<p style="margin: 0.5rem 0; opacity: 0.8">Truffle oil, parmesan, crispy chili flakes</p>
<div style="font-size: 2rem; font-weight: 700; color: var(--secondary); margin: 1rem 0">$8.90</div>
<a href="#" class="btn btn-secondary">Add to Cart</a>
</div>
<div class="special-card">
<h3 style="font-size: 1.8rem">Blaze Box (for 2)</h3>
<p style="margin: 0.5rem 0; opacity: 0.8">2 burgers, 1 large fries, 2 drinks + sauce</p>
<div style="font-size: 2rem; font-weight: 700; color: var(--secondary); margin: 1rem 0">$29.90</div>
<a href="#" class="btn btn-secondary">Get the Box</a>
</div>
</div>
</div>
</section>
<section class="testimonials" id="reviews">
<div class="container">
<div style="text-align: center; max-width: 700px; margin: 0 auto 3rem">
<p class="section-subtitle">Social heat</p>
<h2 class="section-title" style="display: block">What our fire-starters say</h2>
</div>
<div class="testimonial-card">
<i class="fas fa-quote-left" style="font-size: 3rem; color: var(--primary-light); opacity: 0.4"></i>
<p style="font-size: 1.3rem; font-style: italic; margin: 1rem 0">"Best smash burger in the city — the crust is unreal, and the spicy sauce is addictive. Finally fast food with soul."</p>
<div style="display: flex; align-items: center; gap: 1rem; margin-top: 1rem">
<div style="width: 55px; height: 55px; background: url('https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&w=400&h=400&dpr=2') center/cover; border-radius: 50%;"></div>
<div><strong>Marcus V.</strong><br>⭐ 5.0 · Verified heat-seeker</div>
</div>
</div>
</div>
</section>
<div class="container">
<div class="order-banner">
<h2 style="font-size: 2rem">Craving a flavor explosion?</h2>
<p style="margin: 1rem 0">Order online and get 15% off your first Blaze Box 🔥</p>
<a href="#" class="btn btn-secondary" style="background: var(--secondary); color: var(--dark)">Order Now →</a>
</div>
</div>
<footer class="footer" id="contact">
<div class="container">
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; margin-bottom: 2rem">
<div>
<h3 style="font-size: 1.8rem; font-family: var(--font-heading)">BLAZE.</h3>
<p style="margin-top: 0.5rem">Fast, furious & flavorful.</p>
<div style="display: flex; gap: 1rem; margin-top: 1rem">
<a href="#" style="color: white"><i class="fab fa-instagram"></i></a>
<a href="#" style="color: white"><i class="fab fa-tiktok"></i></a>
<a href="#" style="color: white"><i class="fab fa-twitter"></i></a>
</div>
</div>
<div><h4>Explore</h4><ul style="list-style: none; margin-top: 0.5rem"><li>Menu</li><li>Locations</li><li>Catering</li></ul></div>
<div><h4>Support</h4><ul style="list-style: none; margin-top: 0.5rem"><li>FAQs</li><li>Contact</li><li>Gift Cards</li></ul></div>
<div><h4>Hours</h4><p>Mon-Thu: 11am-11pm<br>Fri-Sun: 11am-1am</p></div>
</div>
<div style="border-top: 1px solid #2a2a2a; padding-top: 1.5rem; text-align: center; font-size: 0.85rem">© 2025 BLAZE — Premium Fast Food Culture. All rights reserved.</div>
</div>
</footer>
</body>
</html>CSS
<style>
:root {
--primary: #c4452c;
--primary-dark: #a3341e;
--primary-light: #e6765c;
--secondary: #f6b100;
--secondary-dark: #d49400;
--secondary-light: #ffcd4a;
--accent: #2c5f4e;
--dark: #121212;
--dark-gray: #2a2a2a;
--medium-gray: #6b6b6b;
--light-gray: #f0efed;
--off-white: #faf9f8;
--white: #ffffff;
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
--shadow-md: 0 6px 16px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.12);
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 24px;
--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.2, 0.9, 0.4, 1.1);
--transition-normal: all 0.35s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 90px;
}
body {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
color: var(--dark);
background-color: var(--off-white);
overflow-x: hidden;
font-weight: 350;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-heading);
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.02em;
}
.container {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 var(--spacing-md);
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0.8rem 2rem;
font-family: var(--font-body);
font-weight: 500;
font-size: 0.9rem;
letter-spacing: 0.3px;
border-radius: 40px;
transition: var(--transition-normal);
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);
font-weight: 600;
}
.btn-secondary:hover {
background-color: var(--secondary-dark);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn-outline {
background: transparent;
border: 1.5px solid var(--white);
color: var(--white);
}
.btn-outline:hover {
background: var(--white);
color: var(--dark);
border-color: var(--white);
}
/* Header */
.header {
background: transparent;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
padding: 0.9rem 0;
transition: var(--transition-normal);
}
.header.scrolled {
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(12px);
box-shadow: var(--shadow-sm);
padding: 0.5rem 0;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-family: var(--font-heading);
font-size: 2rem;
font-weight: 800;
color: white;
letter-spacing: -0.5px;
}
.header.scrolled .logo {
color: var(--dark);
}
.nav-menu {
display: flex;
list-style: none;
gap: var(--spacing-xl);
}
.nav-link {
font-weight: 500;
color: white;
font-size: 0.9rem;
position: relative;
}
.header.scrolled .nav-link {
color: var(--dark);
}
.nav-link::after {
content: "";
position: absolute;
bottom: -6px;
left: 0;
width: 0;
height: 2px;
background: var(--secondary);
transition: 0.25s;
}
.nav-link:hover::after,
.nav-link.active::after {
width: 100%;
}
.nav-icon {
color: white;
font-size: 1.2rem;
position: relative;
}
.header.scrolled .nav-icon {
color: var(--dark);
}
.cart-count {
position: absolute;
top: -8px;
right: -10px;
background: var(--secondary);
color: var(--dark);
font-size: 0.7rem;
font-weight: 700;
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.mobile-toggle {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
}
.mobile-toggle span {
width: 24px;
height: 2px;
background: white;
transition: 0.3s;
}
.header.scrolled .mobile-toggle span {
background: var(--dark);
}
/* Hero Section */
.hero {
height: 100vh;
background: linear-gradient(105deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 100%),
url("https://images.pexels.com/photos/2983101/pexels-photo-2983101.jpeg?auto=compress&cs=tinysrgb&w=1600&dpr=2")
center/cover no-repeat;
display: flex;
align-items: center;
position: relative;
}
.hero-content {
max-width: 680px;
}
.hero-subtitle {
font-size: 1rem;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--secondary);
margin-bottom: 1rem;
font-weight: 500;
}
.hero-title {
font-size: 4.2rem;
color: white;
margin-bottom: 1.5rem;
}
.hero-title span {
color: var(--secondary);
border-bottom: 3px solid var(--secondary);
}
.hero-description {
color: rgba(255, 255, 255, 0.9);
margin-bottom: 2rem;
font-size: 1.1rem;
}
.hero-buttons {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
/* About */
.about {
padding: var(--spacing-xxl) 0;
background: white;
}
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
}
.about-image-wrap {
position: relative;
border-radius: 32px;
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.about-img {
width: 100%;
height: 480px;
background: url("https://images.pexels.com/photos/3939630/pexels-photo-3939630.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2")
center/cover no-repeat;
}
.about-badge {
position: absolute;
bottom: 24px;
right: 24px;
background: var(--secondary);
padding: 0.6rem 1.5rem;
font-weight: 700;
border-radius: 40px;
}
.section-subtitle {
color: var(--primary);
font-style: italic;
font-size: 1.1rem;
margin-bottom: 0.5rem;
}
.section-title {
font-size: 2.8rem;
margin-bottom: 1rem;
position: relative;
display: inline-block;
}
.section-title:after {
content: "";
display: block;
width: 70px;
height: 3px;
background: var(--secondary);
margin-top: 12px;
}
/* Menu */
.menu {
padding: var(--spacing-xxl) 0;
background: var(--off-white);
}
.menu-tabs {
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 2.5rem;
}
.menu-tab {
padding: 0.5rem 1.2rem;
background: white;
border-radius: 40px;
font-weight: 500;
cursor: pointer;
transition: 0.2s;
box-shadow: var(--shadow-sm);
}
.menu-tab.active,
.menu-tab:hover {
background: var(--primary);
color: white;
}
.menu-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
gap: 2rem;
}
.menu-card {
background: white;
border-radius: 24px;
overflow: hidden;
transition: var(--transition-normal);
box-shadow: var(--shadow-sm);
}
.menu-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-md);
}
.menu-card-img {
height: 210px;
background: url("https://images.pexels.com/photos/3219547/pexels-photo-3219547.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2")
center/cover no-repeat;
}
.menu-card-content {
padding: 1.5rem;
}
.price {
font-size: 1.6rem;
font-weight: 700;
color: var(--primary);
font-family: var(--font-heading);
}
.add-btn {
background: var(--primary);
color: white;
width: 42px;
height: 42px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: 0.2s;
}
/* Specials */
.specials {
padding: var(--spacing-xxl) 0;
background: var(--dark);
color: white;
}
.special-card {
background: rgba(255, 255, 255, 0.05);
border-radius: 28px;
padding: 2rem;
backdrop-filter: blur(4px);
transition: 0.25s;
}
/* Testimonials */
.testimonials {
padding: var(--spacing-xxl) 0;
background: white;
}
.testimonial-card {
background: var(--off-white);
border-radius: 28px;
padding: 2rem;
max-width: 800px;
margin: 0 auto;
}
/* Order Banner */
.order-banner {
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
padding: 3rem;
text-align: center;
color: white;
border-radius: 40px;
margin: var(--spacing-xl) auto;
}
/* Footer */
.footer {
background: #0f0f0f;
padding: 4rem 0 2rem;
color: #ccc;
}
@media (max-width: 992px) {
.nav-menu {
display: none;
}
.mobile-toggle {
display: flex;
}
.about-grid {
grid-template-columns: 1fr;
}
.hero-title {
font-size: 2.8rem;
}
}
</style>JavaScript
<script>
(function() {
const menuData = [
{ name: "Double Smash Blaze", category: "🍔 Smash Burgers", desc: "Two smashed patties, american cheese, caramelized onions, blaze sauce.", price: "$12.90", badge: "🔥 Best Seller" },
{ name: "Hot Honey Chicken", category: "🐓 Spicy Chicken", desc: "Crispy chicken, hot honey glaze, pickles, buttermilk bun.", price: "$11.50", badge: "New" },
{ name: "Loaded Bacon Fries", category: "🍟 Loaded Sides", desc: "Crispy fries, cheddar, bacon, jalapeños, ranch drizzle.", price: "$9.90", badge: "Cheesy" },
{ name: "Vegan Inferno Burger", category: "🍔 Smash Burgers", desc: "Plant-based patty, chipotle aioli, avocado, arugula.", price: "$13.20", badge: "Vegan" },
{ name: "Ghost Pepper Wings", category: "🐓 Spicy Chicken", desc: "6pc wings tossed in ghost pepper glaze + blue cheese dip.", price: "$10.90", badge: "🔥🔥" },
{ name: "Cookie Skillet", category: "🔥 All Items", desc: "Warm cookie dough, vanilla ice cream, caramel drizzle.", price: "$6.90", badge: "Sweet" }
];
const container = document.getElementById("menuGrid");
function renderMenu(filter = "🔥 All Items") {
let filtered = menuData;
if (filter === "🍔 Smash Burgers") filtered = menuData.filter(m => m.category === "🍔 Smash Burgers");
else if (filter === "🐓 Spicy Chicken") filtered = menuData.filter(m => m.category === "🐓 Spicy Chicken");
else if (filter === "🍟 Loaded Sides") filtered = menuData.filter(m => m.category === "🍟 Loaded Sides");
else filtered = menuData;
container.innerHTML = filtered.map(item => `
<div class="menu-card">
<div class="menu-card-img" style="background-image: url('https://images.pexels.com/photos/1633578/pexels-photo-1633578.jpeg?auto=compress&cs=tinysrgb&w=600&h=400&dpr=2'); background-size: cover;"></div>
<div class="menu-card-content">
<div style="display: flex; justify-content: space-between; align-items: start;">
<div><span style="background: #f0f0f0; padding: 0.2rem 0.7rem; border-radius: 40px; font-size: 0.7rem; font-weight:600">${item.badge}</span></div>
<div class="price">${item.price}</div>
</div>
<h3 style="margin: 10px 0 4px">${item.name}</h3>
<p style="color: var(--medium-gray); font-size: 0.85rem; margin-bottom: 1rem">${item.desc}</p>
<div style="display: flex; justify-content: space-between; align-items: center">
<span style="font-size: 0.8rem">${item.category}</span>
<div class="add-btn"><i class="fas fa-plus"></i></div>
</div>
</div>
</div>
`).join('');
attachCartEvents();
}
function attachCartEvents() {
const btns = document.querySelectorAll(".add-btn");
const cartSpan = document.querySelector(".cart-count");
let count = parseInt(cartSpan.innerText);
btns.forEach(btn => {
btn.removeEventListener("click", handleCartClick);
btn.addEventListener("click", handleCartClick);
});
function handleCartClick(e) {
e.stopPropagation();
count++;
cartSpan.innerText = count;
btn.style.transform = "scale(1.2)";
setTimeout(() => { if(btn) btn.style.transform = ""; }, 200);
}
}
renderMenu();
const tabs = document.querySelectorAll(".menu-tab");
tabs.forEach(tab => {
tab.addEventListener("click", () => {
tabs.forEach(t => t.classList.remove("active"));
tab.classList.add("active");
renderMenu(tab.innerText.trim());
});
});
const header = document.querySelector(".header");
window.addEventListener("scroll", () => {
if(window.scrollY > 60) header.classList.add("scrolled");
else header.classList.remove("scrolled");
});
const mobileToggle = document.querySelector(".mobile-toggle");
const navMenu = document.querySelector(".nav-menu");
mobileToggle?.addEventListener("click", () => {
mobileToggle.classList.toggle("active");
if(navMenu.style.display === "flex") navMenu.style.display = "none";
else navMenu.style.display = "flex";
if(window.innerWidth <= 992) navMenu.style.flexDirection = "column";
});
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener("click", function(e) {
const hash = this.getAttribute("href");
if(hash === "#") return;
const target = document.querySelector(hash);
if(target) {
e.preventDefault();
window.scrollTo({ top: target.offsetTop - 80, behavior: "smooth" });
if(window.innerWidth <= 992 && navMenu.style.display === "flex") navMenu.style.display = "none";
}
});
});
})();
</script>