HTML, Connexion Inscription animée

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

8 September 2024

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

HTML, Connexion Inscription animée

Recommandé

Hacker de connexion

Formulaire de connexion LED

Page de connexion

HTML

CSS

JS

Recommandé

Hacker de connexion

Formulaire de connexion LED

Page de connexion

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS