Design login page using html and css
Learn How to make a responsive login page using HTML and CSS. latest login page UI design with HTML and CSS. Web site Design Tutorial
Video Tutorial
For Download the Background image Click Here
How to use the code in stpe by step
- Open Your text Editor(like: VS code, SublimeText or Notepad++)
- Create a .html(like: index.html) file
- Copy the HTML code the code and past in the index.html file
- Then, Create a .css(like: style.css) file
- Copy the CSS code and past in style.css file
- Open the file in your browser
HTML CODE
HTML is a standard language for web page. With HTML you can create your own website. HTML is easy to learn - You will enjoy it
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Responsive Login Page Design</title>
</head>
<body>
<div class="cointainer">
<div class="login_form">
<div class="top_cointaent">
<img src="https://img.icons8.com/bubbles/2x/user-male.png">
</div>
<h2>Login</h2>
<div class="input_place">
<div class="input_filds">
<label for="username">Username</label><br>
<i class="fa fa-user"></i>
<input type="text" placeholder="Enter your username" name="username" autocomplete="off">
</div>
<div class="input_filds">
<label for="passowrd">Password</label><br>
<i class="fa fa-lock"></i>
<input type="password" placeholder="Enter your passowrd" name="passowrd">
</div>
<h6><a href="#">Forgot Password?</a></h6>
<button type="submit">Login</button>
<div class="other_signin_option">
<h6>Or Signup Using</h6>
<i class="fa fa-google"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
</div>
<div class="signin_btn">
<h6>Have not account yet?</h6>
<h5><a href="#">SIGN UP<i class="fa fa-arrow-right"></i></a></h5>
</div>
</div>
</div>
</div>
</body>
</html>
CSS CODE
The Full from of CSS is Cascading Style Sheets. It explains how to show HTML elemnts on display. For web designers, it is powerfull tool to adjust the design and control of the web pages t demonstrate how they should be viewed.
@import url('https://fonts.googleapis.com/css2?family=Girassol&display=swap');
@import "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.cointainer{
width: 100%;
height: 100vh;
background: rgb(8,33,193);
background: linear-gradient(11deg, rgba(8,33,193,1) 0%, rgba(16,140,180,1) 23%, rgba(239,0,255,1) 74%);
}
.cointainer::before{
content: "";
position: absolute;
width: 400px;
height: 300px;
background-color: rgba(253, 253, 253, 0.186);
clip-path: polygon(0 0, 8% 0, 41% 77%, 0 100%);
}
.cointainer::after{
content: "";
position: absolute;
width: 500px;
height: 600px;
background-color: rgba(0, 0, 0, 0.186);
clip-path: polygon(100% 19%, 69% 39%, 100% 100%);
right: 0;
}
.login_form{
width: 300px;
height: 500px;
background: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 15px;
box-shadow: 2px 5px 8px 0 rgba(250, 250, 250, 0.467), 0 10px 20px 0 rgba(255, 255, 255, 0.19);
z-index: 9;
}
.top_cointaent{
text-align: center;
position: relative;
}
.top_cointaent img{
width: 100px;
position: absolute;
top: -50px;
left: 35%;
}
.login_form h2{
text-align: center;
margin-top: 40px;
font-family: 'Girassol', cursive;
font-size: 2rem;
color: #999;
}
.input_place{
width: 100%;
margin-top: 50px;
}
.input_filds label{
width: 100%;
padding: 20px;
color: #999;
}
.input_filds input{
border: none;
width: 80%;
outline: none;
border-bottom: 1px solid #000;
padding: 10px;
padding-left: 5px;
margin-bottom: 5px;
color: #999;
}
::placeholder{
color: #999;
}
.input_filds i{
padding-left: 20px;
padding-top: 10px;
padding-bottom: 10px;
color: #999;
}
.input_place h6 a{
text-decoration: none;
float: right;
padding: 10px 50px;
color: #edd730;
}
.input_place button{
width: 80%;
padding: 8px;
margin-left: 30px;
border-radius: 15px 50px;
border: none;
outline: none;
background: rgb(8, 33, 193);
background: linear-gradient(11deg, rgba(8,33,193,1) 0%, rgba(16,140,180,1) 23%, rgba(239,0,255,1) 74%);
color: #fff;
font-size: 20px;
font-family: 'Girassol', cursive;
cursor: pointer;
}
.other_signin_option{
text-align: center;
margin-top: 10px;
}
.other_signin_option h6{
font-size: 15px;
color: #999;
margin-bottom: 5px;
}
.other_signin_option i{
border: 1px solid #fff;
border-radius: 50%;
width: 30px;
height: 30px;
}
.fa-google{
background: rgb(209, 17, 17);
color: #fff;
font-size: 15px;
padding-top: 6px;
cursor: pointer;
}
.fa-google:hover{
background: #fff;
color: rgb(209, 17, 17);
}
.fa-twitter{
background: #00acee;
color: #fff;
font-size: 15px;
padding-top: 6px;
cursor: pointer;
}
.fa-twitter:hover{
background: #fff;
color: #00acee;
}
.fa-facebook{
background: #3b5998;
color: #fff;
font-size: 15px;
padding-top: 6px;
cursor: pointer;
}
.fa-facebook:hover{
background: #fff;
color: #3b5998;
}
.signin_btn{
text-align: center;
margin-top: 25px;
color: #999;
}
.signin_btn h6{
margin-top: 5px;
}
.signin_btn h5 a{
text-decoration: none;
color: #999;
}
.signin_btn h5 a:hover{
color: rgb(104, 102, 102);
}
.signin_btn h5 i{
padding-left: 8px;
}
Posts
No comments: