Webleb - HTML UI Elements - Um código de Mete

HTML

<!DOCTYPE html>

<head>

<title>Alex - Creative Designer & Digital Innovator</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

:root {

--primary-bg: #0a0a0a;

--secondary-bg: #1a1a1a;

--accent-color: #ff6b35;

--accent-hover: #e55a2b;

--text-primary: #ffffff;

--text-secondary: #b0b0b0;

--text-muted: #666666;

--card-bg: #111111;

--border-color: #333333;

--gradient-primary: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);

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

--shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.3);

--shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.4);

--shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.5);

}

body {

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

background-color: var(--primary-bg);

color: var(--text-primary);

line-height: 1.6;

overflow-x: hidden;

}

/* Header */

.header {

position: fixed;

top: 0;

left: 0;

right: 0;

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

backdrop-filter: blur(20px);

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

z-index: 1000;

padding: 1rem 0;

transition: all 0.3s ease;

}

.nav-container {

max-width: 1400px;

margin: 0 auto;

padding: 0 2rem;

display: flex;

justify-content: space-between;

align-items: center;

}

.logo {

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

font-size: 1.8rem;

font-weight: 800;

color: var(--text-primary);

text-decoration: none;

display: flex;

align-items: center;

gap: 0.5rem;

}

.logo-icon {

width: 32px;

height: 32px;

background: var(--gradient-primary);

border-radius: 8px;

display: flex;

align-items: center;

justify-content: center;

color: white;

font-weight: 700;

}

.nav-links {

display: flex;

list-style: none;

gap: 2rem;

align-items: center;

}

.nav-links a {

text-decoration: none;

color: var(--text-secondary);

font-weight: 500;

font-size: 0.95rem;

position: relative;

transition: all 0.3s ease;

padding: 0.5rem 1rem;

border-radius: 8px;

}

.nav-links a:hover,

.nav-links a.active {

color: var(--text-primary);

background: rgba(255, 107, 53, 0.1);

}

.nav-links a::after {

content: '';

position: absolute;

bottom: -2px;

left: 50%;

width: 0;

height: 2px;

background: var(--accent-color);

transition: all 0.3s ease;

transform: translateX(-50%);

}

.nav-links a:hover::after,

.nav-links a.active::after {

width: 20px;

}

.mobile-menu-btn {

display: none;

background: none;

border: none;

color: var(--text-primary);

font-size: 1.5rem;

cursor: pointer;

}

/* Hero Section */

.hero {

min-height: 100vh;

display: flex;

align-items: center;

padding: 8rem 2rem 4rem;

position: relative;

overflow: hidden;

}

.hero::before {

content: '';

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: radial-gradient(circle at 20% 50%, rgba(255, 107, 53, 0.1) 0%, transparent 50%),

radial-gradient(circle at 80% 20%, rgba(103, 126, 234, 0.1) 0%, transparent 50%);

z-index: -1;

}

.hero-container {

max-width: 1400px;

margin: 0 auto;

display: grid;

grid-template-columns: 1fr 1fr;

gap: 4rem;

align-items: center;

}

.hero-content h1 {

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

font-size: 3.5rem;

font-weight: 800;

line-height: 1.1;

margin-bottom: 1.5rem;

color: var(--text-primary);

}

.hero-content .highlight {

background: var(--gradient-primary);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-clip: text;

}

.hero-content .subtitle {

font-size: 1.5rem;

color: var(--text-secondary);

margin-bottom: 2rem;

font-weight: 400;

}

.hero-content .description {

font-size: 1.1rem;

color: var(--text-muted);

margin-bottom: 3rem;

line-height: 1.8;

}

.hero-actions {

display: flex;

gap: 1rem;

align-items: center;

margin-bottom: 3rem;

}

.btn-primary {

background: var(--gradient-primary);

color: white;

padding: 1rem 2rem;

border-radius: 12px;

text-decoration: none;

font-weight: 600;

font-size: 1rem;

transition: all 0.3s ease;

box-shadow: var(--shadow-sm);

border: none;

cursor: pointer;

}

.btn-primary:hover {

transform: translateY(-2px);

box-shadow: var(--shadow-md);

}

.btn-secondary {

background: transparent;

color: var(--text-primary);

padding: 1rem 2rem;

border-radius: 12px;

text-decoration: none;

font-weight: 600;

font-size: 1rem;

transition: all 0.3s ease;

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

}

.btn-secondary:hover {

border-color: var(--accent-color);

background: rgba(255, 107, 53, 0.1);

}

.social-links {

display: flex;

gap: 1rem;

}

.social-links a {

width: 50px;

height: 50px;

background: var(--card-bg);

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

border-radius: 12px;

display: flex;

align-items: center;

justify-content: center;

text-decoration: none;

color: var(--text-secondary);

font-size: 1.2rem;

transition: all 0.3s ease;

}

.social-links a:hover {

background: var(--accent-color);

color: white;

transform: translateY(-2px);

}

/* Hero Visual */

.hero-visual {

position: relative;

display: flex;

justify-content: center;

align-items: center;

}

.hero-card {

background: var(--card-bg);

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

border-radius: 20px;

padding: 2rem;

width: 100%;

max-width: 500px;

position: relative;

overflow: hidden;

box-shadow: var(--shadow-lg);

}

.hero-card::before {

content: '';

position: absolute;

top: 0;

left: 0;

right: 0;

height: 4px;

background: var(--gradient-primary);

}

.card-header {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 2rem;

}

.card-title {

font-size: 1.5rem;

font-weight: 700;

color: var(--text-primary);

}

.card-badge {

background: var(--gradient-primary);

color: white;

padding: 0.3rem 0.8rem;

border-radius: 20px;

font-size: 0.8rem;

font-weight: 600;

}

.feature-list {

list-style: none;

space-y: 1rem;

}

.feature-item {

display: flex;

align-items: center;

gap: 1rem;

padding: 1rem 0;

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

}

.feature-item:last-child {

border-bottom: none;

}

.feature-icon {

width: 40px;

height: 40px;

background: var(--gradient-secondary);

border-radius: 10px;

display: flex;

align-items: center;

justify-content: center;

color: white;

font-size: 1.1rem;

}

.feature-content h4 {

color: var(--text-primary);

font-weight: 600;

margin-bottom: 0.3rem;

}

.feature-content p {

color: var(--text-muted);

font-size: 0.9rem;

}

/* Floating Elements */

.floating-elements {

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

pointer-events: none;

}

.floating-element {

position: absolute;

background: var(--gradient-primary);

border-radius: 50%;

animation: float 6s ease-in-out infinite;

}

.floating-element:nth-child(1) {

width: 60px;

height: 60px;

top: 20%;

left: 10%;

animation-delay: 0s;

}

.floating-element:nth-child(2) {

width: 40px;

height: 40px;

top: 60%;

right: 15%;

animation-delay: 2s;

}

.floating-element:nth-child(3) {

width: 80px;

height: 80px;

bottom: 20%;

left: 5%;

animation-delay: 4s;

}

/* Projects Section */

.projects-section {

padding: 6rem 2rem;

background: var(--secondary-bg);

}

.section-container {

max-width: 1400px;

margin: 0 auto;

}

.section-header {

text-align: center;

margin-bottom: 4rem;

}

.section-title {

font-size: 2.5rem;

font-weight: 700;

margin-bottom: 1rem;

color: var(--text-primary);

}

.section-subtitle {

font-size: 1.2rem;

color: var(--text-muted);

max-width: 600px;

margin: 0 auto;

}

.projects-grid {

display: grid;

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

gap: 2rem;

}

.project-card {

background: var(--card-bg);

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

border-radius: 16px;

overflow: hidden;

transition: all 0.3s ease;

cursor: pointer;

}

.project-card:hover {

transform: translateY(-5px);

box-shadow: var(--shadow-lg);

border-color: var(--accent-color);

}

.project-image {

height: 250px;

background: var(--gradient-secondary);

display: flex;

align-items: center;

justify-content: center;

font-size: 3rem;

color: white;

position: relative;

overflow: hidden;

}

.project-image::after {

content: '';

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: linear-gradient(45deg, rgba(255, 107, 53, 0.1), rgba(103, 126, 234, 0.1));

}

.project-content {

padding: 2rem;

}

.project-title {

font-size: 1.3rem;

font-weight: 600;

color: var(--text-primary);

margin-bottom: 0.5rem;

}

.project-description {

color: var(--text-muted);

margin-bottom: 1.5rem;

line-height: 1.6;

}

.project-tags {

display: flex;

flex-wrap: wrap;

gap: 0.5rem;

margin-bottom: 1.5rem;

}

.project-tag {

background: rgba(255, 107, 53, 0.1);

color: var(--accent-color);

padding: 0.3rem 0.8rem;

border-radius: 20px;

font-size: 0.8rem;

font-weight: 500;

}

.project-link {

color: var(--accent-color);

text-decoration: none;

font-weight: 600;

display: inline-flex;

align-items: center;

gap: 0.5rem;

transition: all 0.3s ease;

}

.project-link:hover {

gap: 1rem;

}

/* Newsletter Section */

.newsletter-section {

padding: 6rem 2rem;

background: var(--primary-bg);

}

.newsletter-container {

background: var(--card-bg);

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

border-radius: 20px;

padding: 4rem;

text-align: center;

position: relative;

overflow: hidden;

}

.newsletter-container::before {

content: '';

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: radial-gradient(circle at 50% 50%, rgba(255, 107, 53, 0.05) 0%, transparent 70%);

}

.newsletter-form {

display: flex;

max-width: 400px;

margin: 2rem auto 0;

gap: 1rem;

position: relative;

}

.email-input {

flex: 1;

padding: 1rem 1.5rem;

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

border-radius: 12px;

font-size: 1rem;

outline: none;

background: var(--secondary-bg);

color: var(--text-primary);

transition: all 0.3s ease;

}

.email-input:focus {

border-color: var(--accent-color);

box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);

}

.email-input::placeholder {

color: var(--text-muted);

}

/* Footer */

.footer {

background: var(--secondary-bg);

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

padding: 4rem 2rem 2rem;

}

.footer-content {

max-width: 1400px;

margin: 0 auto;

display: grid;

grid-template-columns: 1fr 1fr 1fr;

gap: 3rem;

margin-bottom: 3rem;

}

.footer-section h3 {

color: var(--text-primary);

font-weight: 600;

margin-bottom: 1rem;

}

.footer-section ul {

list-style: none;

}

.footer-section a {

color: var(--text-muted);

text-decoration: none;

transition: all 0.3s ease;

display: block;

padding: 0.3rem 0;

}

.footer-section a:hover {

color: var(--accent-color);

}

.footer-bottom {

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

padding-top: 2rem;

text-align: center;

color: var(--text-muted);

}

/* Animations */

@keyframes float {

0%, 100% { transform: translateY(0px) rotate(0deg); }

50% { transform: translateY(-20px) rotate(180deg); }

}

/* Responsive Design */

@media (max-width: 768px) {

.mobile-menu-btn {

display: block;

}

.nav-links {

display: none;

}

.hero-container {

grid-template-columns: 1fr;

gap: 2rem;

text-align: center;

}

.hero-content h1 {

font-size: 2.5rem;

}

.hero-actions {

flex-direction: column;

align-items: stretch;

}

.projects-grid {

grid-template-columns: 1fr;

}

.newsletter-form {

flex-direction: column;

}

.footer-content {

grid-template-columns: 1fr;

gap: 2rem;

}

.section-title {

font-size: 2rem;

}

</style>

</head>

<body>

Alex

</a>

<nav>

<li><a href="#home" class="active">Ana Sayfa</a></li>

<li><a href="#projects">Projeler</a></li>

<li><a href="#podcast">Podcast</a></li>

<li><a href="#contact">İletişim</a></li>

</ul>

</nav>

</button>

</div>

</header>

</div>

<h1>Dijital Dünyanın <span class="highlight">Yaratıcı</span> Mimarı</h1>

<p class="subtitle">Tasarım & Geliştirme Uzmanı</p>

Modern web teknolojileri ve yaratıcı tasarım anlayışı ile markaların dijital kimliklerini güçlendiriyorum.

Her proje, kullanıcı deneyimini ön planda tutan yenilikçi çözümler sunar.

</p>

<a href="#projects" class="btn-primary">Projelerimi Gör</a>

<a href="#contact" class="btn-secondary">İletişime Geç</a>

</div>

</div>

<h3 class="card-title">Yenilikçi Çözümler</h3>

<span class="card-badge">Aktif</span>

</div>

</div>

<h4>Hızlı Prototipleme</h4>

<p>Fikirleri hızla gerçeğe dönüştürme</p>

</div>

</li>

</div>

<h4>Yaratıcı Tasarım</h4>

<p>Özgün ve etkileyici görsel deneyimler</p>

</div>

</li>

</div>

<h4>Temiz Kod</h4>

<p>Sürdürülebilir ve ölçeklenebilir çözümler</p>

</div>

</li>

</ul>

</div>

</section>

<h2 class="section-title">Öne Çıkan Projeler</h2>

Yaratıcılık ve teknolojinin buluştuğu noktada doğan, kullanıcı deneyimini merkeze alan projeler.

</p>

</div>

</div>

<h3 class="project-title">E-Ticaret Mobil Uygulaması</h3>

Modern tasarım ilkeleri ve kullanıcı deneyimi odaklı yaklaşımla geliştirilmiş

kapsamlı e-ticaret platformu.

</p>

<span class="project-tag">React Native</span>

<span class="project-tag">MongoDB</span>

</div>

Detayları Gör <i class="fas fa-arrow-right"></i>

</a>

</div>

</div>

<h3 class="project-title">Kurumsal Web Sitesi</h3>

Responsive tasarım ve SEO optimizasyonu ile kurumsal kimliği güçlendiren

modern web sitesi çözümü.

</p>

<span class="project-tag">Tailwind CSS</span>

</div>

Detayları Gör <i class="fas fa-arrow-right"></i>

</a>

</div>

</div>

<h3 class="project-title">Veri Analiz Dashboard'u</h3>

Karmaşık veri setlerini anlaşılır görsellerle sunan, interaktif

dashboard ve raporlama sistemi.

</p>

<span class="project-tag">React</span>

<span class="project-tag">Python</span>

</div>

Detayları Gör <i class="fas fa-arrow-right"></i>

</a>

</div>

</section>

<h2 class="section-title">Yaratıcı İçerikler</h2>

Tasarım trendleri, teknoloji haberleri ve yaratıcı süreçler hakkında

haftalık güncellemeler alın.

</p>

<button type="submit" class="btn-primary">Abone Ol</button>

</form>

</div>

</section>

<h3>Keşfet</h3>

<ul>

<li><a href="#home">Ana Sayfa</a></li>

<li><a href="#projects">Projeler</a></li>

<li><a href="#podcast">Podcast</a></li>

</ul>

</div>

<h3>Bağlantılar</h3>

<ul>

<li><a href="#">LinkedIn</a></li>

<li><a href="#">GitHub</a></li>

<li><a href="#">Dribbble</a></li>

<li><a href="#">Instagram</a></li>

</ul>

</div>

<h3>İletişim</h3>

<ul>

<li><a href="mailto:alex@example.com">alex@example.com</a></li>

<li><a href="#">İstanbul, Türkiye</a></li>

</ul>

</div>

</div>

</footer>

// Smooth scrolling for navigation links

document.querySelectorAll('a[href^="#"]').forEach(anchor => {

anchor.addEventListener('click', function (e) {

e.preventDefault();

const target = document.querySelector(this.getAttribute('href'));

if (target) {

target.scrollIntoView({

behavior

Um código de Mete

Recomendado

Uma página inicial moderna

produto

HTML

CSS

JS

Recomendado

Uma página inicial moderna

produto

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS