Un codice di mo832860

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

7 March 2025

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

Un codice di mo832860

Consigliato

Modulo di accesso animato

Calcolatrice di data

Un codice di Mete

HTML

CSS

JS

Consigliato

Modulo di accesso animato

Calcolatrice di data

Un codice di Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS