Webleb - HTML UI Elements - Un codice di Mete

HTML

<!DOCTYPE html>

<head>

<title>Altın Temalı Giriş Sistemi</title>

<style>

:root {

--primary-gold: #FFD700;

--dark-gold: #B8860B;

--light-gold: #FFF8DC;

--accent-gold: #DAA520;

--text-primary: #2D1810;

--text-secondary: #8B4513;

--white: #FFFFFF;

--cream: #FDF5E6;

--shadow-gold: 0 8px 32px rgba(255, 215, 0, 0.3);

--shadow-dark: 0 15px 35px rgba(45, 24, 16, 0.2);

--gradient-gold: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FF8C00 100%);

--gradient-dark: linear-gradient(135deg, #8B4513 0%, #A0522D 50%, #CD853F 100%);

--border-radius: 16px;

--transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

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

background: var(--gradient-dark);

min-height: 100vh;

overflow-x: hidden;

position: relative;

}

body::before {

content: '';

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

background:

radial-gradient(circle at 20% 50%, rgba(255, 215, 0, 0.1) 0%, transparent 50%),

radial-gradient(circle at 80% 20%, rgba(255, 165, 0, 0.1) 0%, transparent 50%),

radial-gradient(circle at 40% 80%, rgba(218, 165, 32, 0.1) 0%, transparent 50%);

pointer-events: none;

}

.container-fluid {

padding: 20px;

position: relative;

z-index: 1;

}

.auth-container {

background: var(--white);

border-radius: 24px;

box-shadow: var(--shadow-dark);

overflow: hidden;

max-width: 1200px;

width: 100%;

min-height: 700px;

position: relative;

animation: slideUp 1s ease-out;

border: 3px solid var(--primary-gold);

}

/* Illustration Section */

.illustration-section {

position: relative;

background: var(--gradient-gold);

display: flex;

align-items: center;

justify-content: center;

min-height: 700px;

overflow: hidden;

}

.illustration {

position: relative;

width: 100%;

height: 100%;

display: flex;

align-items: center;

justify-content: center;

flex-direction: column;

}

.golden-orb {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 200px;

height: 200px;

background: radial-gradient(circle, #FFD700, #FFA500, #FF8C00);

border-radius: 50%;

box-shadow:

0 0 50px rgba(255, 215, 0, 0.6),

inset 0 0 50px rgba(255, 255, 255, 0.2);

animation: pulse 3s ease-in-out infinite, rotate 20s linear infinite;

}

.crown-icon {

font-size: 80px;

color: var(--text-primary);

z-index: 2;

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

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

}

.floating-elements {

position: absolute;

width: 100%;

height: 100%;

top: 0;

left: 0;

}

.floating-star {

position: absolute;

color: var(--white);

animation: twinkle 2s ease-in-out infinite;

}

.star-1 { top: 20%; left: 15%; font-size: 24px; animation-delay: 0s; }

.star-2 { top: 30%; right: 20%; font-size: 18px; animation-delay: 0.5s; }

.star-3 { bottom: 25%; left: 10%; font-size: 20px; animation-delay: 1s; }

.star-4 { bottom: 40%; right: 15%; font-size: 16px; animation-delay: 1.5s; }

/* Form Section */

.form-section {

display: flex;

align-items: center;

justify-content: center;

padding: 50px 40px;

min-height: 700px;

background: linear-gradient(45deg, var(--cream) 0%, var(--white) 100%);

}

.form-container {

width: 100%;

max-width: 450px;

}

.form-toggle {

display: flex;

background: var(--light-gold);

border-radius: var(--border-radius);

padding: 4px;

margin-bottom: 40px;

box-shadow: var(--shadow-gold);

}

.toggle-btn {

flex: 1;

padding: 12px;

border: none;

background: transparent;

border-radius: calc(var(--border-radius) - 4px);

font-weight: 600;

color: var(--text-secondary);

cursor: pointer;

transition: var(--transition);

}

.toggle-btn.active {

background: var(--gradient-gold);

color: var(--white);

box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);

transform: translateY(-1px);

}

.form-header {

text-align: center;

margin-bottom: 40px;

}

.welcome-title {

font-size: 36px;

font-weight: 800;

background: var(--gradient-gold);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-clip: text;

margin-bottom: 12px;

animation: slideUp 0.8s ease-out 0.2s both;

}

.welcome-subtitle {

font-size: 16px;

color: var(--text-secondary);

font-weight: 400;

animation: slideUp 0.8s ease-out 0.4s both;

}

.auth-form {

animation: slideUp 0.8s ease-out 0.6s both;

}

.form-group {

margin-bottom: 24px;

}

.form-label {

display: block;

margin-bottom: 8px;

font-weight: 600;

color: var(--text-primary);

font-size: 14px;

}

.input-group {

position: relative;

display: flex;

border-radius: var(--border-radius);

overflow: hidden;

box-shadow: 0 4px 15px rgba(255, 215, 0, 0.1);

transition: var(--transition);

border: 2px solid transparent;

}

.input-group:focus-within {

border-color: var(--primary-gold);

box-shadow: var(--shadow-gold);

transform: translateY(-2px);

}

.input-group-text {

background: var(--light-gold);

border: none;

color: var(--text-secondary);

display: flex;

align-items: center;

justify-content: center;

width: 55px;

font-size: 18px;

transition: var(--transition);

}

.input-group:focus-within .input-group-text {

color: var(--dark-gold);

background: var(--primary-gold);

}

.form-control {

border: none;

padding: 18px;

font-size: 16px;

background: var(--white);

color: var(--text-primary);

transition: var(--transition);

flex: 1;

}

.form-control:focus {

outline: none;

box-shadow: none;

background: var(--cream);

}

.form-control::placeholder {

color: var(--text-secondary);

opacity: 0.7;

}

.password-toggle {

cursor: pointer;

background: var(--white);

transition: var(--transition);

}

.password-toggle:hover {

color: var(--primary-gold);

background: var(--light-gold);

}

.biometric-login {

display: flex;

align-items: center;

gap: 12px;

margin: 20px 0;

padding: 16px;

background: linear-gradient(45deg, var(--light-gold), var(--cream));

border-radius: var(--border-radius);

border: 2px dashed var(--accent-gold);

cursor: pointer;

transition: var(--transition);

}

.biometric-login:hover {

background: var(--light-gold);

transform: scale(1.02);

}

.biometric-icon {

font-size: 24px;

color: var(--dark-gold);

}

.form-options {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 32px;

}

.form-check {

display: flex;

align-items: center;

}

.form-check-input {

margin-right: 8px;

accent-color: var(--primary-gold);

}

.form-check-label {

font-size: 14px;

color: var(--text-secondary);

cursor: pointer;

}

.forgot-password {

font-size: 14px;

color: var(--dark-gold);

text-decoration: none;

font-weight: 600;

transition: var(--transition);

}

.forgot-password:hover {

color: var(--primary-gold);

text-decoration: underline;

}

.auth-btn {

width: 100%;

background: var(--gradient-gold);

border: none;

border-radius: var(--border-radius);

padding: 18px;

color: var(--white);

font-size: 16px;

font-weight: 700;

display: flex;

align-items: center;

justify-content: center;

gap: 10px;

cursor: pointer;

transition: var(--transition);

position: relative;

overflow: hidden;

box-shadow: var(--shadow-gold);

text-transform: uppercase;

letter-spacing: 1px;

}

.auth-btn:hover {

transform: translateY(-3px);

box-shadow: 0 12px 40px rgba(255, 215, 0, 0.4);

}

.auth-btn:active {

transform: translateY(-1px);

}

.auth-btn::before {

content: '';

position: absolute;

top: 0;

left: -100%;

width: 100%;

height: 100%;

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

transition: var(--transition);

}

.auth-btn:hover::before {

left: 100%;

}

.divider {

text-align: center;

margin: 40px 0;

position: relative;

}

.divider::before {

content: '';

position: absolute;

top: 50%;

left: 0;

right: 0;

height: 2px;

background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);

}

.divider span {

background: var(--white);

padding: 0 25px;

color: var(--text-secondary);

font-size: 14px;

font-weight: 600;

position: relative;

}

.social-login {

display: grid;

grid-template-columns: repeat(2, 1fr);

gap: 15px;

margin-bottom: 32px;

}

.social-btn {

border: 2px solid var(--accent-gold);

background: var(--white);

border-radius: var(--border-radius);

padding: 14px;

display: flex;

align-items: center;

justify-content: center;

gap: 10px;

cursor: pointer;

transition: var(--transition);

font-size: 14px;

font-weight: 600;

text-decoration: none;

color: var(--text-primary);

}

.social-btn:hover {

transform: translateY(-3px);

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

color: var(--white);

}

.social-btn i {

font-size: 18px;

}

.google-btn:hover {

background: #db4437;

border-color: #db4437;

}

.facebook-btn:hover {

background: #4267B2;

border-color: #4267B2;

}

.twitter-btn:hover {

background: #1DA1F2;

border-color: #1DA1F2;

}

.linkedin-btn:hover {

background: #0077B5;

border-color: #0077B5;

}

.instagram-btn:hover {

background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);

border-color: #bc1888;

}

.youtube-btn:hover {

background: #FF0000;

border-color: #FF0000;

}

.auth-switch {

text-align: center;

font-size: 14px;

color: var(--text-secondary);

}

.auth-switch-link {

color: var(--dark-gold);

text-decoration: none;

font-weight: 700;

transition: var(--transition);

}

.auth-switch-link:hover {

color: var(--primary-gold);

text-decoration: underline;

}

.form-hidden {

display: none;

}

/* Animations */

@keyframes slideUp {

from {

opacity: 0;

transform: translateY(30px);

}

to {

opacity: 1;

transform: translateY(0);

}

@keyframes float {

0%, 100% {

transform: translateY(0px) rotate(0deg);

}

50% {

transform: translateY(-15px) rotate(5deg);

}

@keyframes pulse {

0%, 100% {

transform: translate(-50%, -50%) scale(1);

box-shadow: 0 0 50px rgba(255, 215, 0, 0.6);

}

50% {

transform: translate(-50%, -50%) scale(1.1);

box-shadow: 0 0 80px rgba(255, 215, 0, 0.8);

}

@keyframes rotate {

from {

transform: translate(-50%, -50%) rotate(0deg);

}

to {

transform: translate(-50%, -50%) rotate(360deg);

}

@keyframes twinkle {

0%, 100% {

opacity: 0.5;

transform: scale(1);

}

50% {

opacity: 1;

transform: scale(1.2);

}

/* Loading States */

.auth-btn.loading {

pointer-events: none;

opacity: 0.8;

}

.auth-btn.loading::after {

content: '';

width: 20px;

height: 20px;

border: 2px solid transparent;

border-top: 2px solid var(--white);

border-radius: 50%;

animation: spin 1s linear infinite;

margin-left: 10px;

}

@keyframes spin {

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

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

}

/* Error and Success States */

.form-control.error {

border-color: #ef4444;

background: rgba(239, 68, 68, 0.05);

}

.form-control.success {

border-color: #10b981;

background: rgba(16, 185, 129, 0.05);

}

.error-message {

color: #ef4444;

font-size: 12px;

margin-top: 6px;

display: none;

font-weight: 500;

}

.form-group.error .error-message {

display: block;

}

/* Toast Notifications */

.toast {

position: fixed;

top: 20px;

right: 20px;

background: var(--gradient-gold);

color: var(--white);

padding: 16px 20px;

border-radius: var(--border-radius);

box-shadow: var(--shadow-gold);

display: flex;

align-items: center;

gap: 10px;

font-size: 14px;

font-weight: 600;

z-index: 9999;

animation: slideInRight 0.4s ease-out;

}

@keyframes slideInRight {

from {

transform: translateX(100%);

opacity: 0;

}

to {

transform: translateX(0);

opacity: 1;

}

/* Responsive Design */

@media (max-width: 991px) {

.auth-container {

max-width: 600px;

}

.illustration-section {

min-height: 350px;

}

.form-section {

padding: 40px 30px;

}

.welcome-title {

font-size: 28px;

}

@media (max-width: 768px) {

.container-fluid {

padding: 15px;

}

.auth-container {

border-radius: 20px;

min-height: auto;

}

.illustration-section {

min-height: 280px;

}

.form-section {

padding: 30px 20px;

}

.welcome-title {

font-size: 24px;

}

.form-container {

max-width: 100%;

}

.golden-orb {

width: 150px;

height: 150px;

}

.crown-icon {

font-size: 60px;

}

.social-login {

grid-template-columns: 1fr;

}

@media (max-width: 480px) {

.form-header {

margin-bottom: 30px;

}

.welcome-title {

font-size: 22px;

}

.welcome-subtitle {

font-size: 14px;

}

.form-group {

margin-bottom: 20px;

}

.form-control {

padding: 16px;

font-size: 14px;

}

.auth-btn {

padding: 16px;

font-size: 14px;

}

.form-options {

flex-direction: column;

gap: 16px;

align-items: flex-start;

}

.form-toggle {

margin-bottom: 30px;

}

.toggle-btn {

padding: 10px;

font-size: 14px;

}

/* Premium Effects */

.shine-effect {

position: relative;

overflow: hidden;

}

.shine-effect::before {

content: '';

position: absolute;

top: 0;

left: -100%;

width: 100%;

height: 100%;

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

transition: var(--transition);

}

.shine-effect:hover::before {

left: 100%;

}

</style>

</head>

<body>

</div>

</div>

<i class="fas fa-sign-in-alt"></i> Oturum Aç

</button>

<i class="fas fa-user-plus"></i> Üye Ol

</button>

</div>

<h2 class="welcome-title">Hoş Geldiniz!</h2>

<p class="welcome-subtitle">Lütfen hesabınıza giriş yapın</p>

</div>

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

</span>

</div>

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

</span>

</span>

</div>

<span>Parmak izi ile giriş yap</span>

</div>

Beni hatırla

</label>

</div>

<a href="mailto:atillademir210@" class="forgot-password">Şifremi Unuttum?</a>

</div>

<span>Giriş Yap</span>

</button>

<span>veya sosyal medya ile devam et</span>

</div>

<span>Google</span>

</a>

<span>Facebook</span>

</a>

<span>Twitter</span>

</a>

<span>LinkedIn</span>

</a>

<span>Instagram</span>

</a>

<span>YouTube</span>

</a>

</div>

</form>

</div>

<h2 class="welcome-title">Aramıza Katılın!</h2>

<p class="welcome-subtitle">Yeni hesabınızı oluşturun</p>

</div>

<label class="form-label">Kullanıcı Adı</label>

</span>

</div>

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

</span>

</div>

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

</span>

<input type="password" class="form-control" id="registerPassword" placeholder="Şifrenizi girin" require

Un codice di Mete

Consigliato

Progettazione di siti Web utilizzando HTML e CSS

Modulo di contatto - Aggiornato

Un codice di Maxi-Digital

HTML

CSS

JS

Consigliato

Progettazione di siti Web utilizzando HTML e CSS

Modulo di contatto - Aggiornato

Un codice di Maxi-Digital

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS