How TO - Register Form with Icons Code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="STYLESHEET"type="text/css"href="web.css">
<title>web design</title>
</head>
<body>
<form>
<h1>Register</h1>
<div class="form-container">
<i class="fa fa-user icon"></i>
<input type="text" class="input-field"placeholder="User name">
</div>
<div class="form-container">
<i class="fa fa-envelope icon"></i>
<input type="text" class="input-field"placeholder="Email">
</div>
<div class="form-container">
<i class="fa fa-key icon"></i>
<input type="password" class="input-field"placeholder="password">
</div>
<button type="submit"class="btn">Register</button>
</form>
</body>
</html>
CSS Form with Icons Style Code
.form-container{
display: -ms-flexbox;
display: flex;
width:100%;
margin-bottom:15px;
}
.icon{
padding:10px;
background-color: dodgerblue;
color: #fff;
min-width:50px;
text-align: center;
}
.input-field{
padding:10px;
width: 100%;
outline: none;
}
.input-field:focus{
border:2px solid dodgerblue ;
}
.btn{
background-color: dodgerblue;
color: #fff;
border: none;
padding:15px 20px;
cursor: pointer;
width:100%;
opacity:0.9;
}
.btn:hover{
opacity:1;
}
No comments:
Post a Comment