Tutorial to create a login page.Top 10 design.
Attractive Registration form html/css page tutorial with source code .
1. Blue Login Box -Techie Touch
HTML
CSS:
.ini{
background-color:#4682B4;
}
.fbone{
width:350px;
height:200px;
border:8px solid #6E6E6E;
border-radius:5px;
}
#but{
padding:7px 5px;
margin:25px 0 0 50px;
background-color:#1E90FF;
color:white;
border:none;
font:14px sans-serif;
font-weight:bold;
-moz-box-shadow: 1px 1px 2px 1px #ccc;
-webkit-box-shadow: 1px 1px 2px 1px #ccc;
box-shadow: 1px 1px 2px 1px #ccc;
text-decoration:none;
}
.input {
border:2px solid #dadada;
background: #ffc;
border-radius:6px;
font-size:14px;
padding:5px;
margin-bottom:10px;
}
.input:hover {
background: #ff6;
border-color:#9ecaed;
box-shadow:0 0 8px #9ecaed;
}
2.
________________________________________________________________________________
Attractive Registration form html/css page tutorial with source code .
1. Blue Login Box -Techie Touch
HTML
<!Doctype html>
<html>
<div class="fbone">
<div class="ini">
<br>
Name:<br><input type="text" class="input" name="name" /><br>
Password: <br><input type="password" class="input" name="psw" />
<br>
<input type="submit" id="but" value="Login" />
</div></div>
</html>
<html>
<div class="fbone">
<div class="ini">
<br>
Name:<br><input type="text" class="input" name="name" /><br>
Password: <br><input type="password" class="input" name="psw" />
<br>
<input type="submit" id="but" value="Login" />
</div></div>
</html>
CSS:
.ini{
background-color:#4682B4;
}
.fbone{
width:350px;
height:200px;
border:8px solid #6E6E6E;
border-radius:5px;
}
#but{
padding:7px 5px;
margin:25px 0 0 50px;
background-color:#1E90FF;
color:white;
border:none;
font:14px sans-serif;
font-weight:bold;
-moz-box-shadow: 1px 1px 2px 1px #ccc;
-webkit-box-shadow: 1px 1px 2px 1px #ccc;
box-shadow: 1px 1px 2px 1px #ccc;
text-decoration:none;
}
.input {
border:2px solid #dadada;
background: #ffc;
border-radius:6px;
font-size:14px;
padding:5px;
margin-bottom:10px;
}
.input:hover {
background: #ff6;
border-color:#9ecaed;
box-shadow:0 0 8px #9ecaed;
}
2.
________________________________________________________________________________
0 comments:
Post a Comment