प्रकृति से प्यार करें और उसका सम्मान करें

1288 Metehan

संपादक में खोलें Video अपना कोड प्रकाशित करें

प्रकृति से प्यार करें और उसका सम्मान करें

अनुशंसित

22 August 2024

3डी होवर प्रभाव के साथ एनिमेटेड कार्ड

12 January 2026

एचटीएमएल गेम लोडर: प्ले बटन के साथ एनईएस एमुलेटर

22 November 2025

दंत चिकित्सा क्लिनिक HTML टेम्पलेट | डोंटेल क्लिनिक

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

});

अनुशंसित

3डी होवर प्रभाव के साथ एनिमेटेड कार्ड

एचटीएमएल गेम लोडर: प्ले बटन के साथ एनईएस एमुलेटर

दंत चिकित्सा क्लिनिक HTML टेम्पलेट | डोंटेल क्लिनिक

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS