Webleb - fragmentos de código - Amar y respetar la naturaleza.

HTML

<!DOCTYPE html>

<head>

<title>Lüks Yaşam</title>

<style>

body {

margin: 0;

padding: 0;

height: 100vh;

background-image: url('https://www.istockphoto.com/tr/foto%C4%9Fraf/luxury-sports-car-and-yachts-at-puerto-banus-in-marbella-gm616255418-107151133');

background-size: cover;

background-position: center;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

font-family: Arial, sans-serif;

}

.login-container {

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

padding: 40px;

border-radius: 10px;

box-shadow: 0 0 10px rgba(0,0,0,0.3);

}

input {

display: block;

margin: 10px 0;

padding: 10px;

width: 250px;

border: 1px solid #ddd;

border-radius: 5px;

}

button {

width: 100%;

padding: 10px;

background-color: #007bff;

color: white;

border: none;

border-radius: 5px;

cursor: pointer;

}

button:hover {

background-color: #0056b3;

}

h2 {

text-align: center;

color: #333;

margin-bottom: 20px;

}

</style>

</head>

<body>

<h2>Giriş Yap</h2>

<form>

<button type="submit">Giriş</button>

</form>

</div>

// Form gönderimini dinle

document.querySelector('form').addEventListener('submit', function(e) {

e.preventDefault(); // Formun normal gönderimini engelle

// Form verilerini al

const email = document.querySelector('input[type="email"]').value;

const password = document.querySelector('input[type="password"]').value;

// Form validasyonu

if (!email || !password) {

alert('Lütfen tüm alanları doldurun!');

return;

}

// E-posta formatı kontrolü

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

if (!emailRegex.test(email)) {

alert('Geçerli bir e-posta adresi giriniz!');

return;

}

// Şifre uzunluğu kontrolü

if (password.length < 6) {

alert('Şifre en az 6 karakter olmalıdır!');

return;

}

// Başarılı giriş simülasyonu

console.log('Giriş bilgileri:', {

email: email,

password: password

});

// Giriş başarılı mesajı

alert('Giriş başarılı!');

// Form alanlarını temizle

document.querySelector('form').reset();

});

// Input alanları için animasyon efekti

const inputs = document.querySelectorAll('input');

inputs.forEach(input => {

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

this.style.transform = 'scale(1.02)';

this.style.transition = 'all 0.3s ease';

});

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

this.style.transform = 'scale(1)';

});

// Buton hover efekti için ek JavaScript

document.querySelector('button').addEventListener('mouseover', function() {

this.style.opacity = '0.8';

});

document.querySelector('button').addEventListener('mouseout', function() {

this.style.opacity = '1';

});

</script>

</body>

</html>

CSS

body {

margin: 0;

padding: 0;

height: 100vh;

background-image: url('https://images.pexels.com/photos/1173777/pexels-photo-1173777.jpeg');

background-size: cover;

background-position: center;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

font-family: Arial, sans-serif;

}

.login-container {

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

padding: 40px;

border-radius: 10px;

box-shadow: 0 0 10px rgba(0,0,0,0.3);

}

input {

display: block;

margin: 10px 0;

padding: 10px;

width: 250px;

border: 1px solid #ddd;

border-radius: 5px;

background-color: rgba(255, 255, 255, 0.9); /* Giriş alanlarının arka planını daha açık yaptık */

}

button {

width: 100%;

padding: 10px;

background-color: #007bff;

color: white;

border: none;

border-radius: 5px;

cursor: pointer;

}

button:hover {

background-color: #0056b3;

}

h2 {

text-align: center;

color: #333;

margin-bottom: 20px;

}

JS

// Form gönderimini dinle

document.querySelector('form').addEventListener('submit', function(e) {

e.preventDefault(); // Formun normal gönderimini engelle

// Form verilerini al

const email = document.querySelector('input[type="email"]').value;

const password = document.querySelector('input[type="password"]').value;

// Form validasyonu

if (!email || !password) {

alert('Lütfen tüm alanları doldurun!');

return;

}

// E-posta formatı kontrolü

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

if (!emailRegex.test(email)) {

alert('Geçerli bir e-posta adresi giriniz!');

return;

}

// Şifre uzunluğu kontrolü

if (password.length < 6) {

alert('Şifre en az 6 karakter olmalıdır!');

return;

}

// Başarılı giriş simülasyonu

console.log('Giriş bilgileri:', {

email: email,

password: password

});

// Giriş başarılı mesajı

alert('Giriş başarılı!');

// Form alanlarını temizle

document.querySelector('form').reset();

});

// Input alanları için animasyon efekti

const inputs = document.querySelectorAll('input');

inputs.forEach(input => {

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

this.style.transform = 'scale(1.02)';

this.style.transition = 'all 0.3s ease';

});

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

this.style.transform = 'scale(1)';

});

// Buton hover efekti için ek JavaScript

document.querySelector('button').addEventListener('mouseover', function() {

this.style.opacity = '0.8';

});

document.querySelector('button').addEventListener('mouseout', function() {

this.style.opacity = '1';

});

Amar y respetar la naturaleza.

Recomendado

Tarjeta de zapatos

Formulario de inicio de sesión moderno

producto2

HTML

CSS

JS

Recomendado

Tarjeta de zapatos

Formulario de inicio de sesión moderno

producto2

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS