MACRO NEPAL
Split-Card Login Form in HTML CSS AND JAVASCRIPT
awiskar acharya
September 26, 2025
8:39 am

Introduction

This code creates a Split-Card Login Form, a modern and professional-looking login interface. The card is split into two sections:

  1. Login Section – where users enter their username and password.
  2. Branding Section – displays company branding, logo, and welcome message.

It uses HTML, CSS, and JavaScript with gradient backgrounds, shadows, and responsive design for a polished UI.

Features

  1. Split-Card Layout
    • Left side: Login form.
    • Right side: Branding section with a logo, title, and description.
  2. Responsive Design
    • Flexbox layout adapts to different screen sizes.
    • Media queries ensure usability on tablets and mobile devices.
  3. Modern UI Styling
    • Smooth gradient backgrounds (linear-gradient) on the branding side.
    • Shadows and rounded corners for the login card for a clean, professional look.
    • Subtle texture overlay on branding section for visual depth.
  4. Interactive Input Fields
    • Highlight and shadow effects on focus.
    • Rounded corners and soft background colors for better UX.
  5. Login Button Effects
    • Gradient background with hover and active state animations.
    • Slight elevation animation when hovered.
  6. Error Handling
    • Displays a styled error message if the username or password is incorrect.
    • Error box is hidden initially and only appears on validation failure.
  7. Forgot Password Link
    • Styled link with hover underline effect.
  8. JavaScript Login Validation
    • Demo validation checks for username === "admin" and password === "password123".
    • Displays an alert if login succeeds.
    • Focuses password input if login fails.
  9. Enter Key Support
    • Allows form submission by pressing the Enter key while focusing an input field.

How It Works

  1. HTML Structure
    • The card is split into two <div>s: .login-section and .branding-section.
    • The login section contains the <form> with inputs and button.
    • Branding section contains a placeholder for logo, title, and description text.
  2. CSS Styling
    • Flexbox creates a split layout.
    • Gradients, shadows, and rounded corners make the UI modern.
    • Media queries ensure the card stacks vertically on smaller screens.
  3. JavaScript Functionality
    • Prevents default form submission (e.preventDefault()).
    • handleLogin() validates credentials and shows/hides the error message.
    • Keypress listener allows pressing Enter to submit the form.

Conclusion

The Split-Card Login Form combines modern design with functional login validation. Its split layout enhances brand visibility while maintaining usability. The responsive design, animations, and interactive elements make it suitable for professional websites and applications.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Split-Card Login Form</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
padding: 20px;
box-sizing: border-box;
}
.split-card {
background: white;
border-radius: 16px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
overflow: hidden;
width: 100%;
max-width: 800px;
display: flex;
height: 500px;
}
.login-section {
flex: 1;
padding: 50px 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
.branding-section {
flex: 1;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 50px 40px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
position: relative;
}
.branding-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.05"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
opacity: 0.1;
}
.login-section h2 {
margin-bottom: 30px;
color: #333;
font-size: 28px;
font-weight: 600;
}
.form-group {
margin-bottom: 24px;
position: relative;
}
.form-group label {
display: block;
margin-bottom: 8px;
color: #555;
font-weight: 500;
font-size: 14px;
}
.form-group input {
width: 100%;
padding: 14px 16px;
border: 2px solid #e1e5e9;
border-radius: 12px;
font-size: 16px;
transition: all 0.3s ease;
box-sizing: border-box;
background: #f8f9fa;
}
.form-group input:focus {
outline: none;
border-color: #667eea;
background: white;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.login-button {
width: 100%;
padding: 14px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 8px;
}
.login-button:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}
.login-button:active {
transform: translateY(0);
}
.error {
color: #e74c3c;
font-size: 14px;
text-align: center;
margin-top: 16px;
display: none;
padding: 10px;
background: #fdf2f2;
border-radius: 8px;
border: 1px solid #e74c3c;
}
.forgot-password {
text-align: center;
margin-top: 20px;
}
.forgot-password a {
color: #667eea;
text-decoration: none;
font-size: 14px;
}
.forgot-password a:hover {
text-decoration: underline;
}
.branding-section h3 {
font-size: 32px;
font-weight: 700;
margin-bottom: 10px;
text-align: center;
z-index: 1;
}
.branding-section p {
font-size: 16px;
text-align: center;
line-height: 1.5;
z-index: 1;
opacity: 0.9;
}
.logo-placeholder {
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
z-index: 1;
}
@media (max-width: 768px) {
.split-card {
flex-direction: column;
height: auto;
}
.login-section,
.branding-section {
padding: 40px 30px;
}
.branding-section {
padding-top: 30px;
padding-bottom: 30px;
}
}
@media (max-width: 480px) {
.split-card {
margin: 10px;
}
.login-section,
.branding-section {
padding: 30px 24px;
}
}
</style>
</head>
<body>
<div class="split-card">
<div class="login-section">
<h2>Sign In</h2>
<form id="loginForm">
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" placeholder="Enter your username" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" placeholder="Enter your password" required>
</div>
<button type="submit" class="login-button">Sign In</button>
<div class="error" id="error-message">Invalid username or password. Please try again.</div>
</form>
<div class="forgot-password">
<a href="#">Forgot your password?</a>
</div>
</div>
<div class="branding-section">
<div class="logo-placeholder">🏢</div>
<h3>Professional Solutions</h3>
<p>Welcome to our secure platform. Access your account to manage business operations with ease and efficiency.</p>
</div>
</div>
<script>
document.getElementById('loginForm').addEventListener('submit', function(e) {
e.preventDefault();
handleLogin();
});
function handleLogin() {
const username = document.getElementById('username').value.trim();
const password = document.getElementById('password').value;
const errorMessage = document.getElementById('error-message');
// Simple demo validation
if (username === "admin" && password === "password123") {
alert("Login successful! Welcome to the dashboard.");
errorMessage.style.display = 'none';
} else {
errorMessage.style.display = 'block';
document.getElementById('password').focus();
}
}
// Add enter key support
document.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
const activeElement = document.activeElement;
if (activeElement.tagName === 'INPUT') {
handleLogin();
}
}
});
</script>
</body>
</html>

HTML Login & Registration Forms – Parking / Management Systems & Modern UI Designs (Related to HTML Forms)

Login & Register Form for Park Management System with Dropdown:
This type of HTML form combines login and registration functionality for parking or park management systems. It often uses dropdown menus to switch between login and sign-up options in a single interface, making it more user-friendly and compact for web applications.
Read more: https://macronepal.com/blog/login-and-register-form-for-park-managmet-system-with-dropdown/

Dropdown Login Form for Parking System:
A dropdown login form allows users to select options like user type (admin/user) before logging in. This improves system control and is commonly used in parking management systems to separate different access levels.
Read more: https://macronepal.com/blog/drop-down-login-form-for-parking-system/

Dropdown Login Form for Park Management System:
Similar to parking systems, this login design uses dropdown selection to manage different roles such as staff, admin, or users. It simplifies authentication while improving system organization.
Read more: https://macronepal.com/blog/drop-down-login-form-for-park-managment-system/

Simple Login Form for Park Management System:
A basic login form built using HTML that includes fields like username and password. It is used for secure access to park management dashboards and is easy to design and implement.
Read more: https://macronepal.com/blog/simple-login-form-code-for-park-managment-system/

AI Style Glow Fullscreen Overlay Login Form:
This modern login form uses glowing UI effects and full-screen overlays to create an advanced and attractive design. It enhances user experience using CSS animations and visual effects.
Read more: https://macronepal.com/blog/ai-style-glow-fullscreen-overlay-login-form/

Glassmorphism Login Form:
Glassmorphism is a modern UI design style that uses blur, transparency, and frosted glass effects. It makes login forms look stylish and professional while maintaining readability.
Read more: https://macronepal.com/blog/what-is-glassmorphism-login-form/

Emoji Background Overlay Full Screen Login Form:
This login design uses emoji-based backgrounds with full-screen overlay effects to create a fun and engaging user interface while keeping login functionality simple.
Read more: https://macronepal.com/blog/emoji-background-overlay-full-screen-login-form/

Minimal Center Alignment Fullscreen Overlay Login Form:
A clean and minimal login form centered on the screen. It focuses on simplicity, proper alignment, and distraction-free user experience.
Read more: https://macronepal.com/blog/minimal-center-alignment-fullscreen-overlay-login-form/

Image Blur Focus Fullscreen Overlay Login Form:
This login design uses blurred background images with a focused login box in the center, improving visual depth and user attention on the form.
Read more: https://macronepal.com/blog/image-blur-focus-fullscreen-overlay-login-form/

Geometric Pattern Fullscreen Overlay Login Form:
A creative login form design that uses geometric patterns as backgrounds with overlay effects, giving a modern and structured visual appearance.
Read more: https://macronepal.com/blog/geometric-pattern-fullscreen-overlay-login-form/

Category : LOGIN FORM

Leave a Reply

Your email address will not be published. Required fields are marked *


Macro Nepal Helper