Webleb - कोड स्निपेट्स - मेटे का एक कोड

HTML

<!DOCTYPE html>

<head>

<title>Giriş Yap | Premium Platform</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

height: 100vh;

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

position: relative;

overflow: hidden;

display: flex;

align-items: center;

justify-content: center;

}

/* Animated Background */

.background-animation {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

overflow: hidden;

z-index: 0;

}

.floating-shapes {

position: absolute;

width: 100%;

height: 100%;

}

.shape {

position: absolute;

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

border-radius: 50%;

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

}

.shape:nth-child(1) {

width: 120px;

height: 120px;

top: 10%;

left: 10%;

animation-delay: 0s;

}

.shape:nth-child(2) {

width: 80px;

height: 80px;

top: 60%;

left: 80%;

animation-delay: 3s;

}

.shape:nth-child(3) {

width: 150px;

height: 150px;

top: 80%;

left: 20%;

animation-delay: 6s;

}

.shape:nth-child(4) {

width: 100px;

height: 100px;

top: 20%;

right: 15%;

animation-delay: 9s;

}

@keyframes float {

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

33% { transform: translateY(-30px) rotate(120deg); }

66% { transform: translateY(20px) rotate(240deg); }

}

/* Particle Effect */

.particles {

position: absolute;

width: 100%;

height: 100%;

pointer-events: none;

}

.particle {

position: absolute;

width: 2px;

height: 2px;

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

border-radius: 50%;

animation: particle-float 15s infinite linear;

}

@keyframes particle-float {

0% {

transform: translateY(100vh) translateX(0);

opacity: 0;

}

10% {

opacity: 1;

}

90% {

opacity: 1;

}

100% {

transform: translateY(-100vh) translateX(100px);

opacity: 0;

}

/* Main Container */

.login-container {

position: relative;

z-index: 10;

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

backdrop-filter: blur(20px);

border-radius: 24px;

padding: 48px;

width: 100%;

max-width: 480px;

box-shadow:

0 32px 64px rgba(0, 0, 0, 0.2),

0 16px 32px rgba(0, 0, 0, 0.1),

inset 0 1px 0 rgba(255, 255, 255, 0.5);

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

animation: slideUp 0.8s ease-out;

}

@keyframes slideUp {

from {

opacity: 0;

transform: translateY(60px) scale(0.9);

}

to {

opacity: 1;

transform: translateY(0) scale(1);

}

/* Header */

.login-header {

text-align: center;

margin-bottom: 40px;

}

.logo {

width: 72px;

height: 72px;

background: linear-gradient(135deg, #667eea, #764ba2);

border-radius: 20px;

margin: 0 auto 24px;

display: flex;

align-items: center;

justify-content: center;

box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);

animation: logoPulse 3s ease-in-out infinite;

}

@keyframes logoPulse {

0%, 100% { transform: scale(1); }

50% { transform: scale(1.05); }

}

.logo svg {

width: 36px;

height: 36px;

color: white;

}

.login-header h1 {

font-size: 32px;

font-weight: 800;

color: #1a1a1a;

margin-bottom: 8px;

letter-spacing: -0.5px;

}

.login-header p {

font-size: 16px;

color: #6b7280;

font-weight: 400;

}

/* Form Styles */

.login-form {

margin-bottom: 32px;

}

.form-group {

margin-bottom: 24px;

position: relative;

}

.form-label {

display: block;

font-size: 14px;

font-weight: 600;

color: #374151;

margin-bottom: 8px;

}

.form-input {

width: 100%;

padding: 16px 20px;

border: 2px solid #e5e7eb;

border-radius: 12px;

font-size: 16px;

font-weight: 400;

color: #1f2937;

background: #ffffff;

transition: all 0.3s ease;

outline: none;

}

.form-input:focus {

border-color: #667eea;

box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);

transform: translateY(-2px);

}

.form-input::placeholder {

color: #9ca3af;

}

/* Password Input with Toggle */

.password-group {

position: relative;

}

.password-toggle {

position: absolute;

right: 16px;

top: 50%;

transform: translateY(-50%);

background: none;

border: none;

color: #6b7280;

cursor: pointer;

padding: 4px;

border-radius: 4px;

transition: color 0.2s ease;

}

.password-toggle:hover {

color: #374151;

}

/* Remember Me & Forgot Password */

.form-options {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 32px;

}

.checkbox-group {

display: flex;

align-items: center;

}

.checkbox-group input {

margin-right: 8px;

width: 16px;

height: 16px;

accent-color: #667eea;

}

.checkbox-group label {

font-size: 14px;

color: #6b7280;

cursor: pointer;

}

.forgot-password {

font-size: 14px;

color: #667eea;

text-decoration: none;

font-weight: 500;

transition: color 0.2s ease;

}

.forgot-password:hover {

color: #5a67d8;

}

/* Login Button */

.login-button {

width: 100%;

padding: 16px 24px;

background: linear-gradient(135deg, #667eea, #764ba2);

color: white;

border: none;

border-radius: 12px;

font-size: 16px;

font-weight: 600;

cursor: pointer;

transition: all 0.3s ease;

box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);

position: relative;

overflow: hidden;

}

.login-button::before {

content: '';

position: absolute;

top: 0;

left: -100%;

width: 100%;

height: 100%;

background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);

transition: left 0.5s ease;

}

.login-button:hover::before {

left: 100%;

}

.login-button:hover {

transform: translateY(-2px);

box-shadow: 0 8px 32px rgba(102, 126, 234, 0.4);

}

.login-button:active {

transform: translateY(0);

}

/* Divider */

.divider {

display: flex;

align-items: center;

margin: 32px 0;

color: #9ca3af;

font-size: 14px;

}

.divider::before,

.divider::after {

content: '';

flex: 1;

height: 1px;

background: #e5e7eb;

}

.divider span {

padding: 0 16px;

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

}

/* Social Login */

.social-login {

margin-bottom: 32px;

}

.social-buttons {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 12px;

margin-bottom: 16px;

}

.social-button {

display: flex;

align-items: center;

justify-content: center;

padding: 12px 16px;

border: 2px solid #e5e7eb;

border-radius: 12px;

background: white;

color: #374151;

text-decoration: none;

font-size: 14px;

font-weight: 500;

transition: all 0.3s ease;

gap: 8px;

}

.social-button:hover {

border-color: #d1d5db;

transform: translateY(-2px);

box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);

}

.social-button.google:hover {

border-color: #ea4335;

color: #ea4335;

}

.social-button.facebook:hover {

border-color: #1877f2;

color: #1877f2;

}

.social-button.twitter:hover {

border-color: #1da1f2;

color: #1da1f2;

}

.social-button.linkedin:hover {

border-color: #0a66c2;

color: #0a66c2;

}

/* More Social Options */

.more-social {

display: flex;

justify-content: center;

gap: 12px;

}

.social-icon {

display: flex;

align-items: center;

justify-content: center;

width: 48px;

height: 48px;

border: 2px solid #e5e7eb;

border-radius: 12px;

background: white;

color: #6b7280;

text-decoration: none;

transition: all 0.3s ease;

}

.social-icon:hover {

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

box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);

}

.social-icon.instagram:hover {

border-color: #e1306c;

color: #e1306c;

}

.social-icon.discord:hover {

border-color: #5865f2;

color: #5865f2;

}

.social-icon.github:hover {

border-color: #333;

color: #333;

}

/* Sign Up Link */

.signup-link {

text-align: center;

font-size: 14px;

color: #6b7280;

}

.signup-link a {

color: #667eea;

text-decoration: none;

font-weight: 600;

transition: color 0.2s ease;

}

.signup-link a:hover {

color: #5a67d8;

}

/* Loading State */

.loading {

pointer-events: none;

opacity: 0.7;

}

.loading .login-button {

background: #9ca3af;

}

/* Responsive Design */

@media (max-width: 640px) {

.login-container {

margin: 20px;

padding: 32px 24px;

}

.login-header h1 {

font-size: 28px;

}

.social-buttons {

grid-template-columns: 1fr;

}

.form-options {

flex-direction: column;

align-items: flex-start;

gap: 16px;

}

@media (max-width: 480px) {

.login-container {

margin: 16px;

padding: 24px 20px;

}

.more-social {

flex-wrap: wrap;

}

/* Success Animation */

@keyframes success {

0% { transform: scale(1); }

50% { transform: scale(1.05); }

100% { transform: scale(1); }

}

.success {

animation: success 0.6s ease;

border-color: #10b981 !important;

}

</style>

</head>

<body>

</div>

</div>

</svg>

</div>

<h1>Hoş Geldiniz</h1>

<p>Hesabınıza giriş yapın ve özel deneyiminizi yaşayın</p>

</div>

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

<input

type="email"

id="email"

name="email"

class="form-input"

placeholder="ornek@email.com"

required

>

</div>

<label for="password" class="form-label">Şifre</label>

<input

type="password"

id="password"

name="password"

class="form-input"

placeholder="Şifrenizi girin"

required

>

</svg>

</button>

</div>

<label for="remember">Beni hatırla</label>

</div>

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

</div>

Giriş Yap

</button>

</form>

<span>veya şununla devam edin</span>

</div>

</svg>

Google

</a>

</svg>

Facebook

</a>

</div>

</svg>

</a>

</svg>

</a>

</svg>

</a>

</svg>

</a>

<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.

मेटे का एक कोड

अनुशंसित

मेतेहान

भविष्योन्मुखी लॉगिन फॉर्म

टच कंट्रोल के साथ युमे निक्की का HTML5 गेम पोर्ट

HTML

CSS

JS

अनुशंसित

मेतेहान

भविष्योन्मुखी लॉगिन फॉर्म

टच कंट्रोल के साथ युमे निक्की का HTML5 गेम पोर्ट

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS