Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Doctor Website Color Themes</title>
    <style>
        /* General Styles */
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .box {
            width: 100px;
            height: 100px;
            margin: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Animation Keyframes */
        @keyframes slideIn {
            0% {
                transform: translateY(-100%);
            }
            100% {
                transform: translateY(0);
            }
        }

        /* Theme 1: Professional Blue */
        .professional-blue .box {
            background-color: #3498db;
            color: white;
        }

        /* Theme 2: Calm Green */
        .calm-green .box {
            background-color: #2ecc71;
            color: white;
        }

        /* Theme 3: Soothing Purple */
        .soothing-purple .box {
            background-color: #9b59b6;
            color: white;
        }

        /* JavaScript */
        .slide-in {
            animation: slideIn 1s forwards;
        }
    </style>
</head>
<body>
    <div class="container professional-blue">
        <div class="box">Theme 1</div>
        <div class="box">Theme 1</div>
        <div class="box">Theme 1</div>
    </div>

    <div class="container calm-green">
        <div class="box">Theme 2</div>
        <div class="box">Theme 2</div>
        <div class="box">Theme 2</div>
    </div>

    <div class="container soothing-purple">
        <div class="box">Theme 3</div>
        <div class="box">Theme 3</div>
        <div class="box">Theme 3</div>
    </div>

    <script>
        // JavaScript code can go here
        window.onload = function() {
            const containers = document.querySelectorAll('.container');
            containers.forEach(container => {
                const boxes = container.querySelectorAll('.box');
                boxes.forEach((box, index) => {
                    setTimeout(() => {
                        box.classList.add('slide-in');
                    }, index * 300);
                });
            });
        };
    </script>
</body>
</html>
Editor is loading...