This project builds a stylish animated login page with a futuristic grid-style background. The page uses dozens of animated blocks to create a dynamic, glowing visual effect behind the login form. The sign-in card stays centered and clearly visible while the background continuously animates. Floating labels enhance usability by reacting smoothly to user input. Overall, the project focuses on modern UI design using pure HTML and CSS without JavaScript logic.
HTML
<div class="signin">
<div class="content">
<h2>Sign In</h2>
</div>
</div>
The HTML defines a full-screen section that holds both the animated background and the login form. A large number of empty <span> elements are used to create a grid layout that later becomes the animated background. These spans do not hold content; instead, they act as visual blocks controlled entirely by CSS.
The .signin container is placed above this grid using z-index so it remains readable and interactive. Inside it, a structured form includes username and password fields, links, and a submit button. Labels are implemented using <i> elements to enable floating-label animations. The markup remains semantic and lightweight. No scripts are included because interaction is handled through CSS states. The HTML’s main role is to provide structure and layering.
CSS
section span:hover{
background: #e95f30;
}
The CSS drives nearly all the visual behavior of this project. A dark theme is applied to the page to enhance contrast and highlight animations. The grid background is created by sizing and positioning the <span> elements using viewport units, making it responsive. A moving gradient animation flows vertically across the screen, giving the background continuous motion.
Hover effects instantly change block colors, adding interactivity. The login card is styled with shadows, padding, and rounded corners to appear elevated above the background. Input fields use floating-label animations triggered by focus and validity states. Accent colors guide attention to important actions like signup and login. Media queries adjust the grid size for smaller screens. Overall, CSS acts as both the animation engine and the visual designer.
JavaScript
This project intentionally avoids JavaScript to keep the implementation simple and performant. All animations, interactions, and state changes are handled using CSS selectors and keyframes. Hover effects, focus transitions, and background motion are managed declaratively. Input validation relies on native HTML behavior rather than scripting.
Because there is no JavaScript, the page loads quickly and has fewer points of failure. This approach also makes the code easier to maintain and understand. The browser handles animation timing internally through CSS. The absence of JavaScript highlights the power of modern CSS for UI design. Overall, JavaScript is not required to deliver a rich, interactive experience here.
