Webleb - UI Elements - Mete'nin bir kodu

HTML

<!DOCTYPE html>

<head>

<title>Elite Access | Premium Hexagonal 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-deep);

background-image:

radial-gradient(circle at 20% 20%, rgba(212, 175, 55, 0.08) 0%, transparent 60%),

radial-gradient(circle at 80% 80%, rgba(212, 175, 55, 0.08) 0%, transparent 60%);

min-height: 100vh;

margin: 0;

display: flex;

justify-content: center;

align-items: center;

color: var(--white-soft);

overflow-x: hidden;

padding: 20px;

}

.hexagon-container {

position: relative;

width: 450px;

max-width: 100%;

margin: 0 auto;

}

.hexagon-shape {

position: relative;

width: 100%;

height: 0;

padding-bottom: 115%;

clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

background: var(--black-deep);

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

overflow: hidden;

}

.hexagon-border {

position: absolute;

top: -2px;

left: -2px;

right: -2px;

bottom: -2px;

clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

background: var(--gold-gradient);

z-index: -1;

}

.hex-accent {

position: absolute;

background: var(--gold-gradient);

opacity: 0.05;

filter: blur(30px);

border-radius: 100%;

z-index: 0;

}

.accent-1 {

width: 250px;

height: 250px;

top: -100px;

right: -100px;

}

.accent-2 {

width: 300px;

height: 300px;

bottom: -150px;

left: -150px;

}

.content-wrapper {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

padding: 40px 30px;

display: flex;

flex-direction: column;

overflow-y: auto;

scrollbar-width: none; /* Firefox */

}

.content-wrapper::-webkit-scrollbar {

display: none; /* Chrome, Safari, Edge */

}

.logo {

text-align: center;

margin-bottom: 20px;

position: relative;

}

.logo::after {

content: '';

position: absolute;

bottom: -12px;

left: 50%;

transform: translateX(-50%);

width: 60px;

height: 2px;

background: var(--gold-primary);

}

.logo h1 {

font-family: 'Playfair Display', serif;

font-weight: 700;

font-size: 28px;

color: var(--gold-primary);

letter-spacing: 2px;

margin-bottom: 4px;

}

.logo p {

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

font-size: 13px;

font-weight: 400;

letter-spacing: 1px;

}

.tabs {

display: flex;

justify-content: space-between;

margin-bottom: 20px;

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: 13px;

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;

flex: 1;

min-height: 280px;

margin-bottom: 10px;

}

.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: 16px;

}

.input-group i {

position: absolute;

left: 16px;

top: 50%;

transform: translateY(-50%);

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

transition: all 0.3s ease;

font-size: 14px;

}

.form-input {

width: 100%;

padding: 14px 16px 14px 40px;

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

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

color: var(--white-soft);

border-radius: 6px;

font-size: 13px;

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(0, 0, 0, 0.3);

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: 14px;

border: none;

border-radius: 6px;

background: var(--gold-gradient);

color: var(--black-deep);

font-weight: 600;

font-size: 14px;

cursor: pointer;

transition: all 0.3s ease;

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

margin-top: 10px;

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: 12px;

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

text-decoration: none;

margin-top: 8px;

transition: all 0.3s ease;

}

.forgot-link:hover {

color: var(--gold-primary);

}

.divider {

display: flex;

align-items: center;

margin: 18px 0;

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

font-size: 11px;

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: 12px;

margin-bottom: 15px;

}

.social-btn {

width: 40px;

height: 40px;

border-radius: 6px;

display: flex;

justify-content: center;

align-items: center;

color: var(--white-soft);

font-size: 15px;

cursor: pointer;

transition: all 0.3s ease;

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

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;

font-size: 11px;

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

letter-spacing: 0.5px;

margin-top: auto;

}

.footer a {

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

text-decoration: none;

margin: 0 6px;

transition: all 0.3s ease;

}

.footer a:hover {

color: var(--gold-primary);

}

.secure-badge {

display: flex;

align-items: center;

justify-content: center;

margin-top: 10px;

margin-bottom: 5px;

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

font-size: 11px;

}

.secure-badge i {

color: var(--gold-primary);

margin-right: 6px;

}

/* Responsive adjustments */

@media (max-width: 480px) {

.hexagon-container {

width: 100%;

}

.content-wrapper {

padding: 25px 20px;

}

.logo h1 {

font-size: 24px;

}

.logo p {

font-size: 11px;

}

.social-btn {

width: 36px;

height: 36px;

}

.form-input {

padding: 12px 15px 12px 38px;

}

/* Animation effects */

@keyframes glowing {

0% { box-shadow: 0 0 5px rgba(212, 175, 55, 0.3); }

50% { box-shadow: 0 0 20px rgba(212, 175, 55, 0.5); }

100% { box-shadow: 0 0 5px rgba(212, 175, 55, 0.3); }

}

.hexagon-border {

animation: glowing 3s infinite;

}

</style>

</head>

<body>

<h1>ELITE NEXUS</h1>

<p>Premium Member Access Portal</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 PORTAL</button>

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

</a>

</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>

</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 with enhanced experience

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.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Verifying...';

submitBtn.disabled = true;

// Simulate authentication process

setTimeout(() => {

submitBtn.innerHTML = '<i class="fas fa-check"></i> Success!';

setTimeout(() => {

submitBtn.innerHTML = originalText;

submitBtn.disabled = false;

// Add redirect logic here

}, 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.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';

submitBtn.disabled = true;

// Simulate registration process

setTimeout(() => {

submitBtn.innerHTML = '<i class="fas fa-check"></i> Account Created!';

setTimeout(() => {

submitBtn.innerHTML = originalText;

submitBtn.disabled = false;

// Add welcome/verification logic here

}, 1000);

}, 1500);

});

// Add subtle form animations

const inputs = document.querySelectorAll('.form-input');

inputs.forEach(input => {

input.addEventListener('focus', function() {

this.parentElement.style.transform = 'translateY(-2px)';

});

input.addEventListener('blur', function() {

this.parentElement.style.transform = 'translateY(0)';

});

</script>

</body>

</html>

Mete'nin bir kodu

Recommended

CSS Animation Container HTML Structure

SIDEBAR INTERACTION

Lego Batman

HTML

CSS

JS

Recommended

CSS Animation Container HTML Structure

SIDEBAR INTERACTION

Lego Batman

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS