Webleb - HTML UI Elements

HTML

<!DOCTYPE html>

<head>

<title>Netflix Games Login</title>

</head>

<body>

</div>

<h1>Netflix Games</h1>

<label for="email">E-posta Adresi</label>

</div>

<label for="password">Şifre</label>

</div>

<button type="submit" class="btn">Giriş Yap</button>

<a href="#">Şifremi Unuttum</a>

<a href="#">Kayıt Ol</a>

</div>

</form>

</div>

</body>

</html>

CSS

/* Genel Ayarlar */

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

height: 100vh;

overflow: hidden;

font-family: 'Arial', sans-serif;

background: #000;

}

/* Arka Plan */

.background {

position: relative;

width: 100%;

height: 100%;

overflow: hidden;

perspective: 1000px;

}

/* Dinamik 3D Arka Plan */

.dynamic-background {

position: absolute;

width: 200%;

height: 200%;

background: radial-gradient(circle, rgba(229, 9, 20, 0.3), transparent 70%);

animation: move-background 15s infinite alternate ease-in-out;

transform: rotate(45deg);

}

@keyframes move-background {

0% {

transform: translate(-20%, -20%) rotate(45deg);

}

100% {

transform: translate(20%, 20%) rotate(45deg);

}

/* Netflix Logosu (3D) */

.netflix-logo-3d {

position: absolute;

top: 30%;

left: 50%;

transform: translateX(-50%) rotateX(45deg) rotateY(30deg);

font-weight: bold;

color: #e50914;

text-shadow: 0 0 30px rgba(229, 9, 20, 0.8), 0 0 60px rgba(229, 9, 20, 0.5);

display: flex;

justify-content: center;

align-items: center;

gap: 1rem;

animation: rotate-logo 6s infinite linear;

}

.netflix-logo-3d .letter {

font-size: 10rem; /* Orta boyut - Çok büyük değil, çok küçük değil */

opacity: 0.8;

animation: fadeInOut 2s ease-in-out infinite;

}

@keyframes rotate-logo {

0% {

transform: translateX(-50%) rotateX(45deg) rotateY(30deg);

}

100% {

transform: translateX(-50%) rotateX(45deg) rotateY(390deg);

}

@keyframes fadeInOut {

0% {

opacity: 0.8;

}

50% {

opacity: 1;

}

100% {

opacity: 0.8;

}

/* Login Formu */

.login-container {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

background: rgba(0, 0, 0, 0.6); /* Daha modern saydamlık */

padding: 2rem;

border-radius: 15px;

box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);

text-align: center;

width: 100%;

max-width: 400px;

z-index: 20;

}

.login-container h1 {

color: #fff;

margin-bottom: 1.5rem;

font-size: 2rem;

}

.input-group {

margin-bottom: 1rem;

text-align: left;

}

.input-group label {

display: block;

color: #fff;

font-size: 0.9rem;

margin-bottom: 0.5rem;

}

.input-group input {

width: 100%;

padding: 0.8rem;

border: none;

border-radius: 5px;

outline: none;

background: rgba(255, 255, 255, 0.1);

color: #fff;

font-size: 1rem;

}

.btn {

width: 100%;

padding: 0.8rem;

background: #e50914;

color: #fff;

border: none;

border-radius: 10px;

font-size: 1rem;

cursor: pointer;

transition: all 0.3s ease-in-out;

}

.btn:hover {

background: #b20710;

transform: scale(1.05);

}

.links {

margin-top: 1rem;

}

.links a {

color: #e50914;

text-decoration: none;

margin: 0 0.5rem;

transition: color 0.3s ease;

}

.links a:hover {

color: #b20710;

}

JS

document.addEventListener('DOMContentLoaded', function() {

// Netflix logosu animasyonu için 3D döndürme

const netflixLogo = document.querySelector('.netflix-logo-3d');

let rotationY = 0;

let rotationX = 45; // X ekseni etkileşimi sabit

// Animation loop

function rotateLogo() {

rotationY += 0.1; // Y ekseninde yavaşça döndürme

netflixLogo.style.transform = `translateX(-50%) rotateX(${rotationX}deg) rotateY(${rotationY}deg)`;

requestAnimationFrame(rotateLogo); // Sonsuz döngüde tekrar başlat

}

// Başlatma

rotateLogo();

// Giriş formu etkileşimi: form gönderildiğinde uyarı

const loginForm = document.querySelector('.login-container form');

loginForm.addEventListener('submit', function(event) {

event.preventDefault(); // Formun sayfayı yenilemesini engelle

const email = document.getElementById('email').value;

const password = document.getElementById('password').value;

// Kullanıcı bilgilerini kontrol etme (basit bir kontrol)

if (email && password) {

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

// Burada gerçekte giriş işlemi yapılabilir.

} else {

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

}

});

// Şifremi unuttum ve kayıt ol bağlantıları için işlevsellik

const forgotPasswordLink = document.querySelector('.links a:first-child');

const signUpLink = document.querySelector('.links a:last-child');

forgotPasswordLink.addEventListener('click', function(event) {

event.preventDefault();

alert('Şifremi unuttum işlemi henüz aktif değil.');

});

signUpLink.addEventListener('click', function(event) {

event.preventDefault();

alert('Kayıt olma işlemi henüz aktif değil.');

});

Netflix

Consigliato

Un codice di Mete

CUORE

Film di carte CSS pure 3D

HTML

CSS

JS

Consigliato

Un codice di Mete

CUORE

Film di carte CSS pure 3D

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS