HTMLCODE
link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<div class="box">
<h1>SIGN-UP</h1>
<form>
<i class="fa fa-user icon" aria-hidden="true"></i>
<input type="text" placeholder=" Enter your name"><br>
<i class="fa fa-phone icon" aria-hidden="true"></i>
<input type="text" placeholder=" Enter your phone number"><br/>
<i class="fa fa-envelope icon" aria-hidden="true"></i>
<input type="email" placeholder=" Enter your Email"><br/>
<i class="fa fa-lock icon" aria-hidden="true"></i>
<input type="password" placeholder="Enter your password"><br/>
<i class="fa fa-lock icon" aria-hidden="true"></i>
<input type="password" placeholder="Re-enter password">
<button type="submit">Submit</button>
</form>
</div>
</body>
CSS CODE
body{
margin:0 auto;
background-image:url(https://images.pexels.com/photos/33582/sunrise-phu-quoc-island-ocean.jpg?auto=compress&cs=tinysrgb&h=350);
background-repeat: no-repeat;
background-size: cover;
opacity:0.8;
}
.box{
width:400px;
height:480px;
background: #400080;
margin-top:100px;
margin-left: 420px;
opacity: 0.9;
text-align: center;
border-radius:5px;
}
.box h1{
color:white;
text-align: center;
font-size: 50px;
}
input[type="text"],input[type="email"],input[type="password"]{
width:300px;
height:30px;
margin-bottom: 25px;
font-size: 15px;
border:1px solid black;
padding-left: 45px;
}
.icon{
position: absolute;
padding-top: 8px;
margin-right: 15px;
width:45px;
}
button[type="submit"]{
background:green;
cursor: pointer;
width:150px;
height:35px;
border: 1px solid black;
font-size:20px;
color: white;
border-radius:20px;
}
0 comments:
Post a Comment