Christmas-Menu-1

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Executive Christmas Menu</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
    
    <!-- ============================================= -->
    <!-- =============== CSS STYLES ================== -->
    <!-- ============================================= -->
    <style>
        :root {
            --primary-green: #0f5132;
            --secondary-green: #146c43;
            --accent-gold: #ffc107;
            --accent-burgundy: #8b0000;
            --text-light: #f8f9fa;
            --bg-dark: #1a1a2e;
            --bg-darker: #0f0f1e;
            --snow-white: #f0f8ff;
            --sub-menu-radius: 80px;
            --main-menu-radius: 150px;
        }

        body {
            margin: 0;
            font-family: 'Lato', sans-serif;
            background: linear-gradient(to bottom, var(--bg-dark), var(--bg-darker));
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            color: var(--text-light);
        }

        /* --- Background Snowfall --- */
        .snowfall-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }
        .snowflake {
            position: absolute;
            color: var(--snow-white);
            user-select: none;
            pointer-events: none;
            animation: fall linear infinite;
        }
        @keyframes fall {
            to {
                transform: translateY(100vh)...