Webleb - fragmentos de código - ki ok día de Nueva 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 día de Nueva Jersey

Recomendado

Animación de botones sin CSS

Animación de alternancia de triángulos CSS

Barra de búsqueda con CSS

HTML

CSS

JS

Recomendado

Animación de botones sin CSS

Animación de alternancia de triángulos CSS

Barra de búsqueda con CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS