This content originally appeared on DEV Community and was authored by Innocent Coder
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 :-
This content originally appeared on DEV Community and was authored by Innocent Coder
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
Innocent Coder | Sciencx (2021-04-30T08:12:38+00:00) Make A Modern Registration Form Using HTML And CSS. Retrieved from https://www.scien.cx/2021/04/30/make-a-modern-registration-form-using-html-and-css/
" » Make A Modern Registration Form Using HTML And CSS." Innocent Coder | Sciencx - Friday April 30, 2021, https://www.scien.cx/2021/04/30/make-a-modern-registration-form-using-html-and-css/
HARVARDInnocent Coder | Sciencx Friday April 30, 2021 » Make A Modern Registration Form Using HTML And CSS., viewed ,<https://www.scien.cx/2021/04/30/make-a-modern-registration-form-using-html-and-css/>
VANCOUVERInnocent Coder | Sciencx - » Make A Modern Registration Form Using HTML And CSS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/04/30/make-a-modern-registration-form-using-html-and-css/
CHICAGO" » Make A Modern Registration Form Using HTML And CSS." Innocent Coder | Sciencx - Accessed . https://www.scien.cx/2021/04/30/make-a-modern-registration-form-using-html-and-css/
IEEE" » Make A Modern Registration Form Using HTML And CSS." Innocent Coder | Sciencx [Online]. Available: https://www.scien.cx/2021/04/30/make-a-modern-registration-form-using-html-and-css/. [Accessed: ]
rf:citation » Make A Modern Registration Form Using HTML And CSS | Innocent Coder | Sciencx | https://www.scien.cx/2021/04/30/make-a-modern-registration-form-using-html-and-css/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.