Webleb - UI Elements

HTML

<!DOCTYPE html>

<head>

<title>ModernWeb | Geleceğin Web Deneyimleri</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

:root {

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

--secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);

--dark-bg: #0a0a0a;

--darker-bg: #050505;

--card-bg: rgba(255, 255, 255, 0.03);

--text-light: #ffffff;

--text-gray: #aaaaaa;

--border-color: rgba(255, 255, 255, 0.1);

--shadow-color: rgba(102, 126, 234, 0.2);

--transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

}

body {

font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;

overflow-x: hidden;

background: var(--dark-bg);

color: var(--text-light);

line-height: 1.6;

}

/* Navigation */

nav {

position: fixed;

width: 100%;

padding: 25px 60px;

display: flex;

justify-content: space-between;

align-items: center;

z-index: 1000;

background: rgba(10, 10, 10, 0.85);

backdrop-filter: blur(15px);

transition: var(--transition);

border-bottom: 1px solid transparent;

}

nav.scrolled {

padding: 18px 60px;

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

border-bottom: 1px solid var(--border-color);

box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

}

.logo {

font-size: 32px;

font-weight: 800;

background: var(--primary-gradient);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-clip: text;

display: flex;

align-items: center;

gap: 10px;

}

.logo i {

font-size: 28px;

}

.nav-links {

display: flex;

gap: 50px;

list-style: none;

}

.nav-links a {

color: var(--text-light);

text-decoration: none;

font-weight: 600;

font-size: 17px;

transition: var(--transition);

position: relative;

padding: 5px 0;

}

.nav-links a::after {

content: '';

position: absolute;

bottom: 0;

left: 0;

width: 0;

height: 3px;

background: var(--primary-gradient);

transition: width 0.4s ease;

border-radius: 2px;

}

.nav-links a:hover::after {

width: 100%;

}

.nav-links a:hover {

color: #667eea;

}

.nav-actions {

display: flex;

gap: 20px;

align-items: center;

}

.theme-toggle {

background: none;

border: none;

color: var(--text-light);

font-size: 20px;

cursor: pointer;

transition: var(--transition);

}

.theme-toggle:hover {

color: #667eea;

transform: rotate(30deg);

}

.menu-toggle {

display: none;

background: none;

border: none;

color: var(--text-light);

font-size: 24px;

cursor: pointer;

}

/* Hero Section */

.hero {

height: 100vh;

display: flex;

align-items: center;

justify-content: center;

position: relative;

overflow: hidden;

padding: 0 20px;

}

.hero-content {

text-align: center;

z-index: 2;

max-width: 1200px;

padding: 0 20px;

}

.hero h1 {

font-size: 84px;

margin-bottom: 25px;

background: var(--primary-gradient);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-clip: text;

animation: fadeInUp 1s ease;

line-height: 1.1;

font-weight: 800;

}

.hero p {

font-size: 24px;

color: var(--text-gray);

margin-bottom: 50px;

animation: fadeInUp 1s ease 0.2s backwards;

max-width: 800px;

margin-left: auto;

margin-right: auto;

}

.hero-buttons {

display: flex;

gap: 25px;

justify-content: center;

animation: fadeInUp 1s ease 0.4s backwards;

}

.cta-button {

padding: 18px 45px;

font-size: 18px;

font-weight: 600;

background: var(--primary-gradient);

color: var(--text-light);

border: none;

border-radius: 50px;

cursor: pointer;

transition: var(--transition);

position: relative;

overflow: hidden;

box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);

}

.cta-button.secondary {

background: transparent;

border: 2px solid #667eea;

color: #667eea;

box-shadow: none;

}

.cta-button.secondary:hover {

background: rgba(102, 126, 234, 0.1);

transform: translateY(-5px);

}

.cta-button::before {

content: '';

position: absolute;

top: 50%;

left: 50%;

width: 0;

height: 0;

border-radius: 50%;

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

transform: translate(-50%, -50%);

transition: width 0.6s, height 0.6s;

}

.cta-button:hover::before {

width: 400px;

height: 400px;

}

.cta-button:hover {

transform: translateY(-5px);

box-shadow: 0 15px 30px rgba(102, 126, 234, 0.4);

}

/* Animated Background */

.bg-animation {

position: absolute;

width: 100%;

height: 100%;

overflow: hidden;

}

.particle {

position: absolute;

border-radius: 50%;

background: var(--primary-gradient);

opacity: 0.2;

animation: float 20s infinite linear;

}

/* Stats Section */

.stats {

padding: 80px 60px;

background: var(--darker-bg);

display: flex;

justify-content: space-around;

flex-wrap: wrap;

gap: 40px;

}

.stat-item {

text-align: center;

animation: fadeIn 1s ease;

}

.stat-number {

font-size: 60px;

font-weight: 800;

background: var(--primary-gradient);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-clip: text;

margin-bottom: 10px;

}

.stat-text {

font-size: 20px;

color: var(--text-gray);

font-weight: 500;

}

/* Features Section */

.features {

padding: 120px 60px;

background: var(--dark-bg);

}

.section-title {

text-align: center;

font-size: 52px;

margin-bottom: 80px;

background: var(--primary-gradient);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-clip: text;

font-weight: 800;

position: relative;

display: inline-block;

left: 50%;

transform: translateX(-50%);

}

.section-title::after {

content: '';

position: absolute;

bottom: -15px;

left: 0;

width: 100%;

height: 4px;

background: var(--primary-gradient);

border-radius: 2px;

}

.features-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

gap: 50px;

max-width: 1400px;

margin: 0 auto;

}

.feature-card {

padding: 50px 40px;

background: var(--card-bg);

border-radius: 25px;

border: 1px solid var(--border-color);

transition: var(--transition);

cursor: pointer;

position: relative;

overflow: hidden;

}

.feature-card::before {

content: '';

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: var(--primary-gradient);

opacity: 0;

transition: var(--transition);

z-index: -1;

}

.feature-card:hover::before {

opacity: 0.05;

}

.feature-card:hover {

transform: translateY(-15px);

border-color: rgba(102, 126, 234, 0.5);

box-shadow: 0 25px 50px var(--shadow-color);

}

.feature-icon {

font-size: 54px;

margin-bottom: 25px;

background: var(--primary-gradient);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-clip: text;

display: inline-block;

transition: var(--transition);

}

.feature-card:hover .feature-icon {

transform: scale(1.2) rotate(5deg);

}

.feature-card h3 {

font-size: 28px;

margin-bottom: 20px;

color: var(--text-light);

}

.feature-card p {

color: var(--text-gray);

line-height: 1.7;

font-size: 18px;

margin-bottom: 25px;

}

.feature-link {

color: #667eea;

text-decoration: none;

font-weight: 600;

display: inline-flex;

align-items: center;

gap: 8px;

transition: var(--transition);

}

.feature-link:hover {

gap: 15px;

color: #764ba2;

}

/* Pricing Section */

.pricing {

padding: 120px 60px;

background: var(--darker-bg);

}

.pricing-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

gap: 40px;

max-width: 1300px;

margin: 0 auto;

}

.pricing-card {

padding: 50px 40px;

background: var(--card-bg);

border-radius: 25px;

border: 1px solid var(--border-color);

transition: var(--transition);

text-align: center;

position: relative;

overflow: hidden;

}

.pricing-card.popular {

border: 2px solid #667eea;

transform: scale(1.05);

}

.pricing-card.popular::before {

content: 'POPÜLER';

position: absolute;

top: 20px;

right: -35px;

background: var(--primary-gradient);

color: white;

padding: 8px 40px;

font-weight: 600;

font-size: 14px;

transform: rotate(45deg);

}

.pricing-card:hover {

transform: translateY(-10px);

box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);

}

.pricing-title {

font-size: 28px;

margin-bottom: 20px;

color: var(--text-light);

}

.price {

font-size: 60px;

font-weight: 800;

margin-bottom: 30px;

background: var(--primary-gradient);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-clip: text;

}

.price span {

font-size: 24px;

font-weight: normal;

}

.pricing-features {

list-style: none;

margin-bottom: 40px;

}

.pricing-features li {

padding: 12px 0;

color: var(--text-gray);

border-bottom: 1px solid var(--border-color);

display: flex;

align-items: center;

justify-content: center;

gap: 10px;

}

.pricing-features li i {

color: #4ade80;

}

/* Contact Section */

.contact {

padding: 120px 60px;

background: var(--dark-bg);

}

.contact-container {

max-width: 1200px;

margin: 0 auto;

display: grid;

grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));

gap: 80px;

align-items: center;

}

.contact-form {

background: var(--card-bg);

padding: 50px;

border-radius: 25px;

border: 1px solid var(--border-color);

}

.form-group {

margin-bottom: 30px;

}

.form-group label {

display: block;

margin-bottom: 10px;

color: var(--text-light);

font-weight: 600;

}

.form-control {

width: 100%;

padding: 18px 25px;

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

border: 1px solid var(--border-color);

border-radius: 15px;

color: var(--text-light);

font-size: 16px;

transition: var(--transition);

}

.form-control:focus {

outline: none;

border-color: #667eea;

box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);

}

textarea.form-control {

min-height: 180px;

resize: vertical;

}

/* Footer */

footer {

padding: 70px 60px 30px;

background: var(--darker-bg);

border-top: 1px solid var(--border-color);

}

.footer-content {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

gap: 60px;

margin-bottom: 60px;

}

.footer-column h3 {

font-size: 22px;

margin-bottom: 25px;

color: var(--text-light);

}

.footer-links {

list-style: none;

}

.footer-links li {

margin-bottom: 15px;

}

.footer-links a {

color: var(--text-gray);

text-decoration: none;

transition: var(--transition);

display: flex;

align-items: center;

gap: 10px;

}

.footer-links a:hover {

color: #667eea;

transform: translateX(5px);

}

.social-links {

display: flex;

gap: 20px;

margin-top: 20px;

}

.social-links a {

display: inline-flex;

align-items: center;

justify-content: center;

width: 50px;

height: 50px;

background: var(--card-bg);

border-radius: 50%;

color: var(--text-light);

font-size: 20px;

transition: var(--transition);

text-decoration: none;

}

.social-links a:hover {

background: var(--primary-gradient);

transform: translateY(-5px);

}

.copyright {

text-align: center;

padding-top: 40px;

border-top: 1px solid var(--border-color);

color: var(--text-gray);

font-size: 16px;

}

/* Scroll to top button */

.scroll-top {

position: fixed;

bottom: 40px;

right: 40px;

width: 60px;

height: 60px;

background: var(--primary-gradient);

color: white;

border: none;

border-radius: 50%;

cursor: pointer;

font-size: 24px;

z-index: 100;

opacity: 0;

visibility: hidden;

transition: var(--transition);

box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);

display: flex;

align-items: center;

justify-content: center;

}

.scroll-top.visible {

opacity: 1;

visibility: visible;

}

.scroll-top:hover {

transform: translateY(-5px) scale(1.1);

}

/* Animations */

@keyframes fadeInUp {

from {

opacity: 0;

transform: translateY(40px);

}

to {

opacity: 1;

transform: translateY(0);

}

@keyframes fadeIn {

from {

opacity: 0;

}

to {

opacity: 1;

}

@keyframes float {

0%, 100% {

transform: translate(0, 0) scale(1);

}

33% {

transform: translate(40px, -40px) scale(1.1);

}

66% {

transform: translate(-30px, 30px) scale(0.9);

}

/* Responsive */

@media (max-width: 1200px) {

.contact-container {

grid-template-columns: 1fr;

}

.pricing-card.popular {

transform: none;

}

@media (max-width: 992px) {

.hero h1 {

font-size: 64px;

}

.section-title {

font-size: 44px;

}

.features-grid,

.pricing-grid {

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

}

@media (max-width: 768px) {

nav {

padding: 20px 30px;

}

.nav-links {

position: fixed;

top: 80px;

left: 0;

width: 100%;

background: rgba(5, 5, 5, 0.98);

backdrop-filter: blur(20px);

flex-direction: column;

align-items: center;

padding: 30px 0;

gap: 30px;

transform: translateY(-100%);

opacity: 0;

visibility: hidden;

transition: var(--transition);

border-bottom: 1px solid var(--border-color);

}

.nav-links.active {

transform: translateY(0);

opacity: 1;

visibility: visible;

}

.menu-toggle {

display: block;

}

.hero h1 {

font-size: 48px;

}

.hero p {

font-size: 20px;

}

.hero-buttons {

flex-direction: column;

align-items: center;

}

.features, .pricing, .contact, .stats {

padding: 80px 30px;

}

.section-titl

CSS

JS

Websitem