Webleb - UI Elements - Mete'nin bir kody

HTML

<!DOCTYPE html>

<head>

<title>Modern Multicolor Neon Login</title>

<style>

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Poppins', sans-serif;

}

body {

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

background: #1a0a0a;

overflow: hidden;

}

section {

position: relative;

width: 100%;

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

}

/* Animated diagonal color bands - UPDATED with multiple colors */

section span {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

pointer-events: none;

}

section span:nth-child(1) {

clip-path: polygon(0 0, 16% 0, 32% 100%, 0% 100%);

background: #ff0038; /* Red */

opacity: 0.6;

animation: animate 15s linear infinite;

}

section span:nth-child(2) {

clip-path: polygon(16% 0, 32% 0, 48% 100%, 0% 100%);

background: #ffcc00; /* Yellow */

opacity: 0.6;

animation: animate 25s linear infinite;

animation-delay: -5s;

}

section span:nth-child(3) {

clip-path: polygon(32% 0, 48% 0, 64% 100%, 16% 100%);

background: #00cc66; /* Green */

opacity: 0.6;

animation: animate 20s linear infinite;

animation-delay: -10s;

}

section span:nth-child(4) {

clip-path: polygon(48% 0, 64% 0, 80% 100%, 32% 100%);

background: #0099ff; /* Blue */

opacity: 0.6;

animation: animate 30s linear infinite;

animation-delay: -15s;

}

section span:nth-child(5) {

clip-path: polygon(64% 0, 80% 0, 96% 100%, 48% 100%);

background: #ff6600; /* Orange */

opacity: 0.6;

animation: animate 22s linear infinite;

animation-delay: -7s;

}

section span:nth-child(6) {

clip-path: polygon(80% 0, 100% 0, 100% 100%, 64% 100%);

background: #ff0038; /* Red again */

opacity: 0.6;

animation: animate 18s linear infinite;

animation-delay: -12s;

}

@keyframes animate {

0% {

transform: translateY(-100%);

}

100% {

transform: translateY(100%);

}

/* Glass-morphic login card - UPDATED with multicolor effects */

.login-card {

position: relative;

z-index: 10;

width: 380px;

padding: 40px;

background: rgba(26, 10, 10, 0.85);

backdrop-filter: blur(10px);

border-radius: 10px;

box-shadow: 0 25px 45px rgba(0, 0, 0, 0.2);

border: 1px solid rgba(255, 0, 56, 0.1);

border-right: 1px solid rgba(255, 0, 56, 0.1);

border-bottom: 1px solid rgba(255, 0, 56, 0.1);

overflow: hidden;

transition: all 0.4s ease;

}

.login-card:hover {

transform: translateY(-10px);

box-shadow: 0 35px 55px rgba(0, 0, 0, 0.3),

0 0 20px rgba(255, 0, 56, 0.2),

0 0 20px rgba(255, 204, 0, 0.2),

0 0 20px rgba(0, 204, 102, 0.2),

0 0 20px rgba(0, 153, 255, 0.2),

0 0 20px rgba(255, 102, 0, 0.2);

}

/* Light refraction animation */

.login-card::before {

content: '';

position: absolute;

top: 0;

left: -100%;

width: 100%;

height: 100%;

background: linear-gradient(90deg,

rgba(255, 255, 255, 0) 0%,

rgba(255, 255, 255, 0.05) 25%,

rgba(255, 255, 255, 0.1) 50%,

rgba(255, 255, 255, 0.05) 75%,

rgba(255, 255, 255, 0) 100%);

transform: skewX(-15deg);

transition: 0.7s;

}

.login-card:hover::before {

left: 120%;

}

.login-card .content {

position: relative;

width: 100%;

display: flex;

flex-direction: column;

align-items: center;

}

.login-card .content h2 {

color: #fff;

font-size: 2em;

margin-bottom: 30px;

text-transform: uppercase;

letter-spacing: 3px;

text-shadow: 0 0 10px rgba(255, 0, 56, 0.7),

0 0 15px rgba(255, 204, 0, 0.7),

0 0 20px rgba(0, 204, 102, 0.7);

font-weight: 700;

}

.login-card .content .form {

width: 100%;

}

/* Form inputs with floating labels */

.login-card .content .form .input-box {

position: relative;

width: 100%;

margin-bottom: 35px;

}

.login-card .content .form .input-box input {

width: 100%;

padding: 10px 0;

font-size: 16px;

color: #fff;

border: none;

border-bottom: 2px solid rgba(255, 255, 255, 0.5);

outline: none;

background: transparent;

transition: 0.5s;

}

.login-card .content .form .input-box input:focus,

.login-card .content .form .input-box input:valid {

border-bottom-color: #ff0038;

box-shadow: 0 2px 10px rgba(255, 0, 56, 0.5);

}

.login-card .content .form .input-box:nth-of-type(1) input:focus,

.login-card .content .form .input-box:nth-of-type(1) input:valid {

border-bottom-color: #ff0038; /* Red for username */

}

.login-card .content .form .input-box:nth-of-type(2) input:focus,

.login-card .content .form .input-box:nth-of-type(2) input:valid {

border-bottom-color: #0099ff; /* Blue for password */

box-shadow: 0 2px 10px rgba(0, 153, 255, 0.5);

}

.login-card .content .form .input-box label {

position: absolute;

left: 0;

top: 10px;

padding: 0;

font-size: 16px;

color: rgba(255, 255, 255, 0.7);

pointer-events: none;

transition: 0.5s;

}

.login-card .content .form .input-box:nth-of-type(1) input:focus ~ label,

.login-card .content .form .input-box:nth-of-type(1) input:valid ~ label {

transform: translateY(-25px);

font-size: 12px;

color: #ff0038; /* Red for username */

letter-spacing: 1px;

}

.login-card .content .form .input-box:nth-of-type(2) input:focus ~ label,

.login-card .content .form .input-box:nth-of-type(2) input:valid ~ label {

transform: translateY(-25px);

font-size: 12px;

color: #0099ff; /* Blue for password */

letter-spacing: 1px;

}

/* Remember me checkbox */

.remember-forgot {

display: flex;

justify-content: space-between;

margin-bottom: 25px;

color: #fff;

font-size: 14px;

}

.remember-forgot label {

display: flex;

align-items: center;

}

.remember-forgot label input {

margin-right: 8px;

accent-color: #00cc66; /* Green for checkbox */

}

.remember-forgot a {

color: #fff;

text-decoration: none;

transition: 0.3s;

}

.remember-forgot a:hover {

color: #ffcc00; /* Yellow for forgot password */

text-decoration: underline;

}

/* Submit button with gradient */

.login-card .content .form .input-box button {

width: 100%;

background: linear-gradient(45deg, #ff0038, #0099ff, #00cc66, #ffcc00, #ff6600);

background-size: 500% 500%;

animation: gradientBG 10s ease infinite;

color: #fff;

border: none;

padding: 12px;

cursor: pointer;

border-radius: 5px;

font-weight: 600;

letter-spacing: 1px;

transition: 0.5s;

display: flex;

justify-content: center;

align-items: center;

position: relative;

overflow: hidden;

}

@keyframes gradientBG {

0% {

background-position: 0% 50%;

}

50% {

background-position: 100% 50%;

}

100% {

background-position: 0% 50%;

}

.login-card .content .form .input-box button:hover {

box-shadow: 0 0 10px #ff0038,

0 0 15px #0099ff,

0 0 20px #00cc66;

transform: scale(1.03);

}

.login-card .content .form .input-box button::before {

content: '';

position: absolute;

top: 0;

left: -100%;

width: 100%;

height: 100%;

background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);

transition: 0.5s;

}

.login-card .content .form .input-box button:hover::before {

left: 100%;

}

/* Password strength indicator */

.password-strength {

height: 3px;

margin-top: 5px;

width: 100%;

background: rgba(255, 255, 255, 0.1);

position: relative;

border-radius: 5px;

display: none;

}

.password-strength span {

height: 100%;

width: 0%;

position: absolute;

border-radius: 5px;

transition: 0.5s;

}

/* Sign up link */

.signup-link {

color: #fff;

margin-top: 20px;

text-align: center;

font-size: 14px;

}

.signup-link a {

color: #00cc66; /* Green for signup */

text-decoration: none;

font-weight: 500;

transition: 0.3s;

}

.signup-link a:hover {

text-decoration: underline;

}

/* Social icons */

.social-icons {

display: flex;

justify-content: center;

margin-top: 30px;

gap: 15px;

}

.social-icons a {

color: #fff;

font-size: 22px;

height: 40px;

width: 40px;

background: rgba(255, 255, 255, 0.1);

border-radius: 50%;

display: flex;

justify-content: center;

align-items: center;

transition: 0.4s;

}

.social-icons a:hover {

color: #fff;

transform: translateY(-5px);

box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

}

.social-icons a:nth-child(1):hover {

background: #ff0038; /* Red for Google */

}

.social-icons a:nth-child(2):hover {

background: #0099ff; /* Blue for Facebook */

}

.social-icons a:nth-child(3):hover {

background: #00cc66; /* Green for Twitter */

}

.social-icons a:nth-child(4):hover {

background: #ff6600; /* Orange for LinkedIn */

}

/* Password toggle */

.password-toggle {

position: absolute;

right: 0;

top: 10px;

cursor: pointer;

color: rgba(255, 255, 255, 0.7);

transition: 0.3s;

}

.password-toggle:hover {

color: #0099ff; /* Blue for password toggle */

}

/* Loading animation */

.loader {

display: none;

width: 20px;

height: 20px;

border: 3px solid rgba(255, 255, 255, 0.3);

border-radius: 50%;

border-top-color: #ffffff;

animation: spin 1s ease-in-out infinite;

margin-left: 10px;

}

@keyframes spin {

to { transform: rotate(360deg); }

}

/* Error message */

.error-message {

color: #ff3c3c;

font-size: 13px;

font-weight: 500;

margin-top: -25px;

margin-bottom: 20px;

display: none;

opacity: 0;

transition: opacity 0.3s ease;

}

/* Responsive design */

@media (max-width: 480px) {

.login-card {

width: 90%;

padding: 30px 20px;

}

.login-card .content h2 {

font-size: 1.7em;

}

.remember-forgot {

flex-direction: column;

gap: 10px;

}

</style>

</head>

<body>

<h2>Login</h2>

<label>Username</label>

</div>

<label>Password</label>

</span>

</div>

<label><input type="checkbox"> Remember me</label>

<a href="#">Forgot Password?</a>

</div>

LOGIN

</button>

</div>

Don't have an account? <a href="#">Sign Up</a>

</div>

</div>

</section>

document.addEventListener('DOMContentLoaded', function() {

// DOM elements

const togglePassword = document.querySelector('#togglePassword');

const password = document.querySelector('#password');

const passwordStrength = document.querySelector('#passwordStrength');

const passwordStrengthBar = passwordStrength.querySelector('span');

const loginForm = document.querySelector('.form');

const username = document.querySelector('#username');

const errorMessage = document.querySelector('#errorMessage');

const loginBtn = document.querySelector('#loginBtn');

const loader = document.querySelector('#loader');

// Password toggle functionality

togglePassword.addEventListener('click', function() {

const type = password.getAttribute('type') === 'password' ? 'text' : 'password';

password.setAttribute('type', type);

this.innerHTML = type === 'password' ? '<i class="fas fa-eye"></i>' : '<i class="fas fa-eye-slash"></i>';

});

// Password strength indicator

password.addEventListener('focus', function() {

passwordStrength.style.display = 'block';

});

password.addEventListener('input', function() {

const value = this.value;

let strength = 0;

if (value.length >= 6) strength += 20;

if (value.length >= 10) strength += 20;

if (/[A-Z]/.test(value)) strength += 20;

if (/[0-9]/.test(value)) strength += 20;

if (/[^A-Za-z0-9]/.test(value)) strength += 20;

passwordStrengthBar.style.width = strength + '%';

if (strength <= 40) {

passwordStrengthBar.style.backgroundColor = '#ff3c3c'; // Red

} else if (strength <= 70) {

passwordStrengthBar.style.backgroundColor = '#ffcc00'; // Yellow

} else {

passwordStrengthBar.style.backgroundColor = '#00cc66'; // Green

}

});

// Form validation

loginBtn.addEventListener('click', function(e) {

e.preventDefault();

// Show loading animation

loader.style.display = 'inline-block';

loginBtn.textContent = '';

// Simulate API call

setTimeout(function() {

// Hide loading animation

loader.style.display = 'none';

loginBtn.textContent = 'LOGIN';

// Simple validation

if(username.value.trim() === '' || password.value.trim() === '') {

showError('Please fill in all fields');

} else if(password.value.length < 6) {

showError('Password must be at least 6 characters');

} else {

hideError();

// Here you would typically send the data to your server

alert('Login successful! Redirecting...');

// window.location.href = 'dashboard.html';

}

}, 1500);

});

// Show error message with animation

function showError(message) {

errorMessage.textContent = message;

errorMessage.style.display = 'block';

setTimeout(() => {

errorMessage.style.opacity = '1';

}, 10);

}

// Hide error message

function hideError() {

errorMessage.style.opacity = '0';

setTimeout(() => {

errorMessage.style.display = 'none';

}, 300);

}

// Input field animations - when clicked anywhere in the login card

document.querySelectorAll('.input-box input').forEach(input => {

// For initial state check (e.g., autofill)

if (input.value !== '') {

const label = input.nextElementSibling;

if (label && label.tagName.toLowerCase() === 'label') {

label.classList.add('active');

}

});

// Adding ripple effect to button

loginBtn.addEventListener('mousedown', function(e) {

const x = e.clientX - e.target.getBoundingClientRect().left;

const y = e.clientY - e.target.getBoundingClientRect().top;

const ripple = document.createElement('span');

ripple.style.left = `${x}px`;

ripple.style.top = `${y}px`;

ripple.style.position = 'absolute';

ripple.style.width = '0';

ripple.style.height = '0';

ripple.style.background = 'rgba(255, 255, 255, 0.4)';

ripple.style.borderRadius = '50%';

ripple.style.transform = 'translate(-50%, -50%)';

ripple.style.pointerEvents = 'none';

this.appendChild(ripple);

ripple.animate([

{ width: '0', height: '0', opacity: 1 },

{ width: '400px', height: '400px', opacity: 0 }

], {

duration: 600,

easing: 'ease-out'

}).onfinish = function() {

ripple.remove();

};

});

</script>

</body>

</html>

Mete'nin bir kody

Recommended

Mete'nin bir kodu

HTML CSS Developer Landing Page

HTML CSS Developer Portfolio Website Template

HTML

CSS

JS

Recommended

Mete'nin bir kodu

HTML CSS Developer Landing Page

HTML CSS Developer Portfolio Website Template

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS