html
<style>
html{
background:url(image/mp.jpg) no-repeat center center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o- background-size:cover;
background-size:cover;
}
</style>
</head>
<body>
<div class="total-area">
<div class="form-total-area">
<h1> My Form</h1>
<form>
<input type="text" placeholder="Firstname">
<input type="text" placeholder="Lastname">
<input type="email" placeholder="Email">
<input type="password" placeholder="password">
<input type="password" placeholder="confirm password">
<div>
<input type="radio" id="Male" name="gender"><label for="Male">Male</label>
<input type="radio" id="Female" name="gender"><label for="Female">Female</label>
</div>
<div>
<input type="submit" name="submit">
</div>
</form>
</div>
</div>
html{
background:url(image/mp.jpg) no-repeat center center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o- background-size:cover;
background-size:cover;
}
</style>
</head>
<body>
<div class="total-area">
<div class="form-total-area">
<h1> My Form</h1>
<form>
<input type="text" placeholder="Firstname">
<input type="text" placeholder="Lastname">
<input type="email" placeholder="Email">
<input type="password" placeholder="password">
<input type="password" placeholder="confirm password">
<div>
<input type="radio" id="Male" name="gender"><label for="Male">Male</label>
<input type="radio" id="Female" name="gender"><label for="Female">Female</label>
</div>
<div>
<input type="submit" name="submit">
</div>
</form>
</div>
</div>
css
body{
background-color:none;
}
h1{
text-align:center;
font-size:50px;
font-family:Georgia, "Times New Roman", Times, serif;
color:#FFF;
}
.total-area{ width:30%; margin:0 auto;}
.form-total-area{width:100%;float:left;padding:15px;
background:#03507A80;
margin-top: 15%;}
form{
width: 95%;
color:#000;
}
input{
padding:10px;
font-size:inherit;
}
input[type="text"] {
display:block;
margin-bottom:25px;
width:100%;
border: 2px solid #000;
}
input[type="email"] {
display:block;
margin-bottom:25px;
width:100%;
border: 2px solid #000;
}
input[type="password"] {
display:block;
margin-bottom:25px;
width:100%;
border: 2px solid #000;
}
input[type="radio"]{
margin: 0 8px 25px 18px;
}
input[type="radio"]:first-child {
margin-left:0;
}
input[type="submit"] {
width: 402px;
height:15%;
border:none;
background-color:#0CF;
color:#000;
}
input:focus {
background-color:#C0F0EE;
}
input[type="radio"]:checked + label{
font-weight:bold;
font-size:18px;
}
background-color:none;
}
h1{
text-align:center;
font-size:50px;
font-family:Georgia, "Times New Roman", Times, serif;
color:#FFF;
}
.total-area{ width:30%; margin:0 auto;}
.form-total-area{width:100%;float:left;padding:15px;
background:#03507A80;
margin-top: 15%;}
form{
width: 95%;
color:#000;
}
input{
padding:10px;
font-size:inherit;
}
input[type="text"] {
display:block;
margin-bottom:25px;
width:100%;
border: 2px solid #000;
}
input[type="email"] {
display:block;
margin-bottom:25px;
width:100%;
border: 2px solid #000;
}
input[type="password"] {
display:block;
margin-bottom:25px;
width:100%;
border: 2px solid #000;
}
input[type="radio"]{
margin: 0 8px 25px 18px;
}
input[type="radio"]:first-child {
margin-left:0;
}
input[type="submit"] {
width: 402px;
height:15%;
border:none;
background-color:#0CF;
color:#000;
}
input:focus {
background-color:#C0F0EE;
}
input[type="radio"]:checked + label{
font-weight:bold;
font-size:18px;
}
No comments:
Post a Comment