Webleb - UI Elements - Mete'nin bir kodu

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>

Mete'nin bir kodu

Recommended

Windows Restart

Mouse Tracking Googly Eyes SVG Emoji

Responsive Card

HTML

CSS

JS

Recommended

Windows Restart

Mouse Tracking Googly Eyes SVG Emoji

Responsive Card

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS