Hello Viewer, Here you’ll Find Code Beautifull Registration Form Design in html and css and now I’m going to Create a Registration Form Design using html and css.
HTML CODE -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<title>Registration Form Design in html and css with Source code</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" id="bootstrap-css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<form method="post" id="frmSubmit">
<h1 class="text-center m-title">Register Here</h1>
<label>
<p class="label-txt">ENTER YOUR NAME <span class="text-danger">*</span></p>
<input type="text" class="input" name="name" required>
<div class="line-box">
<div class="line"></div>
</div>
</label>
<label>
<p class="label-txt">ENTER YOUR EMAIL <span class="text-danger">*</span></p>
<input type="text" class="input" name="email" required>
<div class="line-box">
<div class="line"></div>
</div>
</label>
<label>
<p class="label-txt">ENTER YOUR MOBILE <span class="text-danger">*</span></p>
<input type="text" class="input" name="mobile" required>
<div class="line-box">
<div class="line"></div>
</div>
</label>
<button type="submit">Submit</button>
<div id="msg"></div>
</form>
</body>
</html>
CSS CODE -
body {
background-image: linear-gradient(to right top, #e2f613, #f8c600, #ff9400, #fd5e19, #eb1238);
}
form {
width: 60%;
margin: 60px auto;
background:#fff;
padding: 60px 120px 80px 120px;
text-align: center;
-webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.1);
box-shadow: 2px 2px 3px rgba(0,0,0,0.3),
6px 8px 12px rgba(0,0,0,0.4),
18px 32px 48px inset rgba(0,0,0,0.5),
25px 40px 56px inset rgba(0,0,0,0.6);
border-radius:10px;
}
.m-title{
font-size:40px;
color:#f72352;
font-family: sans-serif;
}
label {
display: block;
position: relative;
margin: 40px 0px;
}
.label-txt {
position: absolute;
top: -2.6em;
padding: 10px;
font-family: sans-serif;
font-size: .8em;
letter-spacing: 1px;
color: rgb(120,120,120);
transition: ease .3s;
}
.input {
width: 100%;
padding: 10px;
background: transparent;
border: none;
outline: none;
border-radius:8px;
}
.line-box {
position: relative;
width: 100%;
height: 2px;
background: #BCBCBC;
}
.line {
position: absolute;
width: 0%;
height: 2px;
top: 0px;
left: 50%;
transform: translateX(-50%);
background: #f92453;
transition: ease .6s;
}
.input:focus + .line-box .line {
width: 100%;
}
.label-active {
top: -3em;
}
button {
display: inline-block;
padding: 12px 24px;
background: rgb(220,220,220);
font-weight: bold;
color: rgb(120,120,120);
border: none;
outline: none;
border-radius: 3px;
cursor: pointer;
transition: ease .3s;
}
button:hover {
background: #f92453;
color: #ffffff;
}
#msg{
color:red;
}
0 Comments