Webleb - Snippets de Código - Um código de Mete

HTML

<!DOCTYPE html>

<head>

<title>FitLife | Spor, Sağlık ve Beslenme Blogu</title>

<style>

:root {

--primary: #2ecc71; /* Canlı yeşil - spor teması */

--secondary: #3498db; /* Mavi - sağlık teması */

--accent: #e74c3c; /* Kırmızı - enerji teması */

--dark: #1a1a2e; /* Koyu arka plan */

--light: #f5f5f7; /* Açık metin rengi */

--gray: #333; /* Gri tonlar */

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

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

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

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

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

background-color: var(--dark);

color: var(--light);

overflow-x: hidden;

line-height: 1.6;

scroll-behavior: smooth;

}

/* Particles.js arka planı */

#particles-js {

position: fixed;

width: 100%;

height: 100%;

z-index: -1;

top: 0;

left: 0;

}

.container {

max-width: 1200px;

margin: 0 auto;

padding: 0 5%;

}

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

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

color: var(--light);

margin-bottom: 0.5em;

line-height: 1.2;

}

a {

text-decoration: none;

color: var(--primary);

transition: var(--transition);

}

a:hover {

color: var(--light);

}

ul {

list-style: none;

}

/* Header / Navigation */

.main-header {

position: fixed;

top: 0;

left: 0;

width: 100%;

z-index: 1000;

padding: 1.5rem 5%;

display: flex;

justify-content: space-between;

align-items: center;

transition: var(--transition);

background-color: rgba(26, 26, 46, 0.9);

backdrop-filter: blur(10px);

box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);

}

.main-header.scrolled {

padding: 1rem 5%;

}

.logo {

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

font-weight: 700;

font-size: 1.8rem;

color: var(--light);

text-decoration: none;

display: flex;

align-items: center;

}

.logo span {

color: var(--primary);

}

.logo i {

font-size: 1.5rem;

margin-right: 8px;

color: var(--primary);

}

.nav-links {

display: flex;

list-style: none;

}

.nav-links li {

margin-left: 2.5rem;

}

.nav-link {

color: var(--light);

text-decoration: none;

font-weight: 500;

font-size: 1.1rem;

position: relative;

transition: var(--transition);

}

.nav-link::after {

content: '';

position: absolute;

bottom: -5px;

left: 0;

width: 0;

height: 2px;

background-color: var(--primary);

transition: var(--transition);

}

.nav-link:hover::after,

.nav-link.active::after {

width: 100%;

}

.nav-link:hover {

color: var(--primary);

}

.hamburger-menu {

display: none;

cursor: pointer;

z-index: 1001;

flex-direction: column;

justify-content: space-between;

width: 28px;

height: 22px;

}

.hamburger-menu .line {

display: block;

width: 100%;

height: 2.5px;

background-color: var(--light);

margin: 4px 0;

transition: var(--transition);

border-radius: 2px;

}

.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);

}

.mobile-nav {

position: fixed;

top: 0;

right: -100%;

width: 70%;

height: 100vh;

background-color: var(--dark);

flex-direction: column;

align-items: center;

justify-content: center;

transition: var(--transition);

z-index: 999;

display: flex;

}

.mobile-nav.active {

right: 0;

}

.mobile-nav ul {

list-style: none;

text-align: center;

}

.mobile-nav li {

margin: 1.5rem 0;

}

.mobile-nav .nav-link {

font-size: 1.2rem;

color: var(--light);

}

/* Hero Section */

.hero-section {

min-height: 100vh;

display: flex;

align-items: center;

padding: 0 5%;

position: relative;

background: linear-gradient(135deg, rgba(26, 26, 46, 0.9) 0%, rgba(52, 73, 94, 0.8) 100%),

url('https://images.unsplash.com/photo-1534438327276-14e5300c3a48?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') no-repeat center center/cover;

}

.hero-content {

max-width: 1200px;

margin: 0 auto;

width: 100%;

display: grid;

grid-template-columns: 1fr;

align-items: center;

gap: 2rem;

position: relative;

z-index: 1;

text-align: center;

}

.hero-text h4 {

font-size: 1.5rem;

color: var(--primary);

margin-bottom: 1rem;

opacity: 0;

animation: fadeInUp 1s 0.2s forwards;

}

.hero-text h1 {

font-size: 3.5rem;

font-weight: 700;

margin-bottom: 1.5rem;

line-height: 1.2;

opacity: 0;

animation: fadeInUp 1s 0.4s forwards;

}

.hero-text h1 span {

color: var(--primary);

}

.hero-text p {

font-size: 1.1rem;

margin-bottom: 2rem;

max-width: 800px;

margin-left: auto;

margin-right: auto;

opacity: 0;

animation: fadeInUp 1s 0.6s forwards;

}

.btn-group {

display: flex;

gap: 1.5rem;

justify-content: center;

opacity: 0;

animation: fadeInUp 1s 0.8s forwards;

}

.btn {

display: inline-block;

padding: 0.8rem 2rem;

border-radius: 50px;

font-weight: 600;

text-decoration: none;

transition: var(--transition);

border: 2px solid transparent;

}

.btn.primary {

background-color: var(--primary);

color: var(--dark);

}

.btn.primary:hover {

background-color: transparent;

border-color: var(--primary);

color: var(--light);

transform: translateY(-3px);

box-shadow: 0 10px 20px rgba(46, 204, 113, 0.3);

}

.btn.secondary {

background-color: transparent;

color: var(--light);

border-color: var(--light);

}

.btn.secondary:hover {

background-color: var(--light);

color: var(--dark);

transform: translateY(-3px);

}

.hero-stats {

display: flex;

justify-content: center;

gap: 40px;

margin-top: 40px;

flex-wrap: wrap;

opacity: 0;

animation: fadeInUp 1s 1s forwards;

}

.stat-item {

text-align: center;

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

padding: 20px;

border-radius: 10px;

min-width: 150px;

backdrop-filter: blur(5px);

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

}

.stat-item .number {

font-size: 2.5rem;

font-weight: 700;

color: var(--primary);

margin-bottom: 5px;

}

.stat-item .label {

font-size: 0.9rem;

text-transform: uppercase;

letter-spacing: 1px;

}

/* Section Başlıkları */

.section {

padding: 6rem 5%;

}

.section-title {

text-align: center;

margin-bottom: 4rem;

}

.section-title h2 {

font-size: 2.5rem;

font-weight: 700;

position: relative;

display: inline-block;

}

.section-title h2::after {

content: '';

position: absolute;

bottom: -10px;

left: 50%;

transform: translateX(-50%);

width: 80px;

height: 4px;

background-color: var(--primary);

border-radius: 2px;

}

/* Blog Section */

.blog-grid {

display: grid;

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

gap: 2rem;

}

.blog-card {

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

border-radius: 15px;

overflow: hidden;

transition: var(--transition);

backdrop-filter: blur(10px);

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

position: relative;

}

.blog-card:hover {

transform: translateY(-10px);

box-shadow: 0 15px 30px rgba(46, 204, 113, 0.2);

}

.blog-card-image {

height: 200px;

overflow: hidden;

}

.blog-card-image img {

width: 100%;

height: 100%;

object-fit: cover;

transition: var(--transition);

}

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

transform: scale(1.1);

}

.blog-content {

padding: 25px;

}

.blog-date {

display: inline-block;

background: var(--primary);

color: var(--dark);

padding: 5px 10px;

border-radius: 4px;

font-size: 0.9rem;

margin-bottom: 15px;

font-weight: 600;

}

.blog-content h3 {

font-size: 1.5rem;

margin-bottom: 15px;

color: var(--light);

}

.blog-content p {

margin-bottom: 20px;

color: rgba(255, 255, 255, 0.7);

}

.blog-meta {

font-size: 0.85rem;

color: rgba(255, 255, 255, 0.5);

margin-bottom: 1rem;

display: flex;

gap: 15px;

}

.blog-meta span i {

margin-right: 5px;

color: var(--primary);

}

.read-more-btn {

display: inline-flex;

align-items: center;

font-weight: 600;

color: var(--primary);

font-size: 1rem;

}

.read-more-btn i {

margin-left: 10px;

font-size: 1rem;

transition: margin-left 0.3s ease;

}

.read-more-btn:hover i {

margin-left: 15px;

}

.category-tag {

position: absolute;

top: 15px;

right: 15px;

background: var(--accent);

color: white;

padding: 5px 10px;

border-radius: 20px;

font-size: 0.8rem;

font-weight: 600;

z-index: 2;

}

/* Training Programs Section */

.training-section {

background: linear-gradient(to bottom, var(--dark), #15202b);

}

.training-grid {

display: grid;

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

gap: 2rem;

}

.training-card {

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

border-radius: 15px;

overflow: hidden;

transition: var(--transition);

backdrop-filter: blur(10px);

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

}

.training-card:hover {

transform: translateY(-10px);

box-shadow: 0 15px 30px rgba(52, 152, 219, 0.2);

}

.training-card-image {

height: 200px;

overflow: hidden;

}

.training-card-image img {

width: 100%;

height: 100%;

object-fit: cover;

transition: var(--transition);

}

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

transform: scale(1.1);

}

.training-content {

padding: 25px;

text-align: center;

}

.training-content h3 {

font-size: 1.5rem;

margin-bottom: 15px;

color: var(--light);

}

.training-content p {

margin-bottom: 20px;

color: rgba(255, 255, 255, 0.7);

}

/* Nutrition Section */

.nutrition-section {

background: linear-gradient(to bottom, #15202b, var(--dark));

}

.nutrition-container {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 3rem;

align-items: center;

}

.nutrition-image {

position: relative;

border-radius: 15px;

overflow: hidden;

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

}

.nutrition-image img {

width: 100%;

display: block;

transition: var(--transition);

}

.nutrition-image:hover img {

transform: scale(1.05);

}

.nutrition-text h3 {

font-size: 2rem;

margin-bottom: 1.5rem;

color: var(--primary);

}

.nutrition-text p {

margin-bottom: 1.5rem;

color: rgba(255, 255, 255, 0.8);

}

.nutrition-features {

margin: 30px 0;

}

.feature-item {

display: flex;

align-items: center;

margin-bottom: 15px;

}

.feature-item i {

color: var(--primary);

margin-right: 15px;

font-size: 1.2rem;

}

/* Experts Section */

.experts-grid {

display: grid;

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

gap: 2rem;

}

.expert-card {

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

border-radius: 15px;

padding: 2rem;

text-align: center;

transition: var(--transition);

backdrop-filter: blur(10px);

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

}

.expert-card:hover {

transform: translateY(-10px);

box-shadow: 0 15px 30px rgba(231, 76, 60, 0.2);

}

.expert-image {

width: 120px;

height: 120px;

border-radius: 50%;

overflow: hidden;

margin: 0 auto 20px;

border: 3px solid var(--primary);

}

.expert-image img {

width: 100%;

height: 100%;

object-fit: cover;

}

.expert-card h3 {

font-size: 1.5rem;

margin-bottom: 10px;

color: var(--light);

}

.expert-card .expert-title {

color: var(--primary);

margin-bottom: 15px;

font-weight: 600;

}

.expert-social {

display: flex;

justify-content: center;

gap: 15px;

margin-top: 20px;

}

.expert-social a {

width: 40px;

height: 40px;

border-radius: 50%;

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

display: flex;

align-items: center;

justify-content: center;

color: var(--light);

transition: var(--transition);

}

.expert-social a:hover {

background: var(--primary);

color: var(--dark);

}

/* Newsletter Section */

.newsletter-section {

background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);

padding: 5rem 5%;

text-align: center;

}

.newsletter-container {

max-width: 700px;

margin: 0 auto;

}

.newsletter-container h2 {

color: var(--light);

margin-bottom: 1.5rem;

}

.newsletter-container p {

color: rgba(255, 255, 255, 0.9);

margin-bottom: 2rem;

font-size: 1.1rem;

}

.newsletter-form {

display: flex;

max-width: 500px;

margin: 0 auto;

gap: 10px;

}

.newsletter-form input {

flex: 1;

padding: 15px;

border: none;

border-radius: 50px;

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

font-size: 1rem;

}

.newsletter-form button {

background: var(--dark);

color: var(--light);

border: none;

padding: 15px 30px;

border-radius: 50px;

font-weight: 600;

cursor: pointer;

transition: var(--transition);

}

.newsletter-form button:hover {

background: #0d0d0d;

transform: translateY(-3px);

}

/* Footer */

footer {

background-color: rgba(0, 0, 0, 0.3);

padding: 5rem 5% 2rem;

}

.footer-grid {

display: grid;

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

gap: 30px;

margin-bottom: 50px;

}

.footer-col h4 {

font-size: 1.3rem;

margin-bottom: 25px;

position: relative;

padding-bottom: 10px;

}

.footer-col h4:after {

content: '';

position: absolute;

bottom: 0;

left: 0;

width: 50px;

height: 2px;

background: var(--primary);

}

.footer-col p {

margin-bottom: 20px;

color: rgba(255, 255, 255, 0.7);

}

.footer-links li {

margin-bottom: 12px;

}

.footer-links li a {

color: rgba(255, 255, 255, 0.7);

transition: var(--transition);

}

.footer-links li a:hover {

color: var(--primary);

padding-left: 5px;

}

.footer-social {

display: flex;

gap: 15px;

margin-top: 20px;

}

.footer-social a {

display: flex;

align-items: center;

justify-content: center;

width: 40px;

height: 40px;

border-radius: 50%;

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

color: var(--light);

transition: var(--transition);

}

.footer-social a:hover {

background: var(--primary);

color: var(--dark);

transform: translateY(-5px);

}

.copyright {

text-align: center;

padding-top: 30px;

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

font-size: 0.9rem;

color: rgba(255, 255, 255, 0.5);

}

/* Animasyonlar */

@keyframes fadeIn {

from { opacity: 0; }

to { opacity: 1; }

}

@keyframes fadeInUp {

from {

opacity: 0;

transform: translateY(30px);

}

to {

opacity: 1;

transform: translateY(0);

}

/* Scroll to top butonu */

.scroll-top {

position: fixed;

bottom: 2rem;

right: 2rem;

width: 50px;

height: 50px;

background-color: var(--primary);

color: var(--dark);

border-radius: 50%;

display: flex;

justify-content: center;

align-items: center;

font-size: 1.2rem;

cursor: pointer;

opacity: 0;

visibility: hidden;

transition: var(--transition);

z-index: 999;

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

}

.scroll-top.active {

opacity: 1;

visibility: visible;

}

.scroll-top:hover {

background-color: var(--secondary);

transform: translateY(-5px);

}

/* Responsive Tasarım */

@media (max-width: 992px) {

.nav-links {

display: none;

}

.hamburger-menu {

display: flex;

}

.hero-text h1 {

font-size: 2.8rem;

}

.section {

padding: 4rem 5%;

}

.section-title h2 {

font-size: 2rem;

}

.nutrition-container {

grid-template-columns: 1fr;

}

.newsletter-form {

flex-direction: column;

}

@media (max-width: 768px) {

.hero-text h1 {

font-size: 2.2rem;

}

.hero-text p {

font-size: 1rem;

}

.stat-item {

min-width: 120px;

padding: 15px;

}

.stat-item .number {

font-size: 2rem;

}

.btn-group {

flex-direction: column;

align-items: center;

}

@media (max-width: 576px) {

.logo {

font-size: 1.5rem;

}

.section-title h2 {

font-size: 1.8rem;

}

</style>

</head>

<body>

<nav>

<li><a href="#anasayfa" class="nav-link active">Anasayfa</a></li>

<li><a href="#egitim" class="nav-link">Eğitimler</a></li>

<li><a href="#beslenme" class="nav-link">Beslenme</a></li>

<li><a href="#uzmanlar" class="nav-link">Uzmanlar</a></li>

<li><a href="#iletisim" class="nav-link">İletişim</a></li>

</ul>

</button>

</nav>

<ul>

<li><a href="#anasayfa" class="nav-link">Anasayfa</a></li>

<li><a href="#egitim" class="nav-link">Eğitimler</a></li>

<li><a href="#beslenme" class="nav-link">Beslenme</a></li>

<li><a href="#uzmanlar" class="nav-link">Uzmanlar</a></li>

<li><a href="#iletisim" class="nav-link">İletişim</a></li>

</ul>

</div>

</header>

<h4>Sağlıklı Yaşamın Adresi</h4>

<h1>Fitness ve <span>Sağlıklı Beslenme</span> Rehberiniz</h1>

<p>Profesyonel eğitmenler, bilimsel beslenme programları ve güncel spor bilgileriyle sağlıklı yaşam yolculuğunuzda yanınızdayız. Hedeflerinize ulaşmak için doğru adrestesiniz!</p>

<a href="#blog" class="btn primary">Blog'u Keşfet</a>

<a href="#egitim" class="btn secondary">Eğitim Programları</a>

</div>

<div class="label">Blog Yazısı</div>

</div>

<div class="label">Uzman Eğitmen</div>

</div>

<div class="label">Mutlu Üye</div>

</div>

</section>

<h2>Son Blog Yazıları</h2>

</div>

<span class="category-tag">Beslenme</span>

</div>

<h3>Yaz Aylarında Optimal Beslenme Rehberi</h3>

<p>Sıcak havalarda vücudunuzun ihtiyaçlarını karşılayacak besinler ve sıvı tüketimi hakkında bilmeniz gereken her şey.</p>

<span><i class="far fa-comment"></i> 24 Yorum</span>

</div>

Devamını Oku <i class="fas fa-arrow-right"></i>

</a>

</div>

</article>

<span class="category-tag">Antrenman</span>

</div>

<h3>Fonksiyonel Antrenman: Gücünüzü Artırın</h3>

<p>Günlük hareketlerinizi kolaylaştıran, esnekliğinizi ve gücünüzü artıran fonksiyonel antrenman programı.</p>

<span><i class="far fa-comment"></i> 18 Yorum</span>

</div>

Devamını Oku <i class="fas fa-arrow-right"></i>

</a>

</div>

</article>

<span class="category-tag">Spor Psikolojisi</span>

</div>

<h3>Motivasyonunuzu Sürekli Kılmanın 7 Yolu</h3>

<p>Spor yapma alışkanlığını sürdürmekte zorlanıyor musunuz? Motivasyonunuzu artıracak bilimsel teknikler.</p>

<span><i class="far fa-comment"></i> 32 Yorum</span>

</div>

Devamını Oku <i class="fas fa-arrow-right"></i>

</a>

</div>

</article>

</div>

<a href="#" class="btn primary">Tüm Yazıları Görüntüle</a>

</div>

</section>

<h2>Özel Eğitim Programları</h2>

</div>

</div>

<h3>Vücut Geliştirme</h3>

<p>Kas kütlesi artırma ve vücut şekillendirme için özel program. Profesyonel eğitmenler eşliğinde maksimum verim alın.</p>

<a href="#" class="btn primary">Program Detayları</a>

</div>

</div>

<h3>Kardiyo ve Yağ Yakımı</h3>

<p>Hızlı ve sağlıklı yağ yakımı için özel kardiyo programları. Dayanıklılığınızı artırırken formda kalın.</p>

<a href="#" class="btn primary">Program Detayları</a>

</div>

</div>

<h3>Fonksiyonel Antrenman</h3>

<p>Günlük hareketlerinizi kolaylaştıran, esnekliğinizi ve gücünüzü artıran fonksiyonel antrenman programı.</p>

<a href="#" class="btn primary">Program Detayları</a>

</div>

</section>

<h2>Beslenme Rehberi</h2>

</div>

</div>

<h3>Bilimsel Beslenme Programları</h3>

<p>Hedeflerinize uygun kişiselleştirilmiş beslenme programları. Uzman diyetisyenlerimizle sağlıklı beslenme alışkanlıkları kazanın ve hedeflerinize ulaşın.</p>

<p>Kişiye özel beslenme planları</p>

</div>

<p>Sürdürülebilir diyet programları</p>

</div>

<p>Metabolizma hızlandırıcı öneriler</p>

</div>

<p>Vitamin ve mineral dengesi</p>

</div>

<a href="#" class="btn primary">Beslenme Programları</a>

</div>

</section>

<h2>Uzman Kadromuz</h2>

</div>

</div>

<h3>Ayşe Yılmaz</h3>

<div class="expert-title">Beslenme Uzmanı</div>

<p>10 yılı aşkın deneyimiyle kişiye özel beslenme programları hazırlıyor.</p>

</div>

</div>

<h3>Mehmet Kaya</h3>

<div class="expert-title">Fitness Eğitmeni</div>

<p>Vücut geliştirme ve fonksiyonel antrenman konusunda uzman.</p>

</div>

</div>

<h3>Zeynep Demir</h3>

<div class="expert-title">Pilates Eğitmeni</div>

<p>Postür düzeltme ve core güçlendirme konusunda uzmanlaşmıştır.</p>

</div>

</div>

<h3>Can Öztürk</h3>

<div class="expert-title">Kardiyo Uzmanı</div>

<p>Yağ yakımı ve dayanıklılık antrenmanları konusunda uzman.</p>

</div>

</section>

<h2>Fitness Haberlerine Abone Olun</h2>

<p>Yeni blog yazıları, özel indirimler ve spor dünyasından güncel haberler için e-posta bültenimize abone olun.</p>

<button type="submit">Abone Ol</button>

</form>

</div>

</section>

<h4>FitLife</h4>

<p>Spor, sağlık ve beslenme konularında güncel bilgiler, uzman görüşleri ve kişisel gelişim ipuçları için doğru adres.</p>

</div>

<h4>Hızlı Linkler</h4>

<li><a href="#anasayfa">Anasayfa</a></li>

<li><a href="#egitim">Eğitimler</a></li>

<li><a href="#beslenme">Beslenme</a></li>

<li><a href="#uzmanlar">Uzmanlar</a></li>

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

</ul>

</div>

<h4>Kategoriler</h4>

<li><a href="#">Antrenman Programları</a></li>

<li><a href="#">Beslenme Rehberi</a></li>

<li><a href="#">Spor Ekipmanları</a></li>

<li><a href="#">Motivasyon ve Psikoloji</a></li>

<li><a href="#">Yarışma Hazırlığı</a></li>

</ul>

</div>

<h4>İletişim</h4>

<li><i class="fas fa-map-marker-alt"></i> Spor Cad. No:123, İstanbul</li>

<li><i class="fas fa-envelope"></i> info@fitlife.com</li>

</ul>

</div>

</div>

</footer>

</div>

// Mobil Navigasyon

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

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

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

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

mobileNav.classList.toggle('active');

hamburger.classList.toggle('active');

});

// Mobil menüden bir linke tıklayınca menüyü kapat

mobileNavLinks.forEach(link => {

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

mobileNav.classList.remove('active');

hamburger.classList.remove('active');

});

// Yapışkan Header

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

const header = document.getElementById('header');

header.classList.toggle('scrolled', window.scrollY > 100);

});

// En Üste Kaydırma Butonu

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

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

if (window.pageYOffset > 300) {

scrollTopBtn.classList.add('active');

} else {

scrollTopBtn.classList.remove('active');

}

});

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

window.scrollTo({

top: 0,

behavior: 'smooth'

});

// Yetenek Çubuklarını Animasyonlu Doldur

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

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

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

entries.forEach(entry => {

if (entry.isIntersecting) {

skillProgress.forEach(progress => {

const width = progress.parentElement.previousElementSibling.querySelector('span:last-child').textContent;

progress.style.width = width;

});

observer.unobserve(entry.target);

}

});

}, { threshold: 0.2 });

observer.observe(aboutSection);

// Form Gönderimi

document.querySelector('.newsletter-form').addEventListener('submit', (e) => {

e.preventDefault();

alert('Bültenimize başarıyla abone oldunuz! Teşekkür ederiz.');

e.target.reset();

});

// Navigasyon linklerinin aktifliğini yönet

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

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

function highlightNavLink() {

let current = '';

sections.forEach(section => {

const sectionTop = section.offsetTop - 100;

if (pageYOffset >= sectionTop) {

current = section.getAttribute('id');

}

});

navLinks.forEach(link => {

link.classList.remove('active');

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

link.classList.add('active');

} else if (current === '' && link.getAttribute('href') === '#anasayfa') {

link.classList.add('active');

}

});

}

window.addEventListener('scroll', highlightNavLink);

highlightNavLink();

// Particles.js Konfigürasyonu

particlesJS("particles-js", {

"particles": {

"number": {

"value": 80,

"density": {

"enable": true,

"value_area": 800

}

},

"color": {

"value": "#2ecc71"

},

"shape": {

"type": "circle"

},

"opacity": {

"value": 0.5,

"random": false

},

"size": {

"value": 3,

"random": true

},

"line_linked": {

"enable": true,

"distance": 150,

"color": "#2ecc71",

"opacity": 0.4,

"width": 1

},

"move": {

"enable": true,

"speed": 2,

"direction": "none",

"random": false,

"straight": 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>

Um código de Mete

Recomendado

animação

Um código por ytr3d3

Um código por bachir123

HTML

CSS

JS

Recomendado

animação

Um código por ytr3d3

Um código por bachir123

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS