How To Create Sign Up Page in HTML and CSS
Sign Up Page in HTML
Learn how to make a Registration Form using HTML and CSS. Easy way to create Sign up/Registration Page in HTML and CSS for beginners. You will easily make this sign up page by watching my video tutorial, which I have given below.
How To Make Registration Form in HTML and CSS
- 0.0 - 1.00 min : Intro
- 1.00 - 17.0 min: Create Sign Up Page Using HTML And CSS
About This Tutorial
In this tutorial, I Will Teach You How to Make a Signup page in HTML and CSS. In the video tutorial, First 60s, I show the Registration Form Design, which I will create in the tutorial. After, I start to make the registration form. I make this SignUp Just using HTML and CSS. I hope you like this tutorial. If you have any questions or any problems, Contact me.
<html> <head> <meta charset="utf-8"> <title>Sign-up</title> <link href="css/style.css" rel="stylesheet"> </head> <body> <!--container----------------------> <div class="container"> <!--sign-up-box-container---> <div class="sign-up"> <!--heading--> <h1 class="heading">Hello,Friend</h1> <!--name-box--> <div class="text"> <img height="20px" src="images/user.png" /> <input placeholder=" Name" type="text" /> </div> <!--Email-box--> <div class="text"> <img height="12px" src="images/email.png" /> <input placeholder=" Example@gmail.com" type="email" /> </div> <!--Password-box--> <div class="text"> <img height="20px" src="images/password.png" /> <input placeholder=" Password" type="password" /> </div> <!--trems--> <div class="trems"> <input type="checkbox" /> <p class="conditions">I read and agree to <a href="#">Trems & Conditions</a></p> </div> <!--button--> <button>CREATE ACCOUNT</button> <!--sign-in--> <p class="conditions">Already have an account <a href="#">Sign in</a></p> </div> <!--text-container--> <div class="text-container"> <h1 style="color: #2d2c2c; font-family: arial; line-height: 20px;">Glade to see you</h1> <p>Wellcome,Please Fill in the blanks for sign up</p> </div> </div> </body> </html>
@charset "utf-8";
/* CSS Document */
body{
background-color:#eef1f8;
margin:0px;
padding:0px;
}
a{
text-decoration:none;
}
.container{
width:72%;
height:70%;
background-color:#FFFFFF;
position: absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
box-shadow:2px 2px 30px rgba(66,57,238,0.2);
border-radius:20px;
display:flex;
justify-content: center;
align-items:center;
background-image: url("../images/bg.gif");
background-repeat:no-repeat;
background-size:cover;
}
.sign-up{
width:50%;
display:flex;
flex-direction:column;
align-items: center;
}
.text-container{
width:50%;
height:100%;
display:flex;
flex-direction:column;
justify-content: center;
align-items: center;
margin-left:-40px;
}
.heading{
font-family:calibri;
color:rgba(30,30,30,1);
}
.text{
width:350px;
height:50px;
box-shadow:2px 6px 18px rgba(66,57,238,0.3);
border-radius: 30px;
display:flex;
align-items:center;
margin:10px;
}
.text input{
height:40px;
width:80%;
outline:none;
border:none;
font-size:14px;
margin:5px;
}
.text img{
margin-left:20px;
}
.conditions{
font-family:myriad pro;
color:#bbc1cb;
font-size:14px;
}
.trems{
display: flex;
align-items:center;
}
.conditions a{
color:#7d22e3;
font-weight:500;
}
button{
width:200px;
height:40px;
outline:none;
border:none;
border-radius:20px;
background:linear-gradient(-30deg,#3b02ed,#8e2ae0 55%);
box-shadow:2px 6px 16px rgba(66,57,238,0.3);
color:#FFFFFF;
font-weight:600;
letter-spacing:1px;
font-weight: 13px;
}
button:active{
transform:scale(1.1);
}
.text-container p{
width:70%;
text-align: center;
font-family:arial;
font-size: 15px;
font-weight: 400;
line-height:0px;
}
The Download Links Will Be Shown in 30 Seconds
Comments