Webleb - UI Elements - Doga sev ve say

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

});

Doga sev ve say

Recommended

loading icon 1

Animated Delete Button

Animated HTML and CSS Input

HTML

CSS

JS

Recommended

loading icon 1

Animated Delete Button

Animated HTML and CSS Input

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS