How to make a login page using HTML CSS and JavaScript with source code
The HTML code is here:-
<!DOCTYPE html>
<html lang="en">
<HTML>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>login page</title>
<!-- HTML -->
<!-- Custom Styles -->
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/d2f9ebebd7.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="login">
<!--image-->
<input type="file" name="flie" id="image5" value="" accept="image/*" style="display: none;"/>
<div id="preview">
<label for="image5" id="uploder">
<i class="fas fa-upload">upload</i>
</label>
<img src="avatar.png" alt="" id="avatar" />
<br /><br />
</div>
<!--first and last name-->
<form action="https://rajankumar.w3spaces.com/">
<label>Firstname</label><br />
<input type="text" name="fname" id="fname" value="" required /><br />
<br />
<label>Lastname</label><br />
<input type="text" name="lname" id="lname" value="" required/>
<br />
<!--terms and conditions-->
<br />
<input type="checkbox" name="" id="check" value="" required />
<label for="#check">I have read <a href ="#">terms and conditions</a></label>
<!--login button-->
<br /><br />
<button style="
background-color: #04AA6D;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
font-size: 20px;
font-weight: bold;
" id="login">login</button>
</form>
</div>
<script src="main.js"></script>
</body>
</html>
The Css code is here :-
#preview{
height:170px;
width:170px;
border-radius: 50%;
margin-left:5rem;
margin-top: 20px;
margin-bottom:50px;
}
#uploder{
margin-left:35px;
background-color: #FFC432;
padding:10px 20px;
box-shadow:2px 2px 2px gray;
}
#preview img{
height:170px;
border-radius: 50%;
width:170px;
margin-top: 20px;
}
#fname{
padding: 10px 20px;
border: 1px solid #ccc;
outline: none;
font-size: 15px;
width:85%;
margin-left:5px;
margin-right: 10px;
}
#lname {
padding: 10px 20px;
border: 1px solid #ccc;
outline: none;
font-size: 15px;
width: 85%;
margin-left: 5px;
margin-right: 10px;
}
label{
font-weight: bold;
margin-left:5px;
}
The is code is here:-
var avatar = document.getElementById('avatar');
var avatar = document.getElementById('fname');
var avatar = document.getElementById('lname');
var avatar = document.getElementById('check');
var avatar = document.getElementById('login');
var img = document.getElementById('image5');
var preview =document.getElementById('preview');
img.addEventListener("change", function(){
var view =URL.createObjectURL(this.files[0]);
var imageurl = `<img src="${view}"/>`;
preview.innerHTML=imageurl;
})
Comments
Post a Comment