top of page

Login and Sign up UI Design

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

Login and Sign up UI Design

This code provides a simple login and sign up form with basic styling using Bootstrap. It has two sections, one for login and the other for sign up. The JavaScript at the bottom is used to toggle between the two sections when the corresponding link is clicked.


<!doctype html>

<html lang="en">

  <head>

    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

    <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

     <link rel="stylesheet" href="style10.css">

    <title>login</title>

  </head>

  <body>

    <div class="container">

         <div class="myCard">

            <div class="row">

                <div class="col-md-6">

                    <div class="myLeftCtn">


                        <form action="" class="myForm text-center">

                            <header>Create new account</header>

                            <div class="form-group">

                                <i class="fas fa-user"></i>

                                <input type="text" class="myInput" placeholder="Username" id="username" required>

                                <div class="invalid-feedback">Please fill out this field.</div>

                            </div>

                            <div class="form-group">

                                <i class="fas fa-envelope"></i>

                                <input type="email" class="myInput" placeholder="Email" id="username" required>                    

                            </div>


                            <div class="form-group">

                                <i class="fas fa-lock"></i>

                                <input type="password" class="myInput" placeholder="Email" id="username" required>                    

                            </div>


                             <div class="form-group">

                                <label>

                                    <input type="checkbox" id="check_1" name="check_1" required> <small>I read and agree to Term & conditions</small></input>

                                    <div class="invalid-feedback">Please fill out this field.</div>

                                </label>

                             </div>


                              <input type="submit" class="butt" value="CREATE ACCOUNT">


                        </form>

                    </div>

                </div>

                

                <div class="col-md-6">

                    <div class="myRightCtn">

                        <div class="box">

                            <header>Hello world</header>

                            <p>

                                Lorem Ipsum is simply dummy text of the printing 

                                and typesetting industry. Lorem Ipsum has been the industry'

                                s standard dummy text ever since the 1500s, when an unknown printer took a galleycdc

                           </p>

                              <input type="button" class="butt_out" value="Learn more"/>

                        </div>

                    </div>

                </div>

            </div>

         </div>

    </div>


 




    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>


   

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"></script>

  </body>

</html>



Star CSS

*{

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

body

{

    background: #fbf3ff;

}

.container

{

    position: absolute;

    max-width: 800px;

    height: 500px;

    margin: auto;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

}

.myRightCtn

{

    position: relative;

    background-image: linear-gradient(45deg,#f046ff, #9b00e8);

    border-radius: 25px;

    height: 100%;

    padding: 25px;

    color: rgb(192,192,192);

    font-size: 12px;

    display: flex;

    justify-content: center;

    align-items: center;

}

.myLeftCtn

{

    position: relative;

    background: #fff;

    border-radius: 25px;

    height: 100%;

    padding: 25px;

    padding-left: 50px;

}

.myLeftCtn header

{

    color: blueviolet;

    font-size: 24px;

    font-weight: 20px;

    margin-bottom: 20px;

}

.row

{

height: 100%;

}

.myCard

{

    position: relative;

    background: #fff;

    height: 100%;

    border-radius: 25px;

    -webkit-box-shodow: 0px 10px 40px -10px rgba(0,0,0,0.7);

    -moz-box-shodow:0px 10px 40px -10px rgba(0,0,0,0.7);

    box-shadow: 0px 10px 40px -10px rgba(0,0,0,0.7);

}   

.myRightCtn header

{

    color: #fff;

    font-size: 44px;

}

.box

{

    position: relative;

    margin: 20px;

    margin-bottom: 100px;

}




.myLeftCtn .myInput

{

    width: 230px;

    border-radius: 25px;

    padding: 10px;

    padding-left: 50px;

    border: none;

    -webkit-box-shodow: 0px 10px 49px -14px rgba(0,0,0,0.7);

    -moz-box-shodow:0px 10px 49px -14px rgba(0,0,0,0.7);

    box-shadow: 0px 10px 49px -14px rgba(0,0,0,0.7);


}

.myLeftCtn .myInput:focus

{

    outline: none;

}

.myForm

{

    position: relative;

    margin-top: 50px;

}

.myLeftCtn .butt

{

    background: linear-gradient(45deg,#f046ff, #9b00e8);

    color: #fff;

    width: 230px;

    border: none;

    border-radius: 25px;

    padding: 10px;

    -webkit-box-shodow: 0px 10px 41px -11px rgba(0,0,0,0.7);

    -moz-box-shodow:0px 10px 41px -11px rgba(0,0,0,0.7);

    box-shadow: 0px 10px 41px -11px rgba(0,0,0,0.7);

}

.myLeftCtn .butt:hover

{

    background: linear-gradient(45deg,#c85bff, #b726ff);  

}


.myLeftCtn .butt:focus

{

 outline: none;  

}

.myLeftCtn .fas

{

    position: relative;

    color: #bb36fd;

    left: 36px;

}

.butt_out

{

    background: transparent;

    color: #fff;

    width: 120px;

    border: 2px solid#fff;

    border-radius: 25px;

    padding: 10px;

    -webkit-box-shodow: 0px 10px 41px -11px rgba(0,0,0,0.7);

    -moz-box-shodow:0px 10px 41px -11px rgba(0,0,0,0.7);

    box-shadow: 0px 10px 41px -11px rgba(0,0,0,0.7);

}

.butt_out:hover

{

    border: 2px solid#eecbff;

}

.butt_out:focus

{

    outline: none;

}


html, java

bottom of page