Hi guys welcome to the Mr.Ethical Yt blog. Today we are going create a login page using html and css.In next post we will see how to add the user details to firebase database.
First create a folder with name WebPage. Inside the folder add a file with name index.html. Add the below code the index file.
CSS
body{
margin: 0;
padding: 0;
font-family: Sans-Serif;
background: #ffffff;
}
.box{
width: 260px;
padding: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%) ;
text-align: center;
background: #000;
}
.box input[type="text"],.box input[type="password"]{
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #FF0000;
padding: 14px 10px;
width: 250px;
outline: none;
color: white;
border-radius: 24px;
}
.box input[type="submit"]{
background: #3498db;
border: 0px;
font-weight: bold;
margin: 20px auto;
padding: 14px 40px;
font-family: Sans-Serif;
width: 200px;
color: white;
border-radius: 12px;
}
.box h3{
color: white;
font-family: Sans-Serif;
font-weight: normal;
font-size: 10px;
}
.box h6{
color: white;
} HTML
<!DOCTYPE html>
<html lang="em" dir="ltr">
<head>
<title>Login</title>
<script src="index.js"></script>
</head>
<body>
<div class="box" action="index.html">
<img src="assets/webviews/images/unnamed.png" width="80" height="80" />
<input id="username" type="text" name="" placeholder="Username" />
<input id="password" type="password" name="" placeholder="Password" />
<input type="submit"id='submitData' name="login" value="Login" />
<h3 id="te">Created by Mr.Ethical Yt</h3>
</div>
</body>
</html>In src give the url or path to your logo in my case it was in assets/webviews/images/
For complete code check below
<!DOCTYPE html>
<html lang="em" dir="ltr">
<head>
<title>Login</title>
<script src="index.js"></script>
</head>
<style type="text/css">
body{
margin: 0;
padding: 0;
font-family: Sans-Serif;
background: #ffffff;
}
.box{
width: 260px;
padding: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%) ;
text-align: center;
background: #000;
}
.box input[type="text"],.box input[type="password"]{
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #FF0000;
padding: 14px 10px;
width: 250px;
outline: none;
color: white;
border-radius: 24px;
}
.box input[type="submit"]{
background: #3498db;
border: 0px;
font-weight: bold;
margin: 20px auto;
padding: 14px 40px;
font-family: Sans-Serif;
width: 200px;
color: white;
border-radius: 12px;
}
.box h3{
color: white;
font-family: Sans-Serif;
font-weight: normal;
font-size: 10px;
}
.box h6{
color: white;
}
</style>
<body>
<div class="box" action="index.html">
<img src="assets/webviews/images/unnamed.png" width="80" height="80" />
<input id="username" type="text" name="" placeholder="Username" />
<input id="password" type="password" name="" placeholder="Password" />
<input type="submit"id='submitData' name="login" value="Login" />
<h3 id="te">Created by Mr.Ethical Yt</h3>
</div>
</body>
<script type="module">
submitData.addEventListener("click" ,(e)=>{
var username=document.getElementById("username").value;
var password=document.getElementById("password").value;
if (username=="admin"&&password=="123") {
window.location.href="assets/webviews/main.html";
}
});
</script>
</html>
That's it for today guys in the next post are going to add firebase database to our login page and authentic the users.Keep follow our blog check other posts bye guys..