HTML, Iniciar sesión Registrarse animado

1590 codekafe

Abrir en el editor Publica tu código ¿Necesitas un sitio web?

HTML, Iniciar sesión Registrarse animado

Recomendado

23 June 2025

Ejemplo de formulario de inicio de sesión HTML

8 September 2024

Pantalla de carga de puntos animados

2 July 2025

Iniciar sesión desde TheDOC

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;
}

Recomendado

Ejemplo de formulario de inicio de sesión HTML

Pantalla de carga de puntos animados

Iniciar sesión desde TheDOC

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS