Create User Login Interface for Your Website:
PLEASE READ ALL INSTRUCTIONS:
- Hello guys Here You will got Complete Html and Css code for User Login Interface.
- Simply You Have To Copy this Code And Paste in your Notepad or Notepad++
- Please save this file with filename.html
- Example : login.html or file.html you can choose any name but save must with .html extension.
- After saving go to in your folder where you save this file and double click for run
- please make sure save your image file in that folder where you have saved source code file
- if image is not set correctly then output will be diiferent.
- Search a top on ur code where it will written ........
- body{
background:url('pic.jpg'); change this pic.jpg here you have to give ur image file name.
background-size:cover;
}
2. this is in bottom ur source code ....
<img src="images/ritik.png" valign="top" width="70" height="70"/>
here you have to change ritik.png with your image file name. And underline images is folder name
in which you have to save ur profile image.
- CODE:
<!DOCTYPE html>
<html>
<head>
<title>User Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
box-sizing:border-box;
}
body{
background:url('pic.jpg');
background-size:cover;
}
.wrap{
max-width:400px;
margin:auto;
margin-top:50px;
padding:20px;
font-family:sans-serif;
background:#fff;
border-radius:10px;
}
.wrap h4{
font-size:1em;
text-align:center;
}
button{
padding:10px;
width:49%;
box-sizing:border-box;
border:none;
font-size:1.3em;
border-radius:10px;
font-weight:bold;
}
button a{
text-decoration:none;
color:#fff;
}
button:nth-child(1){
background:red;
}
button:nth-child(2){
background:blue;
}
button:hover{
background:rgba(0,0,0,0.6);
}
.fa{
font-size:1.3em;
font-weight:bold;
}
form{
margin-top:30px;
}
input[type=text],input[type=password],input[type=submit]{
width:100%;
padding:10px;
margin-bottom:15px;
font-size:17px;
border-radius:5px;
outline:none;
border:2px solid gray;
}
label{
font-size:20px;
font-weight:bold;
}
input[type=submit]{
background:green;
border:none;
color:#fff;
font-size:20px;
font-weight:bold;
margin-top:20px;
padding:15px;
cursor:pointer;
}
input[type=submit]:hover{
background:orange;
}
p{
text-align:center;
}
p a{
text-decoration:none;
font-weight:bold;
}
</style>
</head>
<body>
<div class="wrap">
<img src="images/ritik.png" valign="top" width="70" height="70"/>
<h3 align="center"><u>CodexRitik</u></h3>
<h4>Log in With</h4>
<div class="social-media">
<button><a href="www.google.com"><i class="fa fa-google"></i>Google</a></button>
<button><a href="www.facebook.com"><i class="fa fa-facebook"></i>Facebook</a></button>
</div>
<form>
<label> Username:</label><br>
<input type ="text">
<label> Password:</label><br>
<input type ="password">
<input type="submit" value ="Log In">
</form>
<p>New User?<a href="#">Sign Up</a></p>
</div>
</body>
</html>
- Click for Image View
🙏 THANKS FOR VISIT🙏
Create User Login Interface Using HTML and CSS || CodexRitik
Reviewed by CodexRitik
on
September 07, 2020
Rating:
Reviewed by CodexRitik
on
September 07, 2020
Rating:
Wow good
ReplyDelete