Webleb - UI Elements - Mete'nin bir kodu

HTML

<!DOCTYPE html>

<head>

<title>Elite Access | Premium Portal</title>

<style>

:root {

--gold-primary: #D4AF37;

--gold-light: #F5DE95;

--gold-dark: #966D20;

--black-matte: #1A1A1A;

--black-deep: #111111;

--black-light: #333333;

--white-soft: #F9F9F9;

--gold-gradient: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-primary) 50%, var(--gold-dark) 100%);

}

body {

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

background-color: var(--black-matte);

background-image:

radial-gradient(circle at 25% 25%, rgba(212, 175, 55, 0.1) 0%, transparent 50%),

radial-gradient(circle at 75% 75%, rgba(212, 175, 55, 0.1) 0%, transparent 50%);

min-height: 100vh;

margin: 0;

display: flex;

justify-content: center;

align-items: center;

color: var(--white-soft);

overflow-x: hidden;

}

.portal-container {

position: relative;

width: 420px;

min-height: 550px;

background: var(--black-deep);

border-radius: 16px;

overflow: hidden;

box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);

padding: 0;

z-index: 10;

}

.header-bar {

background: var(--gold-gradient);

height: 8px;

width: 100%;

}

.content-wrapper {

padding: 40px;

}

.gold-accent {

position: absolute;

background: var(--gold-gradient);

opacity: 0.05;

filter: blur(30px);

border-radius: 100%;

z-index: -1;

}

.accent-1 {

width: 250px;

height: 250px;

top: -100px;

right: -100px;

}

.accent-2 {

width: 300px;

height: 300px;

bottom: -150px;

left: -150px;

}

.logo {

text-align: center;

margin-bottom: 40px;

position: relative;

}

.logo::after {

content: '';

position: absolute;

bottom: -15px;

left: 50%;

transform: translateX(-50%);

width: 40px;

height: 2px;

background: var(--gold-primary);

}

.logo h1 {

font-family: 'Playfair Display', serif;

font-weight: 700;

font-size: 32px;

color: var(--gold-primary);

letter-spacing: 2px;

margin-bottom: 8px;

}

.logo p {

color: rgba(255, 255, 255, 0.7);

font-size: 14px;

font-weight: 400;

letter-spacing: 1px;

}

.tabs {

display: flex;

justify-content: space-between;

margin-bottom: 30px;

border-bottom: 1px solid rgba(212, 175, 55, 0.2);

}

.tab {

padding: 12px 0;

font-weight: 600;

color: rgba(255, 255, 255, 0.6);

cursor: pointer;

position: relative;

flex: 1;

text-align: center;

transition: all 0.3s ease;

font-size: 14px;

letter-spacing: 1px;

}

.tab.active {

color: var(--gold-primary);

}

.tab.active::after {

content: '';

position: absolute;

bottom: -1px;

left: 0;

width: 100%;

height: 2px;

background: var(--gold-primary);

}

.form-container {

position: relative;

min-height: 320px;

}

.form {

position: absolute;

width: 100%;

opacity: 0;

pointer-events: none;

transition: all 0.4s ease;

}

.form.active {

opacity: 1;

pointer-events: all;

}

.input-group {

position: relative;

margin-bottom: 24px;

}

.input-group i {

position: absolute;

left: 20px;

top: 50%;

transform: translateY(-50%);

color: rgba(212, 175, 55, 0.5);

transition: all 0.3s ease;

}

.form-input {

width: 100%;

padding: 16px 20px 16px 50px;

border: 1px solid rgba(212, 175, 55, 0.2);

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

color: var(--white-soft);

border-radius: 8px;

font-size: 14px;

font-weight: 400;

transition: all 0.3s ease;

}

.form-input::placeholder {

color: rgba(255, 255, 255, 0.4);

}

.form-input:focus {

outline: none;

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

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

box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);

}

.form-input:focus + i {

color: var(--gold-primary);

}

.action-btn {

width: 100%;

padding: 16px;

border: none;

border-radius: 8px;

background: var(--gold-gradient);

color: var(--black-deep);

font-weight: 600;

font-size: 15px;

cursor: pointer;

transition: all 0.3s ease;

box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2);

margin-top: 12px;

letter-spacing: 1px;

}

.action-btn:hover {

transform: translateY(-2px);

box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3);

}

.forgot-link {

display: block;

text-align: right;

font-size: 13px;

color: rgba(255, 255, 255, 0.6);

text-decoration: none;

margin-top: 10px;

transition: all 0.3s ease;

}

.forgot-link:hover {

color: var(--gold-primary);

}

.divider {

display: flex;

align-items: center;

margin: 25px 0;

color: rgba(255, 255, 255, 0.4);

font-size: 12px;

letter-spacing: 1px;

}

.divider::before, .divider::after {

content: '';

flex: 1;

height: 1px;

background: rgba(212, 175, 55, 0.2);

margin: 0 10px;

}

.social-login {

display: flex;

justify-content: center;

gap: 15px;

margin-bottom: 30px;

}

.social-btn {

width: 48px;

height: 48px;

border-radius: 8px;

display: flex;

justify-content: center;

align-items: center;

color: var(--white-soft);

font-size: 16px;

cursor: pointer;

transition: all 0.3s ease;

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

border: 1px solid rgba(212, 175, 55, 0.2);

}

.social-btn:hover {

transform: translateY(-3px);

background: rgba(212, 175, 55, 0.1);

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

}

.footer {

text-align: center;

margin-top: 20px;

font-size: 12px;

color: rgba(255, 255, 255, 0.4);

letter-spacing: 0.5px;

}

.footer a {

color: rgba(255, 255, 255, 0.6);

text-decoration: none;

margin: 0 8px;

transition: all 0.3s ease;

}

.footer a:hover {

color: var(--gold-primary);

}

.secure-badge {

display: flex;

align-items: center;

justify-content: center;

margin-top: 30px;

color: rgba(255, 255, 255, 0.6);

font-size: 12px;

}

.secure-badge i {

color: var(--gold-primary);

margin-right: 8px;

}

@media (max-width: 480px) {

.portal-container {

width: 90%;

}

.content-wrapper {

padding: 30px 20px;

}

.logo h1 {

font-size: 26px;

}

.social-btn {

width: 42px;

height: 42px;

}

</style>

</head>

<body>

<h1>GLOBAL ELITE</h1>

<p>Premium Member Access</p>

</div>

<div class="tab" data-tab="register">REGISTER</div>

</div>

</div>

</div>

<a href="#" class="forgot-link">Forgot password?</a>

<button type="submit" class="action-btn">ACCESS ACCOUNT</button>

<div class="divider">OR CONTINUE WITH</div>

</a>

</a>

</a>

</a>

</div>

</form>

</div>

</div>

</div>

<button type="submit" class="action-btn">CREATE ACCOUNT</button>

<div class="divider">OR REGISTER WITH</div>

</a>

</a>

</a>

</a>

</div>

</form>

</div>

<span>Secured with 256-bit encryption</span>

</div>

<a href="#">Terms of Service</a>

<a href="#">Privacy Policy</a>

<a href="#">Support</a>

</div>

document.addEventListener('DOMContentLoaded', function() {

const tabs = document.querySelectorAll('.tab');

const forms = document.querySelectorAll('.form');

tabs.forEach(tab => {

tab.addEventListener('click', function() {

// Remove active class from all tabs

tabs.forEach(t => t.classList.remove('active'));

// Add active class to clicked tab

this.classList.add('active');

// Hide all forms

forms.forEach(form => form.classList.remove('active'));

// Show corresponding form

const tabName = this.getAttribute('data-tab');

document.getElementById(`${tabName}-form`).classList.add('active');

});

// Form submission handlers

document.getElementById('login-form').addEventListener('submit', function(e) {

e.preventDefault();

// Here you would typically send the data to your server

const submitBtn = this.querySelector('.action-btn');

const originalText = submitBtn.innerText;

submitBtn.innerText = 'Processing...';

submitBtn.disabled = true;

// Simulate authentication process

setTimeout(() => {

submitBtn.innerText = 'Success!';

setTimeout(() => {

submitBtn.innerText = originalText;

submitBtn.disabled = false;

}, 1000);

}, 1500);

});

document.getElementById('register-form').addEventListener('submit', function(e) {

e.preventDefault();

// Here you would typically send the data to your server

const submitBtn = this.querySelector('.action-btn');

const originalText = submitBtn.innerText;

submitBtn.innerText = 'Processing...';

submitBtn.disabled = true;

// Simulate registration process

setTimeout(() => {

submitBtn.innerText = 'Account Created!';

setTimeout(() => {

submitBtn.innerText = originalText;

submitBtn.disabled = false;

}, 1000);

}, 1500);

});

</script>

</body>

</html>

Mete'nin bir kodu

Recommended

Street Fighter II Turbo HTML5 Game Emulator

Confetti Button

Admin dashboard

HTML

CSS

JS

Recommended

Street Fighter II Turbo HTML5 Game Emulator

Confetti Button

Admin dashboard

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS