Webleb - HTML UI Elements - Un codice di Mete

HTML

<!DOCTYPE html>

<head>

<title>Yeni Üyelik Kaydı</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

background: linear-gradient(135deg, #1a0000 0%, #330000 25%, #660000 50%, #990000 75%, #cc0000 100%);

min-height: 100vh;

display: flex;

align-items: center;

justify-content: center;

padding: 20px;

line-height: 1.6;

position: relative;

overflow-x: hidden;

}

body::before {

content: '';

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: radial-gradient(circle at 20% 50%, rgba(255, 0, 0, 0.3) 0%, transparent 50%),

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

radial-gradient(circle at 40% 80%, rgba(220, 20, 60, 0.2) 0%, transparent 50%);

pointer-events: none;

}

.container {

width: 100%;

max-width: 480px;

position: relative;

z-index: 1;

}

.signup-card {

background: rgba(0, 0, 0, 0.8);

backdrop-filter: blur(20px);

border: 2px solid #ff0000;

border-radius: 24px;

padding: 40px;

box-shadow:

0 0 50px rgba(255, 0, 0, 0.3),

0 20px 40px rgba(0, 0, 0, 0.5),

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

transform: translateY(0);

transition: all 0.3s ease;

position: relative;

overflow: hidden;

}

.signup-card::before {

content: '';

position: absolute;

top: 0;

left: 0;

right: 0;

height: 4px;

background: linear-gradient(90deg, #ff0000, #ff4500, #dc143c, #ff0000);

animation: glowPulse 2s ease-in-out infinite alternate;

}

.signup-card:hover {

transform: translateY(-5px);

box-shadow:

0 0 80px rgba(255, 0, 0, 0.5),

0 25px 50px rgba(0, 0, 0, 0.6),

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

border-color: #ff4500;

}

.card-header {

text-align: center;

margin-bottom: 32px;

}

.icon {

display: inline-flex;

align-items: center;

justify-content: center;

width: 80px;

height: 80px;

background: linear-gradient(135deg, #ff0000, #dc143c);

border-radius: 20px;

margin-bottom: 20px;

color: white;

transform: scale(1);

transition: all 0.3s ease;

box-shadow: 0 0 30px rgba(255, 0, 0, 0.5);

}

.icon:hover {

transform: scale(1.1);

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

}

.card-header h1 {

font-size: 28px;

font-weight: 700;

color: #ffffff;

margin-bottom: 8px;

text-shadow: 0 0 20px rgba(255, 0, 0, 0.5);

}

.card-header p {

color: #cccccc;

font-size: 16px;

max-width: 300px;

margin: 0 auto 24px;

}

.social-links {

display: flex;

justify-content: center;

gap: 16px;

margin-bottom: 24px;

}

.social-btn {

display: inline-flex;

align-items: center;

justify-content: center;

width: 48px;

height: 48px;

border-radius: 12px;

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

border: 1px solid rgba(255, 0, 0, 0.3);

color: #ffffff;

text-decoration: none;

transition: all 0.3s ease;

cursor: pointer;

}

.social-btn:hover {

background: rgba(255, 0, 0, 0.2);

border-color: #ff0000;

transform: translateY(-2px);

box-shadow: 0 0 20px rgba(255, 0, 0, 0.4);

}

.divider {

display: flex;

align-items: center;

margin: 24px 0;

color: #888;

font-size: 14px;

}

.divider::before,

.divider::after {

content: '';

flex: 1;

height: 1px;

background: linear-gradient(90deg, transparent, #ff0000, transparent);

}

.divider span {

padding: 0 16px;

background: rgba(0, 0, 0, 0.8);

}

.signup-form {

display: block;

animation: fadeIn 0.6s ease;

}

.form-group {

margin-bottom: 24px;

position: relative;

}

.form-label {

display: block;

font-size: 14px;

font-weight: 600;

color: #ffffff;

margin-bottom: 8px;

transition: all 0.3s ease;

text-shadow: 0 0 10px rgba(255, 0, 0, 0.3);

}

.form-input {

width: 100%;

padding: 16px 20px;

border: 2px solid rgba(255, 0, 0, 0.3);

border-radius: 12px;

font-size: 16px;

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

color: #ffffff;

transition: all 0.3s ease;

outline: none;

}

.form-input::placeholder {

color: #888;

}

.form-input:focus {

border-color: #ff0000;

box-shadow:

0 0 0 3px rgba(255, 0, 0, 0.2),

0 0 20px rgba(255, 0, 0, 0.3);

transform: translateY(-2px);

background: rgba(0, 0, 0, 0.8);

}

.form-input.error {

border-color: #ff6b6b;

animation: shake 0.5s ease-in-out;

box-shadow: 0 0 15px rgba(255, 107, 107, 0.5);

}

.form-input.success {

border-color: #51cf66;

box-shadow: 0 0 15px rgba(81, 207, 102, 0.3);

}

.error-message {

color: #ff6b6b;

font-size: 14px;

margin-top: 6px;

display: block;

opacity: 0;

transform: translateY(-10px);

transition: all 0.3s ease;

text-shadow: 0 0 10px rgba(255, 107, 107, 0.5);

}

.error-message.show {

opacity: 1;

transform: translateY(0);

}

.checkbox-group {

margin-bottom: 20px;

}

.checkbox-container {

display: flex;

align-items: center;

cursor: pointer;

font-size: 14px;

color: #cccccc;

position: relative;

padding-left: 32px;

transition: color 0.3s ease;

}

.checkbox-container input {

position: absolute;

opacity: 0;

cursor: pointer;

}

.checkmark {

position: absolute;

left: 0;

top: 50%;

transform: translateY(-50%);

height: 20px;

width: 20px;

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

border: 2px solid rgba(255, 0, 0, 0.3);

border-radius: 4px;

transition: all 0.3s ease;

}

.checkbox-container:hover .checkmark {

border-color: #ff0000;

box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);

}

.checkbox-container input:checked ~ .checkmark {

background: #ff0000;

border-color: #ff0000;

box-shadow: 0 0 15px rgba(255, 0, 0, 0.5);

}

.checkmark:after {

content: "";

position: absolute;

display: none;

left: 6px;

top: 2px;

width: 6px;

height: 10px;

border: solid white;

border-width: 0 2px 2px 0;

transform: rotate(45deg);

}

.checkbox-container input:checked ~ .checkmark:after {

display: block;

animation: checkmark 0.3s ease;

}

.submit-button {

width: 100%;

background: linear-gradient(135deg, #ff0000, #dc143c);

color: white;

border: none;

padding: 18px 24px;

border-radius: 12px;

font-size: 16px;

font-weight: 600;

cursor: pointer;

transition: all 0.3s ease;

position: relative;

overflow: hidden;

margin-top: 8px;

box-shadow: 0 0 20px rgba(255, 0, 0, 0.3);

text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

}

.submit-button:hover {

transform: translateY(-3px);

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

background: linear-gradient(135deg, #ff4500, #ff0000);

}

.submit-button:active {

transform: translateY(-1px);

}

.submit-button.loading {

pointer-events: none;

}

.button-text {

transition: opacity 0.3s ease;

}

.button-loader {

position: absolute;

top: 50%;

left: 50%;

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

opacity: 0;

transition: opacity 0.3s ease;

}

.submit-button.loading .button-text {

opacity: 0;

}

.submit-button.loading .button-loader {

opacity: 1;

}

.success-message {

text-align: center;

display: none;

animation: slideUp 0.6s ease;

}

.success-message.show {

display: block;

}

.success-icon {

display: inline-flex;

align-items: center;

justify-content: center;

width: 80px;

height: 80px;

background: linear-gradient(135deg, #51cf66, #40c057);

border-radius: 50%;

margin-bottom: 20px;

color: white;

animation: bounceIn 0.6s ease;

box-shadow: 0 0 30px rgba(81, 207, 102, 0.5);

}

.success-message h2 {

font-size: 24px;

font-weight: 700;

color: #ffffff;

margin-bottom: 8px;

text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);

}

.success-message p {

color: #cccccc;

font-size: 16px;

}

.form-progress {

width: 100%;

height: 4px;

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

border-radius: 2px;

margin-top: 16px;

overflow: hidden;

}

.progress-fill {

height: 100%;

background: linear-gradient(90deg, #ff0000, #ff4500);

border-radius: 2px;

width: 0%;

transition: width 0.3s ease;

box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);

}

@keyframes glowPulse {

0% { box-shadow: 0 0 5px rgba(255, 0, 0, 0.5); }

100% { box-shadow: 0 0 20px rgba(255, 0, 0, 0.8); }

}

@keyframes fadeIn {

from {

opacity: 0;

transform: translateY(20px);

}

to {

opacity: 1;

transform: translateY(0);

}

@keyframes slideUp {

from {

opacity: 0;

transform: translateY(30px);

}

to {

opacity: 1;

transform: translateY(0);

}

@keyframes bounceIn {

0% {

opacity: 0;

transform: scale(0.3);

}

50% {

opacity: 1;

transform: scale(1.05);

}

70% {

transform: scale(0.9);

}

100% {

opacity: 1;

transform: scale(1);

}

@keyframes shake {

0%, 100% { transform: translateX(0); }

10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }

20%, 40%, 60%, 80% { transform: translateX(5px); }

}

@keyframes checkmark {

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

100% { transform: rotate(45deg) scale(1); }

}

@media (max-width: 640px) {

.signup-card {

padding: 32px 24px;

border-radius: 20px;

}

.card-header h1 {

font-size: 24px;

}

.card-header p {

font-size: 14px;

}

.icon {

width: 64px;

height: 64px;

border-radius: 16px;

}

.form-input {

padding: 14px 16px;

font-size: 16px;

}

.submit-button {

padding: 16px 20px;

}

@media (max-width: 480px) {

body {

padding: 16px;

}

.signup-card {

padding: 24px 20px;

border-radius: 16px;

}

.card-header {

margin-bottom: 24px;

}

.form-group {

margin-bottom: 20px;

}

</style>

</head>

<body>

</svg>

</div>

<h1>Üyelik Kaydı</h1>

<p>Topluluğumuza katılın ve özel içeriklere erişim sağlayın.</p>

</svg>

</a>

</svg>

</a>

</svg>

</a>

</svg>

</a>

</div>

<span>veya email ile kayıt olun</span>

</div>

</div>

<label for="fullName" class="form-label">Ad Soyad</label>

<input

type="text"

id="fullName"

name="fullName"

class="form-input"

placeholder="Adınızı ve soyadınızı girin"

required

autocomplete="name"

>

</div>

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

<input

type="email"

id="email"

name="email"

class="form-input"

placeholder="E-posta adresinizi girin"

required

autocomplete="email"

>

</div>

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

<input

type="password"

id="password"

name="password"

class="form-input"

placeholder="Güçlü bir şifre oluşturun"

required

autocomplete="new-password"

>

</div>

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

<input

type="password"

id="confirmPassword"

name="confirmPassword"

class="form-input"

placeholder="Şifrenizi tekrar girin"

required

autocomplete="new-password"

>

</div>

<span class="checkbox-text">Haftalık bülten ve güncellemeler</span>

</label>

</div>

<span class="checkbox-text">Özel teklifler ve promosyonlar</span>

</label>

</div>

<span class="checkbox-text">Kullanım şartlarını ve gizlilik politikasını kabul ediyorum</span>

</label>

</div>

<span class="button-text">Üyelik Kaydını Tamamla</span>

</circle>

</svg>

</span>

</button>

</form>

Un codice di Mete

Consigliato

HTML

CSS

JS

Consigliato

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS