<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>iTz Crackin 330 — Where Flavor Hits Different</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:ital,wght@0,400;0,600;0,700;0,800;0,900;1,700&family=Barlow:wght@400;500;600&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
```
:root {
--black: #0c0806;
--deep: #160e08;
--card: #1c110a;
--brick: #8b2010;
--brick-lt: #b32a14;
--gold: #c8880a;
--gold-lt: #f0aa20;
--gold-pale:#ffd97a;
--silver: #c8cdd4;
--silver-lt:#edf0f3;
--white: #faf5ee;
--muted: #8a7060;
--border: #2a1a10;
--orange: #d45a10;
}
html { scroll-behavior: smooth; }
body {
background: var(--black);
color: var(--white);
font-family: 'Barlow', sans-serif;
overflow-x: hidden;
}
/* ═══════════════════════════════
NAV
═══════════════════════════════ */
nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 200;
display: flex; align-items: center; justify-content: space-between;
padding: 12px 18px;
background: rgba(12,8,6,0.95);
backdrop-filter: blur(16px);
border-bottom: 2px solid var(--brick);
}
.nav-brand {
display: flex; flex-direction: column; line-height: 1;
text-decoration: none;
}
.nav-brand .top {
font-family: 'Bebas Neue', sans-serif;
font-size: 1.1rem;
letter-spacing: 0.08em;
background: linear-gradient(135deg, var(--silver-lt), var(--silver));
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.nav-brand .bot {
font-family: 'Bebas Neue', sans-serif;
font-size: 1.4rem;
letter-spacing: 0.06em;
background: linear-gradient(135deg, var(--gold-pale), var(--gold-lt), var(--gold));
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.nav-right { display: flex; align-items: center; gap: 8px; }
.nav-phone {
font-family: 'Barlow Condensed', sans-serif;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--gold-lt);
text-decoration: none;
}
.nav-order {
background: linear-gradient(135deg, var(--brick-lt), var(--brick));
color: var(--white);
font-family: 'Barlow Condensed', sans-serif;
font-weight: 800;
font-size: 0.8rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 9px 16px;
text-decoration: none;
border-radius: 2px;
white-space: nowrap;
box-shadow: 0 2px 12px rgba(139,32,16,0.4);
transition: filter 0.15s;
}
.nav-order:hover { filter: brightness(1.15); }
/* ═══════════════════════════════
HERO
═══════════════════════════════ */
.hero {
min-height: 100svh;
display: flex; flex-direction: column;
justify-content: flex-end;
padding: 80px 20px 44px;
position: relative; overflow: hidden;
}
.hero-bg {
position: absolute; inset: 0;
background: linear-gradient(160deg, #1a0800 0%, #0c0806 55%, #180c04 100%);
}
/* Brick wall effect */
.hero-wall {
position: absolute; inset: 0;
background-image:
repeating-linear-gradient(0deg, transparent, transparent 32px, rgba(100,20,8,0.15) 32px, rgba(100,20,8,0.15) 34px),
repeating-linear-gradient(90deg, transparent, transparent 66px, rgba(100,20,8,0.07) 66px, rgba(100,20,8,0.07) 68px);
pointer-events: none;
}
/* Sauce drip decoration */
.hero-glow {
position: absolute;
top: -10%; left: 50%; transform: translateX(-50%);
width: 70%; height: 60%;
background: radial-gradient(ellipse, rgba(139,32,16,0.25) 0%, transparent 70%);
pointer-events: none;
}
.hero-logo-img {
position: absolute;
top: 0; left: 0; right: 0;
height: 55%;
object-fit: cover;
object-position: center top;
width: 100%;
opacity: 0.9;
mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}
.hero-content {
position: relative; z-index: 2;
animation: fadeUp 0.7s 0.2s ease both;
}
.hero-tagline {
font-family: 'Barlow Condensed', sans-serif;
font-size: clamp(1rem, 4.5vw, 1.4rem);
font-weight: 800;
font-style: italic;
letter-spacing: 0.06em;
text-transform: uppercase;
background: linear-gradient(90deg, var(--gold-pale), var(--gold-lt));
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
margin-bottom: 8px;
}
.hero-headline {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(3.8rem, 18vw, 8rem);
line-height: 0.88;
letter-spacing: 0.02em;
}
.hero-headline .silver {
display: block;
background: linear-gradient(180deg, var(--silver-lt) 0%, var(--silver) 60%, #909499 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
filter: drop-shadow(0 2px 10px rgba(0,0,0,0.9));
}
.hero-headline .gold {
display: block;
background: linear-gradient(180deg, var(--gold-pale) 0%, var(--gold-lt) 40%, var(--gold) 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
filter: drop-shadow(0 3px 14px rgba(200,136,10,0.5));
}
.hero-sub {
font-family: 'Barlow Condensed', sans-serif;
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(250,245,238,0.55);
margin-top: 10px;
}
.hero-ctas {
display: flex; gap: 10px; flex-wrap: wrap;
margin-top: 28px;
}
.btn-fire {
background: linear-gradient(135deg, var(--brick-lt), var(--brick));
color: var(--white);
font-family: 'Barlow Condensed', sans-serif;
font-weight: 800;
font-size: 1rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 14px 28px;
text-decoration: none;
border-radius: 2px;
box-shadow: 0 4px 20px rgba(139,32,16,0.5);
transition: filter 0.15s, transform 0.15s;
display: inline-block;
}
.btn-fire:hover { filter: brightness(1.15); transform: translateY(-2px); }
.btn-gold {
background: linear-gradient(135deg, var(--gold-lt), var(--gold));
color: var(--black);
font-family: 'Barlow Condensed', sans-serif;
font-weight: 800;
font-size: 1rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 14px 28px;
text-decoration: none;
border-radius: 2px;
box-shadow: 0 4px 20px rgba(200,136,10,0.35);
transition: filter 0.15s, transform 0.15s;
display: inline-block;
}
.btn-gold:hover { filter: brightness(1.1); transform: translateY(-2px); }
/* Delivery badge */
.delivery-badge {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(139,32,16,0.25);
border: 1px solid var(--brick);
padding: 8px 16px;
border-radius: 2px;
margin-top: 20px;
font-family: 'Barlow Condensed', sans-serif;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gold-lt);
}
/* ═══════════════════════════════
MARQUEE
═══════════════════════════════ */
.marquee {
background: linear-gradient(90deg, var(--brick) 0%, var(--brick-lt) 50%, var(--brick) 100%);
padding: 11px 0; overflow: hidden;
}
.marquee-track {
display: inline-flex; white-space: nowrap;
animation: slide 20s linear infinite;
}
.marquee-track span {
font-family: 'Bebas Neue', sans-serif;
font-size: 1.05rem;
letter-spacing: 0.12em;
color: var(--white);
padding: 0 20px;
}
.marquee-track .sep { color: var(--gold-lt); }
/* ═══════════════════════════════
INFO STRIP
═══════════════════════════════ */
.info-strip {
background: var(--deep);
border-bottom: 1px solid var(--border);
display: grid;
grid-template-columns: 1fr 1fr;
}
.info-cell {
padding: 20px 18px;
border-right: 1px solid var(--border);
text-align: center;
}
.info-cell:last-child { border-right: none; }
.info-cell .ic-label {
font-family: 'Barlow Condensed', sans-serif;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 5px;
}
.info-cell .ic-val {
font-family: 'Bebas Neue', sans-serif;
font-size: 1.1rem;
letter-spacing: 0.06em;
color: var(--gold-lt);
}
.info-cell .ic-val a { color: inherit; text-decoration: none; }
/* ═══════════════════════════════
SECTION COMMON
═══════════════════════════════ */
.menu-section { padding: 60px 0 0; }
.menu-section:last-of-type { padding-bottom: 80px; }
.sec-header {
padding: 0 18px 28px;
display: flex; align-items: flex-end; gap: 14px;
}
.sec-icon {
font-size: 2.2rem;
line-height: 1;
flex-shrink: 0;
}
.sec-title {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(2.4rem, 9vw, 4rem);
line-height: 0.9;
letter-spacing: 0.02em;
}
.sec-title .gold {
display: block;
background: linear-gradient(135deg, var(--gold-pale), var(--gold-lt), var(--gold));
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.sec-title .silver {
display: block;
background: linear-gradient(135deg, var(--silver-lt), var(--silver));
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.sec-sub {
font-family: 'Barlow Condensed', sans-serif;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
margin-top: 4px;
}
/* ═══════════════════════════════
MENU ITEMS — CARD STYLE
═══════════════════════════════ */
.menu-cards {
display: flex; flex-direction: column; gap: 2px;
}
.menu-item {
display: flex; align-items: center;
background: var(--card);
padding: 16px 18px;
gap: 14px;
transition: background 0.2s;
position: relative;
overflow: hidden;
}
.menu-item::before {
content: '';
position: absolute; left: 0; top: 0; bottom: 0;
width: 3px;
background: linear-gradient(180deg, var(--gold-lt), var(--gold));
transform: scaleY(0);
transition: transform 0.25s ease;
transform-origin: bottom;
}
.menu-item:hover { background: #221410; }
.menu-item:hover::before { transform: scaleY(1); }
.menu-item.featured {
background: linear-gradient(135deg, #221008, #1a0c06);
border: 1px solid rgba(200,136,10,0.25);
}
.menu-item.featured::before {
background: linear-gradient(180deg, var(--brick-lt), var(--brick));
}
.item-num {
font-family: 'Bebas Neue', sans-serif;
font-size: 1.4rem;
color: var(--muted);
min-width: 28px;
line-height: 1;
flex-shrink: 0;
}
.item-body { flex: 1; }
.item-name {
font-family: 'Barlow Condensed', sans-serif;
font-size: 1.1rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--white);
line-height: 1.2;
}
.item-note {
font-size: 0.78rem;
color: var(--muted);
margin-top: 2px;
font-style: italic;
}
.item-badges {
display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap;
}
.badge {
font-family: 'Barlow Condensed', sans-serif;
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 2px 7px;
border-radius: 2px;
}
.badge-new { background: var(--brick); color: var(--white); }
.badge-hot { background: var(--orange); color: var(--white); }
.badge-fav { background: rgba(200,136,10,0.2); color: var(--gold-lt); border: 1px solid rgba(200,136,10,0.3); }
.item-price {
font-family: 'Bebas Neue', sans-serif;
font-size: 1.6rem;
line-height: 1;
background: linear-gradient(135deg, var(--gold-lt), var(--gold));
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
flex-shrink: 0;
}
/* ═══════════════════════════════
FEATURED / HERO ITEMS
═══════════════════════════════ */
.feature-card {
margin: 0 0 2px;
background: linear-gradient(135deg, #2a1006, #1c0c04);
border-top: 3px solid var(--gold);
padding: 28px 18px;
position: relative;
overflow: hidden;
}
.feature-card::after {
content: '';
position: absolute; inset: 0;
background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(200,136,10,0.08) 0%, transparent 70%);
pointer-events: none;
}
.feature-tag {
display: inline-block;
font-family: 'Barlow Condensed', sans-serif;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--black);
background: linear-gradient(135deg, var(--gold-lt), var(--gold));
padding: 4px 12px;
margin-bottom: 14px;
}
.feature-name {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(2.2rem, 8vw, 3.2rem);
letter-spacing: 0.03em;
line-height: 0.95;
background: linear-gradient(135deg, var(--silver-lt), var(--silver));
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.feature-price {
font-family: 'Bebas Neue', sans-serif;
font-size: 3rem;
line-height: 1;
background: linear-gradient(135deg, var(--gold-pale), var(--gold-lt), var(--gold));
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
margin-top: 4px;
}
.feature-desc {
font-family: 'Barlow Condensed', sans-serif;
font-size: 0.88rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
line-height: 1.5;
margin-top: 10px;
max-width: 420px;
}
/* ═══════════════════════════════
SECTION DIVIDER
═══════════════════════════════ */
.sec-divider {
height: 3px;
background: linear-gradient(90deg, transparent, var(--brick), transparent);
margin: 0;
}
/* ═══════════════════════════════
BYOB GRID
═══════════════════════════════ */
.byob-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
}
.byob-item {
background: var(--card);
padding: 13px 16px;
display: flex; align-items: center; justify-content: space-between;
gap: 8px;
transition: background 0.2s;
}
.byob-item:hover { background: #221410; }
.byob-item .bi-name {
font-family: 'Barlow Condensed', sans-serif;
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--silver);
line-height: 1.2;
}
.byob-item .bi-badge {
font-size: 0.6rem;
color: var(--gold-lt);
}
.byob-item .bi-price {
font-family: 'Bebas Neue', sans-serif;
font-size: 1.3rem;
background: linear-gradient(135deg, var(--gold-lt), var(--gold));
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
flex-shrink: 0;
}
/* ═══════════════════════════════
ORDER CTA BLOCK
═══════════════════════════════ */
.order-block {
background: linear-gradient(135deg, var(--brick) 0%, #5a1008 100%);
padding: 48px 20px;
text-align: center;
position: relative; overflow: hidden;
}
.order-block::before {
content: '';
position: absolute; inset: 0;
background-image:
repeating-linear-gradient(0deg, transparent, transparent 28px, rgba(0,0,0,0.15) 28px, rgba(0,0,0,0.15) 30px),
repeating-linear-gradient(90deg, transparent, transparent 58px, rgba(0,0,0,0.08) 58px, rgba(0,0,0,0.08) 60px);
}
.order-block > * { position: relative; z-index: 1; }
.order-title {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(2.2rem, 9vw, 4rem);
letter-spacing: 0.04em;
line-height: 0.95;
color: var(--white);
margin-bottom: 6px;
}
.order-title span {
background: linear-gradient(135deg, var(--gold-pale), var(--gold-lt));
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.order-sub {
font-family: 'Barlow Condensed', sans-serif;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(250,245,238,0.6);
margin-bottom: 28px;
}
.order-phone {
display: block;
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(2.5rem, 11vw, 4.5rem);
letter-spacing: 0.06em;
background: linear-gradient(135deg, var(--gold-pale), var(--gold-lt));
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
text-decoration: none;
margin-bottom: 6px;
filter: drop-shadow(0 2px 10px rgba(200,136,10,0.3));
}
.order-note {
font-family: 'Barlow Condensed', sans-serif;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(250,245,238,0.5);
margin-bottom: 32px;
}
.order-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-white {
background: var(--white);
color: var(--black);
font-family: 'Barlow Condensed', sans-serif;
font-weight: 800;
font-size: 0.95rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 14px 28px;
text-decoration: none;
border-radius: 2px;
transition: filter 0.15s;
}
.btn-white:hover { filter: brightness(0.92); }
.delivery-area {
margin-top: 24px;
font-family: 'Barlow Condensed', sans-serif;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(250,245,238,0.45);
}
/* ═══════════════════════════════
FOOTER
═══════════════════════════════ */
footer {
background: #080504;
border-top: 1px solid var(--border);
padding: 36px 20px 28px;
text-align: center;
}
.footer-logo {
font-family: 'Bebas Neue', sans-serif;
font-size: 1.6rem; letter-spacing: 0.06em;
}
.footer-logo .s {
background: linear-gradient(135deg, var(--silver-lt), var(--silver));
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.footer-logo .g {
background: linear-gradient(135deg, var(--gold-lt), var(--gold));
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.footer-tagline {
font-family: 'Barlow Condensed', sans-serif;
font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--muted);
margin: 6px 0 20px;
}
.footer-links {
display: flex; justify-content: center; gap: 20px;
flex-wrap: wrap; margin-bottom: 16px;
}
.footer-links a {
font-family: 'Barlow Condensed', sans-serif;
font-size: 0.78rem; font-weight: 600;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--muted); text-decoration: none;
}
.footer-links a:hover { color: var(--gold-lt); }
.footer-copy { font-size: 0.7rem; color: #3a2820; }
/* Sticky mobile order bar */
.sticky-order {
position: fixed; bottom: 0; left: 0; right: 0; z-index: 199;
display: flex;
}
.sticky-order a {
flex: 1; text-align: center;
font-family: 'Bebas Neue', sans-serif;
font-size: 1.15rem; letter-spacing: 0.1em;
padding: 14px 10px;
text-decoration: none; transition: filter 0.15s;
}
.sticky-order .so-call {
background: linear-gradient(135deg, var(--gold-lt), var(--gold));
color: var(--black);
}
.sticky-order .so-menu {
background: linear-gradient(135deg, var(--brick-lt), var(--brick));
color: var(--white);
}
.sticky-order a:hover { filter: brightness(1.1); }
/* ═══════════════════════════════
SCROLL REVEAL
═══════════════════════════════ */
.reveal {
opacity: 0; transform: translateY(18px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
/* ═══════════════════════════════
ANIMATIONS
═══════════════════════════════ */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* Desktop */
@media (min-width: 700px) {
nav { padding: 14px 40px; }
.hero { padding: 100px 40px 72px; }
.menu-section { padding: 72px 0 0; }
.sec-header { padding: 0 40px 32px; }
.menu-item { padding: 18px 40px; }
.feature-card { padding: 36px 40px; }
.byob-grid { grid-template-columns: repeat(3, 1fr); }
.byob-item { padding: 16px 20px; }
.order-block { padding: 72px 40px; }
.sticky-order { display: none; }
footer { padding: 48px 40px 36px; }
}
@media (max-width: 699px) {
body { padding-bottom: 52px; }
}
```
</style>
</head>
<body>
<!-- NAV -->
<nav>
<a class="nav-brand" href="#">
<span class="top">★ iTz Crackin ★</span>
<span class="bot">330</span>
</a>
<div class="nav-right">
<a class="nav-phone" href="tel:3303148038">📞 330.314.8038</a>
<a class="nav-order" href="#order">Order Now</a>
</div>
</nav>
<!-- HERO -->
<div class="hero">
<div class="hero-bg"></div>
<div class="hero-wall"></div>
<div class="hero-glow"></div>
<img class="hero-logo-img"
src="https://itzcrackin330.com/wp-content/uploads/2025/09/image3484-768x768.png"
alt="iTz Crackin 330 Logo" />
<div class="hero-content">
<div class="hero-tagline">★ Where Flavor Hits Different ★</div>
<h1 class="hero-headline">
<span class="silver">iTz</span>
<span class="silver">Crackin</span>
<span class="gold">330</span>
</h1>
<p class="hero-sub">Seafood Boils · Gritz · Rice · Noodlez</p>
<div class="hero-ctas">
<a href="#menu" class="btn-fire">See the Menu</a>
<a href="tel:3303148038" class="btn-gold">Call to Order</a>
</div>
<div class="delivery-badge">
🚗 Delivery Only · Youngstown · Sharon · Farrell · Warren
</div>
</div>
</div>
<!-- MARQUEE -->
<div class="marquee">
<div class="marquee-track">
<span>Boss Bagz</span><span class="sep">★</span>
<span>CEO Bagz — $100</span><span class="sep">★</span>
<span>Crackin' Cupz</span><span class="sep">★</span>
<span>Gritz</span><span class="sep">★</span>
<span>Delivery Only</span><span class="sep">★</span>
<span>Pre-Orders Recommended</span><span class="sep">★</span>
<span>Text/Call 330.314.8038</span><span class="sep">★</span>
<span>We Cater!</span><span class="sep">★</span>
<!-- duplicate -->
<span>Boss Bagz</span><span class="sep">★</span>
<span>CEO Bagz — $100</span><span class="sep">★</span>
<span>Crackin' Cupz</span><span class="sep">★</span>
<span>Gritz</span><span class="sep">★</span>
<span>Delivery Only</span><span class="sep">★</span>
<span>Pre-Orders Recommended</span><span class="sep">★</span>
<span>Text/Call 330.314.8038</span><span class="sep">★</span>
<span>We Cater!</span><span class="sep">★</span>
</div>
</div>
<!-- INFO STRIP -->
<div class="info-strip">
<div class="info-cell">
<div class="ic-label">Text / Call</div>
<div class="ic-val"><a href="tel:3303148038">330.314.8038</a></div>
</div>
<div class="info-cell">
<div class="ic-label">Ordering</div>
<div class="ic-val">Pre-Orders Rec.</div>
</div>
<div class="info-cell">
<div class="ic-label">Service</div>
<div class="ic-val">Delivery Only 🚗</div>
</div>
<div class="info-cell">
<div class="ic-label">Payment</div>
<div class="ic-val">All Major Cards</div>
</div>
</div>
<!-- ══════════════════════════════
MENU
══════════════════════════════ -->
<div id="menu">
```
<!-- CEO BAGZ — FEATURED -->
<section class="menu-section">
<div class="sec-header reveal">
<div class="sec-icon">👑</div>
<div>
<div class="sec-title"><span class="gold">CEO</span><span class="silver"> Bagz</span></div>
<div class="sec-sub">The bag that runs the table</div>
</div>
</div>
<div class="feature-card reveal">
<div class="feature-tag">★ Signature Item ★</div>
<div class="feature-name">CEO Bagz</div>
<div class="feature-price">$100</div>
<div class="feature-desc">
A pound of shrimp · Snow crab legs · Potatoes · Sausage · Broccoli · 2 Lobster tails · 3 Corns · 4 Eggs
<br><br>Drenched in sauce. Filled with flavor. For the Boss of Bosses.
</div>
</div>
</section>
<div class="sec-divider"></div>
<!-- BOSS BAGZ -->
<section class="menu-section">
<div class="sec-header reveal">
<div class="sec-icon">🦐</div>
<div>
<div class="sec-title"><span class="silver">Boss</span><span class="gold"> Bagz</span></div>
<div class="sec-sub">Full pound · 2 Eggs, 3 Corns and Potatoes</div>
</div>
</div>
<div class="menu-cards">
<div class="menu-item reveal">
<div class="item-num">01</div>
<div class="item-body"><div class="item-name">Sausage</div></div>
<div class="item-price">$20</div>
</div>
<div class="menu-item reveal">
<div class="item-num">02</div>
<div class="item-body">
<div class="item-name">Veggie</div>
<div class="item-badges"><span class="badge badge-new">New</span></div>
</div>
<div class="item-price">$24</div>
</div>
<div class="menu-item reveal">
<div class="item-num">03</div>
<div class="item-body"><div class="item-name">Shrimp</div></div>
<div class="item-price">$30</div>
</div>
<div class="menu-item featured reveal">
<div class="item-num">04</div>
<div class="item-body">
<div class="item-name">Lobster + Shrimp</div>
<div class="item-badges"><span class="badge badge-fav">♥ Fan Fav</span></div>
</div>
<div class="item-price">$40</div>
</div>
<div class="menu-item reveal">
<div class="item-num">05</div>
<div class="item-body"><div class="item-name">Crab + Shrimp</div></div>
<div class="item-price">$55</div>
</div>
</div>
</section>
<div class="sec-divider"></div>
<!-- LIL BOSS BAGZ -->
<section class="menu-section">
<div class="sec-header reveal">
<div class="sec-icon">🦀</div>
<div>
<div class="sec-title"><span class="silver">Lil Boss</span><span class="gold"> Bagz</span></div>
<div class="sec-sub">Half pound · 1 Egg, 2 Corns and Potatoes</div>
</div>
</div>
<div class="menu-cards">
<div class="menu-item reveal">
<div class="item-num">06</div>
<div class="item-body"><div class="item-name">Shrimp</div></div>
<div class="item-price">$20</div>
</div>
<div class="menu-item featured reveal">
<div class="item-num">07</div>
<div class="item-body">
<div class="item-name">Crab + Shrimp</div>
<div class="item-badges"><span class="badge badge-fav">♥ Fan Fav</span></div>
</div>
<div class="item-price">$35</div>
</div>
</div>
</section>
<div class="sec-divider"></div>
<!-- CRACKIN' CUPZ -->
<section class="menu-section">
<div class="sec-header reveal">
<div class="sec-icon">🥤</div>
<div>
<div class="sec-title"><span class="gold">Crackin'</span><span class="silver"> Cupz</span></div>
<div class="sec-sub">Boilz in a cup — on the go!</div>
</div>
</div>
<div class="feature-card reveal" style="border-top-color:var(--brick-lt);">
<div class="feature-tag" style="background:linear-gradient(135deg,var(--brick-lt),var(--brick));color:var(--white);">🔥 On The Go</div>
<div class="feature-name">Crackin' Cupz</div>
<div class="feature-price">$25</div>
<div class="feature-desc">
Peeled shrimp · Sausage · Broccoli · 1 Corn · 1 Egg · Potatoes
</div>
</div>
</section>
<div class="sec-divider"></div>
<!-- GRITZ -->
<section class="menu-section">
<div class="sec-header reveal">
<div class="sec-icon">🌶️</div>
<div>
<div class="sec-title"><span class="gold">Gritz</span></div>
</div>
</div>
<div class="menu-cards">
<div class="menu-item reveal">
<div class="item-num">19</div>
<div class="item-body"><div class="item-name">Sausage Gritz</div></div>
<div class="item-price">$12</div>
</div>
<div class="menu-item reveal">
<div class="item-num">20</div>
<div class="item-body">
<div class="item-name">Shrimp Gritz</div>
<div class="item-badges"><span class="badge badge-fav">♥ Fan Fav</span></div>
</div>
<div class="item-price">$15</div>
</div>
<div class="menu-item reveal">
<div class="item-num">21</div>
<div class="item-body"><div class="item-name">Lobster Gritz</div></div>
<div class="item-price">$25</div>
</div>
</div>
</section>
<div class="sec-divider"></div>
<!-- CRACKIN RICE / NOODLEZ -->
<section class="menu-section">
<div class="sec-header reveal">
<div class="sec-icon">🍜</div>
<div>
<div class="sec-title"><span class="silver">Crackin' Rice</span></div>
<div class="sec-title"><span class="gold">/ Noodlez</span></div>
</div>
</div>
<div class="menu-cards">
<div class="menu-item reveal">
<div class="item-num">22</div>
<div class="item-body"><div class="item-name">Sausage</div></div>
<div class="item-price">$12</div>
</div>
<div class="menu-item reveal">
<div class="item-num">23</div>
<div class="item-body"><div class="item-name">Shrimp</div></div>
<div class="item-price">$15</div>
</div>
<div class="menu-item reveal">
<div class="item-num">24</div>
<div class="item-body">
<div class="item-name">Crawfish</div>
<div class="item-badges"><span class="badge badge-new">New</span></div>
</div>
<div class="item-price">$18</div>
</div>
<div class="menu-item reveal">
<div class="item-num">25</div>
<div class="item-body"><div class="item-name">Plain Rice</div></div>
<div class="item-price">$5</div>
</div>
<div class="menu-item reveal">
<div class="item-num">26</div>
<div class="item-body"><div class="item-name">Plain Noodles</div></div>
<div class="item-price">$4</div>
</div>
</div>
</section>
<div class="sec-divider"></div>
<!-- B.Y.O.B. -->
<section class="menu-section">
<div class="sec-header reveal">
<div class="sec-icon">🌽</div>
<div>
<div class="sec-title"><span class="gold">B.Y.O.B.</span></div>
<div class="sec-sub">Build Your Own Bag — add-ons</div>
</div>
</div>
<div class="byob-grid">
<div class="byob-item reveal">
<div><div class="bi-name">Corn</div></div>
<div class="bi-price">$2</div>
</div>
<div class="byob-item reveal">
<div><div class="bi-name">Egg</div></div>
<div class="bi-price">$2</div>
</div>
<div class="byob-item reveal">
<div><div class="bi-name">½ Potatoes</div></div>
<div class="bi-price">$3</div>
</div>
<div class="byob-item reveal">
<div><div class="bi-name">½ Broccoli <span class="bi-badge">NEW</span></div></div>
<div class="bi-price">$4</div>
</div>
<div class="byob-item reveal">
<div><div class="bi-name">½ Sausage <span class="bi-badge">♥</span></div></div>
<div class="bi-price">$5</div>
</div>
<div class="byob-item reveal">
<div><div class="bi-name">6 Shrimp</div></div>
<div class="bi-price">$5</div>
</div>
<div class="byob-item reveal">
<div><div class="bi-name">Mussel</div></div>
<div class="bi-price">$8</div>
</div>
<div class="byob-item reveal">
<div><div class="bi-name">6 Peeled Shrimp</div></div>
<div class="bi-price">$8</div>
</div>
<div class="byob-item reveal">
<div><div class="bi-name">½ Crawfish <span class="bi-badge">NEW</span></div></div>
<div class="bi-price">$10</div>
</div>
<div class="byob-item reveal">
<div><div class="bi-name">Cluster</div></div>
<div class="bi-price">$14</div>
</div>
<div class="byob-item reveal">
<div><div class="bi-name">Lobster Tail</div></div>
<div class="bi-price">$20</div>
</div>
</div>
</section>
```
</div><!-- /menu -->
<!-- ORDER CTA -->
<section id="order" class="order-block">
<div class="order-title">Ready to <span>Order?</span></div>
<div class="order-sub">Text or call — pre-orders recommended</div>
<a class="order-phone" href="tel:3303148038">330.314.8038</a>
<div class="order-note">All major credit cards accepted · We Cater!</div>
<div class="order-btns">
<a href="tel:3303148038" class="btn-gold">📞 Call Now</a>
<a href="sms:3303148038" class="btn-white">💬 Text Order</a>
<a href="mailto:Jjustice@iTzCrackin330.com" class="btn-fire">✉ Email Us</a>
</div>
<div class="delivery-area">
Delivery Areas: Youngstown 5 · Warren/Sharon/Farrell 10
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="footer-logo">
<span class="s">iTz Crackin </span><span class="g">330</span>
</div>
<div class="footer-tagline">Where Flavor Hits Different</div>
<div class="footer-links">
<a href="#">Home</a>
<a href="#menu">Menu</a>
<a href="#order">Order</a>
<a href="mailto:Jjustice@iTzCrackin330.com">Contact</a>
</div>
<div class="footer-copy">© 2026 iTzCrackin330.com — All rights reserved</div>
</footer>
<!-- STICKY MOBILE BAR -->
<div class="sticky-order">
<a href="tel:3303148038" class="so-call">📞 Call to Order</a>
<a href="#menu" class="so-menu">📋 See Menu</a>
</div>
<script>
// Scroll reveal
const io = new IntersectionObserver(entries => {
entries.forEach((e, i) => {
if (e.isIntersecting) {
e.target.style.transitionDelay = (i * 0.04) + 's';
e.target.classList.add('visible');
}
});
}, { threshold: 0.1 });
document.querySelectorAll('.reveal').forEach(el => io.observe(el));
</script>
</body>
</html>