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>

मेटे का एक कोड

अनुशंसित

ग्रैपलिंग हुक संरचना वाला HTML स्टिकमैन

कोडपेन होम सीएसएस अनंत स्क्रॉल गैलरी

पोर्टफोलियो

HTML

CSS

JS

अनुशंसित

ग्रैपलिंग हुक संरचना वाला HTML स्टिकमैन

कोडपेन होम सीएसएस अनंत स्क्रॉल गैलरी

पोर्टफोलियो

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS