HTML, लॉगिन रजिस्टर एनिमेटेड

संपादक में खोलें अपना कोड प्रकाशित करें क्या आपको एक वेबसाइट चाहिए?

अनुशंसित

21 May 2025

मूल्य निर्धारण इंटरैक्शन (HTML, CSS और JS)

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

HTML, लॉगिन रजिस्टर एनिमेटेड

अनुशंसित

एनिमेटेड लैंप

फेसबुक लॉगिन पेज

मूल्य निर्धारण इंटरैक्शन (HTML, CSS और JS)

HTML

CSS

JS

अनुशंसित

एनिमेटेड लैंप

फेसबुक लॉगिन पेज

मूल्य निर्धारण इंटरैक्शन (HTML, CSS और JS)

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS