Cool Metal style Sign UP HTML5 Form

The Metal style form is designed in HTML5 & CSS3.this form can be use in any way.whether use in signup,login or personal details .you just have to change tag name of form with your required tag name.

Code of form

<html>
<head>
<style>
#toc
{
border-radius:100px;
height:40px;
border:none;
box-shadow:inset 1px 1px 2px black;
font-size:23px;
}
#strt{
margin-left:100px;
font-size:23px;
font-family:arial;
color:#4E0748;
}

#strt tr td{
padding-top:10px;
padding-bottom:10px;
}
</style>
</head>
<body>
<form style='background:url(http://pks.site50.net/texture2.jpg);width:500px;height:auto;padding:10px;border-radius:20px;border:5px double orange;box-shadow:inset 1px 1px 8px black;'>
<div style='background:#1520A3;border-radius:100px;width:200px;box-shadow:1px 1px 25px black;'>
<div style='background:white;width:30px;height:30px;border-radius:30px;position:absolute;margin-left:6px;margin-top:5px;box-shadow:inset 1px 1px 10px black;'>
</div>
<span style='margin-left:60px;font-size:35px;color:white;font-family:arial;'>Sign up</span></div>
<table  id='strt'>
<tr>
<td>First name :</td>
<td><input type='text' id='toc'></td>
</tr>
<tr>
<td>Last name :</td>
<td><input type='text' id='toc'></td>
</tr>
<tr>
<td>e-mail :</td>
<td><input type='email' id='toc' ></td>
</tr>
<tr>
<td>Contact :</td>
<td><input type='text' id='toc' placeholder='+91'></td>
</tr>
<tr>
<td>Title :</td>
<td><input type='text' id='toc'></td>
</tr>
</table>
<div style='background: #1520A3;width:200px;border-radius:100px;box-shadow:1px 1px 25px black;margin-left:300px;'>
<div style='border-radius:30px;width:30px;height:30px;background:white;position:absolute;margin-left:163px;margin-top:6px;box-shadow:inset 1px 1px 10px black;'>
</div>
<input type='submit' value='+ Submit' style='color:white;background:transparent;border:none;margin-left:10px;font-size:30px'/></div>
</form>
</body>
</html>

if you want to change anything in form.you must have to known html & css code and in that way you can modify tag name as you require.

Cool Metal style Sign UP HTML5 Form

1 comments:

Translate