______________________________________________________________________________
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta charset="utf-8"/>
<style>
body{
background-color: white;
color:red;
padding: 20px;
margin-left: auto;
}</style>
<meta name="author" content="wasiii"/>
<title>Regestration Form</title>
<link href="style.css" type="text/css" rel="stylesheet"/>
<script> </script>
<noscript> </noscript>
</head>
<body>
<div id="container1">
<div id="container3">
<img src="avatar.png" alt="avatar" height="0170" width="0170"/>
<h3 id="heading2"><span>Hey!</span> I am new user</h3>
</div>
<div id="container2">
<h1 id="heading">Regestration</h1>
<form>dfsf
<input type="text" class="name" placeholder="first name" maxlength="10"/>
<input type="text" class="name" placeholder="second name" maxlength="10"/>
<br/><input type="email" class="email" placeholder="email" maxlength="10"/>
<br/><input type="text" class="tel" placeholder="Mobile Number" maxlength="20"/>
<br/><input type="text" class="tel" placeholder="password" maxlength="20"/>
<br/><input type="text" class="tel" placeholder="conform password" maxlength="20"/><br/>
<input type="submit" value="submit" class="submit"/>
</form>
</div>
</div>
</body>
</html>______________________________________________________________________________
CSS:
_________________________________________________________________________________
body{
padding: 0;
margin: 0;
font-family: 'Courier New', Courier, monospace;
background-color: #011627;
}
#container1{
height: 500px;
width: 800px;
background-color:white;
position: absolute;
top: 10%;
left: 18%;
border-style:solid;
border-color: #011627;
border-radius: 3px;
}
#heading{
text-transform: uppercase;
padding-right: 140px;
padding-top: 10px;
letter-spacing: 2px;
color:#011627;
font-size: 35px;
font-weight: 500;
}
#container2{
margin-top: 30px;
padding-left:;
float: right;
}
.name{
margin-top: 10px;
text-transform: uppercase;
color:black;
padding-bottom: 20px;
background: none;
border-style: none none solid none;
padding-right: 20px;
border-color: #011627;
font-size: 12px;
}
.email{
margin-top: 10px;
text-transform: uppercase;
color:black;
padding-bottom: 20px;
background: none;
border-style: none none solid none;
padding-right: 185px;
border-color: #011627;
font-size: 12px;
}
.tel{
margin-top: 10px;
text-transform: uppercase;
color:black;
padding-bottom: 20px;
background: none;
border-style: none none solid none;
padding-right: 185px;
border-color: #011627;
font-size: 12px;
}
.rad{
padding-top: 20px;
margin-top: 10px;
display: inline;
}
#gen{
text-transform: uppercase;
color: #011627;
}
.submit{
margin-top: 20px;
text-transform: uppercase;
background-color:#011627;
color: white;
border-radius: 20px;
margin-left: 100px;
border-style:solid;
font-weight: bold;
border-color: #011627;
font-size: 12px;
padding: 10px 30px 10px 30px;
}
.submit:hover{
background-color: white;
color:#011627;
border-color: #011627;
cursor: pointer;
font-weight: bold;
}
#container3{
float: left;
padding: 90px 0px 0px 90px;
}
#heading2{
text-transform: uppercase;
padding-right: 0px;
padding-top: 10px;
letter-spacing: 2px;
color:#011627;
font-size: 15px;
font-weight: 500;
}
span{
text-transform: uppercase;
letter-spacing: 2px;
color:#011627;
font-size: 25px;
font-weight: 700;
}______________________________________________________________________________
2 Comments
this is really nice, many many thanks
ReplyDeleteI love this blog ... Thanks for sharing this wonderful information...Don't forget to check this Animated Login Form using HTML CSS & JavaScript
ReplyDelete