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>
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%;
}
Note:- visit my youtube channel for frontend tutorials
subscribe to my youtube channel :- https://www.youtube.com/channel/UCR64vQptythbJ1SmI-ub0Rg
Resent post :-
Top comments (0)