Webleb - UI Elements - Mete'nin bir kodu

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>

Mete'nin bir kodu

Recommended

Responsive Card

A Code by Metehan

A Code by mcdonge13

HTML

CSS

JS

Recommended

Responsive Card

A Code by Metehan

A Code by mcdonge13

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS