DEV Community

loading...
Cover image for Make A Modern Registration Form Using HTML And CSS

Make A Modern Registration Form Using HTML And CSS

innocentcoder profile image Innocent Coder ・3 min read

Designing an HTML sign-up form for a website or blog can be hard. Here we have listed down the most useful and unique CSS3 sign-up and registration form templates that are easy to download and use.

A well-designed registration form is vital for any website to capture new users with ease. Whether it is an eCommerce-related project, social network, blog, portal, or anything, these below templates can be used regardless of the type of your website.

Download Source Code:- https://www.websitemakers.xyz/2021/04/make-modern-registration-form-using.html

HTML

<section class="row">
        <div class="column">
            <div  class="left-container">
                <h3>Simple way to sharing bill with friends</h3>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing 
                    elit. Quo in sapiente adipisc.
                </p>
                <div class="registration-container">
                    <div class="register-content">
                        <div class="input-content">
                            <label for="register">
                                Register with email address
                            </label>
                            <input type="email" name="register" /> 
                        </div>
                        <button>Register Now</button>
                    </div>
                    <img src="./images/dots-10.png" alt="">
                </div>  
            </div>
        </div>
        <div class="column">
            <div  class="right-container">
               <img class="image1" src="./images/model1.png" alt="">
               <span class="green-dot"></span>
               <img class="image2" src="./images/dots-10 white.png" alt="">
               <img class="image3" src="./images/model2.png" alt="">
               <span class="blue-dot"></span>
               <img class="image4" src="./images/model3.png" alt="">
               <span class="purple-dot"></span>
               <span class="pink-dot"></span>
               <span class="neon-dot"></span>
               <span class="dark-blue-dot"></span>
               <img class="image5" src="./images/dots-10 white-4.png" alt="">
               <img class="wave" src="./images/wave.png" alt="">
               <img class="image6" src="./images/model4.png" alt="">
               <span class="yellow-dot"></span>
               <span class="dark-purple-dot"></span>
               <img class="wave1" src="./images/wave.png" alt="">
            </div>
        </div>
    </section>
Enter fullscreen mode Exit fullscreen mode

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap');
*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}
body{
    background: #DFE3EF;
}
.column {
    float: left;
    width: 50%;
    height: 100vh;
}
.row{
    overflow: hidden;
}
.row:after {
    content: "";
    display: table;
    clear: both;
}
.left-container{
    background-color: #fff;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding-left: 230px;
    position: relative;
    height: 100vh; 
}
.left-container h3{
    font-size: 45px;
    width: 70%;
    line-height: 60px;
    color: #0e1318;
    margin-top: -10px;
}
.left-container p{
    width: 58%;
    font-size: 13px;
    font-weight: 500;
    color: #727272;
    margin-top: 19px;
}
.left-container .register-content{
    width: 450px;
    box-shadow: 2px 2px 15px rgba(0,0,0,.2);
    padding: 15px 30px 20px;
    display: flex;
    align-items: center;
    margin-top: 40px;
    position: absolute;
    left: 5%;
    background-color: #fff;
    z-index: 10;
} 
.left-container .register-content .input-content{
    display: flex;
    flex-direction: column;
    width: 70%;
}
.input-content label{
    font-size: 13px;
    color: #727272;
    margin-bottom: 11px;
}
.input-content input{
    border: none;
    border-bottom: 1px solid #a7a7a7;
    padding-bottom: 2px;
}
.input-content input:focus{
    outline: none;
}
.registration-container{
    position: relative;
}
.register-content button{
    width: 140px;
    height: 45px;
    margin-top: 9px;
    margin-left: 10px;
    background-color: #FF7240;
    outline: none;
    border: none;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
}
.registration-container img{
    width: 60px;
    margin-top: 100px;
    margin-left: -5px;
}
.right-container{
    background-color: #0E243C;
    height: 100vh; 
    position: relative;
    z-index: 1;
}
.right-container .image1{
    width: 140px;
    position: absolute;
    left: -10%;
    top: 6%;
}
.right-container .image2{
    width: 60px;
    position: absolute;
    left: 2%;
    top: 40%;
}
.right-container .green-dot{
    width: 70px;
    height: 70px;
    background-color: #19e49d;
    position: absolute;
    left: -5%;
    top: 35%;
    border-radius: 50%;
}
.right-container .image3{
    width: 100px;
    position: absolute;
    left: 15%;
    bottom: 30%;
    transform: rotate(-10deg);
}
.right-container .blue-dot{
    width: 10px;
    height: 10px;
    background-color: #3c69f0;
    position: absolute;
    left: 20%;
    bottom: 25%;
    border-radius: 50%;
}
.right-container .image4{
    width: 190px;
    position: absolute;
    left: 35%;
    top: 20%;
}
.right-container .purple-dot{
    width: 10px;
    height: 10px;
    background-color: #7c66c4;
    position: absolute;
    left: 22%;
    top: 20%;
    border-radius: 50%;
}
.right-container .pink-dot{
    width: 30px;
    height: 30px;
    background-color: #f35636;
    position: absolute;
    left: 30%;
    top: -2%;
    border-radius: 50%;
}
.right-container .neon-dot{
    width: 10px;
    height: 10px;
    background-color: #19e49d;
    position: absolute;
    right: 25%;
    top: 18%;
    border-radius: 50%;
}
.right-container .dark-blue-dot{
    width: 60px;
    height: 60px;
    background-color: #346BEF;
    position: absolute;
    right: -1%;
    top: 0%;
    transform: rotate(35deg);
}
.right-container .image5{
    width: 50px;
    position: absolute;
    right: 5%;
    top: 5%;
}
.right-container .wave{
    width: 70px;
    position: absolute;
    right: 25%;
    top: 40%;
}
.right-container .wave1{
    width: 70px;
    position: absolute;
    left: 35%;
    bottom: 15%;
}
.right-container .image6{
    width: 150px;
    position: absolute;
    right: 17%;
    bottom: 10%;
}
.right-container .yellow-dot{
    width: 10px;
    height: 10px;
    background-color: #f5c34e;
    position: absolute;
    right: 40%;
    top: 55%;
    border-radius: 50%;
}
.right-container .dark-purple-dot{
    width: 40px;
    height: 40px;
    background-color: #8949E3;
    position: absolute;
    right: -3%;
    top: 50%;
    border-radius: 50%;
}
Enter fullscreen mode Exit fullscreen mode

Note:- visit my youtube channel for frontend tutorials

subscribe to my youtube channel :- https://www.youtube.com/channel/UCR64vQptythbJ1SmI-ub0Rg

Resent post :-

Discussion (0)

pic
Editor guide