Webleb - HTML UI Elements - Um código de Mete

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.

Um código de Mete

Recomendado

Site de portfólio incrível

Portfólio do desenvolvedor HTML V2

Um código por hasan

HTML

CSS

JS

Recomendado

Site de portfólio incrível

Portfólio do desenvolvedor HTML V2

Um código por hasan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS