Webleb - HTML UI Elements - ki ok, dia de Nova Jersey

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, dia de Nova Jersey

Recomendado

Alternância de gravação

Um Código de Metehan

Identidade

HTML

CSS

JS

Recomendado

Alternância de gravação

Um Código de Metehan

Identidade

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS