HTML, Accedi Registrati animato

2318 codekafe

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

10 July 2025

Effetto di passaggio del mouse sul pulsante animato CSS

28 November 2024

Sfondo animato Matrix

23 August 2025

Portfolio di sviluppatori web: HTML, CSS, JavaScript

HTML

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login & Register</title>
    <link rel="stylesheet" href="style3.css">
</head>
<body>
    <div class="container">
        <div class="form-container login-container">
            <form action="#">
                <h1>Login</h1>
                <input type="email" placeholder="Email" required />
                <input type="password" placeholder="Kata Sandi" required />
                <button type="submit">Masuk</button>
                <span>Belum punya akun? <a href="#" class="toggle">Daftar</a></span>
            </form>
        </div>
        <div class="form-container register-container">
            <form action="#">
                <h1>Daftar</h1>
                <input type="text" placeholder="Nama Lengkap" required />
                <input type="email" placeholder="Email" required />
                <input type="password" placeholder="Kata Sandi" required />
                <button type="submit">Daftar</button>
                <span>Sudah punya akun? <a href="#" class="toggle">Masuk</a></span>
            </form>
        </div>
    </div>
    <script src="java.js"></script>
</body>
</html>

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(to right, #6a11cb, #2575fc);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    width: 100%;
    max-width: 400px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    position: relative;
}

.form-container {
    padding: 20px;
    transition: all 0.5s ease;
}

h1 {
    margin-bottom: 20px;
    text-align: center;
}

input {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    width: 100%;
    padding: 10px;
    background: #6a11cb;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease;
}

Consigliato

Effetto di passaggio del mouse sul pulsante animato CSS

Sfondo animato Matrix

Portfolio di sviluppatori web: HTML, CSS, JavaScript

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS