Webleb - UI Elements - Mete'nin bir kodu

HTML

<!DOCTYPE html>

<head>

<title>BETA - Modern Giriş</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

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

}

body {

min-height: 100vh;

background: linear-gradient(135deg, #0a4b5c 0%, #1a737e 25%, #2e8b8b 50%, #4db6ac 75%, #80cbc4 100%);

background-size: 400% 400%;

animation: gradientShift 15s ease infinite;

position: relative;

overflow: hidden;

display: flex;

align-items: center;

justify-content: center;

}

@keyframes gradientShift {

0% { background-position: 0% 50%; }

50% { background-position: 100% 50%; }

100% { background-position: 0% 50%; }

}

/* Tropical Background Elements */

.tropical-bg {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><defs><pattern id="palm" x="0" y="0" width="200" height="200" patternUnits="userSpaceOnUse"><path d="M100 180 Q80 120 60 100 Q40 80 20 60 Q0 40 20 20 Q40 0 60 20 Q80 40 100 60 Q120 40 140 20 Q160 0 180 20 Q200 40 180 60 Q160 80 140 100 Q120 120 100 180" fill="rgba(0,0,0,0.1)"/></pattern></defs><rect width="1200" height="800" fill="url(%23palm)"/></svg>') no-repeat center center;

background-size: cover;

opacity: 0.3;

z-index: 1;

}

/* Floating Particles */

.particle {

position: absolute;

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

border-radius: 50%;

pointer-events: none;

animation: float 6s ease-in-out infinite;

}

.particle:nth-child(1) {

width: 80px;

height: 80px;

top: 10%;

left: 15%;

animation-delay: 0s;

}

.particle:nth-child(2) {

width: 60px;

height: 60px;

top: 70%;

right: 20%;

animation-delay: -2s;

}

.particle:nth-child(3) {

width: 100px;

height: 100px;

bottom: 20%;

left: 10%;

animation-delay: -4s;

}

.particle:nth-child(4) {

width: 40px;

height: 40px;

top: 30%;

right: 30%;

animation-delay: -1s;

}

.particle:nth-child(5) {

width: 70px;

height: 70px;

bottom: 40%;

right: 15%;

animation-delay: -3s;

}

@keyframes float {

0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.3; }

25% { transform: translateY(-20px) rotate(90deg); opacity: 0.6; }

50% { transform: translateY(-40px) rotate(180deg); opacity: 0.4; }

75% { transform: translateY(-15px) rotate(270deg); opacity: 0.7; }

}

/* Login Container */

.login-container {

position: relative;

width: 100%;

max-width: 400px;

margin: 20px;

z-index: 10;

}

.login-card {

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

backdrop-filter: blur(25px);

-webkit-backdrop-filter: blur(25px);

border: 1px solid rgba(255, 255, 255, 0.2);

border-radius: 25px;

padding: 40px 35px;

box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);

transition: all 0.3s ease;

position: relative;

overflow: hidden;

}

.login-card::before {

content: '';

position: absolute;

top: -50%;

left: -50%;

width: 200%;

height: 200%;

background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);

animation: shimmer 8s linear infinite;

pointer-events: none;

}

@keyframes shimmer {

0% { transform: rotate(0deg); }

100% { transform: rotate(360deg); }

}

.login-card:hover {

transform: translateY(-5px);

box-shadow: 0 35px 70px rgba(0, 0, 0, 0.3);

}

/* Header */

.login-header {

text-align: center;

margin-bottom: 35px;

position: relative;

z-index: 2;

}

.login-header h1 {

color: #fff;

font-size: 2.2rem;

font-weight: 700;

margin-bottom: 8px;

text-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);

letter-spacing: -0.5px;

}

.login-header p {

color: rgba(255, 255, 255, 0.8);

font-size: 0.95rem;

font-weight: 400;

}

/* Form Styles */

.form-group {

position: relative;

margin-bottom: 25px;

z-index: 2;

}

.input-container {

position: relative;

display: flex;

align-items: center;

}

.input-icon {

position: absolute;

left: 18px;

color: rgba(255, 255, 255, 0.7);

font-size: 1.1rem;

z-index: 3;

transition: all 0.3s ease;

}

.form-input {

width: 100%;

padding: 16px 20px 16px 50px;

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

border: 1.5px solid rgba(255, 255, 255, 0.2);

border-radius: 15px;

color: #fff;

font-size: 0.95rem;

font-weight: 400;

outline: none;

transition: all 0.3s ease;

backdrop-filter: blur(10px);

}

.form-input::placeholder {

color: rgba(255, 255, 255, 0.6);

font-weight: 300;

}

.form-input:focus {

border-color: rgba(255, 255, 255, 0.5);

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

transform: translateY(-2px);

box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);

}

.form-input:focus + .input-icon {

color: #fff;

transform: scale(1.1);

}

.password-toggle {

position: absolute;

right: 18px;

color: rgba(255, 255, 255, 0.6);

font-size: 1.1rem;

cursor: pointer;

transition: all 0.3s ease;

z-index: 3;

}

.password-toggle:hover {

color: #fff;

transform: scale(1.1);

}

/* Form Options */

.form-options {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 30px;

font-size: 0.9rem;

position: relative;

z-index: 2;

}

.remember-me {

display: flex;

align-items: center;

color: rgba(255, 255, 255, 0.8);

cursor: pointer;

}

.remember-me input[type="checkbox"] {

margin-right: 8px;

transform: scale(1.2);

accent-color: #4db6ac;

}

.forgot-password {

color: rgba(255, 255, 255, 0.9);

text-decoration: none;

font-weight: 500;

transition: all 0.3s ease;

}

.forgot-password:hover {

color: #fff;

text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);

}

/* Login Button */

.login-button {

width: 100%;

padding: 16px;

background: linear-gradient(135deg, #4db6ac, #26a69a, #00897b);

border: none;

border-radius: 15px;

color: #fff;

font-size: 1rem;

font-weight: 600;

cursor: pointer;

transition: all 0.3s ease;

position: relative;

overflow: hidden;

margin-bottom: 25px;

text-transform: uppercase;

letter-spacing: 0.5px;

z-index: 2;

}

.login-button::before {

content: '';

position: absolute;

top: 0;

left: -100%;

width: 100%;

height: 100%;

background: linear-gradient(135deg, #26a69a, #00897b, #00695c);

transition: all 0.3s ease;

}

.login-button:hover::before {

left: 0;

}

.login-button:hover {

transform: translateY(-2px);

box-shadow: 0 15px 35px rgba(77, 182, 172, 0.4);

}

.login-button span {

position: relative;

z-index: 1;

}

/* Social Login */

.social-login {

text-align: center;

margin-top: 25px;

position: relative;

z-index: 2;

}

.social-login h3 {

color: rgba(255, 255, 255, 0.8);

font-size: 0.85rem;

font-weight: 400;

margin-bottom: 20px;

text-transform: uppercase;

letter-spacing: 0.5px;

}

.social-icons {

display: flex;

justify-content: center;

gap: 15px;

}

.social-icon {

width: 45px;

height: 45px;

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

border: 1px solid rgba(255, 255, 255, 0.2);

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

color: rgba(255, 255, 255, 0.8);

font-size: 1.1rem;

text-decoration: none;

transition: all 0.3s ease;

backdrop-filter: blur(10px);

}

.social-icon:hover {

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

color: #fff;

transform: translateY(-3px) scale(1.05);

box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);

}

.social-icon.google:hover {

background: #db4437;

border-color: #db4437;

}

.social-icon.facebook:hover {

background: #3b5998;

border-color: #3b5998;

}

.social-icon.github:hover {

background: #333;

border-color: #333;

}

/* Register Link */

.register-link {

text-align: center;

margin-top: 25px;

color: rgba(255, 255, 255, 0.8);

font-size: 0.9rem;

position: relative;

z-index: 2;

}

.register-link a {

color: #fff;

text-decoration: none;

font-weight: 600;

margin-left: 5px;

transition: all 0.3s ease;

}

.register-link a:hover {

text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);

}

/* Loading Animation */

.loading {

display: none;

width: 18px;

height: 18px;

border: 2px solid rgba(255, 255, 255, 0.3);

border-top: 2px solid #fff;

border-radius: 50%;

animation: spin 1s linear infinite;

margin-left: 10px;

}

@keyframes spin {

0% { transform: rotate(0deg); }

100% { transform: rotate(360deg); }

}

/* Responsive Design */

@media (max-width: 480px) {

.login-card {

padding: 35px 25px;

margin: 15px;

border-radius: 20px;

}

.login-header h1 {

font-size: 1.9rem;

}

.form-input {

padding: 14px 18px 14px 45px;

}

.login-button {

padding: 14px;

font-size: 0.95rem;

}

/* Success Animation */

.success-animation {

background: linear-gradient(135deg, #4caf50, #66bb6a) !important;

}

.success-animation::before {

background: linear-gradient(135deg, #388e3c, #4caf50) !important;

}

</style>

</head>

<body>

<p>Hesabına güvenli giriş yap</p>

</div>

</div>

</div>

Beni hatırla

</label>

<a href="#" class="forgot-password">Şifremi unuttum</a>

</div>

<span>Giriş Yap</span>

</button>

</form>

<h3>Sosyal medya ile giriş</h3>

</a>

</a>

</a>

</div>

Hesabın yok mu?<a href="#">Kayıt ol</a>

</div>

// Password toggle functionality

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

const passwordToggle = document.getElementById('passwordToggle');

passwordToggle.addEventListener('click', function() {

if (passwordInput.type === 'password') {

passwordInput.type = 'text';

passwordToggle.classList.replace('ri-eye-off-line', 'ri-eye-line');

} else {

passwordInput.type = 'password';

passwordToggle.classList.replace('ri-eye-line', 'ri-eye-off-line');

}

});

// Form submission with animation

document.getElementById('loginForm').addEventListener('submit', function(e) {

e.preventDefault();

const button = document.querySelector('.login-button');

const loading = document.getElementById('loading');

const buttonText = button.querySelector('span');

// Show loading animation

buttonText.style.opacity = '0.7';

loading.style.display = 'inline-block';

button.style.pointerEvents = 'none';

// Simulate login process

setTimeout(() => {

buttonText.style.opacity = '1';

loading.style.display = 'none';

button.style.pointerEvents = 'auto';

// Success animation

button.classList.add('success-animation');

buttonText.textContent = 'Giriş Başarılı!';

// Redirect after success

setTimeout(() => {

window.location.href = 'https://www.web-leb.com/en';

}, 1500);

}, 2000);

});

// Input focus animations

document.querySelectorAll('.form-input').forEach(input => {

input.addEventListener('focus', function() {

this.parentElement.parentElement.style.transform = 'scale(1.02)';

});

input.addEventListener('blur', function() {

this.parentElement.parentElement.style.transform = 'scale(1)';

});

// Social icon animations

document.querySelectorAll('.social-icon').forEach(icon => {

icon.addEventListener('mouseenter', function() {

this.style.animation = 'pulse 0.6s ease-in-out';

});

icon.addEventListener('animationend', function() {

this.style.animation = '';

});

// Add pulse animation

const style = document.createElement('style');

style.textContent = `

@keyframes pulse {

0% { transform: scale(1); }

50% { transform: scale(1.1); }

100% { transform: scale(1); }

}

`;

document.head.appendChild(style);

// Parallax effect for particles

document.addEventListener('mousemove', function(e) {

const particles = document.querySelectorAll('.particle');

const x = e.clientX / window.innerWidth;

const y = e.clientY / window.innerHeight;

particles.forEach((particle, index) => {

const speed = (index + 1) * 0.5;

const xPos = x * speed * 10;

const yPos = y * speed * 10;

particle.style.transform = `translate(${xPos}px, ${yPos}px)`;

});

</script>

</body>

</html>

Mete'nin bir kodu

Recommended

React Clock Concept

Parallax Depth Cards

Developer Portfolio: Web, App & UI/UX Design

HTML

CSS

JS

Recommended

React Clock Concept

Parallax Depth Cards

Developer Portfolio: Web, App & UI/UX Design

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS