Creating Registration / Sign Up Form Using HTML & CSS.
Hello Friends , In this blog you'll learn how to create Registration or Sign Up Form using only HTML & CSS.
You can also sign up with Using Social Media Platforms.
*Note : Create two files 1st one is HTML file and 2nd one is CSS file and save these two files with its extensions as,
HTML file : index.html
CSS file : style.css
HTML and CSS code is as follows :
HTML Code: (index.html)
<!DOCTYPE html>
<html lang="en">
<head> <!--created by 8bit-code-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Regester here</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="favicon.png" >
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
<div class="register-content">
<h2> Register Here</h2>
<form>
<input type="text" class="form-control" placeholder="Username" required> <br>
<input type="email" class="form-control" placeholder="Email" required> <br>
<input type="password" class="form-control" placeholder="password" required> <br>
<input type="password" class="form-control" placeholder="confirm password" required><br>
<button type="submit" class="btn btn-primary">Register</button>
</form>
<h3>or sign up with</h3>
<span>
<a href="#"> <i class="fa fa-facebook-square" ></i></a>
<a href="#"> <i class="fa fa-twitter-square"></i></a>
<a href="#"><i class="fa fa-google" ></i></a>
</span>
</div>
</div>
</body>
</html>
CSS Code : (style.css)
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');
*{
box-sizing: border-box;
}/* created by 8bit-code*/
body{
align-items: center;
display: flex;
font-family: "Ubuntu";
font-size: 16px;
justify-content: center;
min-height: 100vh;
background-image: url(pattern.png);
}
.container{
border-radius: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
width: 350px;
background: #3b5998;
} /* created by 8bit-code*/
.register-content
{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 20px;
}
.register-content h2
{
text-align: center;
font-size: 35px;
border-bottom: 2px solid #c46415;
}
.form-control
{
padding: 8px;
margin: 10px;
}
.register-content .btn-primary
{
border-radius: 1.5rem;
border: none;
width: 120px;
background: #ff5722;
font-weight: 600;
color: #000000;
margin: 15px 0 0 45px;
padding: 13px;
outline: none;
cursor: pointer;
}
.register-content .btn-primary:active{
background-color: rgb(245, 113, 6);
box-shadow: 0 2px 2px 2px #666;
}
span{
margin-top: 8px;
}
span a{
background: #ffffff;
font-size: 36px;
padding: 12px;
border-radius: 36px;
}
i.fa.fa-twitter-square,.fa-facebook-square,.fa-google{
color: #1DA1F2;
}
i.fa-facebook-square{
color: #3b5998;
}i.fa-google{
color: tomato;
}
If you have any problems while creating this Movie Cards you can watch this video.
0 Comments