Webleb - Snippets de Código - Amar e respeitar a natureza

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 e respeitar a natureza

Recomendado

Formulário de login gradiente HTML CSS

golpe de boneco de pano

Mostradores de volume

HTML

CSS

JS

Recomendado

Formulário de login gradiente HTML CSS

golpe de boneco de pano

Mostradores de volume

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS