Objectif du formulaire : 20 000 vues

105 0 Cartes Mad_Official Suivre

Remixer Ouvrir dans l'éditeur Plein écran Discuter Publiez votre code

Recommandé

11 March 2026

Code d'intégration du jeu 10 Minutes Till Dawn

2 November 2026

Jeu de conduite Monster Tracks en HTML et JavaScript

22 August 2025

Site Web du cabinet d'avocats : Tailwind CSS, Services juridiques

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Goal: 20K Views</title>

body {
    min-height: 100vh;
    background: #050510;
    color: white;
    font-family: 'Inter', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding: 20px;
}

/* BACKGROUND */

.background {
    position: fixed;
    inset: 0;
    z-index: -3;
    background: linear-gradient(
        135deg,
        #050510,
        #10102b,
        #09091a,
        #160b2e
    );
    background-size: 400% 400%;
    animation: gradient 14s ease infinite;
}

@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .55;
    animation: float 10s infinite alternate ease-in-out;
}

.orb1 {
    width: 320px;
    height: 320px;
    background: #713cff;
    top: -100px;
    left: -100px;
}

.orb2 {
    width: 350px;
    height: 350px;
    background: #0077ff;
    bottom: -120px;
    right: -100px;
    animation-delay: 2s;
}

.orb3 {
    width: 200px;
    height: 200px;
    background: #d000ff;
    top: 45%;
    left: 60%;
    animation-delay: 3s;
}

@keyframes float {
    from {
        transform: translate(0,0) scale(1);
    }
    to {
        transform: translate(80px,-60px) scale(1.3);
    }
}

/* PARTICLES */

.particles {
    position: absolute;
    inset: 0;
}

.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 0 12px #9c7aff;
    animation: rise linear infinite;
}

@keyframes rise {
    from {
        transform: translateY(110vh);
        opacity: 0;
    }
    20% { opacity: 1; }
    80% { opacity: 1; }
    to {
        transform: translateY(-10vh);
        opacity: 0;
    }
}

/* MAIN CONTENT */

.main {
    width: 100%;
    max-width: 420px;
    text-align: center;
    position: relative;
    z-index: 1;
}

/* BIG TITLE */

.goal-title {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(30px, 8vw, 43px);
    font-weight: 900;
    letter-spacing: 3px;
    line-height: 1.3;
    margin-bottom: 12px;

background: linear-gradient(
        90deg,
        #ffffff,
        #ad8aff,
        #62baff,
        #ffffff
    );

background-size: 250% auto;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;

animation: titleGlow 4s linear infinite;
}

@keyframes titleGlow {
    to {
        background-position: 250% center;
    }
}

.subtitle {
    color: #aaa8c9;
    font-size: 13px;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 32px;
}

/* GLASS BOX */

.container {
    width: 100%;
    padding: 38px 28px;
    border-radius: 22px;

background: rgba(18, 17, 43, .78);
    border: 1px solid rgba(255,255,255,.14);

backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

box-shadow:
        0 0 40px rgba(112,70,255,.22),
        inset 0 0 20px rgba(255,255,255,.025);

animation: appear 1s ease;
}

@keyframes appear {
    from {
        opacity: 0;
        transform: translateY(25px) scale(.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

h2 {
    font-size: 25px;
    margin-bottom: 15px;
}

.description {
    color: #aaa9c5;
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 15px;
}

/* INPUTS */

input {
    width: 100%;
    padding: 16px;
    margin-top: 14px;

border: 1px solid rgba(255,255,255,.15);
    border-radius: 11px;

background: rgba(255,255,255,.06);
    color: white;

font-size: 15px;
    outline: none;
    transition: .3s;
}

input:focus {
    border-color: #9875ff;
    box-shadow: 0 0 15px rgba(152,117,255,.3);
}

input::placeholder {
    color: #aaa;
}

/* BUTTON */

button {
    width: 100%;
    padding: 16px;
    margin-top: 22px;

border: none;
    border-radius: 11px;

background: linear-gradient(90deg,#7545ff,#398cff);
    color: white;

font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;

cursor: pointer;
    transition: .3s;

box-shadow: 0 0 20px rgba(112,70,255,.35);
}

button:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 30px rgba(112,70,255,.7);
}

/* SCREEN TRANSITIONS */

.screen {
    display: none;
}

.screen.active {
    display: block;
    animation: appear .6s ease;
}

/* THANK YOU SCREEN */

.heart {
    font-size: 55px;
    margin-bottom: 20px;
    display: inline-block;
    animation: heartBeat 1.6s infinite;
}

@keyframes heartBeat {
    0%,100% { transform: scale(1); }
    25% { transform: scale(1.2); }
    45% { transform: scale(1); }
    65% { transform: scale(1.12); }
}

.thank-you-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 27px;
    background: linear-gradient(90deg,#fff,#b49aff,#69baff);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    margin-bottom: 20px;
}

.thank-you-text {
    color: #d0cfe2;
    font-size: 14px;
    line-height: 1.9;
    margin-bottom: 16px;
}

.goal-footer {
    margin-top: 25px;
    color: #b49aff;
    font-family: 'Orbitron', sans-serif;
    font-size: 13px;
    line-height: 1.8;
    text-shadow: 0 0 12px #875cff;
}

.small-footer {
    color: #85839f;
    font-size: 12px;
    margin-top: 20px;
}
</style>
</head>

<body>

<h1 class="goal-title">
        GOAL: 20K VIEWS
    </h1>

<p class="subtitle">
        One goal. One journey.
    </p>

<h2>Welcome!</h2>

<p class="description">
                Help us reach the goal. Every bit of support
                means something. Let's make it happen!
            </p>

<button onclick="showScreen('login')">
                CONTINUE →
            </button>

</div>

<h2>Your Details</h2>

<p class="description">
                Enter your username and account handle below.
            </p>

<button type="submit">
                    SUBMIT →
                </button>

</form>

</div>

<h2 class="thank-you-title">
                THANK YOU!
            </h2>

<p class="thank-you-text">
                I, mad, really appreciate it.
            </p>

<p class="thank-you-text">
                Every single person who supports this goal
                means more than words can explain.
                Your time, support, and participation
                are truly appreciated.
            </p>

<p class="goal-footer">
                20K VIEWS.<br>
                ONE GOAL. TOGETHER.
            </p>

<p class="small-footer">
                We couldn't do it without you. ❤️
            </p>

</div>

// CHANGE SCREENS

function showScreen(screenId) {

document.querySelectorAll('.screen').forEach(screen => {
        screen.classList.remove('active');
    });

document.getElementById(screenId).classList.add('active');

}

// SUBMIT FORM

function submitForm(event) {

event.preventDefault();

showScreen('thankyou');

}

// CREATE FLOATING PARTICLES

const particles = document.getElementById('particles');

for (let i = 0; i < 65; i++) {

const particle = document.createElement('div');

particle.className = 'particle';

particle.style.left = Math.random() * 100 + '%';

particle.style.animationDuration =
        (5 + Math.random() * 12) + 's';

particle.style.animationDelay =
        (Math.random() * 10) + 's';

particles.appendChild(particle);

}

</script>

</body>
</html>

CSS

Comments 0

…