Formulaire de connexion

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

30 March 2025

Modèle HTML de joueur de jeu Ruffle Flash

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
    <link rel="stylesheet" href="styles.css">
    <title>ZheerSoftware</title>
   
 
</head>
<body>
    <div class="container">
        <div class="signin-signup">
            <form action="" class="sign-in-form">
                <h2 class="title">Sign in</h2>
                <div class="input-field">
                    <i class="fas fa-user"></i>
                    <input type="text" placeholder="Username">
                </div>
                <div class="input-field">
                    <i class="fas fa-lock"></i>
                    <input type="password" placeholder="Password">
                </div>
                <input type="submit" value="Login" class="btn">
                <p class="social-text">Or Sign in with social platform</p>
                <div class="social-media">
                    <a href="#" class="social-icon">
                        <i class="fab fa-facebook"></i>
                    </a>
                    <a href="" class="social-icon">
                        <i class="fab fa-twitter"></i>
                    </a>
                    <a href="" class="social-icon">
                        <i class="fab fa-google"></i>
                    </a>
                    <a href="" class="social-icon">
                        <i class="fab fa-linkedin-in"></i>
                    </a>
                </div><button class="btn" ><a href="#">Back to Main</a></button>
                <p class="account-text">Don't have an account? <a href="#" id="sign-up-btn2">Sign up</a></p>
            </form>
            <form action="" class="sign-up-form">
                <h2 class="title">Sign up</h2>
                <div class="input-field">
                    <i class="fas fa-user"></i>
                    <input type="text" placeholder="Username">
                </div>
                <div class="input-field">
                    <i class="fas fa-envelope"></i>
                    <input type="text" placeholder="Email">
                </div>
                <div class="input-field">
                    <i class="fas fa-lock"></i>
                    <input type="password" placeholder="Password">
                </div>
                <input type="submit" value="Sign up" class="btn"><button class="btn" ><a href="indexx.html">Back to Main</a></button>
                <p class="social-text">Or Sign in with social platform</p>
                <div class="social-media">
                    <a href="#" class="social-icon">
                        <i class="fab fa-facebook"></i>
                    </a>
                    <a href="" class="social-icon">
                        <i class="fab fa-twitter"></i>
                    </a>
                    <a href="" class="social-icon">
                        <i class="fab fa-google"></i>
                    </a>
                    <a href="" class="social-icon">
                        <i class="fab fa-linkedin-in"></i>
                    </a>
                </div>
                <p class="account-text">Already have an account? <a href="#" id="sign-in-btn2">Sign in</a></p>
            </form>
        </div>
        <div class="panels-container">
            <div class="panel left-panel">
                <div class="content">
                    <h3>Member of Kurd GYM?</h3>
                    <p>ZheerSoftware.</p>
                    <button class="btn" id="sign-in-btn">Sign in</button>
                </div>
                <img src="signin.svg" alt="" class="image">
            </div>
            <div class="panel right-panel">
                <div class="content">
                    <h3>New to Kurd GYM?</h3>
                    <p>First and Best Kurdish GYM Website.</p>
                    <button class="btn" id="sign-up-btn">Sign up</button>
                </div>
                <img src="signup.svg" alt="" class="image">
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

/* Replace with your CSS Code 
(Leave empty if not needed) */                                           
* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Poppins', sans-serif;
    }
    body {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        background: #473838;
    }
    .container {
        position: relative;
        width: 70vw;
        height: 80vh;
        background: #fff;
        border-radius: 15px;
        box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
        overflow: hidden;
    }
    .container::before {
        content: "";
        position: absolute;
        top: 0;
        left: -50%;
        width: 100%;
        height: 100%;
        background: linear-gradient(-45deg, rgb(121, 108, 197), #520852);
        z-index: 6;
        transform: translateX(100%);
        transition: 1s ease-in-out;
    }
    .signin-signup {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        z-index: 5;
    }
    form {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 40%;
        min-width: 238px;
        padding: 0 10px;
    }
    form.sign-in-form {
        opacity: 1;
        transition: 0.5s ease-in-out;
        transition-delay: 1s;
    }
    form.sign-up-form {
        opacity: 0;
        transition: 0.5s ease-in-out;
        transition-delay: 1s;
    }
    .title {
        font-size: 35px;
        color: rgb(121, 108, 197);
        margin-bottom: 10px;
    }
    .input-field {
        width: 100%;
        height: 50px;
        background: #f0f0f0;
        margin: 10px 0;
        border: 2px solid rgb(121, 108, 197);
        border-radius: 50px;
        display: flex;
        align-items: center;
    }
    .input-field i {
        flex: 1;
        text-align: center;
        color: #666;
        font-size: 18px;
    }
    .input-field input {
        flex: 5;
        background: none;
        border: none;
        outline: none;
        width: 100%;
        font-size: 18px;
        font-weight: 600;
        color: #444;
    }
    .btn {
        width: 150px;
        height: 50px;
        border: none;
        border-radius: 50px;
        background: rgb(121, 108, 197);
        color: #fff;
        font-weight: 600;
        margin: 10px 0;
        text-transform: uppercase;
        cursor: pointer;
    }
    .btn:hover {
        background: rgb(121, 108, 197);
    }
    .social-text {
        margin: 10px 0;
        font-size: 16px;
    }
    .social-media {
        display: flex;
        justify-content: center;
    }
    .social-icon {
        height: 45px;
        width: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #444;
        border: 1px solid #444;
        border-radius: 50px;
        margin: 0 5px;
    }
    a {
        text-decoration: none;
    }
    .social-icon:hover {
        color: rgb(121, 108, 197);
        border-color: rgb(121, 108, 197);
    }
    .panels-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    .panel {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        width: 35%;
        min-width: 238px;
        padding: 0 10px;
        text-align: center;
        z-index: 6;
    }
    .left-panel {
        pointer-events: none;
    }
    .content {
        color: #fff;
        transition: 1.1s ease-in-out;
        transition-delay: 0.5s;
    }
    .panel h3 {
        font-size: 24px;
        font-weight: 600;
    }
    .panel p {
        font-size: 15px;
        padding: 10px 0;
    }
    .image {
        width: 100%;
        transition: 1.1s ease-in-out;
        transition-delay: 0.4s;
    }
    .left-panel .image,
    .left-panel .content {
        transform: translateX(-200%);
    }
    .right-panel .image,
    .right-panel .content {
        transform: translateX(0);
    }
    .account-text {
        display: none;
    }
    /*Animation*/
    .container.sign-up-mode::before {
        transform: translateX(0);
    }
    .container.sign-up-mode .right-panel .image,
    .container.sign-up-mode .right-panel .content {
        transform: translateX(200%);
    }
    .container.sign-up-mode .left-panel .image,
    .container.sign-up-mode .left-panel .content {
        transform: translateX(0);
    }
    .container.sign-up-mode form.sign-in-form {
        opacity: 0;
    }
    .container.sign-up-mode form.sign-up-form {
        opacity: 1;
    }
    .container.sign-up-mode .right-panel {
        pointer-events: none;
    }
    .container.sign-up-mode .left-panel {
        pointer-events: all;
    }
    /*Responsive*/
    @media (max-width:779px) {
        .container {
            width: 100vw;
            height: 100vh;
        }
    }
    @media (max-width:635px) {
        .container::before {
            display: none;
        }
        form {
            width: 80%;
        }
        form.sign-up-form {
            display: none;
        }
        .container.sign-up-mode2 form.sign-up-form {
            display: flex;
            opacity: 1;
        }
        .container.sign-up-mode2 form.sign-in-form {
            display: none;
        }
        .panels-container {
            display: none;
        }
        .account-text {
            display: initial;
            margin-top: 30px;
        }
    }
    @media (max-width:320px) {
        form {
            width: 90%;
        }
    }

Formulaire de connexion

Recommandé

Un code par ytr3d3

Bouton de survol au néon

Modèle HTML de joueur de jeu Ruffle Flash

HTML

CSS

JS

Recommandé

Un code par ytr3d3

Bouton de survol au néon

Modèle HTML de joueur de jeu Ruffle Flash

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS