Webleb - UI Elements - Mete'nin bir kodu

HTML

<!DOCTYPE html>

<head>

<title>Yaratıcı Zihin Günlüğü | Dijital Yaratıcılık Blogu</title>

<style>

/* Genel Stil Ayarları */

:root {

--primary-color: #6c63ff; /* Mor-mavi ana renk */

--secondary-color: #4d44db; /* Koyu mor-mavi ikincil renk */

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

--light-text: #f5f5f7; /* Açık gri yazı rengi */

--accent-color: #ff6b6b; /* Kırmızımsı vurgu rengi */

--card-bg: rgba(255, 255, 255, 0.05); /* Şeffaf kart arka planı */

--border-color: rgba(255, 255, 255, 0.1); /* Hafif beyaz çerçeve */

--transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Yumuşak geçiş efekti */

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

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

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

color: var(--light-text);

overflow-x: hidden;

line-height: 1.6;

scroll-behavior: smooth;

}

/* Particle.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%; /* Yan boşluklar */

}

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

font-family: 'Montserrat', sans-serif; /* Başlıklar için farklı font */

color: var(--light-text);

margin-bottom: 0.5em;

line-height: 1.2;

}

a {

text-decoration: none;

color: var(--primary-color);

transition: var(--transition);

}

a:hover {

color: var(--secondary-color);

}

/* 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);

}

.main-header.scrolled {

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

backdrop-filter: blur(10px);

padding: 1rem 5%;

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

}

.logo {

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

font-weight: 700;

font-size: 1.8rem;

color: var(--light-text);

text-decoration: none;

display: flex;

align-items: center;

}

.logo span {

color: var(--primary-color);

}

.logo i {

font-size: 1.5rem;

margin-right: 8px;

color: var(--primary-color);

}

.nav-links {

display: flex;

list-style: none;

}

.nav-links li {

margin-left: 2.5rem;

}

.nav-link {

color: var(--light-text);

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

transition: var(--transition);

}

.nav-link:hover::after,

.nav-link.active::after {

width: 100%;

}

.nav-link:hover {

color: var(--primary-color);

}

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

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

flex-direction: column;

align-items: center;

justify-content: center;

transition: var(--transition);

z-index: 999;

display: flex; /* Varsayılan olarak flex, active class'ı ile sağdan görünür hale gelir */

}

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

}

/* Hero Section */

.hero-section {

min-height: 100vh;

display: flex;

align-items: center;

padding: 0 5%;

position: relative;

background: linear-gradient(135deg, var(--dark-bg) 0%, #3a3f6f 100%); /* Hafif gradient */

}

.hero-content {

max-width: 1200px;

margin: 0 auto;

width: 100%;

display: grid;

grid-template-columns: repeat(2, 1fr);

align-items: center;

gap: 2rem;

position: relative;

z-index: 1;

}

.hero-text h4 {

font-size: 1.5rem;

color: var(--primary-color);

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

}

.typed-cursor {

color: var(--primary-color) !important;

font-size: 3.8rem;

opacity: 1;

animation: blink 0.7s infinite;

}

@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }

.hero-text p {

font-size: 1.1rem;

margin-bottom: 2rem;

opacity: 0;

animation: fadeInUp 1s 0.6s forwards;

}

.btn-group {

display: flex;

gap: 1.5rem;

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

color: var(--light-text);

}

.btn.primary:hover {

background-color: transparent;

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

transform: translateY(-3px);

box-shadow: 0 10px 20px rgba(108, 99, 255, 0.3);

}

.btn.secondary {

background-color: transparent;

color: var(--light-text);

border-color: var(--light-text);

}

.btn.secondary:hover {

background-color: var(--light-text);

color: var(--dark-bg);

transform: translateY(-3px);

}

.hero-image {

position: relative;

opacity: 0;

animation: fadeIn 1s 1s forwards;

}

.hero-image img {

width: 100%;

max-width: 500px;

border-radius: 20px;

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

transform: perspective(1000px) rotateY(-15deg);

transition: var(--transition);

}

.hero-image:hover img {

transform: perspective(1000px) rotateY(0deg);

}

.social-links {

position: absolute;

left: -50px;

top: 50%;

transform: translateY(-50%);

display: flex;

flex-direction: column;

gap: 1.5rem;

}

.social-links a {

color: var(--light-text);

font-size: 1.5rem;

transition: var(--transition);

}

.social-links a:hover {

color: var(--primary-color);

transform: translateX(5px);

}

/* 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-color);

border-radius: 2px;

}

/* About Section */

.about-content {

display: grid;

grid-template-columns: repeat(2, 1fr);

gap: 3rem;

align-items: center;

}

.about-image {

position: relative;

}

.about-image img {

width: 100%;

border-radius: 20px;

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

}

.about-image::before {

content: '';

position: absolute;

width: 100%;

height: 100%;

border: 5px solid var(--primary-color);

border-radius: 20px;

top: 20px;

left: 20px;

z-index: -1;

}

.about-text h3 {

font-size: 2rem;

margin-bottom: 1.5rem;

color: var(--primary-color); /* Başlık rengi */

}

.about-text p {

margin-bottom: 1.5rem;

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

}

.skills-container {

margin-top: 2rem;

}

.skill-item {

margin-bottom: 1.5rem;

}

.skill-info {

display: flex;

justify-content: space-between;

margin-bottom: 0.5rem;

color: var(--light-text);

font-weight: 600;

}

.skill-bar {

height: 10px;

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

border-radius: 5px;

overflow: hidden;

}

.skill-progress {

height: 100%;

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

border-radius: 5px;

position: relative;

width: 0; /* Animasyon için başlangıç genişliği */

transition: width 1.5s ease-in-out;

}

/* Blog Posts Section (Hizmetler gibi düzenlendi) */

.blog-posts-section {

padding: 6rem 5%;

}

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

padding: 2.5rem 2rem;

transition: var(--transition);

text-align: center;

backdrop-filter: blur(10px);

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

display: flex;

flex-direction: column;

justify-content: space-between;

}

.blog-card:hover {

transform: translateY(-10px);

background-color: rgba(108, 99, 255, 0.1);

box-shadow: 0 15px 30px rgba(108, 99, 255, 0.2);

}

.blog-card-image {

height: 180px; /* Daha kompakt görsel */

width: 100%;

overflow: hidden;

border-radius: 10px;

margin-bottom: 1.5rem;

}

.blog-card-image img {

width: 100%;

height: 100%;

object-fit: cover;

transition: transform 0.5s ease;

}

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

transform: scale(1.08);

}

.blog-card h3 {

font-size: 1.5rem;

margin-bottom: 1rem;

color: var(--primary-color);

}

.blog-card p {

font-size: 0.95rem;

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

margin-bottom: 1.5rem;

flex-grow: 1; /* Metnin kartı doldurmasını sağlar */

}

.blog-meta {

font-size: 0.85rem;

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

margin-bottom: 1rem;

display: flex;

justify-content: center;

gap: 15px;

flex-wrap: wrap;

}

.blog-meta span i {

margin-right: 5px;

color: var(--primary-color);

}

.read-more-btn {

display: inline-flex;

align-items: center;

font-weight: 600;

color: var(--accent-color); /* Vurgu rengi */

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;

}

/* Podcast Section (Platform olarak ayarlandı) */

.podcast-section {

padding: 6rem 5%;

text-align: center;

}

.podcast-content {

display: grid;

grid-template-columns: repeat(2, 1fr);

gap: 3rem;

align-items: center;

}

.podcast-image {

position: relative;

display: flex;

justify-content: center;

align-items: center;

}

.podcast-image img {

width: 100%;

max-width: 450px;

border-radius: 20px;

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

transition: var(--transition);

}

.podcast-image:hover img {

transform: scale(1.03);

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

}

.podcast-text h3 {

font-size: 2rem;

margin-bottom: 1.5rem;

color: var(--primary-color);

}

.podcast-text p {

margin-bottom: 1.5rem;

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

}

.latest-episode-card {

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

padding: 1.5rem;

border-radius: 15px;

margin-top: 2rem;

text-align: left;

backdrop-filter: blur(10px);

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

}

.latest-episode-card h4 {

font-size: 1.3rem;

color: var(--light-text);

margin-bottom: 0.8rem;

}

.latest-episode-card .episode-meta {

font-size: 0.9rem;

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

margin-bottom: 1.2rem;

}

.latest-episode-card audio {

width: 100%;

}

.podcast-platforms {

display: flex;

flex-wrap: wrap;

gap: 1rem;

margin-top: 2rem;

justify-content: center;

}

.platform-btn {

display: inline-flex;

align-items: center;

padding: 0.7rem 1.2rem;

border-radius: 30px;

font-weight: 600;

color: var(--light-text);

transition: var(--transition);

box-shadow: 0 4px 10px rgba(0,0,0,0.1);

}

.platform-btn i {

margin-right: 0.8rem;

font-size: 1rem;

}

.platform-btn.spotify { background-color: #1DB954; }

.platform-btn.spotify:hover { transform: translateY(-3px); box-shadow: 0 8px 15px rgba(29, 185, 84, 0.3);}

.platform-btn.apple { background-color: #FD3A69; }

.platform-btn.apple:hover { transform: translateY(-3px); box-shadow: 0 8px 15px rgba(253, 58, 105, 0.3);}

.platform-btn.google { background-color: #4285F4; }

.platform-btn.google:hover { transform: translateY(-3px); box-shadow: 0 8px 15px rgba(66, 133, 244, 0.3);}

.platform-btn.rss { background-color: #F26522; }

.platform-btn.rss:hover { transform: translateY(-3px); box-shadow: 0 8px 15px rgba(242, 101, 34, 0.3);}

/* Contact Section */

.contact-section {

padding: 6rem 5%;

}

.contact-container {

display: grid;

grid-template-columns: repeat(2, 1fr);

gap: 3rem;

}

.contact-info {

display: flex;

flex-direction: column;

gap: 2rem;

}

.contact-card {

display: flex;

align-items: flex-start;

gap: 1.5rem;

}

.contact-icon {

font-size: 1.8rem;

color: var(--primary-color);

}

.contact-details h3 {

font-size: 1.3rem;

margin-bottom: 0.5rem;

color: var(--light-text);

}

.contact-details p {

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

}

.contact-form-container {

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

padding: 2.5rem;

border-radius: 15px;

backdrop-filter: blur(10px);

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

}

.contact-form .form-group {

margin-bottom: 1.5rem;

}

.contact-form .form-control {

width: 100%;

padding: 1rem;

background-color: rgba(255, 255, 255, 0.05);

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

border-radius: 10px;

color: var(--light-text);

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

transition: var(--transition);

}

.contact-form .form-control:focus {

outline: none;

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

background-color: rgba(108, 99, 255, 0.1);

}

textarea.form-control {

resize: vertical;

min-height: 150px;

}

.submit-btn {

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

color: var(--light-text);

border: none;

padding: 1rem 2.5rem;

border-radius: 50px;

font-weight: 600;

cursor: pointer;

transition: var(--transition);

display: inline-block;

}

.submit-btn:hover {

background-color: var(--secondary-color);

transform: translateY(-3px);

box-shadow: 0 10px 20px rgba(108, 99, 255, 0.3);

}

/* Footer */

footer {

background-color: rgba(0, 0, 0, 0.2); /* Hafif şeffaf koyu renk */

padding: 3rem 5%;

text-align: center;

}

.footer-content {

max-width: 1200px;

margin: 0 auto;

}

.footer-logo {

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

font-weight: 700;

font-size: 2rem;

color: var(--light-text);

margin-bottom: 1.5rem;

display: inline-block;

}

.footer-logo span {

color: var(--primary-color);

}

.footer-links {

display: flex;

justify-content: center;

list-style: none;

margin-bottom: 2rem;

flex-wrap: wrap;

gap: 1.5rem;

}

.footer-links a {

color: var(--light-text);

text-decoration: none;

transition: var(--transition);

}

.footer-links a:hover {

color: var(--primary-color);

}

.footer-social {

display: flex;

justify-content: center;

gap: 1.5rem;

margin-bottom: 2rem;

}

.footer-social a {

color: var(--light-text);

font-size: 1.5rem;

transition: var(--transition);

}

.footer-social a:hover {

color: var(--primary-color);

transform: translateY(-5px);

}

.copyright {

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

font-size: 0.9rem;

}

/* 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);

color: var(--light-text);

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

transform: translateY(-5px);

}

/* Responsive Tasarım */

@media (max-width: 992px) {

.nav-links {

display: none;

}

.hamburger-menu {

display: flex;

}

.hero-content {

grid-template-columns: 1fr;

text-align: center;

}

.social-links {

position: static;

flex-direction: row;

justify-content: center;

margin-top: 2rem;

transform: none;

}

.about-content, .podcast-content, .contact-container {

grid-template-columns: 1fr;

}

.about-image::before {

top: 10px;

left: 10px;

}

.podcast-image {

order: -1; /* Mobil görünümde görseli üste al */

}

.footer-links {

flex-direction: column;

gap: 0.8rem;

}

@media (max-width: 768px) {

.main-header {

padding: 1rem 5%;

}

.main-header.scrolled {

padding: 0.8rem 5%;

}

.mobile-nav.active {

right: 0;

}

.hero-text h1 {

font-size: 2.8rem;

}

.typed-cursor {

font-size: 2.8rem;

}

.hero-btns {

flex-direction: column;

gap: 1rem;

}

.btn {

width: 100%;

text-align: center;

}

.section {

padding: 4rem 5%;

}

.section-title h2 {

font-size: 2rem;

}

.about-text h3, .podcast-text h3 {

font-size: 1.8rem;

}

.blog-grid {

grid-template-columns: 1fr;

}

.podcast-content {

gap: 2rem;

}

.contact-info {

gap: 1.5rem;

}

.contact-form-container {

padding: 2rem;

}

@media (max-width: 576px) {

.logo {

font-size: 1.5rem;

}

.hero-text h1 {

font-size: 2.2rem;

}

.typed-cursor {

font-size: 2.2rem;

}

.hero-text p {

font-size: 0.95rem;

}

.section-title h2 {

font-size: 1.8rem;

}

.about-text h3, .podcast-text h3 {

font-size: 1.5rem;

}

.service-card, .blog-card, .latest-episode-card {

padding: 1.5rem;

}

.skill-info span, .skill-bar {

font-size: 0.9rem;

}

.platform-btn {

padding: 0.6rem 1rem;

font-size: 0.9rem;

}

.platform-btn i {

margin-right: 0.5rem;

}

</style>

</head>

<body>

<a href="#anasayfa" class="logo">Yaratıcı<span>Zihin</span> <i class="fas fa-brain"></i></a>

<nav>

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

<li><a href="#hakkimda" class="nav-link">Hakkımda</a></li>

<li><a href="#podcast" class="nav-link">Podcast</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="#hakkimda" class="nav-link">Hakkımda</a></li>

<li><a href="#podcast" class="nav-link">Podcast</a></li>

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

</ul>

</div>

</header>

<h4>Merhaba, Ben</h4>

<h1>[Atilla Demir] <span id="typed-text"></span></h1>

<p>Dijital dünyanın derinliklerine dalmayı seven bir yaratıcıyım. Burada tasarım, teknoloji, inovasyon ve kişisel gelişim üzerine düşüncelerimi ve keşiflerimi paylaşıyorum.</p>

<a href="#blog-yazilari" class="btn primary">Yazılarımı Keşfet</a>

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

</div>

</div>

</section>

<h2>Hakkımda</h2>

</div>

</div>

<h3>Ben Kimim ve Neler Yaparım?</h3>

<p>Ben [Adınız Soyadınız], yazılım geliştirme ve dijital tasarım alanında tutkulu bir yaratıcıyım. Sistem Mühendisliği eğitimimle birlikte, web dünyasının dinamiklerine ve kullanıcı deneyimini zenginleştirmeye odaklanıyorum. HTML, CSS ve JavaScript ile modern, estetik ve işlevsel arayüzler tasarlamayı çok seviyorum.</p>

<p>Bu blog, dijital sanat, yeni teknolojiler, yaratıcı problem çözme ve kişisel öğrenme yolculuğumu paylaştığım bir platform. Amacım, bilgi birikimimi ve deneyimlerimi aktarırken, aynı zamanda ilham verici içerikler sunarak sizin de yaratıcı potansiyelinizi keşfetmenize yardımcı olmak.</p>

<span>Web Geliştirme (HTML, CSS, JS)</span>

</div>

</div>

<span>UX/UI Tasarım</span>

</div>

</div>

<span>Mobil Uygulama Geliştirme (Temel)</span>

</div>

</div>

<span>İçerik Üretimi & Blog Yazarlığı</span>

</div>

</div>

<a href="#" class="btn primary" style="margin-top: 2rem;">CV'mi İndir</a>

</div>

</section>

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

</div>

</div>

<h3>Renk Psikolojisi ve Marka Kimliği</h3>

</div>

<p>Renklerin markaların bilinirliği ve tüketici algısı üzerindeki derin etkilerini keşfedin. Logodan web sitesine, doğru renk seçimi markanızın ruhunu nasıl yansıtır?</p>

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

</a>

</article>

</div>

<h3>Web Tasarımında Minimalist Yaklaşım</h3>

</div>

<p>Daha azın daha çok olduğu felsefesiyle, sade ve işlevsel web tasarımlarının kullanıcı deneyimini nasıl iyileştirdiğini ve dönüşüm oranlarını artırdığını inceleyin.</p>

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

</a>

</article>

</div>

<h3>Yaratıcı Bloklarla Başa Çıkma Yolları</h3>

</div>

<p>İlhamın tükendiği anlar herkesin başına gelebilir. Bu yazıda, yaratıcı tıkanıklıkları aşmak ve yeniden akışa geçmek için pratik teknikleri keşfedin.</p>

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

</a>

</article>

</div>

<h3>2024'ün Gözde Frontend Araçları</h3>

</div>

<p>Frontend geliştirme dünyasındaki en son trendleri ve projelerinizi hızlandıracak popüler kütüphaneleri ve framework'leri yakından tanıyın.</p>

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

</a>

</article>

</div>

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

</div>

</section>

<h2>Yaratıcı Sohbetler Podcast'i</h2>

</div>

</div>

<h3>Fikirlerden İlham Alan Sohbetler</h3>

<p>Farklı sektörlerden başarılı yaratıcılarla, onların ilham kaynakları, kariyer yolculukları ve projeleri hakkında derinlemesine sohbetler. Her bölümde yeni bir bakış açısı ve motivasyon bulacaksınız.</p>

<h4>Son Bölüm: Episode 24 - Sürdürülebilir Tasarım ve Lisa Chen</h4>

<p class="episode-meta">10 Haziran 2024 • 45 dk.</p>

Tarayıcınız ses öğesini desteklemiyor.

</audio>

</div>

<a href="#" class="platform-btn spotify"><i class="fab fa-spotify"></i> Spotify</a>

<a href="#" class="platform-btn apple"><i class="fab fa-apple"></i> Apple Podcasts</a>

<a href="#" class="platform-btn google"><i class="fab fa-google-play"></i> Google Podcasts</a>

<a href="#" class="platform-btn rss"><i class="fas fa-rss"></i> RSS Beslemesi</a>

</div>

</section>

<h2>İletişime Geçin</h2>

</div>

</div>

<h3>Konum</h3>

<p>İstanbul, Türkiye</p>

</div>

</div>

<h3>E-posta</h3>

<p>info@yaratıcızihin.com</p>

</div>

</div>

<h3>Telefon</h3>

</div>

</div>

<h3>Çalışma Saatleri</h3>

</div>

<h3>Bana Bir Mesaj Gönderin</h3>

</div>

</div>

</div>

</div>

<button type="submit" class="submit-btn">Mesajı Gönder</button>

</form>

</div>

</section>

<a href="#anasayfa" class="footer-logo">Yaratıcı<span>Zihin</span></a>

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

<li><a href="#hakkimda">Hakkımda</a></li>

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

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

</ul>

</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'

});

// Typed.js Konfigürasyonu

var typed = new Typed("#typed-text", {

strings: ["Yaratıcı Geliştirici", "Web Tasarımcısı", "İçerik Üreticisi", "Dijital Sanatçı"],

typeSpeed: 60,

backSpeed: 45,

loop: true,

showCursor: true,

cursorChar: '|',

});

// 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); // Animasyon sadece bir kere çalışsın

}

});

}, { threshold: 0.2 }); // %20 göründüğünde tetikle

observer.observe(aboutSection);

// Form Gönderimi (arka uç bağlantısı olmadan örnek)

document.getElementById('contact-form').addEventListener('submit', (e) => {

e.preventDefault();

alert('Mesajınız başarıyla gönderildi! En kısa sürede size geri döneceğiz.');

e.target.reset(); // Formu temizle

});

// Navigasyon linklerinin aktifliğini yönet (scrollspy)

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

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

e.preventDefault();

const targetId = this.getAttribute('href');

const targetElement = document.querySelector(targetId);

if (targetElement) {

// Header'ın sabit yüksekliğini dikkate alarak kaydır

const headerOffset = 80; // Yaklaşık header yüksekliği

const elementPosition = targetElement.getBoundingClientRect().top + window.pageYOffset;

const offsetPosition = elementPosition - headerOffset;

window.scrollTo({

top: offsetPosition,

behavior: 'smooth'

});

// Menüyü kapat

mobileNav.classList.remove('active');

hamburger.classList.remove('active');

}

});

// Sayfa yüklendiğinde ve kaydırıldığında aktif linki belirle

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

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

function highlightNavLink() {

let current = '';

sections.forEach(section => {

const sectionTop = section.offsetTop - 100; // Header yüksekliği kadar offset

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(); // Sayfa yüklendiğinde bir kez çalıştır

// Particles.js Konfigürasyonu

particlesJS("particles-js", {

"particles": {

"number": {

"value": 80,

"density": {

"enable": true,

"value_area": 800

}

},

"color": {

"value": "#6c63ff" /* Particle rengi ana renk ile uyumlu */

},

"shape": {

"type": "circle",

"stroke": {

"width": 0,

"color": "#000000"

},

"polygon": {

"nb_sides": 5

}

},

"opacity": {

"value": 0.5,

"random": false,

"anim": {

"enable": false,

"speed": 1,

"opacity_min": 0.1,

"sync": false

}

},

"size": {

"value": 3,

"random": true,

"anim": {

"enable": false,

"speed": 40,

"size_min": 0.1,

"sync": false

}

},

"line_linked": {

"enable": true,

"distance": 150,

"color": "#6c63ff", /* Çizgi rengi ana renk ile uyumlu */

"opacity": 0.4,

"width": 1

},

"move": {

"enable": true,

"speed": 2,

"direction": "none",

"random": false,

"straight": false,

"out_mode": "out",

"bounce": false,

"attract": {

"enable": false,

"rotateX": 600,

"rotateY": 1200

}

},

"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

}

},

"bubble": {

"distance": 400,

"size": 40,

"duration": 2,

"opacity": 8,

"speed": 3

},

"repulse": {

"distance": 200,

"duration": 0.4

},

"push": {

"particles_nb": 4

},

"remove": {

"particles_nb": 2

}

},

"retina_detect": true

});

</script>

</body>

</html>

Mete'nin bir kodu

Recommended

CSS Loading Animation Snippet

Anes Plans Card

Delete button

HTML

CSS

JS

Recommended

CSS Loading Animation Snippet

Anes Plans Card

Delete button

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS