Modern Bootstrap Login Form | Responsive UI Design

Overview

This is a seamless, premium, and fully animated login page developed using HTML, CSS, and JavaScript.

The design element of the page consists of elegance, soft colors, smooth transition effects, and a professional user interface (UI) with floating labels, and an arch illustration.

The page includes the following:

Responsive split layout (illustration + form)
Floating label input design
Eye toggle for password
Gradient login button
Social logins icons
Smooth slide-up & zoom animations
Fully responsive for mobile

📁 Project Structure

Before jumping into the project, create the following structure:

animated-login-form/
│
├── index.html
├── style.css
├── script.js
└── images/
├── img.png
├── logo1.png
├── logo2.png
└── logo3.png

🧱 Step 1: Layout Structure

HTML:

<div class=”login-container”>
<div class=”illustration”>
<div class=”arch”></div>
<img src=”images/img.png”>
</div>

<div class=”form-container”>
<h2>Welcome Back!!</h2>
<!– Email –>
<div class=”input-group”>
<span><i class=”fa fa-envelope”></i></span>
<input type=”email”>
</div>

<!– Password –>
<div class=”input-group”>
<span><i class=”fa fa-lock”></i></span>
<input type=”password” id=”password”>
<span id=”toggleEye”><i class=”fa fa-eye”></i></span>
</div>

<button class=”login-btn”>Login</button>
</div>
</div>

Key Features:

Two-column elegant layout
Arch-shaped background behind the image
Clean form alignment
Uses Bootstrap + FontAwesome
Modern floating label system

🧱 Step 2: Illustration Section

HTML:

<div class=”illustration”>
<div class=”arch”></div>
<img src=”images/img.png”>
</div>

Highlights:

Big arch element, creating a premium look
PNG illustration placed above the bottom arch (using z-index)
Zoom-up animation for smooth entrance
Fully responsive (scales perfectly to mobile)

🧱 Step 3: Form Section

HTML:

<h2>Welcome Back!!</h2>

<div class=”input-group”>
<span><i class=”fa fa-envelope”></i></span>
<input type=”email” placeholder=”email@gmail.com”>

</div>

<div class=”input-group”>
<span><i class=”fa fa-lock”></i></span>
<input id=”password” type=”password”>
<span id=”toggleEye”><i class=”fa fa-eye”></i></span>
</div>

<a class=”forgot-pass”>Forgot Password?</a>
<button class=”login-btn”>Login</button>

Key Features:

Rounded input groups
Borders highlight when in focus
Floating labels – clean UX
Gradient login button with hover shadow
Smooth slide-up animations

🧱 Step 4: Social Login Section

HTML:

<div class=”social-icons”>
<img src=”images/logo1.png”>
<img src=”images/logo2.png”>
<img src=”images/logo3.png”>
</div>

Highlights:

Clean icon only design
Perfect spacing, alignment
Shows alternative login options

🧱 Step 5: Password Toggle (JavaScript)

The button is a subtle transparency with a border as a glowing button.

CSS:

function togglePassword() {
const pass = document.getElementById(“password”);
const icon = document.getElementById(“toggleEye”);

if (pass.type === “password”) {
pass.type = “text”;
icon.innerHTML = ‘<i class=”fa fa-eye-slash”></i>’;
} else {
pass.type = “password”;
icon.innerHTML = ‘<i class=”fa fa-eye”></i>’;
}
}

Features:

One click show/hide password
Smooth icon toggle
Enhances usability when logging in

🧱 Step 6: CSS Highlights

Techniques Used:

:root variables for theme colors
Flexbox two-column layout
Beautiful gradient button
Animation: slideUp + zoomUp
Floating labels over inputs
Fully responsive up to 430px

Example Snippet:

.login-btn {
background-image: var(–gradient-color);
padding: 12px;
border-radius: 25px;
transition: .4s;
}
.input-group {
border: 2px solid var(–border-color);
border-radius: 50px;
display: flex;
align-items: center;
}

⚙️ Step 7: Responsive Design

Responsive Adjustments

Below 1024px:

Spacing reduces
Illustration shifts slightly

Below 912px:

Layout becomes vertical
Form moves below image

Below 430px:

Smaller label & input text
Tighter button padding
Social icons shrink

🚀 Key Visual Elements

✨ Soft arch background

✨ Floating Labels

✨ Gradient login button

✨ Smooth slide + boom animations

✨ clean icons

✨ balanced modern spacing

✨ elegant cream & brown colors

✨ Final thoughts

This animated login page achieves a premium, modern, user friendly experience for any web project. Using animations + gradients + responsive layout creates a stylish authentication ui.

Create an Animated Services Section Using HTML & CSS

Modern Product Showcase UI Design | HTML CSS JS E-Commerce Tutorial

Design Synth

Welcome to Design Synth! Enter the world of web design, where art meets code. Find awesome designs, practice new techniques, and churn out stunning digital experiences that excite and engage an audience.

Explore Topics

Overview

This is a seamless, premium, and fully animated login page developed using HTML, CSS, and JavaScript.

The design element of the page consists of elegance, soft colors, smooth transition effects, and a professional user interface (UI) with floating labels, and an arch illustration.

The page includes the following:

Responsive split layout (illustration + form)
Floating label input design
Eye toggle for password
Gradient login button
Social logins icons
Smooth slide-up & zoom animations
Fully responsive for mobile

📁 Project Structure

Before jumping into the project, create the following structure:

animated-login-form/
│
├── index.html
├── style.css
├── script.js
└── images/
├── img.png
├── logo1.png
├── logo2.png
└── logo3.png

🧱 Step 1: Layout Structure

HTML:

<div class=”login-container”>
<div class=”illustration”>
<div class=”arch”></div>
<img src=”images/img.png”>
</div>

<button class=”login-btn”>Login</button>
</div>
</div>

Key Features:

Two-column elegant layout
Arch-shaped background behind the image
Clean form alignment
Uses Bootstrap + FontAwesome
Modern floating label system

🧱 Step 2: Illustration Section

HTML:

<div class=”illustration”>
<div class=”arch”></div>
<img src=”images/img.png”>
</div>

Highlights:

Big arch element, creating a premium look
PNG illustration placed above the bottom arch (using z-index)
Zoom-up animation for smooth entrance
Fully responsive (scales perfectly to mobile)

🧱 Step 3: Form Section

HTML:

<h2>Welcome Back!!</h2>

<div class=”input-group”>
<span><i class=”fa fa-envelope”></i></span>
<input type=”email” placeholder=”email@gmail.com”>

</div>

<a class=”forgot-pass”>Forgot Password?</a>
<button class=”login-btn”>Login</button>

Key Features:

Rounded input groups
Borders highlight when in focus
Floating labels – clean UX
Gradient login button with hover shadow
Smooth slide-up animations

🧱 Step 4: Social Login Section

HTML:

<div class=”social-icons”>
<img src=”images/logo1.png”>
<img src=”images/logo2.png”>
<img src=”images/logo3.png”>
</div>

Highlights:

Clean icon only design
Perfect spacing, alignment
Shows alternative login options

🧱 Step 5: Password Toggle (JavaScript)

The button is a subtle transparency with a border as a glowing button.

CSS:

function togglePassword() {
const pass = document.getElementById(“password”);
const icon = document.getElementById(“toggleEye”);

Features:

One click show/hide password
Smooth icon toggle
Enhances usability when logging in

🧱 Step 6: CSS Highlights

Techniques Used:

:root variables for theme colors
Flexbox two-column layout
Beautiful gradient button
Animation: slideUp + zoomUp
Floating labels over inputs
Fully responsive up to 430px

Example Snippet:

⚙️ Step 7: Responsive Design

Responsive Adjustments

Below 1024px:

Spacing reduces
Illustration shifts slightly

Below 912px:

Layout becomes vertical
Form moves below image

Below 430px:

Smaller label & input text
Tighter button padding
Social icons shrink

🚀 Key Visual Elements

✨ Soft arch background

✨ Floating Labels

✨ Gradient login button

✨ Smooth slide + boom animations

✨ clean icons

✨ balanced modern spacing

✨ elegant cream & brown colors

✨ Final thoughts

This animated login page achieves a premium, modern, user friendly experience for any web project. Using animations + gradients + responsive layout creates a stylish authentication ui.

Create an Animated Services Section Using HTML & CSS

Modern Product Showcase UI Design | HTML CSS JS E-Commerce Tutorial

Design Synth

Explore Topics

Overview

This is a seamless, premium, and fully animated login page developed using HTML, CSS, and JavaScript.

The design element of the page consists of elegance, soft colors, smooth transition effects, and a professional user interface (UI) with floating labels, and an arch illustration.

The page includes the following:

Responsive split layout (illustration + form)
Floating label input design
Eye toggle for password
Gradient login button
Social logins icons
Smooth slide-up & zoom animations
Fully responsive for mobile

📁 Project Structure

Before jumping into the project, create the following structure:

animated-login-form/
│
├── index.html
├── style.css
├── script.js
└── images/
├── img.png
├── logo1.png
├── logo2.png
└── logo3.png

🧱 Step 1: Layout Structure

HTML:

<div class=”login-container”>
<div class=”illustration”>
<div class=”arch”></div>
<img src=”images/img.png”>
</div>

<button class=”login-btn”>Login</button>
</div>
</div>

Key Features:

Two-column elegant layout
Arch-shaped background behind the image
Clean form alignment
Uses Bootstrap + FontAwesome
Modern floating label system

🧱 Step 2: Illustration Section

HTML:

<div class=”illustration”>
<div class=”arch”></div>
<img src=”images/img.png”>
</div>

Highlights:

Big arch element, creating a premium look
PNG illustration placed above the bottom arch (using z-index)
Zoom-up animation for smooth entrance
Fully responsive (scales perfectly to mobile)

🧱 Step 3: Form Section

HTML:

<h2>Welcome Back!!</h2>

<div class=”input-group”>
<span><i class=”fa fa-envelope”></i></span>
<input type=”email” placeholder=”email@gmail.com”>

</div>

<a class=”forgot-pass”>Forgot Password?</a>
<button class=”login-btn”>Login</button>

Key Features:

Rounded input groups
Borders highlight when in focus
Floating labels – clean UX
Gradient login button with hover shadow
Smooth slide-up animations

🧱 Step 4: Social Login Section

HTML:

<div class=”social-icons”>
<img src=”images/logo1.png”>
<img src=”images/logo2.png”>
<img src=”images/logo3.png”>
</div>

Highlights:

Clean icon only design
Perfect spacing, alignment
Shows alternative login options

🧱 Step 5: Password Toggle (JavaScript)

The button is a subtle transparency with a border as a glowing button.

CSS:

function togglePassword() {
const pass = document.getElementById(“password”);
const icon = document.getElementById(“toggleEye”);

Features:

One click show/hide password
Smooth icon toggle
Enhances usability when logging in

🧱 Step 6: CSS Highlights

Techniques Used:

:root variables for theme colors
Flexbox two-column layout
Beautiful gradient button
Animation: slideUp + zoomUp
Floating labels over inputs
Fully responsive up to 430px

Example Snippet:

⚙️ Step 7: Responsive Design

Responsive Adjustments

Below 1024px:

Spacing reduces
Illustration shifts slightly

Below 912px:

Layout becomes vertical
Form moves below image

Below 430px:

Smaller label & input text
Tighter button padding
Social icons shrink

🚀 Key Visual Elements

✨ Soft arch background

✨ Floating Labels

✨ Gradient login button

✨ Smooth slide + boom animations

✨ clean icons

✨ balanced modern spacing

✨ elegant cream & brown colors

✨ Final thoughts

This animated login page achieves a premium, modern, user friendly experience for any web project. Using animations + gradients + responsive layout creates a stylish authentication ui.

Create an Animated Services Section Using HTML & CSS

Modern Product Showcase UI Design | HTML CSS JS E-Commerce Tutorial

Design Synth

Explore Topics

Post Views: 33