Un codice del testo

Apri nell'Editor Pubblica il Tuo Codice

Un codice del testo

Consigliato

17 September 2024

Identità

18 March 2025

Un codice di anhtuanle2004thl

12 July 2025

Modello HTML/CS per lettore musicale simile a Spotify

HTML

<!DOCTYPE html>

<html lang="tr">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Sportify Blog | Spor, Sağlık ve Fitness Dünyası</title>

<script src="https://cdn.tailwindcss.com"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700;800&display=swap" rel="stylesheet">

<script>

tailwind.config = {

theme: {

extend: {

colors: {

primary: '#1a73e8',

secondary: '#34a853',

accent: '#fbbc05',

dark: '#0f172a',

light: '#f8fafc',

card: 'rgba(255, 255, 255, 0.08)',

border: 'rgba(255, 255, 255, 0.15)'

},

fontFamily: {

inter: ['Inter', 'sans-serif'],

playfair: ['Playfair Display', 'serif']

}

}

}

}

</script>

<style>

:root {

--transition-timing: cubic-bezier(0.175, 0.885, 0.32, 1.275);

}

body {

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

background-color: #0f172a;

color: #f8fafc;

line-height: 1.6;

scroll-behavior: smooth;

overflow-x: hidden;

}

h1, h2, h3, h4, h5, h6 {

font-family: 'Playfair Display', serif;

color: #f8fafc;

}

/* Particles.js Background */

#particles-js {

position: fixed;

width: 100%;

height: 100%;

z-index: -1;

top: 0;

left: 0;

background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);

}

/* Sticky Header */

.main-header.scrolled {

background-color: rgba(15, 23, 42, 0.95);

backdrop-filter: blur(12px);

box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);

padding-top: 0.75rem;

padding-bottom: 0.75rem;

}

.nav-link::after {

content: '';

position: absolute;

bottom: -5px;

left: 0;

width: 0;

height: 2px;

background-color: #1a73e8;

transition: width 0.3s var(--transition-timing);

}

.nav-link:hover::after, .nav-link.active::after {

width: 100%;

}

.hamburger-menu.active .line:nth-child(1) {

transform: translateY(9.5px) rotate(45deg);

}

.hamburger-menu.active .line:nth-child(2) {

opacity: 0;

}

.hamburger-menu.active .line:nth-child(3) {

transform: translateY(-9.5px) rotate(-45deg);

}

.typed-cursor {

color: #1a73e8 !important;

font-size: 1em;

opacity: 1;

animation: blink 0.7s infinite;

}

@keyframes blink {

0% { opacity: 1; }

50% { opacity: 0; }

100% { opacity: 1; }

}

.skill-progress {

width: 0;

transition: width 1.5s ease-out;

}

.btn-custom {

display: inline-block;

padding: 0.8rem 2.2rem;

font-size: 1.1rem;

font-weight: 700;

text-transform: uppercase;

border-radius: 50px;

transition: all 0.3s var(--transition-timing);

box-shadow: 0 5px 15px rgba(0,0,0,0.2);

border: 2px solid transparent;

}

.btn-primary-custom {

background-color: #1a73e8;

color: #f8fafc;

border-color: #1a73e8;

}

.btn-primary-custom:hover {

background-color: #1557b0;

transform: translateY(-5px);

box-shadow: 0 15px 30px rgba(26, 115, 232, 0.5);

border-color: #1557b0;

}

.btn-secondary-custom {

background-color: transparent;

color: #f8fafc;

border-color: #f8fafc;

}

.btn-secondary-custom:hover {

background-color: #f8fafc;

color: #0f172a;

transform: translateY(-5px);

box-shadow: 0 15px 30px rgba(248, 250, 252, 0.3);

border-color: #f8fafc;

}

.btn-accent-custom {

background-color: #fbbc05;

color: #0f172a;

border-color: #fbbc05;

}

.btn-accent-custom:hover {

background-color: #e0a800;

transform: translateY(-5px);

box-shadow: 0 15px 30px rgba(251, 188, 5, 0.5);

border-color: #e0a800;

}

.submit-btn {

background-color: #1a73e8;

color: #f8fafc;

border: none;

padding: 1rem 2.5rem;

border-radius: 50px;

font-weight: 600;

cursor: pointer;

transition: all 0.3s var(--transition-timing);

display: inline-block;

box-shadow: 0 5px 15px rgba(0,0,0,0.2);

}

.submit-btn:hover {

background-color: #1557b0;

transform: translateY(-5px);

box-shadow: 0 15px 30px rgba(26, 115, 232, 0.5);

}

.platform-btn {

box-shadow: 0 3px 10px rgba(0,0,0,0.2);

transition: all 0.3s var(--transition-timing);

}

.platform-btn:hover {

transform: translateY(-3px);

box-shadow: 0 8px 18px rgba(0,0,0,0.3);

}

#scroll-top-btn {

box-shadow: 0 5px 15px rgba(0,0,0,0.2);

}

#scroll-top-btn:hover {

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

box-shadow: 0 10px 20px rgba(26, 115, 232, 0.4);

}

.feature-card {

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

border-radius: 12px;

padding: 30px;

transition: all 0.3s ease;

border: 1px solid rgba(255, 255, 255, 0.1);

}

.feature-card:hover {

transform: translateY(-10px);

box-shadow: 0 15px 35px rgba(0,0,0,0.2);

background: rgba(26, 115, 232, 0.1);

}

.testimonial-card {

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

border-radius: 12px;

padding: 30px;

border: 1px solid rgba(255, 255, 255, 0.1);

}

.blog-card {

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

border-radius: 12px;

overflow: hidden;

transition: all 0.3s ease;

border: 1px solid rgba(255, 255, 255, 0.1);

height: 100%;

display: flex;

flex-direction: column;

}

.blog-card:hover {

transform: translateY(-10px);

box-shadow: 0 15px 35px rgba(0,0,0,0.2);

}

.blog-image {

height: 200px;

overflow: hidden;

}

.blog-image img {

width: 100%;

height: 100%;

object-fit: cover;

transition: transform 0.5s ease;

}

.blog-card:hover .blog-image img {

transform: scale(1.1);

}

.blog-content {

padding: 20px;

flex-grow: 1;

display: flex;

flex-direction: column;

}

.blog-tag {

display: inline-block;

background: #34a853;

color: #f8fafc;

padding: 5px 10px;

border-radius: 20px;

font-size: 0.8rem;

font-weight: 600;

margin-bottom: 10px;

}

.stats-card {

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

border-radius: 12px;

padding: 20px;

text-align: center;

border: 1px solid rgba(255, 255, 255, 0.1);

}

.stats-number {

font-size: 2.5rem;

font-weight: 700;

color: #1a73e8;

margin-bottom: 5px;

}

</style>

</head>

<body class="antialiased">

<div id="particles-js"></div>

<header class="main-header fixed w-full top-0 left-0 z-50 py-4 px-4 md:px-8 transition-all duration-300 ease-out">

<div class="container mx-auto flex justify-between items-center">

<a href="#home" class="text-3xl font-bold text-white flex items-center">

Sportify<span class="text-primary">Blog</span>

</a>

<nav class="hidden md:flex space-x-8 lg:space-x-12">

<a href="#home" class="nav-link text-lg font-medium text-white hover:text-primary transition-colors duration-300 relative">Anasayfa</a>

<a href="#about" class="nav-link text-lg font-medium text-white hover:text-primary transition-colors duration-300 relative">Hakkımızda</a>

<a href="#features" class="nav-link text-lg font-medium text-white hover:text-primary transition-colors duration-300 relative">Özellikler</a>

<a href="#blog" class="nav-link text-lg font-medium text-white hover:text-primary transition-colors duration-300 relative">Blog</a>

<a href="#testimonials" class="nav-link text-lg font-medium text-white hover:text-primary transition-colors duration-300 relative">Görüşler</a>

<a href="#contact" class="nav-link text-lg font-medium text-white hover:text-primary transition-colors duration-300 relative">İletişim</a>

</nav>

<button id="hamburger-menu" class="md:hidden flex flex-col justify-between w-7 h-6 focus:outline-none z-50">

<span class="line block w-full h-0.5 bg-white rounded transition-all duration-300"></span>

<span class="line block w-full h-0.5 bg-white rounded transition-all duration-300"></span>

<span class="line block w-full h-0.5 bg-white rounded transition-all duration-300"></span>

</button>

</div>

<div id="mobile-nav" class="fixed top-0 right-[-100%] w-3/4 h-full bg-dark bg-opacity-95 backdrop-blur-md flex flex-col items-center justify-center transition-all duration-300 ease-in-out md:hidden z-40">

<ul class="flex flex-col space-y-8 text-center">

<li><a href="#home" class="nav-link text-2xl font-semibold text-white hover:text-primary transition-colors duration-300 py-2 block">Anasayfa</a></li>

<li><a href="#about" class="nav-link text-2xl font-semibold text-white hover:text-primary transition-colors duration-300 py-2 block">Hakkımızda</a></li>

<li><a href="#features" class="nav-link text-2xl font-semibold text-white hover:text-primary transition-colors duration-300 py-2 block">Özellikler</a></li>

<li><a href="#blog" class="nav-link text-2xl font-semibold text-white hover:text-primary transition-colors duration-300 py-2 block">Blog</a></li>

<li><a href="#testimonials" class="nav-link text-2xl font-semibold text-white hover:text-primary transition-colors duration-300 py-2 block">Görüşler</a></li>

<li><a href="#contact" class="nav-link text-2xl font-semibold text-white hover:text-primary transition-colors duration-300 py-2 block">İletişim</a></li>

</ul>

</div>

</header>

<section id="home" class="min-h-screen flex items-center py-20 px-4 md:px-8 relative z-10">

<div class="container mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16 items-center">

<div class="text-center md:text-left">

<h4 class="text-xl md:text-2xl font-medium text-primary mb-4">SPOR VE SAĞLIKLI YAŞAM REHBERİNİZ</h4>

<h1 class="text-4xl md:text-6xl lg:text-7xl font-extrabold text-white leading-tight mb-6">

Sportif Yaşamın <br> <span id="typed-text" class="text-primary"></span>

</h1>

<p class="text-lg md:text-xl text-light mb-8">

Fitness, beslenme, spor bilimi ve motivasyon konularında uzman rehberlik. Hedeflerinize ulaşmanız için bilimsel yaklaşımlar ve ilham verici içerikler.

</p>

<div class="flex flex-col sm:flex-row justify-center md:justify-start gap-4">

<a href="#blog" class="btn-custom btn-primary-custom">

Yazıları Keşfet

</a>

<a href="#contact" class="btn-custom btn-secondary-custom">

Ücretsiz Danışmanlık

</a>

</div>

</div>

<div class="relative flex justify-center md:justify-end mt-12 md:mt-0">

<img src="https://images.unsplash.com/photo-1534438327276-14e5300c3a48?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Spor ve Fitness" class="w-full max-w-sm md:max-w-md lg:max-w-lg h-auto rounded-3xl shadow-2xl transform rotate-3 hover:rotate-0 transition-transform duration-500 ease-out">

</div>

</div>

</section>

<section class="py-16 bg-dark bg-opacity-50">

<div class="container mx-auto">

<div class="grid grid-cols-2 md:grid-cols-4 gap-6">

<div class="stats-card">

<div class="stats-number">12K+</div>

<div class="text-light">Aktif Üye</div>

</div>

<div class="stats-card">

<div class="stats-number">850+</div>

<div class="text-light">Makale</div>

</div>

<div class="stats-card">

<div class="stats-number">45+</div>

<div class="text-light">Uzman Eğitmen</div>

</div>

<div class="stats-card">

<div class="stats-number">98%</div>

<div class="text-light">Memnuniyet</div>

</div>

</div>

</div>

</section>

<section id="about" class="py-16 md:py-24 px-4 md:px-8 relative z-10">

<div class="container mx-auto">

<div class="text-center mb-16">

<h2 class="text-4xl md:text-5xl font-bold text-white inline-block relative pb-4">

Sportify Blog Hakkında

<span class="absolute bottom-0 left-1/2 -translate-x-1/2 w-20 h-1 bg-primary rounded-full"></span>

</h2>

</div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">

<div class="relative flex justify-center md:justify-start">

<img src="https://images.unsplash.com/photo-1540497077202-7c8a3999166f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Spor Ekibi" class="w-full max-w-lg rounded-3xl shadow-2xl border-4 border-primary">

</div>

<div class="text-center md:text-left">

<h3 class="text-3xl md:text-4xl font-bold text-primary mb-6">Spor ve Sağlıklı Yaşam Tutkunları İçin</h3>

<p class="text-lg text-light mb-6">

2015 yılından bu yana, spor ve sağlıklı yaşam konusunda güvenilir bilgi kaynağı olma misyonuyla yayın yapıyoruz. Uzman ekibimiz, en güncel bilimsel araştırmaları takip ederek sizlere ulaştırıyor.

</p>

<p class="text-lg text-light mb-8">

Amacımız, herkesin kendi fitness yolculuğunda doğru bilgiye ulaşmasını sağlamak ve motive edici içeriklerle hedeflerine ulaşmalarına yardımcı olmak.

</p>

<div class="skills-container space-y-5">

<div class="skill-item">

<div class="flex justify-between items-center mb-2">

<span class="font-semibold text-white">Fitness ve Antrenman Bilimi</span>

<span class="font-bold text-primary">95%</span>

</div>

<div class="w-full bg-gray-700 rounded-full h-2">

<div class="skill-progress h-full bg-primary rounded-full" data-progress="95%"></div>

</div>

</div>

<div class="skill-item">

<div class="flex justify-between items-center mb-2">

<span class="font-semibold text-white">Beslenme ve Diyetetik</span>

<span class="font-bold text-primary">90%</span>

</div>

<div class="w-full bg-gray-700 rounded-full h-2">

<div class="skill-progress h-full bg-primary rounded-full" data-progress="90%"></div>

</div>

</div>

<div class="skill-item">

<div class="flex justify-between items-center mb-2">

<span class="font-semibold text-white">Spor Psikolojisi</span>

<span class="font-bold text-primary">85%</span>

</div>

<div class="w-full bg-gray-700 rounded-full h-2">

<div class="skill-progress h-full bg-primary rounded-full" data-progress="85%"></div>

</div>

</div>

</div>

<a href="#" class="btn-custom btn-accent-custom mt-10">

Ekibimizi Tanıyın

</a>

</div>

</div>

</div>

</section>

<section id="features" class="py-16 md:py-24 px-4 md:px-8 bg-dark bg-opacity-50 relative z-10">

<div class="container mx-auto">

<div class="text-center mb-16">

<h2 class="text-4xl md:text-5xl font-bold text-white inline-block relative pb-4">

Sportify Blog Özellikleri

<span class="absolute bottom-0 left-1/2 -translate-x-1/2 w-20 h-1 bg-primary rounded-full"></span>

</h2>

<p class="text-xl text-light max-w-2xl mx-auto mt-6">Spor ve sağlıklı yaşam yolculuğunuzu destekleyen benzersiz özelliklerimizi keşfedin</p>

</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

<div class="feature-card">

<div class="text-primary text-4xl mb-4">

<i class="fas fa-dumbbell"></i>

</div>

<h3 class="text-2xl font-bold text-white mb-4">Kişiselleştirilmiş Antrenman Planları</h3>

<p class="text-light">Hedeflerinize, fitness seviyenize ve zamanınıza uygun özel antrenman programları oluşturun.</p>

</div>

<div class="feature-card">

<div class="text-primary text-4xl mb-4">

<i class="fas fa-apple-alt"></i>

</div>

<h3 class="text-2xl font-bold text-white mb-4">Beslenme Rehberi</h3>

<p class="text-light">Uzman diyetisyenler tarafından hazırlanan beslenme planları ve sağlıklı tarifler.</p>

</div>

<div class="feature-card">

<div class="text-primary text-4xl mb-4">

<i class="fas fa-brain"></i>

</div>

<h3 class="text-2xl font-bold text-white mb-4">Mental Performans</h3>

<p class="text-light">Spor psikolojisi uzmanlarından motivasyon ve zihinsel dayanıklılık stratejileri.</p>

</div>

<div class="feature-card">

<div class="text-primary text-4xl mb-4">

<i class="fas fa-video"></i>

</div>

<h3 class="text-2xl font-bold text-white mb-4">Video Eğitimler</h3>

<p class="text-light">Profesyonel eğitmenler eşliğinde doğru teknikleri öğreten video içerikler.</p>

</div>

<div class="feature-card">

<div class="text-primary text-4xl mb-4">

<i class="fas fa-chart-line"></i>

</div>

<h3 class="text-2xl font-bold text-white mb-4">İlerleme Takibi</h3>

<p class="text-light">Fitness yolculuğunuzdaki gelişimi takip edin ve hedeflerinize daha hızlı ulaşın.</p>

</div>

<div class="feature-card">

<div class="text-primary text-4xl mb-4">

<i class="fas fa-users"></i>

</div>

<h3 class="text-2xl font-bold text-white mb-4">Topluluk Desteği</h3>

<p class="text-light">Benzer hedeflere sahip spor tutkunlarıyla bağlantı kurun ve birbirinizi motive edin.</p>

</div>

</div>

</div>

</section>

<section id="blog" class="py-16 md:py-24 px-4 md:px-8 relative z-10">

<div class="container mx-auto">

<div class="text-center mb-16">

<h2 class="text-4xl md:text-5xl font-bold text-white inline-block relative pb-4">

Son Blog Yazılarımız

<span class="absolute bottom-0 left-1/2 -translate-x-1/2 w-20 h-1 bg-primary rounded-full"></span>

</h2>

<p class="text-xl text-light max-w-2xl mx-auto mt-6">Spor ve sağlık dünyasından en güncel bilgiler, ipuçları ve ilham verici hikayeler</p>

</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

<div class="blog-card">

<div class="blog-image">

<img src="https://images.unsplash.com/photo-1536922246289-88c42f957773?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Yağ Yakımı">

</div>

<div class="blog-content">

<span class="blog-tag">Fitness</span>

<h3 class="text-2xl font-bold text-white mb-4">Yağ Yakımını Hızlandıran 10 Bilimsel Yöntem</h3>

<p class="text-light mb-6">Bilimsel araştırmalarla desteklenen, yağ yakım sürecini hızlandıracak etkili stratejileri keşfedin.</p>

<div class="mt-auto flex items-center justify-between text-sm text-gray-400">

<span><i class="far fa-calendar-alt text-accent mr-2"></i> 15 Haz 2023</span>

<span><i class="far fa-clock text-accent mr-2"></i> 8 dk.</span>

</div>

</div>

</div>

<div class="blog-card">

<div class="blog-image">

<img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Kas Gelişimi">

</div>

<div class="blog-content">

<span class="blog-tag">Vücut Geliştirme</span>

<h3 class="text-2xl font-bold text-white mb-4">Maksimum Kas Gelişimi İçin Beslenme Rehberi</h3>

<p class="text-light mb-6">Kas kütlesi artırımında beslenmenin kritik rolü ve doğru besin takviyeleri hakkında bilmeniz gerekenler.</p>

<div class="mt-auto flex items-center justify-between text-sm text-gray-400">

<span><i class="far fa-calendar-alt text-accent mr-2"></i> 10 Haz 2023</span>

<span><i class="far fa-clock text-accent mr-2"></i> 10 dk.</span>

</div>

</div>

</div>

<div class="blog-card">

<div class="blog-image">

<img src="https://images.unsplash.com/photo-1517344884509-a0c97ec11bcc?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Mental Dayanıklılık">

</div>

<div class="blog-content">

<span class="blog-tag">Psikoloji</span>

<h3 class="text-2xl font-bold text-white mb-4">Sporcularda Mental Dayanıklılık Nasıl Geliştirilir?</h3>

<p class="text-light mb-6">Profesyonel spor psikoloğu Dr. Ayşe Kaya'dan zihinsel performansı artırma teknikleri.</p>

<div class="mt-auto flex items-center justify-between text-sm text-gray-400">

<span><i class="far fa-calendar-alt text-accent mr-2"></i> 5 Haz 2023</span>

<span><i class="far fa-clock text-accent mr-2"></i> 7 dk.</span>

</div>

</div>

</div>

</div>

<div class="text-center mt-12">

<a href="#" class="btn-custom btn-primary-custom px-10 py-4">

Tüm Yazıları Görüntüle

</a>

</div>

</div>

</section>

<section id="testimonials" class="py-16 md:py-24 px-4 md:px-8 bg-dark bg-opacity-50 relative z-10">

<div class="container mx-auto">

<div class="text-center mb-16">

<h2 class="text-4xl md:text-5xl font-bold text-white inline-block relative pb-4">

Üyelerimizin Görüşleri

<span class="absolute bottom-0 left-1/2 -translate-x-1/2 w-20 h-1 bg-primary rounded-full"></span>

</h2>

<p class="text-xl text-light max-w-2xl mx-auto mt-6">Sportify Blog ile hedeflerine ulaşan üyelerimizin deneyimleri</p>

</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

<div class="testimonial-card">

<div class="flex items-center mb-6">

<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Ahmet Yılmaz" class="w-16 h-16 rounded-full mr-4">

<div>

<h4 class="text-xl font-bold text-white">Ahmet Yılmaz</h4>

<p class="text-light">Profesyonel Voleybolcu</p>

</div>

</div>

<p class="text-light mb-4">"Sportify Blog sayesinde beslenme ve antrenman bilgimi ciddi ölçüde geliştirdim. Performansımda gözle görülür bir artış oldu."</p>

<div class="flex text-yellow-400">

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

</div>

</div>

<div class="testimonial-card">

<div class="flex items-center mb-6">

<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Zeynep Kaya" class="w-16 h-16 rounded-full mr-4">

<div>

<h4 class="text-xl font-bold text-white">Zeynep Kaya</h4>

<p class="text-light">Fitness Eğitmeni</p>

</div>

</div>

<p class="text-light mb-4">"Mesleğimde kendimi geliştirmek için sürekli araştırma yapıyorum. Sportify Blog, en güncel bilimsel bilgilere ulaşmamı sağlıyor."</p>

<div class="flex text-yellow-400">

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star-half-alt"></i>

</div>

</div>

<div class="testimonial-card">

<div class="flex items-center mb-6">

<img src="https://randomuser.me/api/portraits/men/62.jpg" alt="Mehmet Demir" class="w-16 h-16 rounded-full mr-4">

<div>

<h4 class="text-xl font-bold text-white">Mehmet Demir</h4>

<p class="text-light">Maraton Koşucusu</p>

</div>

</div>

<p class="text-light mb-4">"İlk maratonumu tamamlamamda Sportify Blog'daki motivasyon yazıları ve antrenman ipuçları bana çok yardımcı oldu. Teşekkürler!"</p>

<div class="flex text-yellow-400">

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

</div>

</div>

</div>

</div>

</section>

<section id="contact" class="py-16 md:py-24 px-4 md:px-8 relative z-10">

<div class="container mx-auto">

<div class="text-center mb-16">

<h2 class="text-4xl md:text-5xl font-bold text-white inline-block relative pb-4">

İletişime Geçin

<span class="absolute bottom-0 left-1/2 -translate-x-1/2 w-20 h-1 bg-primary rounded-full"></span>

</h2>

<p class="text-xl text-light max-w-2xl mx-auto mt-6">Sorularınız, önerileriniz veya işbirliği teklifleriniz için bize ulaşın</p>

</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">

<div class="contact-form-container bg-card p-8 rounded-2xl shadow-xl border border-border">

<h3 class="text-3xl font-bold text-white mb-8 text-center">Bize Mesaj Gönderin</h3>

<form id="contact-form" class="space-y-6">

<div>

<input type="text" id="name" class="w-full px-5 py-3 bg-gray-800 border border-gray-700 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary transition-all duration-300" placeholder="Adınız Soyadınız" required>

</div>

<div>

<input type="email" id="email" class="w-full px-5 py-3 bg-gray-800 border border-gray-700 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary transition-all duration-300" placeholder="E-posta Adresiniz" required>

</div>

<div>

<input type="text" id="subject" class="w-full px-5 py-3 bg-gray-800 border border-gray-700 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary transition-all duration-300" placeholder="Konu">

</div>

<div>

<input id="message" class="w-full px-5 py-3 bg-gray-800 border border-gray-700 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary transition-all duration-300 min-h-[150px] resize-y" placeholder="Mesajınız" required/>

</div>

<button type="submit" class="submit-btn w-full">

Mesajı Gönder

</button>

</form>

</div>

<div class="contact-info flex flex-col gap-8">

<div class="flex items-start gap-6 bg-card p-6 rounded-2xl shadow-xl border border-border">

<div class="contact-icon text-3xl text-primary flex-shrink-0">

<i class="fas fa-map-marker-alt"></i>

</div>

<div class="contact-details">

<h3 class="text-2xl font-bold text-white mb-2">Konum</h3>

<p class="text-lg text-light">Levent, Spor Caddesi No: 45, İstanbul</p>

</div>

</div>

<div class="flex items-start gap-6 bg-card p-6 rounded-2xl shadow-xl border border-border">

<div class="contact-icon text-3xl text-primary flex-shrink-0">

<i class="fas fa-envelope"></i>

</div>

<div class="contact-details">

<h3 class="text-2xl font-bold text-white mb-2">E-posta</h3>

<p class="text-lg text-light">info@sportifyblog.com</p>

</div>

</div>

<div class="flex items-start gap-6 bg-card p-6 rounded-2xl shadow-xl border border-border">

<div class="contact-icon text-3xl text-primary flex-shrink-0">

<i class="fas fa-phone-alt"></i>

</div>

<div class="contact-details">

<h3 class="text-2xl font-bold text-white mb-2">Telefon</h3>

<p class="text-lg text-light">+90 (212) 555 55 55</p>

</div>

</div>

<div class="flex items-start gap-6 bg-card p-6 rounded-2xl shadow-xl border border-border">

<div class="contact-icon text-3xl text-primary flex-shrink-0">

<i class="fas fa-clock"></i>

</div>

<div class="contact-details">

<h3 class="text-2xl font-bold text-white mb-2">Çalışma Saatleri</h3>

<p class="text-lg text-light">Pzt-Cum: 09:00 - 18:00</p>

<p class="text-lg text-light">Cmt: 10:00 - 16:00</p>

</div>

</div>

</div>

</div>

</div>

</section>

<footer class="bg-dark py-12 px-4 md:px-8 relative z-10">

<div class="container mx-auto text-center">

<a href="#home" class="footer-logo text-4xl font-bold text-white mb-6 inline-block">

Sportify<span class="text-primary">Blog</span>

</a>

<ul class="flex flex-wrap justify-center gap-x-8 gap-y-4 text-lg mb-8">

<li><a href="#home" class="text-light hover:text-primary transition-colors duration-300">Anasayfa</a></li>

<li><a href="#about" class="text-light hover:text-primary transition-colors duration-300">Hakkımızda</a></li>

<li><a href="#features" class="text-light hover:text-primary transition-colors duration-300">Özellikler</a></li>

<li><a href="#blog" class="text-light hover:text-primary transition-colors duration-300">Blog</a></li>

<li><a href="#testimonials" class="text-light hover:text-primary transition-colors duration-300">Görüşler</a></li>

<li><a href="#contact" class="text-light hover:text-primary transition-colors duration-300">İletişim</a></li>

</ul>

<div class="flex justify-center gap-6 text-2xl mb-8">

<a href="#" target="_blank" aria-label="Facebook" class="text-light hover:text-primary transition-transform hover:scale-110"><i class="fab fa-facebook-f"></i></a>

<a href="#" target="_blank" aria-label="Instagram" class="text-light hover:text-primary transition-transform hover:scale-110"><i class="fab fa-instagram"></i></a>

<a href="#" target="_blank" aria-label="Twitter" class="text-light hover:text-primary transition-transform hover:scale-110"><i class="fab fa-twitter"></i></a>

<a href="#" target="_blank" aria-label="YouTube" class="text-light hover:text-primary transition-transform hover:scale-110"><i class="fab fa-youtube"></i></a>

<a href="#" target="_blank" aria-label="LinkedIn" class="text-light hover:text-primary transition-transform hover:scale-110"><i class="fab fa-linkedin-in"></i></a>

</div>

<p class="text-gray-500 text-sm">

© 2023 Sportify Blog. Tüm Hakları Saklıdır. Spor ve sağlıklı yaşam tutkunları için hazırlanmıştır.

</p>

</div>

</footer>

<button id="scroll-top-btn" class="fixed bottom-8 right-8 w-14 h-14 bg-primary text-white rounded-full flex items-center justify-center text-2xl shadow-lg opacity-0 invisible transition-all duration-300 ease-in-out z-50 hover:bg-secondary hover:scale-110">

<i class="fas fa-arrow-up"></i>

</button>

<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>

<script>

// Mobile Navigation Toggle

const hamburger = document.getElementById('hamburger-menu');

const mobileNav = document.getElementById('mobile-nav');

const mobileNavLinks = mobileNav.querySelectorAll('.nav-link');

hamburger.addEventListener('click', () => {

mobileNav.classList.toggle('right-[-100%]');

mobileNav.classList.toggle('right-0');

hamburger.classList.toggle('active');

});

mobileNavLinks.forEach(link => {

link.addEventListener('click', () => {

mobileNav.classList.remove('right-0');

mobileNav.classList.add('right-[-100%]');

hamburger.classList.remove('active');

});

});

// Sticky Header on Scroll

const mainHeader = document.querySelector('.main-header');

window.addEventListener('scroll', () => {

mainHeader.classList.toggle('scrolled', window.scrollY > 80);

});

// Scroll to Top Button

const scrollTopBtn = document.getElementById('scroll-top-btn');

window.addEventListener('scroll', () => {

if (window.pageYOffset > 500) {

scrollTopBtn.classList.add('opacity-100', 'visible');

} else {

scrollTopBtn.classList.remove('opacity-100', 'visible');

}

});

scrollTopBtn.addEventListener('click', () => {

window.scrollTo({

top: 0,

behavior: 'smooth'

});

});

// Typed.js Initialization for Hero Section

document.addEventListener('DOMContentLoaded', () => {

if (document.getElementById('typed-text')) {

new Typed("#typed-text", {

strings: ["Sırları", "Bilimi", "Yolculuğu", "Dönüşümü"],

typeSpeed: 60,

backSpeed: 45,

loop: true,

showCursor: true,

cursorChar: '|',

});

}

});

// Skill Bars Animation on Scroll

const skillProgressBars = document.querySelectorAll('.skill-progress');

const aboutSection = document.getElementById('about');

const skillObserver = new IntersectionObserver((entries) => {

entries.forEach(entry => {

if (entry.isIntersecting) {

skillProgressBars.forEach(bar => {

const progress = bar.dataset.progress;

bar.style.width = progress + '%';

});

skillObserver.unobserve(entry.target);

}

});

}, { threshold: 0.3 });

if (aboutSection) {

skillObserver.observe(aboutSection);

}

// Smooth Scroll for Navigation Links & Active Link Highlighting

const navLinks = document.querySelectorAll('.nav-link');

const sections = document.querySelectorAll('section[id]');

const mainHeaderElement = document.querySelector('.main-header');

function smoothScrollAndHighlight(e) {

if (e.target.matches('a[href^="#"]')) {

e.preventDefault();

const targetId = e.target.getAttribute('href');

const targetElement = document.querySelector(targetId);

if (targetElement) {

const headerHeight = mainHeaderElement.offsetHeight;

const offsetPosition = targetElement.offsetTop - headerHeight - 20;

window.scrollTo({

top: offsetPosition,

behavior: 'smooth'

});

}

}

}

function highlightNavLink() {

let currentActiveSection = '';

const headerHeight = mainHeaderElement.offsetHeight;

sections.forEach(section => {

const sectionTop = section.offsetTop - headerHeight - 30;

const sectionHeight = section.clientHeight;

if (pageYOffset >= sectionTop && pageYOffset < sectionTop + sectionHeight) {

currentActiveSection = section.getAttribute('id');

}

});

navLinks.forEach(link => {

link.classList.remove('active');

if (link.getAttribute('href') === `#${currentActiveSection}`) {

link.classList.add('active');

} else if (currentActiveSection === '' && link.getAttribute('href') === '#home') {

link.classList.add('active');

}

});

}

document.addEventListener('DOMContentLoaded', () => {

document.querySelectorAll('nav a').forEach(link => {

link.addEventListener('click', smoothScrollAndHighlight);

});

highlightNavLink();

});

window.addEventListener('scroll', highlightNavLink);

// Particles.js Configuration

particlesJS("particles-js", {

"particles": {

"number": {

"value": 80,

"density": {

"enable": true,

"value_area": 800

}

},

"color": {

"value": "#1a73e8"

},

"shape": {

"type": "circle",

"stroke": {

"width": 0,

"color": "#000000"

}

},

"opacity": {

"value": 0.5,

"random": false

},

"size": {

"value": 3,

"random": true

},

"line_linked": {

"enable": true,

"distance": 150,

"color": "#1a73e8",

"opacity": 0.4,

"width": 1

},

"move": {

"enable": true,

"speed": 2,

"direction": "none",

"random": false,

"out_mode": "out"

}

},

"interactivity": {

"detect_on": "canvas",

"events": {

"onhover": {

"enable": true,

"mode": "grab"

},

"onclick": {

"enable": true,

"mode": "push"

},

"resize": true

},

"modes": {

"grab": {

"distance": 140,

"line_linked": {

"opacity": 1

}

},

"push": {

"particles_nb": 4

}

}

},

"retina_detect": true

});

</script>

</body>

</html>

CSS

JS