Webleb - Snippet di Codice - Ama e rispetta la natura

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';

});

Ama e rispetta la natura

Consigliato

Modulo di accesso Gradient HTML CSS

Un codice di Metehan

HTML

CSS

JS

Consigliato

Modulo di accesso Gradient HTML CSS

Un codice di Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS