Webleb - HTML UI Elements - Um código de Mete

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>

Um código de Mete

Recomendado

animação

HTML

CSS

JS

Recomendado

animação

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS