Webleb - कोड स्निपेट्स - मेटे का एक कोड

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>

मेटे का एक कोड

अनुशंसित

CSS त्रुटि 404 एनीमेशन

इंटरैक्टिव स्ट्रीट लैंप

बाल्डीज़ बेसिक्स प्लस वेबजीएल लोडर और प्रगति

HTML

CSS

JS

अनुशंसित

CSS त्रुटि 404 एनीमेशन

इंटरैक्टिव स्ट्रीट लैंप

बाल्डीज़ बेसिक्स प्लस वेबजीएल लोडर और प्रगति

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS