Webleb - HTML UI Elements - Código de Mete

HTML

CSS

<!DOCTYPE html>

<head>

<title>Nexus Portal | Premium Access</title>

<style>

:root {

--pastel-blue: #D4F1F9;

--pastel-purple: #E2D4F9;

--pastel-pink: #F9D4E5;

--pastel-green: #D4F9E2;

--pastel-yellow: #F9F3D4;

--pastel-red: #F9D4D4;

}

body {

font-family: 'Montserrat', sans-serif;

background: linear-gradient(

135deg,

var(--pastel-blue) 0%,

var(--pastel-green) 20%,

var(--pastel-yellow) 40%,

var(--pastel-pink) 60%,

var(--pastel-red) 80%,

var(--pastel-purple) 100%

);

background-size: 400% 400%;

animation: gradientBG 18s ease infinite;

min-height: 100vh;

margin: 0;

display: flex;

justify-content: center;

align-items: center;

color: #333;

overflow-x: hidden;

}

@keyframes gradientBG {

0% { background-position: 0% 50%; }

50% { background-position: 100% 50%; }

100% { background-position: 0% 50%; }

}

.portal-container {

position: relative;

width: 420px;

min-height: 500px;

background: rgba(255, 255, 255, 0.95);

border-radius: 24px;

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

backdrop-filter: blur(10px);

padding: 40px;

z-index: 10;

overflow: hidden;

transition: all 0.4s ease;

}

.portal-container::before {

content: '';

position: absolute;

top: -50%;

left: -50%;

width: 200%;

height: 200%;

background: conic-gradient(

transparent,

var(--pastel-blue)

);

animation: rotate 6s linear infinite;

z-index: -1;

}

.portal-container::after {

content: '';

position: absolute;

top: -50%;

left: -50%;

width: 200%;

height: 200%;

background: conic-gradient(

transparent,

var(--pastel-purple)

);

animation: rotate 6s linear infinite;

animation-delay: -3s;

z-index: -1;

}

@keyframes rotate {

0% { transform: rotate(0deg); }

100% { transform: rotate(360deg); }

}

.logo {

text-align: center;

margin-bottom: 40px;

}

.logo h1 {

font-weight: 800;

font-size: 32px;

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

letter-spacing: 1px;

margin-bottom: 8px;

}

.logo p {

color: #666;

font-size: 14px;

font-weight: 500;

}

.tabs {

display: flex;

justify-content: space-between;

margin-bottom: 30px;

border-bottom: 1px solid #eee;

}

.tab {

padding: 12px 0;

font-weight: 600;

color: #999;

cursor: pointer;

position: relative;

flex: 1;

text-align: center;

transition: all 0.3s ease;

}

.tab.active {

color: #333;

}

.tab.active::after {

content: '';

position: absolute;

bottom: -1px;

left: 0;

width: 100%;

height: 3px;

background: linear-gradient(135deg, var(--pastel-blue), var(--pastel-purple));

border-radius: 3px 3px 0 0;

}

.form-container {

position: relative;

min-height: 300px;

}

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

}

.input-group i {

position: absolute;

left: 20px;

top: 50%;

transform: translateY(-50%);

color: #aaa;

transition: all 0.3s ease;

}

.form-input {

width: 100%;

padding: 16px 20px 16px 50px;

border: 1px solid #eee;

border-radius: 12px;

font-size: 15px;

font-weight: 500;

transition: all 0.3s ease;

background: rgba(255, 255, 255, 0.8);

}

.form-input:focus {

outline: none;

border-color: var(--pastel-blue);

box-shadow: 0 0 0 3px rgba(212, 241, 249, 0.5);

}

.form-input:focus + i {

color: var(--pastel-purple);

}

.action-btn {

width: 100%;

padding: 16px;

border: none;

border-radius: 12px;

background: linear-gradient(135deg, var(--pastel-blue), var(--pastel-purple));

color: white;

font-weight: 600;

font-size: 16px;

cursor: pointer;

transition: all 0.3s ease;

box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

margin-top: 10px;

}

.action-btn:hover {

transform: translateY(-2px);

box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);

}

.forgot-link {

display: block;

text-align: right;

font-size: 13px;

color: #999;

text-decoration: none;

margin-top: 10px;

transition: all 0.3s ease;

}

.forgot-link:hover {

color: var(--pastel-purple);

}

.divider {

display: flex;

align-items: center;

margin: 25px 0;

color: #ccc;

font-size: 13px;

}

.divider::before, .divider::after {

content: '';

flex: 1;

height: 1px;

background: #eee;

margin: 0 10px;

}

.social-login {

display: flex;

justify-content: center;

gap: 15px;

margin-bottom: 30px;

}

.social-btn {

width: 50px;

height: 50px;

border-radius: 50%;

display: flex;

justify-content: center;

align-items: center;

color: white;

font-size: 18px;

cursor: pointer;

transition: all 0.3s ease;

box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

}

.social-btn:hover {

transform: translateY(-3px) scale(1.05);

box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);

}

.social-btn.facebook {

background: linear-gradient(135deg, #3b5998, #4267B2);

}

.social-btn.twitter {

background: linear-gradient(135deg, #1DA1F2, #1DA1F2);

}

.social-btn.google {

background: linear-gradient(135deg, #DB4437, #F4B400);

}

.social-btn.linkedin {

background: linear-gradient(135deg, #0077B5, #00A0DC);

}

.floating-shapes {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

overflow: hidden;

z-index: -1;

}

.shape {

position: absolute;

border-radius: 50%;

opacity: 0.2;

filter: blur(40px);

animation: float 15s linear infinite;

}

.shape-1 {

width: 200px;

height: 200px;

background: var(--pastel-blue);

top: -50px;

left: -50px;

animation-delay: 0s;

}

.shape-2 {

width: 250px;

height: 250px;

background: var(--pastel-pink);

bottom: -80px;

right: -60px;

animation-delay: 3s;

}

.shape-3 {

width: 180px;

height: 180px;

background: var(--pastel-yellow);

top: 40%;

right: -30px;

animation-delay: 6s;

}

.shape-4 {

width: 220px;

height: 220px;

background: var(--pastel-green);

bottom: 20%;

left: -40px;

animation-delay: 9s;

}

.shape-5 {

width: 150px;

height: 150px;

background: var(--pastel-red);

top: 20%;

left: 30%;

animation-delay: 12s;

}

@keyframes float {

0% { transform: translate(0, 0) rotate(0deg); }

25% { transform: translate(50px, 50px) rotate(90deg); }

50% { transform: translate(100px, 0) rotate(180deg); }

75% { transform: translate(50px, -50px) rotate(270deg); }

100% { transform: translate(0, 0) rotate(360deg); }

}

.footer {

text-align: center;

margin-top: 30px;

font-size: 12px;

color: #999;

}

.footer a {

color: #666;

text-decoration: none;

margin: 0 8px;

transition: all 0.3s ease;

}

.footer a:hover {

color: var(--pastel-purple);

text-decoration: underline;

}

@media (max-width: 480px) {

.portal-container {

width: 90%;

padding: 30px;

}

.logo h1 {

font-size: 26px;

}

.social-btn {

width: 45px;

height: 45px;

font-size: 16px;

}

</style>

</head>

<body>

</div>

<h1>NEXUS PORTAL</h1>

<p>Premium Access to Exclusive Content</p>

</div>

<div class="tab" data-tab="register">REGISTER</div>

</div>

</div>

</div>

<a href="mailto:support@nexusportal.com?subject=Password Reset" class="forgot-link">Forgot password?</a>

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

</a>

</a>

</a>

</a>

</div>

</form>

</div>

</div>

</div>

</div>

<button type="submit" class="action-btn">CREATE ACCOUNT</button>

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

</a>

</a>

</a>

</a>

</div>

</form>

</div>

<a href="#">Terms of Service</a>

<a href="#">Privacy Policy</a>

<a href="mailto:support@nexusportal.com">Contact Us</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();

alert('Login form submitted!');

// Here you would typically send the data to your server

});

document.getElementById('register-form').addEventListener('submit', function(e) {

e.preventDefault();

alert('Registration form submitted!');

// Here you would typically send the data to your server

});

</script>

</body>

</html>

Validating your code, please wait...

HTML

CSS

<!DOCTYPE html>

<head>

<title>Nexus Portal | Premium Access</title>

<style>

:root {

--pastel-blue: #D4F1F9;

--pastel-purple: #E2D4F9;

--pastel-pink: #F9D4E5;

--pastel-green: #D4F9E2;

--pastel-yellow: #F9F3D4;

--pastel-red: #F9D4D4;

}

body {

font-family: 'Montserrat', sans-serif;

background: linear-gradient(

135deg,

var(--pastel-blue) 0%,

var(--pastel-green) 20%,

var(--pastel-yellow) 40%,

var(--pastel-pink) 60%,

var(--pastel-red) 80%,

var(--pastel-purple) 100%

);

background-size: 400% 400%;

animation: gradientBG 18s ease infinite;

min-height: 100vh;

margin: 0;

display: flex;

justify-content: center;

align-items: center;

color: #333;

overflow-x: hidden;

}

@keyframes gradientBG {

0% { background-position: 0% 50%; }

50% { background-position: 100% 50%; }

100% { background-position: 0% 50%; }

}

.portal-container {

position: relative;

width: 420px;

min-height: 500px;

background: rgba(255, 255, 255, 0.95);

border-radius: 24px;

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

backdrop-filter: blur(10px);

padding: 40px;

z-index: 10;

overflow: hidden;

transition: all 0.4s ease;

}

.portal-container::before {

content: '';

position: absolute;

top: -50%;

left: -50%;

width: 200%;

height: 200%;

background: conic-gradient(

transparent,

var(--pastel-blue)

);

animation: rotate 6s linear infinite;

z-index: -1;

}

.portal-container::after {

content: '';

position: absolute;

top: -50%;

left: -50%;

width: 200%;

height: 200%;

background: conic-gradient(

transparent,

var(--pastel-purple)

);

animation: rotate 6s linear infinite;

animation-delay: -3s;

z-index: -1;

}

@keyframes rotate {

0% { transform: rotate(0deg); }

100% { transform: rotate(360deg); }

}

.logo {

text-align: center;

margin-bottom: 40px;

}

.logo h1 {

font-weight: 800;

font-size: 32px;

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

letter-spacing: 1px;

margin-bottom: 8px;

}

.logo p {

color: #666;

font-size: 14px;

font-weight: 500;

}

.tabs {

display: flex;

justify-content: space-between;

margin-bottom: 30px;

border-bottom: 1px solid #eee;

}

.tab {

padding: 12px 0;

font-weight: 600;

color: #999;

cursor: pointer;

position: relative;

flex: 1;

text-align: center;

transition: all 0.3s ease;

}

.tab.active {

color: #333;

}

.tab.active::after {

content: '';

position: absolute;

bottom: -1px;

left: 0;

width: 100%;

height: 3px;

background: linear-gradient(135deg, var(--pastel-blue), var(--pastel-purple));

border-radius: 3px 3px 0 0;

}

.form-container {

position: relative;

min-height: 300px;

}

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

}

.input-group i {

position: absolute;

left: 20px;

top: 50%;

transform: translateY(-50%);

color: #aaa;

transition: all 0.3s ease;

}

.form-input {

width: 100%;

padding: 16px 20px 16px 50px;

border: 1px solid #eee;

border-radius: 12px;

font-size: 15px;

font-weight: 500;

transition: all 0.3s ease;

background: rgba(255, 255, 255, 0.8);

}

.form-input:focus {

outline: none;

border-color: var(--pastel-blue);

box-shadow: 0 0 0 3px rgba(212, 241, 249, 0.5);

}

.form-input:focus + i {

color: var(--pastel-purple);

}

.action-btn {

width: 100%;

padding: 16px;

border: none;

border-radius: 12px;

background: linear-gradient(135deg, var(--pastel-blue), var(--pastel-purple));

color: white;

font-weight: 600;

font-size: 16px;

cursor: pointer;

transition: all 0.3s ease;

box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

margin-top: 10px;

}

.action-btn:hover {

transform: translateY(-2px);

box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);

}

.forgot-link {

display: block;

text-align: right;

font-size: 13px;

color: #999;

text-decoration: none;

margin-top: 10px;

transition: all 0.3s ease;

}

.forgot-link:hover {

color: var(--pastel-purple);

}

.divider {

display: flex;

align-items: center;

margin: 25px 0;

color: #ccc;

font-size: 13px;

}

.divider::before, .divider::after {

content: '';

flex: 1;

height: 1px;

background: #eee;

margin: 0 10px;

}

.social-login {

display: flex;

justify-content: center;

gap: 15px;

margin-bottom: 30px;

}

.social-btn {

width: 50px;

height: 50px;

border-radius: 50%;

display: flex;

justify-content: center;

align-items: center;

color: white;

font-size: 18px;

cursor: pointer;

transition: all 0.3s ease;

box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

}

.social-btn:hover {

transform: translateY(-3px) scale(1.05);

box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);

}

.social-btn.facebook {

background: linear-gradient(135deg, #3b5998, #4267B2);

}

.social-btn.twitter {

background: linear-gradient(135deg, #1DA1F2, #1DA1F2);

}

.social-btn.google {

background: linear-gradient(135deg, #DB4437, #F4B400);

}

.social-btn.linkedin {

background: linear-gradient(135deg, #0077B5, #00A0DC);

}

.floating-shapes {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

overflow: hidden;

z-index: -1;

}

.shape {

position: absolute;

border-radius: 50%;

opacity: 0.2;

filter: blur(40px);

animation: float 15s linear infinite;

}

.shape-1 {

width: 200px;

height: 200px;

background: var(--pastel-blue);

top: -50px;

left: -50px;

animation-delay: 0s;

}

.shape-2 {

width: 250px;

height: 250px;

background: var(--pastel-pink);

bottom: -80px;

right: -60px;

animation-delay: 3s;

}

.shape-3 {

width: 180px;

height: 180px;

background: var(--pastel-yellow);

top: 40%;

right: -30px;

animation-delay: 6s;

}

.shape-4 {

width: 220px;

height: 220px;

background: var(--pastel-green);

bottom: 20%;

left: -40px;

animation-delay: 9s;

}

.shape-5 {

width: 150px;

height: 150px;

background: var(--pastel-red);

top: 20%;

left: 30%;

animation-delay: 12s;

}

@keyframes float {

0% { transform: translate(0, 0) rotate(0deg); }

25% { transform: translate(50px, 50px) rotate(90deg); }

50% { transform: translate(100px, 0) rotate(180deg); }

75% { transform: translate(50px, -50px) rotate(270deg); }

100% { transform: translate(0, 0) rotate(360deg); }

}

.footer {

text-align: center;

margin-top: 30px;

font-size: 12px;

color: #999;

}

.footer a {

color: #666;

text-decoration: none;

margin: 0 8px;

transition: all 0.3s ease;

}

.footer a:hover {

color: var(--pastel-purple);

text-decoration: underline;

}

@media (max-width: 480px) {

.portal-container {

width: 90%;

padding: 30px;

}

.logo h1 {

font-size: 26px;

}

.social-btn {

width: 45px;

height: 45px;

font-size: 16px;

}

</style>

</head>

<body>

</div>

<h1>NEXUS PORTAL</h1>

<p>Premium Access to Exclusive Content</p>

</div>

<div class="tab" data-tab="register">REGISTER</div>

</div>

</div>

</div>

<a href="mailto:support@nexusportal.com?subject=Password Reset" class="forgot-link">Forgot password?</a>

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

</a>

</a>

</a>

</a>

</div>

</form>

</div>

</div>

</div>

</div>

<button type="submit" class="action-btn">CREATE ACCOUNT</button>

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

</a>

</a>

</a>

</a>

</div>

</form>

</div>

<a href="#">Terms of Service</a>

<a href="#">Privacy Policy</a>

<a href="mailto:support@nexusportal.com">Contact Us</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();

alert('Login form submitted!');

// Here you would typically send the data to your server

});

document.getElementById('register-form').addEventListener('submit', function(e) {

e.preventDefault();

alert('Registration form submitted!');

// Here you would typically send the data to your server

});

</script>

</body>

</html>