Webleb - Snippets de Código - Um código de Mete

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>

Um código de Mete

Recomendado

Trecho HTML de animação de carregamento CSS

Um Código do Sr. Pato

HTML

CSS

JS

Recomendado

Trecho HTML de animação de carregamento CSS

Um Código do Sr. Pato

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS