A login form is an essential component of many websites and applications that require users to authenticate before accessing certain contents.
Source Code
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<!-- Font Awesome Cdn Link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
</head>
<body>
<div class="wrapper">
<h1>Hello World!</h1>
<p>Welcome to the Website</p>
<form>
<input type="text" placeholder="Enter username">
<input type="password" placeholder="Password">
<p class="recover">
<a href="#">Recover Password</a>
</p>
<closeform></closeform>
</form>
<button>Sign in</button>
<p class="or">
----- or continue with -----
</p>
<div class="icons">
<i class="fab fa-google"></i>
<i class="fab fa-github"></i>
<i class="fab fa-facebook"></i>
</div>
<div class="not-member">
Not a member? <a href="#">Register Now</a>
</div>
</div>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body{
background: #dfe9f5;
}
.wrapper{
width: 330px;
padding: 2rem 0 1rem 0;
margin: 50px auto;
background: #fff;
border-radius: 10px;
text-align: center;
box-shadow: 0 20px 35px rgba(0, 0, 0, 0.1);
}
h1{
font-size: 2rem;
color: #07001f;
}
p{
margin-bottom: 1.7rem;
}
form input{
width: 85%;
outline: none;
border: none;
background: #dfe9f5;
padding: 12px 14px;
margin-bottom: 10px;
border-radius: 10px;
}
.recover{
text-align: right;
font-size: 0.8rem;
margin: 0.2rem 1.7rem 0 0;
}
.recover a{
text-decoration: none;
color: #07001f;
}
button{
font-size: 1.1rem;
margin-top: 1rem;
padding: 8px 0;
border-radius: 5px;
outline: none;
border: none;
width: 85%;
background: rgb(71, 105, 255);
color: #fff;
cursor: pointer;
}
button:hover{
background: rgba(122, 30, 30, 0.767);
}
.or{
font-size: 0.8rem;
margin-top: 1.5rem;
}
.icons i{
color: #07001f;
padding: 00.8rem 1.5rem;
border-radius: 10px;
margin-left: .9rem;
font-size: 1.5rem;
cursor: pointer;
border: 2px solid #dfe9f5;
}
.icons i:hover{
color: #fff !important;
background: #07001f;
transition: 1s;
}
.icons i:first-child{
color: green;
}
.icons i:last-child{
color: blue;
}
.not-member{
font-size: 0.8rem;
margin-top: 1.4rem;
}
.not-member a{
color: tomato;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
JavaScript
// Try edit me
const message = 'Hello Morioh!'
// Update text
document.querySelector('#root').innerHTML = message
// Log to console
console.log(message)
Step By Step Explanation of above JS code snippet:
•const message = 'Hello Morioh!':
This line creates a constant variable named message and assigns it the value of the string "Hello Morioh!".
•document.querySelector('#root').innerHTML = message:
This line finds the HTML element with the ID of "root" using the querySelector method and sets its innerHTML property to the value of the message variable. This means that the text "Hello Morioh!" will be displayed on the webpage where the element with ID "root" is located.
•console.log(message):
This line logs the value of the message variable to the browser console, which is a useful tool for debugging and troubleshooting code.
Comments
Post a Comment
Hello,
Thank you for taking the time to leave a comment! Your feedback is important to us and we appreciate any suggestions or thoughts you may have. We strive to create the best possible experience for our users and your comments will help us achieve that goal.
If you have any questions or concerns, please don't hesitate to reach out to us. We're here to help and are always happy to hear from our users.
Thank you again for your comment and have a great day!
Best regards,
NewWebSofts