Webleb - 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

Recommended

A Code by Skyrreum

CodePen - Phone number input field

A Code by dossousandrin

HTML

CSS

JS

Recommended

A Code by Skyrreum

CodePen - Phone number input field

A Code by dossousandrin

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS