top of page

Login and Sign up UI Design Animation

Login and Sign up UI Design Cool Design with free code use html bootstrap
side slide animation

Login and Sign up UI Design Animation
Login and Sign up UI Design Cool Design with free code use html bootstrap
side slide animation


<!DOCTYPE html>

<html lang="en">


<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Master Leaf | Login & Register</title>

    <!-- BOXICONS -->

    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>

    <!-- STYLE -->

    <link rel="stylesheet" href="assets/css/style.css">

</head>


<body>

    <!-- Form Container -->

    <div class="form-container">

        <div class="col col-1">

            <div class="image-layer">

                <img src="assets/img/white-outline.png" class="form-image-main">

                <img src="assets/img/dots.png" class="form-image dots">

                <img src="assets/img/coin.png" class="form-image coin">

                <img src="assets/img/spring.png" class="form-image spring">

                <img src="assets/img/rocket.png" class="form-image rocket">

                <img src="assets/img/cloud.png" class="form-image cloud">

                <img src="assets/img/stars.png" class="form-image stars">

            </div>


            <p class="featured-words">You Are Few Minutes Way To Boot Your Skills With <span>Master Leaf</span> </p>


        </div>

        <div class="col col-2">

            <div class="btn-box">

                <button class="btn btn-1" id="login">Sign In</button>

                <button class="btn btn-2" id="register">Sign Up</button>

            </div>


            <!---login form container-->

            <div class="login-form">

                <div class="form-title">

                    <span>Sign In</span>

                </div>


                <div class="form-inputs">

                    <div class="input-box">

                        <input type="text" class="input-field" placeholder="Username">

                        <i class="bx bx-user icon"></i>

                    </div>


                    <div class="input-box">

                        <input type="password" class="input-field" placeholder="Password">

                        <i class="bx bx-lock-alt icon"></i>

                    </div>


                    <div class="forgot-pass">

                        <a href="#">Forgot Password?</a>

                    </div>

                    <div class="input-box">

                        <button class="input-submit"><span>Sign In <i class="bx bx-right-arrow-alt"></i></span></button>

                    </div>

                </div>


                <div class="social-login">

                    <i class="bx bxl-google"></i>

                    <i class="bx bxl-facebook"></i>

                    <i class="bx bxl-twitter"></i>

                    <i class="bx bxl-github"></i>

                </div>

            </div>


            <!-- Register Form Container -->

            <div class="register-form">

                <div class="form-title">

                    <span>Creat Account</span>

                </div>


                <div class="form-inputs">

                    <div class="input-box">

                        <input type="Email" class="input-field" placeholder="Email">

                        <i class="bx bx-user icon"></i>

                    </div>


                    <div class="form-inputs">

                        <div class="input-box">

                            <input type="text" class="input-field" placeholder="Username">

                            <i class="bx bx-user icon"></i>

                        </div>


                        <div class="input-box">

                            <input type="password" class="input-field" placeholder="Password">

                            <i class="bx bx-lock-alt icon"></i>

                        </div>


                        <div class="forgot-pass">

                            <a href="#">Forgot Password?</a>

                        </div>

                        <div class="input-box">

                            <button class="input-submit"><span>Sign In <i

                                        class="bx bx-right-arrow-alt"></i></span></button>

                        </div>



                        <div class="social-login">

                            <i class="bx bxl-google"></i>

                            <i class="bx bxl-facebook"></i>

                            <i class="bx bxl-twitter"></i>

                            <i class="bx bxl-github"></i>

                        </div>

                    </div>

                </div>


            </div>




        </div>









        <!-- Login Form Container -->






        <!-- JS -->

        <script src="assets/js/main.js"></script>

</body>


</html>




html, java, css, Bootstrap

bottom of page