순수 html 으로 시발 ㅋㅋㅋㅋ 영상이 안 올라가져서 사진으로 올렸는데, 저거 원들 둥둥 떠다니는 애니메이션 들어가있고, 버튼 후버 효과도 다 들어가있음. 프롬프트 걍 

"이젠 아예 인간 규격을 벗어난 아주 희한한 웹사이트 만들어봐"

이거 하나 입력함 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 


아래 소스 코드 돌려봐라 .

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>The Bizarre Universe</title>

    <style>

        /* Reset and Global Styles */

        * {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }


        html, body {

            height: 100%;

            font-family: 'Comic Sans MS', sans-serif;

            overflow: hidden;

        }


        /* Background Gradient */

        body {

            background: radial-gradient(circle, #2b2d42, #000000);

            display: flex;

            justify-content: center;

            align-items: center;

            flex-direction: column;

            text-align: center;

            color: #ffffff;

        }


        /* Heading */

        h1 {

            font-size: 4em;

            margin-bottom: 20px;

            color: #ff6b6b;

            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);

            transform: rotate(-15deg);

        }


        /* Paragraph */

        p {

            font-size: 1.5em;

            margin-bottom: 30px;

            color: #f8f3d4;

            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);

            transform: rotate(10deg);

        }


        /* Button Styles */

        .btn {

            display: inline-block;

            padding: 15px 40px;

            margin: 10px;

            background: rgba(0, 0, 0, 0.2);

            border: 3px dashed rgba(255, 255, 255, 0.6);

            color: #ffffff;

            text-transform: uppercase;

            letter-spacing: 2px;

            text-decoration: none;

            border-radius: 50%;

            transition: all 0.3s ease;

            transform: rotate(-5deg);

            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6);

        }


        .btn:hover {

            background: rgba(0, 0, 0, 0.5);

            border-color: rgba(255, 255, 255, 1);

            box-shadow: 0 20px 30px rgba(0, 0, 0, 0.8);

            transform: scale(1.1) rotate(10deg);

        }


        /* Floating Elements */

        .floating-blob {

            absolute;

            width: 200px;

            height: 200px;

            background: linear-gradient(135deg, #ff6b6b, #f8f3d4);

            border-radius: 50%;

            box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5);

            animation: blob-float 6s ease-in-out infinite;

        }


        .small-blob {

            width: 100px;

            height: 100px;

            animation-duration: 4s;

        }


        .big-blob {

            width: 300px;

            height: 300px;

            animation-duration: 8s;

        }


        @keyframes blob-float {

            0%, 100% {

                transform: translateY(-10px) rotate(0deg);

            }

            50% {

                transform: translateY(10px) rotate(360deg);

            }

        }


        /* Random Positions */

        .blob1 {

            top: 10%;

            left: 5%;

        }


        .blob2 {

            bottom: 20%;

            right: 10%;

        }


        .blob3 {

            top: 30%;

            right: 20%;

        }


        .blob4 {

            bottom: 30%;

            left: 25%;

        }


        /* Footer */

        footer {

            absolute;

            bottom: 10px;

            width: 100%;

            text-align: center;

            font-size: 0.9em;

            color: rgba(255, 255, 255, 0.7);

        }


        footer a {

            color: rgba(255, 255, 255, 0.9);

            text-decoration: none;

        }


        footer a:hover {

            text-decoration: underline;

        }

    </style>

</head>

<body>

    <h1>Welcome to the Bizarre Universe</h1>

    <p>Explore the realms beyond imagination</p>

    <a href="#" class="btn">Embark Journey</a>

    <a href="#" class="btn">Meet the Unknown</a>

    <div class="floating-blob blob1"></div>

    <div class="floating-blob blob2 small-blob"></div>

    <div class="floating-blob blob3 big-blob"></div>

    <div class="floating-blob blob4"></div>

    <footer>

        © 2024 by <a href="https://example.com" target="_blank">Your Name</a>. Crafted with weirdness.

    </footer>

</body>

</html>