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>

CSS

JS

Mete'nin bir kodu

Recommended