Fresh Market Grocery Hero | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fresh Market Grocery</title>
  
</head>

<body>
    <section class="hero-section">
        <div class="hero-container">
            <div class="hero-content">
                <div class="hero-badge">
                    Fresh Quality Groceries Since 1998
                </div>

<h1 class="hero-title">
                    Fresh Food,<br>
                    <span class="highlight">Fresh Savings</span>
                </h1>

<p class="hero-subtitle">
                    Discover the freshest produce, premium quality meats, organic options, and everyday essentials at
                    unbeatable prices. Your neighborhood grocery store committed to bringing you the best selection and
                    value.
                </p>

<div class="grocery-categories">
                    <div class="category-item">
                        <div class="category-title">Fresh Produce</div>
                        <div class="category-desc">Farm-fresh fruits and vegetables daily</div>
                    </div>
                    <div class="category-item">
                        <div class="category-title">Premium Meats</div>
                        <div class="category-desc">Quality cuts from trusted suppliers</div>
                    </div>
                    <div class="category-item">
                        <div class="category-title">Dairy & Eggs</div>
                        <div class="category-desc">Fresh dairy products and free-range eggs</div>
                    </div>
                    <div class="category-item">
                        <div class="category-title">Bakery Fresh</div>
                        <div class="category-desc">Freshly baked bread and pastries</div>
                    </div>
                </div>

</div>

<div class="main-showcase">
                        <div class="showcase-frame">
                            <div class="showcase-content">
                                <div class="showcase-badge">
                                    Fresh Market Grocery
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</body>

</html>

CSS

body {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            overflow-x: hidden;
        }

.hero-section {
            min-height: 100vh;
            background: linear-gradient(135deg, #fff8e1 0%, #f3e5f5 30%, #e8f5e8 70%, #fff3e0 100%);
            position: relative;
            display: flex;
            align-items: center;
            padding: 2rem;
            overflow: hidden;
        }

.hero-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at 20% 30%, rgba(255, 152, 0, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(76, 175, 80, 0.06) 0%, transparent 50%);
            animation: gentleGlow 10s ease-in-out infinite;
        }

.hero-container {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1.2fr 1fr;
            gap: 6rem;
            align-items: center;
            width: 100%;
            z-index: 2;
            position: relative;
        }

.hero-content {
            animation: slideInLeft 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

.hero-badge {
            display: inline-flex;
            align-items: center;
            background: linear-gradient(135deg, rgba(255, 152, 0, 0.12) 0%, rgba(76, 175, 80, 0.08) 100%);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 152, 0, 0.25);
            padding: 0.8rem 2rem;
            border-radius: 50px;
            color: #e65100;
            font-size: 0.9rem;
            font-weight: 600;
            animation: fadeInUp 1s ease-out 0.3s both;
        }

.hero-badge::before {
            content: '';
            margin-right: 0.8rem;
            font-size: 1.1rem;
        }

.hero-title {
            font-size: 4rem;
            font-weight: 700;
            color: #1b5e20;
            line-height: 1.1;
            margin-bottom: 1rem;
            animation: fadeInUp 1.2s ease-out 0.5s both;
            letter-spacing: -0.02em;
        }

.hero-title .highlight {
            background: linear-gradient(135deg, #ff9800 0%, #4caf50 50%, #f44336 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

.hero-subtitle {
            font-size: 1rem;
            color: #2e7d32;
            line-height: 1.6;
            margin-bottom: 3rem;
            animation: fadeInUp 1.2s ease-out 0.7s both;
            max-width: 90%;
        }

.grocery-categories {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.2rem;
            margin-bottom: 3rem;
            animation: fadeInUp 1.2s ease-out 0.9s both;
        }

.category-item {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(255, 152, 0, 0.2);
            border-radius: 15px;
            padding: 1.2rem;
            transition: all 0.3s ease;
            cursor: pointer;
        }

.category-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(255, 152, 0, 0.15);
            background: rgba(255, 152, 0, 0.05);
        }

.category-title {
            font-size: 1rem;
            font-weight: 600;
            color: #e65100;
            margin-bottom: 0.3rem;
        }

.category-desc {
            font-size: 0.85rem;
            color: #2e7d32;
            line-height: 1.4;
        }

.hero-visual {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: slideInRight 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

.visual-container {
            position: relative;
            width: 100%;
            max-width: 500px;
            height: 600px;
        }

.main-showcase {
            width: 400px;
            height: 500px;
            position: relative;
            margin: 0 auto;
        }

.showcase-frame {
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 248, 225, 0.8) 100%);
            backdrop-filter: blur(30px);
            border: 2px solid rgba(255, 152, 0, 0.25);
            border-radius: 25px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 25px 60px rgba(255, 152, 0, 0.15);
            animation: gentleFloat 8s ease-in-out infinite;
        }

.showcase-content {
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 500"><defs><linearGradient id="floorGrad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%23f5f5f5;stop-opacity:1" /><stop offset="100%" style="stop-color:%23e0e0e0;stop-opacity:1" /></linearGradient><linearGradient id="shelfGrad" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:%23deb887;stop-opacity:1" /><stop offset="100%" style="stop-color:%23d2b48c;stop-opacity:1" /></linearGradient></defs><rect width="400" height="500" fill="%23fff8e1"/><rect x="0" y="400" width="400" height="100" fill="url(%23floorGrad)"/><rect x="30" y="200" width="340" height="200" fill="url(%23shelfGrad)" stroke="%23cd853f" stroke-width="2" rx="5"/><rect x="40" y="180" width="320" height="20" fill="%23ff9800" rx="10"/><rect x="50" y="220" width="80" height="60" fill="%23ffeb3b" stroke="%23ffc107" stroke-width="1" rx="5"/><circle cx="70" cy="235" r="8" fill="%23ff5722"/><circle cx="90" cy="235" r="8" fill="%23ff5722"/><circle cx="110" cy="235" r="8" fill="%23ff5722"/><circle cx="70" cy="255" r="8" fill="%23ff9800"/><circle cx="90" cy="255" r="8" fill="%23ff9800"/><circle cx="110" cy="255" r="8" fill="%23ff9800"/><rect x="140" y="220" width="80" height="60" fill="%23c8e6c9" stroke="%234caf50" stroke-width="1" rx="5"/><ellipse cx="160" cy="240" rx="8" ry="12" fill="%234caf50"/><ellipse cx="180" cy="240" rx="8" ry="12" fill="%234caf50"/><ellipse cx="200" cy="240" rx="8" ry="12" fill="%234caf50"/><ellipse cx="160" cy="260" rx="8" ry="12" fill="%2366bb6a"/><ellipse cx="180" cy="260" rx="8" ry="12" fill="%2366bb6a"/><ellipse cx="200" cy="260" rx="8" ry="12" fill="%2366bb6a"/><rect x="230" y="220" width="80" height="60" fill="%23f3e5f5" stroke="%23e91e63" stroke-width="1" rx="5"/><rect x="240" y="230" width="15" height="40" fill="%23e91e63" rx="2"/><rect x="260" y="230" width="15" height="40" fill="%23e91e63" rx="2"/><rect x="280" y="230" width="15" height="40" fill="%23e91e63" rx="2"/><rect x="320" y="220" width="40" height="60" fill="%23fff3e0" stroke="%23ff9800" stroke-width="1" rx="5"/><rect x="325" y="225" width="30" height="50" fill="%23ffcc02" rx="3"/><text x="340" y="255" text-anchor="middle" fill="%23e65100" font-size="8" font-weight="bold">MILK</text><rect x="50" y="300" width="80" height="80" fill="%23e8f5e8" stroke="%234caf50" stroke-width="1" rx="5"/><circle cx="70" cy="325" r="10" fill="%23f44336"/><circle cx="90" cy="325" r="10" fill="%23f44336"/><circle cx="110" cy="325" r="10" fill="%23f44336"/><circle cx="70" cy="350" r="10" fill="%23ff9800"/><circle cx="90" cy="350" r="10" fill="%23ff9800"/><circle cx="110" cy="350" r="10" fill="%23ff9800"/><circle cx="70" cy="365" r="8" fill="%23ffeb3b"/><circle cx="90" cy="365" r="8" fill="%23ffeb3b"/><circle cx="110" cy="365" r="8" fill="%23ffeb3b"/><rect x="140" y="300" width="80" height="80" fill="%23fff3e0" stroke="%23ff9800" stroke-width="1" rx="5"/><rect x="150" y="310" width="60" height="60" fill="%23ffcc02" rx="5"/><text x="180" y="345" text-anchor="middle" fill="%23e65100" font-size="10" font-weight="bold">BREAD</text><rect x="230" y="300" width="80" height="80" fill="%23f3e5f5" stroke="%23e91e63" stroke-width="1" rx="5"/><rect x="240" y="310" width="15" height="60" fill="%23e91e63" rx="2"/><rect x="260" y="310" width="15" height="60" fill="%23e91e63" rx="2"/><rect x="280" y="310" width="15" height="60" fill="%23e91e63" rx="2"/><rect x="320" y="300" width="40" height="80" fill="%23e1f5fe" stroke="%232196f3" stroke-width="1" rx="5"/><rect x="325" y="310" width="30" height="60" fill="%2364b5f6" rx="3"/><text x="340" y="345" text-anchor="middle" fill="%231976d2" font-size="8" font-weight="bold">WATER</text><rect x="150" y="420" width="100" height="15" fill="%23ffcc02" rx="7"/><text x="200" y="432" text-anchor="middle" fill="%23e65100" font-size="10" font-weight="bold">FRESH MARKET</text></svg>') center/cover;
            border-radius: 23px;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            padding-bottom: 2rem;
        }

.showcase-badge {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            padding: 1rem 2rem;
            border-radius: 25px;
            color: #e65100;
            font-weight: 700;
            font-size: 1rem;
            box-shadow: 0 10px 30px rgba(255, 152, 0, 0.2);
            animation: slideUpBadge 1s ease-out 2s both;
        }

@keyframes slideInLeft {
            from {
                opacity: 0;
                transform: translateX(-80px);
            }

to {
                opacity: 1;
                transform: translateX(0);
            }
        }

@keyframes slideInRight {
            from {
                opacity: 0;
                transform: translateX(80px);
            }

to {
                opacity: 1;
                transform: translateX(0);
            }
        }

@keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(40px);
            }

to {
                opacity: 1;
                transform: translateY(0);
            }
        }

@keyframes slideUpBadge {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

to {
                opacity: 1;
                transform: translateY(0);
            }
        }

@keyframes gentleFloat {

0%,
            100% {
                transform: translateY(0px);
            }

50% {
                transform: translateY(-15px);
            }
        }

@keyframes floatGrocery {

0%,
            100% {
                transform: translateY(0px) translateX(0px) rotate(0deg);
                opacity: 0;
            }

20%,
            80% {
                opacity: 1;
            }

50% {
                transform: translateY(-20px) translateX(8px) rotate(2deg);
                opacity: 1;
            }
        }

@keyframes gentleGlow {

0%,
            100% {
                opacity: 1;
            }

50% {
                opacity: 0.8;
            }
        }

@media (max-width: 1024px) {
            .hero-container {
                grid-template-columns: 1fr;
                gap: 3rem;
                text-align: center;
            }

.hero-title {
                font-size: 3.5rem;
            }

.main-showcase {
                width: 350px;
                height: 450px;
            }

.grocery-categories {
                grid-template-columns: 1fr;
            }

.hero-subtitle {
                max-width: 100%;
            }
        }

@media (max-width: 768px) {
            .hero-section {
                padding: 1rem;
            }

.hero-title {
                font-size: 2.8rem;
            }

.hero-subtitle {
                font-size: 1.1rem;
            }

.main-showcase {
                width: 300px;
                height: 400px;
            }

.visual-container {
                height: 450px;
            }
        }

@media (max-width: 480px) {
            .hero-title {
                font-size: 2.2rem;
            }

.main-showcase {
                width: 250px;
                height: 350px;
            }

.visual-container {
                height: 400px;
            }
        }

JavaScript

Fresh Market Grocery Hero Preview

Download Options