Webleb - UI Elements - Mete'nin kodu

HTML

<!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>

Mete'nin kodu

Recommended

Mario Tennis

dom button

Pet carousel with floating effect

HTML

CSS

JS

Recommended

Mario Tennis

dom button

Pet carousel with floating effect

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS