ULTIMATE SNAKE

(click to https://quantum-snake.netlify.app/
)ULTIMATE SNAKE is a modern reimagining of the classic Snake game, blending retro gameplay with enhanced visuals, power-ups, and a dynamic difficulty system. Designed for both casual players and high-score chasers, this game brings nostalgia and excitement in every move.

This tailwind example is contributed by Code Master(Mfuranziza Dusabe Hamza), on 26-May-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Masonry, Image grid,find

Breadcrumb Image gallery Search Bar

Author Code Master(Mfuranziza Dusabe Hamza)

612

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ultimate Snake Game</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;600;700&display=swap');
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            background: linear-gradient(135deg, #0c0c0c 0%, #1a1a2e 25%, #16213e 50%, #0f3460 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: 'Rajdhani', sans-serif;
            overflow: hidden;
            position: relative;
        }

/* Animated starfield background */
        .stars {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            pointer-events: none;
            z-index: 0;
        }

.star {
            position: absolute;
            background: white;
            border-radius: 50%;
            animation: twinkle 3s infinite;
        }

.star:nth-child(odd) { animation-delay: 1s; }
        .star:nth-child(3n) { animation-delay: 2s; }

@keyframes twinkle {
            0%, 100% { opacity: 0.3; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.2); }
        }

/* Floating particles */
        .particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            pointer-events: none;
            z-index: 0;
        }

.particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: rgba(0, 255, 255, 0.6);
            border-radius: 50%;
            animation: float 6s infinite linear;
        }

@keyframes float {
            0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
        }

/* Main game container */
        .game-container {
            position: relative;
            z-index: 1;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(20px);
            border-radius: 25px;
            padding: 30px;
            border: 3px solid rgba(0, 255, 255, 0.4);
            box-shadow: 
                0 0 80px rgba(0, 255, 255, 0.3),
                inset 0 0 80px rgba(0, 255, 255, 0.1);
            animation: containerGlow 4s ease-in-out infinite alternate;
            max-width: 95vw;
            max-height: 95vh;
        }

@keyframes containerGlow {
            from { 
                border-color: rgba(0, 255, 255, 0.4);
                box-shadow: 0 0 80px rgba(0, 255, 255, 0.3), inset 0 0 80px rgba(0, 255, 255, 0.1);
            }
            to { 
                border-color: rgba(0, 255, 255, 0.8);
                box-shadow: 0 0 120px rgba(0, 255, 255, 0.5), inset 0 0 80px rgba(0, 255, 255, 0.2);
            }
        }

.game-title {
            font-family: 'Orbitron', monospace;
            font-size: 4rem;
            font-weight: 900;
            text-align: center;
            margin-bottom: 25px;
            background: linear-gradient(45deg, #00ffff, #ff00ff, #ffff00, #00ff00, #00ffff);
            background-size: 500% 500%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: gradientShift 4s ease-in-out infinite;
            text-shadow: 0 0 40px rgba(0, 255, 255, 0.6);
            position: relative;
        }

.game-title::after {
            content: 'ULTIMATE SNAKE';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: shine 3s infinite;
        }

@keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

@keyframes shine {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }

/* Game mode selector */
        .game-modes {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 20px;
        }

.mode-btn {
            background: linear-gradient(45deg, rgba(0, 255, 255, 0.2), rgba(0, 200, 200, 0.3));
            border: 2px solid rgba(0, 255, 255, 0.5);
            padding: 10px 20px;
            border-radius: 15px;
            color: #00ffff;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: 'Orbitron', monospace;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

.mode-btn:hover, .mode-btn.active {
            background: linear-gradient(45deg, rgba(0, 255, 255, 0.4), rgba(0, 200, 200, 0.5));
            border-color: #00ffff;
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
            transform: translateY(-2px);
        }

.game-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 15px;
            margin-bottom: 20px;
        }

.stat-card {
            background: rgba(0, 255, 255, 0.1);
            border: 2px solid rgba(0, 255, 255, 0.3);
            border-radius: 20px;
            padding: 15px;
            text-align: center;
            backdrop-filter: blur(15px);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

.stat-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(0, 255, 255, 0.1), transparent);
            transform: rotate(45deg);
            transition: transform 0.6s;
        }

.stat-card:hover {
            background: rgba(0, 255, 255, 0.15);
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(0, 255, 255, 0.3);
        }

.stat-card:hover::before {
            transform: rotate(45deg) translate(50%, 50%);
        }

.stat-label {
            font-size: 0.9rem;
            color: #00ffff;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 5px;
        }

.stat-value {
            font-size: 2rem;
            font-weight: 700;
            color: white;
            font-family: 'Orbitron', monospace;
            text-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
        }

/* Enhanced speed controls */
        .controls-section {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            margin-bottom: 20px;
        }

.speed-controls, .size-controls {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
            padding: 15px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 20px;
            border: 2px solid rgba(255, 255, 255, 0.1);
        }

.control-label {
            color: #00ffff;
            font-weight: 600;
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-family: 'Orbitron', monospace;
        }

.control-btn {
            background: linear-gradient(45deg, #00ffff, #0088aa);
            border: none;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            color: white;
            font-size: 1.4rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 5px 20px rgba(0, 255, 255, 0.4);
            position: relative;
            overflow: hidden;
        }

.control-btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: all 0.3s ease;
        }

.control-btn:hover::before {
            width: 100%;
            height: 100%;
        }

.control-btn:hover {
            transform: translateY(-3px) scale(1.1);
            box-shadow: 0 10px 30px rgba(0, 255, 255, 0.6);
            background: linear-gradient(45deg, #00cccc, #0099bb);
        }

.control-btn:active {
            transform: translateY(0) scale(0.95);
        }

.control-btn:disabled {
            background: rgba(100, 100, 100, 0.3);
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

.control-display {
            background: rgba(0, 255, 255, 0.15);
            border: 2px solid rgba(0, 255, 255, 0.4);
            border-radius: 15px;
            padding: 10px 20px;
            color: white;
            font-family: 'Orbitron', monospace;
            font-weight: 700;
            font-size: 1.1rem;
            min-width: 80px;
            text-align: center;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
        }

/* Game board with dynamic sizing */
        .board-container {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
            position: relative;
        }

.game-board {
            border: 4px solid #00ffff;
            border-radius: 20px;
            background: linear-gradient(45deg, #001122 0%, #002244 50%, #001133 100%);
            box-shadow: 
                inset 0 0 120px rgba(0, 255, 255, 0.15),
                0 0 60px rgba(0, 255, 255, 0.4);
            position: relative;
            display: block;
        }

.game-board::before {
            content: '';
            position: absolute;
            top: -4px;
            left: -4px;
            right: -4px;
            bottom: -4px;
            background: linear-gradient(45deg, #00ffff, #ff00ff, #ffff00, #00ff00, #00ffff);
            background-size: 500% 500%;
            border-radius: 24px;
            z-index: -1;
            animation: borderGlow 4s ease-in-out infinite;
        }

@keyframes borderGlow {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

/* Power-up indicators */
        .powerups {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 15px;
        }

.powerup-indicator {
            background: rgba(255, 255, 0, 0.1);
            border: 2px solid rgba(255, 255, 0, 0.3);
            border-radius: 15px;
            padding: 8px 15px;
            color: #ffff00;
            font-weight: 600;
            font-size: 0.9rem;
            text-align: center;
            transition: all 0.3s ease;
        }

.powerup-indicator.active {
            background: rgba(255, 255, 0, 0.3);
            border-color: #ffff00;
            box-shadow: 0 0 20px rgba(255, 255, 0, 0.5);
            animation: powerupPulse 1s infinite;
        }

@keyframes powerupPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

/* Game status */
        .game-status {
            text-align: center;
            margin-bottom: 15px;
            padding: 12px;
            border-radius: 15px;
            background: rgba(0, 255, 0, 0.1);
            border: 2px solid rgba(0, 255, 0, 0.3);
            color: #00ff00;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-family: 'Orbitron', monospace;
            transition: all 0.3s ease;
        }

.game-status.waiting {
            background: rgba(255, 255, 0, 0.1);
            border-color: rgba(255, 255, 0, 0.3);
            color: #ffff00;
        }

.game-status.paused {
            background: rgba(255, 165, 0, 0.1);
            border-color: rgba(255, 165, 0, 0.3);
            color: #ffa500;
        }

.controls {
            margin-top: 20px;
            text-align: center;
            color: rgba(255, 255, 255, 0.9);
            font-size: 1rem;
            line-height: 1.8;
        }

.control-key {
            display: inline-block;
            background: rgba(0, 255, 255, 0.2);
            border: 1px solid rgba(0, 255, 255, 0.4);
            padding: 6px 12px;
            border-radius: 10px;
            margin: 3px;
            font-family: 'Orbitron', monospace;
            font-weight: 600;
            color: #00ffff;
            transition: all 0.3s ease;
        }

.control-key:hover {
            background: rgba(0, 255, 255, 0.3);
            box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
        }

/* Game Over Overlay */
        .game-over-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.9);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            backdrop-filter: blur(15px);
        }

.game-over-card {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
            border: 4px solid #ff4444;
            border-radius: 25px;
            padding: 50px;
            text-align: center;
            box-shadow: 0 0 150px rgba(255, 68, 68, 0.6);
            animation: gameOverPulse 1.2s ease-in-out;
            position: relative;
            overflow: hidden;
        }

.game-over-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255, 68, 68, 0.1), transparent);
            animation: gameOverShine 2s infinite;
        }

@keyframes gameOverPulse {
            0% { transform: scale(0.8) rotate(-5deg); opacity: 0; }
            100% { transform: scale(1) rotate(0deg); opacity: 1; }
        }

@keyframes gameOverShine {
            0% { transform: rotate(45deg) translate(-200%, -200%); }
            100% { transform: rotate(45deg) translate(200%, 200%); }
        }

.game-over-title {
            font-family: 'Orbitron', monospace;
            font-size: 3.5rem;
            color: #ff4444;
            font-weight: 900;
            text-shadow: 0 0 30px #ff4444;
            margin-bottom: 25px;
            animation: textFlicker 2s infinite;
            position: relative;
            z-index: 1;
        }

@keyframes textFlicker {
            0%, 100% { opacity: 1; text-shadow: 0 0 30px #ff4444; }
            50% { opacity: 0.8; text-shadow: 0 0 50px #ff4444, 0 0 80px #ff6666; }
        }

.final-stats {
            margin-bottom: 30px;
            position: relative;
            z-index: 1;
        }

.final-score {
            font-size: 1.6rem;
            color: white;
            margin-bottom: 10px;
            font-weight: 600;
            font-family: 'Orbitron', monospace;
        }

.restart-btn {
            background: linear-gradient(45deg, #ff4444, #cc3333);
            border: none;
            padding: 18px 35px;
            border-radius: 15px;
            color: white;
            font-size: 1.3rem;
            font-weight: 700;
            font-family: 'Orbitron', monospace;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 2px;
            box-shadow: 0 6px 20px rgba(255, 68, 68, 0.4);
            position: relative;
            z-index: 1;
            overflow: hidden;
        }

.restart-btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: all 0.3s ease;
        }

.restart-btn:hover::before {
            width: 300%;
            height: 300%;
        }

.restart-btn:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 12px 35px rgba(255, 68, 68, 0.6);
            background: linear-gradient(45deg, #ff6666, #ff4444);
        }

/* Responsive design */
        @media (max-width: 1024px) {
            .game-title { font-size: 3rem; }
            .game-container { padding: 25px; }
            .controls-section { flex-direction: column; }
        }

@media (max-width: 768px) {
            .game-container { padding: 20px; margin: 10px; }
            .game-title { font-size: 2.5rem; }
            .game-stats { grid-template-columns: repeat(2, 1fr); }
            .game-modes { flex-wrap: wrap; }
            .mode-btn { padding: 8px 15px; font-size: 0.9rem; }
        }

@media (max-width: 480px) {
            .game-title { font-size: 2rem; }
            .controls { font-size: 0.9rem; }
            .game-stats { grid-template-columns: 1fr; }
            .stat-value { font-size: 1.5rem; }
        }
    </style>
</head>
<body>
    
    <div class="stars" id="stars"></div>
    <div class="particles" id="particles"></div>
    
    <div class="game-container">
        <h1 class="game-title">ULTIMATE SNAKE</h1>
        
        
        <div class="game-modes">
            <button class="mode-btn active" onclick="setGameMode('classic')">Classic</button>
            <button class="mode-btn" onclick="setGameMode('survival')">Survival</button>
            <button class="mode-btn" onclick="setGameMode('speed')">Speed Run</button>
            <button class="mode-btn" onclick="setGameMode('giant')">Giant Mode</button>
        </div>
        
        <div class="game-stats">
            <div class="stat-card">
                <div class="stat-label">Score</div>
                <div class="stat-value" id="score">0</div>
            </div>
            <div class="stat-card">
                <div class="stat-label">High Score</div>
                <div class="stat-value" id="highScore">0</div>
            </div>
            <div class="stat-card">
                <div class="stat-label">Length</div>
                <div class="stat-value" id="length">1</div>
            </div>
            <div class="stat-card">
                <div class="stat-label">Level</div>
                <div class="stat-value" id="level">1</div>
            </div>
            <div class="stat-card">
                <div class="stat-label">Time</div>
                <div class="stat-value" id="gameTime">0:00</div>
            </div>
        </div>

<div class="controls-section">
            <div class="speed-controls">
                <span class="control-label">Speed:</span>
                <button class="control-btn" id="decreaseSpeed" onclick="changeSpeed(-1)">−</button>
                <div class="control-display" id="speedDisplay">5</div>
                <button class="control-btn" id="increaseSpeed" onclick="changeSpeed(1)">+</button>
            </div>
            <div class="size-controls">
                <span class="control-label">Size:</span>
                <button class="control-btn" id="decreaseSize" onclick="changeBoardSize(-1)">−</button>
                <div class="control-display" id="sizeDisplay">M</div>
                <button class="control-btn" id="increaseSize" onclick="changeBoardSize(1)">+</button>
            </div>
        </div>

<div class="powerups">
            <div class="powerup-indicator" id="speedBoost">Speed Boost: OFF</div>
            <div class="powerup-indicator" id="scoreMultiplier">Score x1</div>
            <div class="powerup-indicator" id="invincible">Shield: OFF</div>
        </div>

<div class="game-status waiting" id="gameStatus">Press any arrow key or WASD to start</div>
        
        
        <div class="board-container">
            <canvas id="board" class="game-board"></canvas>
        </div>
        
        <div class="controls">
            <strong>Controls:</strong><br>
            <span class="control-key">↑</span> <span class="control-key">↓</span> <span class="control-key">←</span> <span class="control-key">→</span> or <span class="control-key">WASD</span> to move<br>
            <span class="control-key">SPACE</span> to pause/resume • <span class="control-key">R</span> to restart<br><br>
            
            <strong>Power-ups:</strong> Collect special items for temporary abilities!<br>
            <strong>🟡 Speed Boost</strong> • <strong>🟢 Score Multiplier</strong> • <strong>🔵 Invincibility Shield</strong> • <strong>🟣 Size Reducer</strong>
        </div>
    </div>

<div class="game-over-overlay" id="gameOverOverlay">
        <div class="game-over-card">
            <div class="game-over-title">GAME OVER</div>
            <div class="final-stats">
                <div class="final-score">Final Score: <span id="finalScore">0</span></div>
                <div class="final-score">Snake Length: <span id="finalLength">1</span></div>
                <div class="final-score">Level Reached: <span id="finalLevel">1</span></div>
                <div class="final-score">Time Played: <span id="finalTime">0:00</span></div>
                <div class="final-score">Game Mode: <span id="finalMode">Classic</span></div>
            </div>
            <button class="restart-btn" onclick="restartGame()">PLAY AGAIN</button>
        </div>
    </div>

// Snake variables
        let snakeX, snakeY;
        let speedX = 0, speedY = 0;
        let snakeBody = [];

// Game state
        let foodX, foodY;
        let powerupX, powerupY, powerupType = null, powerupTimer = 0;
        let gameOver = false;
        let gameStarted = false;
        let gamePaused = false;
        let gameMode = 'classic';
        
        // Stats
        let score = 0;
        let level = 1;
        let gameSpeed = 5;
        let highScore = 0;
        let gameTime = 0;
        let gameTimer;
        let gameInterval;
        
        // Power-up states
        let speedBoost = false, scoreMultiplier = 1, invincible = false;
        let powerupTimers = { speed: 0, score: 0, invincible: 0 };

// Game settings
        const MIN_SPEED = 1, MAX_SPEED = 10;
        const BASE_INTERVAL = 200;
        const POWERUP_DURATION = 5000; // 5 seconds

// Initialize
        function createBackground() {
            // Create stars
            const starsContainer = document.getElementById('stars');
            for (let i = 0; i < 150; i++) {
                const star = document.createElement('div');
                star.className = 'star';
                star.style.left = Math.random() * 100 + '%';
                star.style.top = Math.random() * 100 + '%';
                star.style.width = Math.random() * 3 + 1 + 'px';
                star.style.height = star.style.width;
                star.style.animationDelay = Math.random() * 3 + 's';
                starsContainer.appendChild(star);
            }

// Create floating particles
            const particlesContainer = document.getElementById('particles');
            for (let i = 0; i < 20; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                particle.style.left = Math.random() * 100 + '%';
                particle.style.animationDelay = Math.random() * 6 + 's';
                particle.style.animationDuration = (Math.random() * 3 + 4) + 's';
                particlesContainer.appendChild(particle);
            }
        }

function initializeBoard() {
            const size = boardSizes[currentSize];
            total_row = size.rows;
            total_col = size.cols;
            blockSize = size.blockSize;

board.height = total_row * blockSize;
            board.width = total_col * blockSize;
            
            // Center snake
            snakeX = Math.floor(total_col / 2) * blockSize;
            snakeY = Math.floor(total_row / 2) * blockSize;
        }

Related Examples

Acode master
Acode master(=>good work for Acode master)

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

759
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

2 weeks ago

365
Animated Ripple Avatar
Ripple Effect Avatar (Tailwind CSS Component) A visually striking animated component that displays a centered avatar or image surrounded by expanding ripple circles. Built with Tailwind CSS and custom animations, this effect simulates a pulsing or water ripple reaction, drawing attention to the central image. Ideal for user profile sections, hero banners, landing pages, or highlighted features in modern web interfaces. The ripples gradually fade and expand, creating a soft, calming motion that enhances interactivity and depth.

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

970
Simple Footer 2

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

11 months ago

1.9k
Animated cards with Tailwind CSS

Author:
Michael Andreuzza

1 year ago

11.6k
Expandable File Tree with Tailwind and Vanilla JS with tailwinds 4
A simple and responsive file tree component built with Tailwind CSS and vanilla JavaScript. Each folder can be expanded or collapsed with smooth transitions, including the root directory. This component is useful for project explorers, code editors, or file management UIs.

Author:
Indra

2 months ago

133
Image gallery using grid
basic image gallery that displays images in a responsive grid, with an overlay and a "View" button that appears on hover. You can further customize and enhance it to fit your design and functionality requirements.

Author:
Prajwal Hallale

2 years ago

10.4k
Animasyonlu Arama Textbox Widget
Üzerine gelince animasyonlu olarak açılan textbox.

Author:
Sedat Kumcu

1 year ago

1.6k
Acode Master - FB & WhatsApp UI Combo
Description (meta description) ni tag ikoreshwa mu mutwe (head) wa HTML igaragaza mu ncamake icyo urubuga cyangwa urupapuro rwawe ruvuga. Iyi description ikoreshwa cyane na search engines (nka Google) mu kwerekana summary y’urubuga mu bisubizo by’ubushakashatsi.

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

510
Call to action
slightly tilted call to action section

Author:
Simon Scheffer

2 years ago

11.1k
Default breadcrumb
Use the following breadcrumb example to show the hierarchical structure of pages

Author:
Md. Tofayel islam

1 year ago

3k
No distraction search field

Author:
_Amar_

2 years ago

12k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components