Login Page is a basic page which is create in html using a form tag of html and by adding a css to it can make it more functional and interactive. Below is the code of login page using html ans css.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login Form Uging HTLM CSS</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="login-box">
<h2>Login</h2>
<form>
<div class="user-box">
<input type="text" name="" required="">
<label>Username</label>
</div>
<div class="user-box">
<input type="password" name="" required="">
<label>Password</label>
</div>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
Submit
</a>
</form>
</div>
</body>
</html>{codeBox}
This is a basic HTML document that includes a link to a CSS stylesheet. It also contains a login form, styled with CSS.
The first line <!DOCTYPE html> is a declaration that tells the browser what version of HTML to use. In this case, it's HTML5.
The <html> tag is the root element of an HTML document and everything inside it belongs to the document.
The <head> tag contains meta information about the document, such as the character encoding, the title of the document, and links to external resources.
The <title> tag sets the title of the document, which appears in the browser's title bar or tab.
The <link> tag is used to link external resources, in this case, a stylesheet with the filename style.css.
The <body> tag contains all the content that will be displayed in the browser window.
The <div> tag with a class of login-box defines a container for the login form.
The <h2> tag displays the heading "Login".
The <form> tag contains the inputs and button for the login form.
The <div> tags with a class of user-box contain the input fields for the username and password.
The <input> tags define the input fields, with type="text" for the username and type="password" for the password. The required attribute specifies that the user must enter a value for each field before submitting the form.
The <label> tags are used to describe the purpose of each input field.
The <a> tag creates a link that will be styled as a button using CSS. The text "Submit" is displayed inside the button, along with four empty <span> tags that will be styled as lines to create a box around the text.
Overall, this HTML code creates a basic login form with two input fields for the username and password, and a submit button styled as a box with lines around the text.
Style.css
html {height: 100%;}body {margin:0;padding:0;font-family: sans-serif;background: linear-gradient(#141e30, #243b55);}.login-box {position: absolute;top: 50%;left: 50%;width: 400px;padding: 40px;transform: translate(-50%, -50%);background: rgba(0,0,0,.5);box-sizing: border-box;box-shadow: 0 15px 25px rgba(0,0,0,.6);border-radius: 10px;}.login-box h2 {margin: 0 0 30px;padding: 0;color: #fff;text-align: center;}.login-box .user-box {position: relative;}.login-box .user-box input {width: 100%;padding: 10px 0;font-size: 16px;color: #fff;margin-bottom: 30px;border: none;border-bottom: 1px solid #fff;outline: none;background: transparent;}.login-box .user-box label {position: absolute;top:0;left: 0;padding: 10px 0;font-size: 16px;color: #fff;pointer-events: none;transition: .5s;}.login-box .user-box input:focus ~ label,.login-box .user-box input:valid ~ label {top: -20px;left: 0;color: #03e9f4;font-size: 12px;}.login-box form a {position: relative;display: inline-block;padding: 10px 20px;color: #03e9f4;font-size: 16px;text-decoration: none;text-transform: uppercase;overflow: hidden;transition: .5s;margin-top: 40px;letter-spacing: 4px}.login-box a:hover {background: #03e9f4;color: #fff;border-radius: 5px;box-shadow: 0 0 5px #03e9f4,0 0 25px #03e9f4,0 0 50px #03e9f4,0 0 100px #03e9f4;}.login-box a span {position: absolute;display: block;}.login-box a span:nth-child(1) {top: 0;left: -100%;width: 100%;height: 2px;background: linear-gradient(90deg, transparent, #03e9f4);animation: btn-anim1 1s linear infinite;}@keyframes btn-anim1 {0% {left: -100%;}50%,100% {left: 100%;}}.login-box a span:nth-child(2) {top: -100%;right: 0;width: 2px;height: 100%;background: linear-gradient(180deg, transparent, #03e9f4);animation: btn-anim2 1s linear infinite;animation-delay: .25s}@keyframes btn-anim2 {0% {top: -100%;}50%,100% {top: 100%;}}.login-box a span:nth-child(3) {bottom: 0;right: -100%;width: 100%;height: 2px;background: linear-gradient(270deg, transparent, #03e9f4);animation: btn-anim3 1s linear infinite;animation-delay: .5s}@keyframes btn-anim3 {0% {right: -100%;}50%,100% {right: 100%;}}.login-box a span:nth-child(4) {bottom: -100%;left: 0;width: 2px;height: 100%;background: linear-gradient(360deg, transparent, #03e9f4);animation: btn-anim4 1s linear infinite;animation-delay: .75s}@keyframes btn-anim4 {0% {bottom: -100%;}50%,100% {bottom: 100%;}}{codeBox}
The first part of the code sets the background of the HTML document to a linear gradient from a dark blue color (#141e30) to a lighter blue color (#243b55). It also sets the height of the HTML element to 100%, and applies some font and padding properties to the body.
The second part of the code styles the login box itself. It sets the position to absolute and centers it both horizontally and vertically using the top, left, and transform properties. It also sets the width, padding, background color, box-shadow, and border-radius. Inside the login box, it defines a heading with a white color, and styles the input fields and labels for the username and password.
Finally, it adds a stylized link that can be used for submitting the login form, using a combination of text, linear gradients, animations, and transitions. When the link is hovered over, the background color changes, and the box-shadow and gradient colors change as well. The link is made up of four span elements, each with their own linear gradient and animation applied to them.
