<!DOCTYPE html>
<html>
<head>
<style>
.more{
border:2px solid #d9d9d9;
width:300px;
margin-left:150px;
padding:50px 50px;
text-align:center;
font-family:Verdana;
}
.btnmore{
margin-left:100px;
cursor:pointer;
padding:5px 10px;
}
.btnadd{
margin-left:250px;
border-radius:12px;
padding:10px 30px;
border:none;
background-color: #4CAF50;
color:white;
cursor:pointer;
font-family:Verdana;
font-size:20px;
}
.gender{
margin-left:250px;
margin-top:-10px;
}
.name{
width:300px;
margin-left:150px;
padding:50px 30px;
font-family:Verdana;
}
.name input{
text-align:center;
padding:5px 10px;
}
.container{
border:2px solid;
height:980px;
background-color:#99b3ff;
width:680px;
margin-left:330px;
border:none;
}
</style>
</head>
<body>
<h1 style="text-align:center; font-style:"Arial Black", Gadget, sans-serif;">Add Useful Contact</h1>
<div class="container">
<div class="name">
Mobile:<input type="number" placeholder="Your Mobile Number" style="margin-left:40px;"><br><br>
First Name:<input type="text" placeholder="Your First Name" style="margin-left:5px;"><br><br>
Last Name:<input type="text" placeholder="Your Last Name" style="margin-left:10px;"><br><br>
Location:<input type="text" style="margin-left:15px;"><br><br>
Catagory:<input type="text"style="margin-left:auto;">
</div>
<p style="margin-left:200px; margin-top:-10px;">Gender:</p>
<div class="gender" >
<input type="radio" name="Gender" value="male">Male<br>
<input type="radio" name="Gender" value="male">Female<br><br>
</div>
<p style="margin-left:240px;">Details:</p>
<textarea rows="4" cols="20" style="margin-left:300px; margin-top:-35px;"></textarea><br><br>
<button class="btnmore">More...</button><br><br>
<div class="more">
Other Contact:<input class="Contact" type="text" style="width: 50%;"><br><br>
Email:<input class="Contact" type="text" style="width: 50%; margin-left:70px"><br><br>
City:<input class="Contact" type="text" style="width: 50%; margin-left:80px"><br><br>
Pin:<input class="Contact" type="text" style="width: 50%; margin-left:90px" ><br><br>
District:<input class="Contact" type="text" style="width: 50%; margin-left:60px"><br><br>
Country:<input class="Contact" type="text" style="width: 50%; margin-left:55px"><br><br>
</div><br><br>
<button class="btnadd">Add Contact</button>
</div>
</body>
</html>
alignment problem. use css code to make it better
ReplyDelete