Webleb - HTML UI Elements - Ein Code von 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

Ein Code von Mete

Empfohlen

Ein Code von ashimadison8

Ein Code von carab5256

HTML

CSS

JS

Empfohlen

Ein Code von ashimadison8

Ein Code von carab5256

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS