Webleb - UI Elements - Mete'nin bir kodu

HTML

CSS

<!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.

Validating your code, please wait...

HTML

CSS

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