business card gx test

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Neon World</title>

<style>

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

body {

    background: #080812;

    color: white;

    font-family: Arial, sans-serif;

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    overflow: hidden;

}

.card {

    text-align: center;

    padding: 60px 40px;

    border: 1px solid #792cff;

    border-radius: 25px;

    background: linear-gradient(145deg, #17132b, #090914);

    box-shadow: 0 0 40px #792cff44;

    animation: float 3s infinite ease-in-out;

    max-width: 450px;

}

h1 {

    font-size: 42px;

    color: #bd8aff;

    text-shadow: 0 0 20px #a855f7;

    margin-bottom: 20px;

}

p {

    color: #aaa;

    line-height: 1.7;

    margin-bottom: 30px;

}

button {

    background: #8b35ff;

    color: white;

    border: none;

    padding: 14px 30px;

    border-radius: 30px;

    cursor: pointer;

    font-size: 16px;

    transition: 0.3s;

}

button:hover {

    background: #b36aff;

    box-shadow: 0 0 25px #a855f7;

    transform: scale(1.08);

}

#message {

    margin-top: 25px;

    color: #c9a5ff;

    font-size: 18px;

}

@keyframes float {

    0%, 100% { transform: translateY(0); }

    50% { transform: translateY(-15px); }

}

.stars {

    position: fixed;

    color: #a855f7;

    font-size: 20px;

    animation: blink 2s infinite alternate;

}

@keyframes blink {

    from { opacity: 0.2; }

    to { opacity: 1; }

}

</style>

</head>

<body>

<div class="stars" style="top:15%;left:15%">✦</div>

<div class="stars" style="top:70%;left:80%">✧</div>

<div class="stars" style="top:20%;right:15%">✦</div>

<div class="card">

    <h1>WELCOME</h1>

    <p>

        Enter a world of creativity, technology

        and endless possibilities.

    </p>

    <button onclick="showMessage()">Explore Now</button>

    <div id="message"></div>

</div>

<script>

function showMessage() {

    document.getElementById("message").innerHTML =

        "🚀 Your journey starts here!";

}

</script>

</body>

</html>