Bento Grid Service

rohit
Feb 13, 2026 4
Live Preview

Live Editor

 <section class="bento-section">
        <!-- Background Grid -->
        <div class="grid-overlay"></div>

        <!-- Floating Particles -->
        <div class="particles-container">
            <div class="particle-dot"></div>
            <div class="particle-dot"></div>
            <div class="particle-dot"></div>
            <div class="particle-dot"></div>
            <div class="particle-dot"></div>
            <div class="particle-dot"></div>
        </div>

        <div class="container">
            <!-- Section Header -->
            <div class="section-header">
                <div class="header-tag">
                    Featured Solutions
                </div>
                <h2 class="section-title">
                    Everything You Need in <br>
                    <span class="title-gradient">One Place</span>
                </h2>
                <p class="section-description">
                    Powerful features designed to help you build, grow, and scale your business with ease
                </p>
            </div>

            <!-- Bento Grid -->
            <div class="bento-grid">
                <!-- Large Card -->
                <div class="bento-card card-large">
                    <div class="sparkle-effect">✨</div>
                    <div class="card-icon">🚀</div>
                    <h3 class="card-title">Lightning Fast Performance</h3>
                    <p class="card-description">
                        Experience blazing-fast load times with our optimized infrastructure. 
                        Built for speed, designed for scale.
                    </p>
                    <div class="card-stats">
                        <div class="stat-item">
                            <span class="stat-value">99.9%</span>
                            <span class="stat-label">Uptime</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-value">< 100ms</span>
                            <span class="stat-label">Response Time</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-value">10M+</span>
                            <span class="stat-label">Requests/Day</span>
                        </div>
                    </div>
                    <div class="visual-circle"></div>
                </div>

                <!-- Medium Card -->
                <div class="bento-card card-medium">
                    <div class="card-icon">🔒</div>
                    <h3 class="card-title">Enterprise Security</h3>
                    <p class="card-description">
                        Bank-level encryption and security protocols to keep your data safe.
                    </p>
                    <div class="tag-list">
                        <span class="tag">SSL/TLS</span>
                        <span class="tag">2FA</span>
                        <span class="tag">SOC 2</span>
                    </div>
                </div>

                <!-- Small Cards -->
                <div class="bento-card card-small">
                    <div class="card-icon">🎨</div>
                    <h3 class="card-title">Beautiful UI</h3>
                    <p class="card-description">
                        Modern, clean interfaces that users love.
                    </p>
                </div>

                <div class="bento-card card-small">
                    <div class="card-icon">📱</div>
                    <h3 class="card-title">Mobile First</h3>
                    <p class="card-description">
                        Optimized for all devices and screen sizes.
                    </p>
                </div>

                <!-- Wide Card with Code -->
                <div class="bento-card card-wide">
                    <div class="card-icon">💻</div>
                    <h3 class="card-title">Developer Friendly</h3>
                    <p class="card-description">
                        Simple APIs and comprehensive documentation
                    </p>
                    <div class="code-block">
                        <div class="code-line">
                            <span class="code-keyword">const</span> <span class="code-string">response</span> = <span class="code-keyword">await</span> fetch(<span class="code-string">'/api/data'</span>);
                        </div>
                        <div class="code-line">
                            <span class="code-keyword">const</span> data = <span class="code-keyword">await</span> response.json();
                        </div>
                        <div class="code-line">
                            <span class="code-comment">// Easy integration ✨</span>
                        </div>
                    </div>
                </div>

                <!-- Wide Card with CTA -->
                <div class="bento-card card-wide">
                    <div class="card-icon">⚡</div>
                    <h3 class="card-title">Real-time Analytics</h3>
                    <p class="card-description">
                        Track performance with live dashboards and detailed insights. 
                        Make data-driven decisions instantly.
                    </p>
                    <a href="#" class="card-cta">
                        View Dashboard
                    </a>
                </div>
            </div>
        </div>
    </section>
 * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'DM Sans', sans-serif;
            background: #000000;
            color: white;
            overflow-x: hidden;
        }

        /* Main Section */
        .bento-section {
            min-height: 100vh;
            padding: 120px 60px;
            background: radial-gradient(circle at 50% 0%, #1a1a2e 0%, #000000 100%);
            position: relative;
        }

        /* Animated Background Grid */
        .grid-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                linear-gradient(rgba(99, 102, 241, 0.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(99, 102, 241, 0.05) 1px, transparent 1px);
            background-size: 60px 60px;
            pointer-events: none;
            opacity: 0.5;
        }

        /* Floating Particles */
        .particles-container {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
            pointer-events: none;
        }

        .particle-dot {
            position: absolute;
            width: 4px;
            height: 4px;
            background: #6366f1;
            border-radius: 50%;
            opacity: 0.6;
            box-shadow: 0 0 10px #6366f1;
            animation: particleFloat 8s infinite ease-in-out;
        }

        .particle-dot:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; }
        .particle-dot:nth-child(2) { top: 40%; left: 30%; animation-delay: 1s; }
        .particle-dot:nth-child(3) { top: 60%; left: 50%; animation-delay: 2s; }
        .particle-dot:nth-child(4) { top: 30%; right: 20%; animation-delay: 3s; }
        .particle-dot:nth-child(5) { top: 70%; right: 40%; animation-delay: 4s; }
        .particle-dot:nth-child(6) { top: 50%; left: 60%; animation-delay: 5s; }

        @keyframes particleFloat {
            0%, 100% {
                transform: translateY(0) translateX(0);
                opacity: 0.6;
            }
            50% {
                transform: translateY(-30px) translateX(20px);
                opacity: 1;
            }
        }

        /* Container */
        .container {
            max-width: 1400px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }

        /* Header */
        .section-header {
            text-align: center;
            margin-bottom: 80px;
        }

        .header-tag {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 20px;
            background: rgba(99, 102, 241, 0.1);
            border: 1px solid rgba(99, 102, 241, 0.3);
            border-radius: 100px;
            font-size: 13px;
            font-weight: 600;
            color: #818cf8;
            margin-bottom: 24px;
            text-transform: uppercase;
            letter-spacing: 1.5px;
        }

        .header-tag::before {
            content: '●';
            color: #6366f1;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        .section-title {
            font-size: clamp(3rem, 7vw, 5.5rem);
            font-weight: 700;
            line-height: 1.1;
            margin-bottom: 24px;
            letter-spacing: -0.02em;
        }

        .title-gradient {
            background: linear-gradient(135deg, #ffffff 0%, #6366f1 50%, #ec4899 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .section-description {
            font-size: 1.25rem;
            color: #9ca3af;
            max-width: 700px;
            margin: 0 auto;
            line-height: 1.7;
        }

        /* Bento Grid */
        .bento-grid {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 24px;
            margin-bottom: 24px;
        }

        /* Bento Card Base */
        .bento-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 24px;
            padding: 40px;
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            backdrop-filter: blur(10px);
        }

        .bento-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(236, 72, 153, 0.1));
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .bento-card:hover::before {
            opacity: 1;
        }

        .bento-card:hover {
            transform: translateY(-8px);
            border-color: rgba(99, 102, 241, 0.3);
            box-shadow: 0 30px 60px rgba(99, 102, 241, 0.2);
        }

        /* Card Sizes */
        .card-large {
            grid-column: span 8;
        }

        .card-medium {
            grid-column: span 4;
        }

        .card-small {
            grid-column: span 4;
        }

        .card-wide {
            grid-column: span 6;
        }

        /* Card Content */
        .card-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #6366f1, #ec4899);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            margin-bottom: 24px;
            position: relative;
            z-index: 2;
        }

        .card-icon::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #6366f1, #ec4899);
            border-radius: 16px;
            filter: blur(20px);
            opacity: 0.5;
            z-index: -1;
        }

        .card-title {
            font-size: 1.75rem;
            font-weight: 700;
            margin-bottom: 16px;
            color: white;
            position: relative;
            z-index: 2;
        }

        .card-description {
            font-size: 1rem;
            color: #9ca3af;
            line-height: 1.7;
            margin-bottom: 24px;
            position: relative;
            z-index: 2;
        }

        /* Stats */
        .card-stats {
            display: flex;
            gap: 32px;
            position: relative;
            z-index: 2;
        }

        .stat-item {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .stat-value {
            font-size: 2rem;
            font-weight: 700;
            background: linear-gradient(135deg, #6366f1, #ec4899);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .stat-label {
            font-size: 0.875rem;
            color: #6b7280;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* Code Block */
        .code-block {
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(99, 102, 241, 0.2);
            border-radius: 12px;
            padding: 20px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 14px;
            color: #a78bfa;
            position: relative;
            z-index: 2;
            overflow-x: auto;
        }

        .code-line {
            margin-bottom: 8px;
        }

        .code-keyword {
            color: #ec4899;
        }

        .code-string {
            color: #34d399;
        }

        .code-comment {
            color: #6b7280;
        }

        /* Visual Elements */
        .visual-circle {
            position: absolute;
            bottom: -50px;
            right: -50px;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: linear-gradient(135deg, #6366f1, #ec4899);
            opacity: 0.1;
            filter: blur(40px);
        }

        .sparkle-effect {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 24px;
            animation: sparkle 3s infinite;
        }

        @keyframes sparkle {
            0%, 100% {
                opacity: 0.3;
                transform: scale(1) rotate(0deg);
            }
            50% {
                opacity: 1;
                transform: scale(1.2) rotate(180deg);
            }
        }

        /* CTA Button */
        .card-cta {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 14px 28px;
            background: linear-gradient(135deg, #6366f1, #ec4899);
            color: white;
            text-decoration: none;
            border-radius: 12px;
            font-weight: 600;
            font-size: 15px;
            transition: all 0.3s ease;
            position: relative;
            z-index: 2;
        }

        .card-cta:hover {
            transform: translateX(5px);
            box-shadow: 0 10px 30px rgba(99, 102, 241, 0.4);
        }

        .card-cta::after {
            content: '→';
            transition: transform 0.3s ease;
        }

        .card-cta:hover::after {
            transform: translateX(5px);
        }

        /* Tag List */
        .tag-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            position: relative;
            z-index: 2;
        }

        .tag {
            padding: 8px 16px;
            background: rgba(99, 102, 241, 0.1);
            border: 1px solid rgba(99, 102, 241, 0.3);
            border-radius: 8px;
            font-size: 13px;
            color: #818cf8;
            font-weight: 500;
        }

        /* Responsive */
        @media (max-width: 1024px) {
            .bento-grid {
                grid-template-columns: repeat(6, 1fr);
            }

            .card-large,
            .card-medium,
            .card-small,
            .card-wide {
                grid-column: span 6;
            }
        }

        @media (max-width: 768px) {
            .bento-section {
                padding: 80px 24px;
            }

            .section-header {
                margin-bottom: 50px;
            }

            .bento-grid {
                grid-template-columns: 1fr;
                gap: 16px;
            }

            .card-large,
            .card-medium,
            .card-small,
            .card-wide {
                grid-column: span 1;
            }

            .bento-card {
                padding: 30px 24px;
            }

            .card-stats {
                flex-direction: column;
                gap: 20px;
            }
        }
Categories

Bento Grid Service

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
