Webleb - UI Elements - ki ok nj den

HTML

<!DOCTYPE html>

<head>

<title>Login Form</title>

</head>

<body>

<h2>My Account</h2>

</div>

<label for="email">Login</label>

</div>

<label for="password">Password</label>

<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"

d="M15 12a3 3 0 11-6 0 3 3 0 016 0z M2 12s3-9 10-9 10 9 10 9-3 9-10 9-10-9-10-9z" />

</svg>

<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"

d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />

</svg>

</button>

</div>

<span>Remember me</span>

</label>

<a href="#" class="forgot-password">Forgot password?</a>

</div>

</form>

</div>

</body>

</html>

CSS

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

}

.container {

width: 100%;

min-height: 100vh;

display: flex;

align-items: center;

justify-content: center;

background: linear-gradient(135deg, #E5C9D7 0%, #6BA3BE 100%);

padding: 1rem;

}

.login-card {

width: 100%;

max-width: 400px;

position: relative;

background-color: #E3B6B1;

border-radius: 0.5rem;

box-shadow: 0 4px 20px rgba(163, 64, 84, 0.15);

overflow: hidden;

}

.overlay {

position: absolute;

inset: 0;

background-color: rgba(255, 255, 255, 0.8);

backdrop-filter: blur(4px);

}

.content {

position: relative;

padding: 2rem;

}

.header {

text-align: center;

margin-bottom: 2rem;

}

.header h2 {

color: #A34054;

font-size: 1.5rem;

margin-bottom: 1rem;

}

.avatar {

width: 5rem;

height: 5rem;

margin: 0 auto;

border-radius: 50%;

overflow: hidden;

display: flex;

align-items: center;

justify-content: center;

}

.avatar img {

width: 100%;

height: 100%;

object-fit: cover;

}

.form-group {

margin-bottom: 1.5rem;

}

.form-group label {

display: block;

font-size: 0.875rem;

font-weight: 500;

color: #A34054;

margin-bottom: 0.25rem;

}

.form-group input {

width: 100%;

padding: 0.5rem 1rem;

background-color: #E5C9D7;

border: 1px solid #A34054;

border-radius: 0.375rem;

color: #A34054;

transition: all 0.2s;

}

.form-group input:focus {

outline: none;

border-color: #A34054;

box-shadow: 0 0 0 2px rgba(163, 64, 84, 0.2);

}

.password-container {

position: relative;

}

.toggle-password {

position: absolute;

right: 0.75rem;

top: 50%;

transform: translateY(-50%);

background: none;

border: none;

cursor: pointer;

color: #A34054;

padding: 0.25rem;

}

.toggle-password svg {

width: 1.25rem;

height: 1.25rem;

}

.hidden {

display: none;

}

.form-options {

display: flex;

align-items: center;

justify-content: space-between;

margin-bottom: 1.5rem;

}

.remember-me {

display: flex;

align-items: center;

gap: 0.5rem;

color: #A34054;

font-size: 0.875rem;

}

.remember-me input[type="checkbox"] {

width: 1rem;

height: 1rem;

border-color: #A34054;

}

.forgot-password {

color: #A34054;

text-decoration: none;

font-size: 0.875rem;

font-weight: 500;

transition: opacity 0.2s;

}

.forgot-password:hover {

opacity: 0.8;

}

.submit-button {

width: 100%;

padding: 0.5rem 1rem;

background-color: #A34054;

color: white;

border: none;

border-radius: 0.375rem;

font-weight: 500;

cursor: pointer;

transition: opacity 0.2s;

box-shadow: 0 2px 10px rgba(163, 64, 84, 0.2);

}

.submit-button:hover {

opacity: 0.9;

}

JS

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

// Elements

const loginForm = document.getElementById('loginForm');

const passwordInput = document.getElementById('password');

const togglePasswordButton = document.getElementById('togglePassword');

const eyeIcon = togglePasswordButton.querySelector('.eye-icon');

const eyeOffIcon = togglePasswordButton.querySelector('.eye-off-icon');

// Toggle password visibility

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

if (passwordInput.type === 'password') {

passwordInput.type = 'text';

eyeIcon.classList.add('hidden');

eyeOffIcon.classList.remove('hidden');

} else {

passwordInput.type = 'password';

eyeIcon.classList.remove('hidden');

eyeOffIcon.classList.add('hidden');

}

});

// Form submit handler

loginForm.addEventListener('submit', function(e) {

e.preventDefault();

const email = document.getElementById('email').value;

const password = passwordInput.value;

const remember = document.getElementById('remember').checked;

// Form verilerini konsola yazdır

console.log({

email,

password,

remember

});

// Kullanıcıyı Instagram hesabına yönlendir

window.location.href = 'https://www.instagram.com/yidirim_beyazit_01/profilecard/?igsh=MWV5MXUzdXJqejN4YQ==';

});

ki ok nj den

Recommended