У меня есть задача к ИИ создать дизайн для сайта, сейчас я тебе скину текст, проанализируй его, потому что по моему описанию создают или похожие или ужасные дизайны, дай возможность, чтобы ИИ на своё усмотрение создал дизайн под мой проект, учитывая все особенности и дизайн должен выглядеть очень круто, с анимацией, градиентами. Дай промт который я могу прислать ИИ и он выполнит задачу. Именно напишет код.

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Світ Екстрасенсів - Шлях Долі</title>
    <style>
        :root {
            --primary-color: #4a4a4a;
            --secondary-color: #6d5acf;
            --background-color: #f5f5f5;
            --text-color: #333;
            --accent-color: #9c27b0;
        }

        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            background-color: var(--background-color);
            color: var(--text-color);
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        header {
            background-color: var(--primary-color);
            color: white;
            padding: 20px 0;
        }

        nav ul {
            list-style-type: none;
            padding: 0;
            display: flex;
            justify-content: space-around;
        }

        nav ul li a {
            color: white;
            text-decoration: none;
            font-weight: bold;
            transition: color 0.3s ease;
        }

        nav ul li a:hover {
            color: var(--accent-color);
        }

        .hero {
            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://example.com/mystical-background.jpg');
            background-size: cover;
            background-position: center;
            color: white;
            text-align: center;
            padding: 100px 0;
            position: relative;
            overflow: hidden;
        }

        .hero h1 {
            font-size: 3em;
            margin-bottom: 20px;
        }

        .experts {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            padding: 50px 0;
        }

        .expert-card {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            margin: 20px;
            padding: 20px;
            width: 250px;
            text-align: center;
            transition: transform 0.3s ease;
        }

        .expert-card:hover {
            transform: translateY(-5px);
        }

        .expert-img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 15px;
        }

        .expert-status {
            display: inline-block;
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 0.8em;
            margin-top: 10px;
        }

        .online {
            background-color: #4CAF50;
            color: white;
        }

        .offline {
            background-color: #F44336;
            color: white;
        }

        .cta-button {
            display: inline-block;
            background-color: var(--secondary-color);
            color: white;
            padding: 10px 20px;
            border-radius: 5px;
            text-decoration: none;
            margin-top: 15px;
            transition: background-color 0.3s ease;
        }

        .cta-button:hover {
            background-color: var(--accent-color);
        }

        footer {
            background-color: var(--primary-color);
            color: white;
            text-align: center;
            padding: 20px 0;
            margin-top: 50px;
        }

        @media (max-width: 768px) {
            .experts {
                flex-direction: column;
                align-items: center;
            }

            .expert-card {
                width: 80%;
            }
        }

        /* Animation */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .fade-in {
            animation: fadeIn 1s ease-in;
        }

        /* Mystical stars effect */
        .stars {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .star {
            position: absolute;
            width: 2px;
            height: 2px;
            background: white;
            border-radius: 50%;
            animation: twinkle 1s infinite alternate;
        }

        @keyframes twinkle {
            from { opacity: 0.5; }
            to { opacity: 1; }
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <nav>
                <ul>
                    <li><a href="#home">Головна</a></li>
                    <li><a href="#experts">Експерти</a></li>
                    <li><a href="#about">Про нас</a></li>
                    <li><a href="#contact">Контакти</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main>
        <section id="home" class="hero">
            <div class="stars"></div>
            <div class="container">
                <h1 class="fade-in">Світ Екстрасенсів - Шлях Долі</h1>
                <p class="fade-in">Відкрийте таємниці свого майбутнього з нашими експертами</p>
            </div>
        </section>

        <section id="experts" class="experts container">
            <h2>Наші Експерти</h2>
            <div class="expert-card fade-in">
                <img src="https://example.com/expert1.jpg" alt="Експерт 1" class="expert-img">
                <h3>Ліна Зоряна</h3>
                <p>Екстрасенс</p>
                <span class="expert-status online">Онлайн</span>
                <a href="#" class="cta-button">Почати чат</a>
            </div>
            <div class="expert-card fade-in">
                <img src="https://example.com/expert2.jpg" alt="Експерт 2" class="expert-img">
                <h3>Максим Віщий</h3>
                <p>Астролог</p>
                <span class="expert-status offline">Офлайн</span>
                <a href="#" class="cta-button">Дізнатися більше</a>
            </div>
            <!-- Add more expert cards as needed -->
        </section>
    </main>

    <footer>
        <div class="container">
            <p>&copy; 2023 Світ Екстрасенсів - Шлях Долі. Всі права захищені.</p>
        </div>
    </footer>

    <script>
        // Create stars
        function createStars() {
            const starsContainer = document.querySelector('.stars');
            for (let i = 0; i < 100; i++) {
                const star = document.createElement('div');
                star.classList.add('star');
                star.style.left = `${Math.random() * 100}%`;
                star.style.top = `${Math.random() * 100}%`;
                star.style.animationDelay = `${Math.random() * 2}s`;
                starsContainer.appendChild(star);
            }
        }

        createStars();
    </script>
</body>
</html>