Beril Coşkun: Blog, Kültür, Yazın - Kişisel Web Sitesi

Open In Editor Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beril Coşkun | Yazın ve Kültür</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">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        eerie: '#1a1a1a', /* Koyu gri */
                        blood: '#8a0303', /* Koyu kırmızı vurgu */
                        parchment: '#f5f1e6', /* Açık krem metin rengi */
                        ash: '#333333', /* Orta koyu gri */
                    },
                    fontFamily: {
                        heading: ['"EB Garamond"', 'serif'], /* Başlıklar için klasik font */
                        body: ['"Crimson Text"', 'serif'], /* Metinler için okunaklı font */
                    }
                }
            }
        }
    </script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400&family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
        
        body {
            font-family: 'Crimson Text', serif;
            background-color: #0f0f0f; /* Daha koyu arka plan */
            background-image: radial-gradient(#2a2a2a 1px, transparent 1px); /* Noktalı desen */
            background-size: 20px 20px;
            color: #f5f1e6; /* Açık metin rengi */
        }

.hero-title-main {
            font-family: 'EB Garamond', serif;
            color: #f5f1e6; /* Başlık rengi */
        }

.nav-link {
            position: relative;
            text-transform: uppercase;
            font-weight: 600;
            letter-spacing: 0.05em;
            color: #f5f1e6; /* Navbar link rengi */
            transition: color 0.3s ease;
        }

.nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -4px;
            left: 0;
            background-color: #8a0303; /* Kırmızı vurgu */
            transition: width 0.3s ease;
        }

.nav-link:hover::after, .nav-link.active::after {
            width: 100%;
        }
        .nav-link:hover {
             color: #8a0303; /* Hover'da kırmızı */
        }

.card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
        }

.transition-all {
            transition: all 0.3s ease;
        }

/* Dark mode styles - now adapting to the new base theme */
        .dark-mode {
            background-color: #000000; /* Daha koyu bir dark mode */
            background-image: radial-gradient(#1a1a1a 1px, transparent 1px);
            color: #d1d1d1;
        }

.dark-mode .bg-white, .dark-mode .bg-gray-50, .dark-mode .bg-gray-100 {
            background-color: #0f0f0f !important;
            color: #d1d1d1;
        }

.dark-mode .text-gray-600, .dark-mode .text-gray-500, .dark-mode .text-gray-400 {
            color: #a0a0a0 !important;
        }

.dark-mode .border-gray-300 {
            border-color: #333333 !important;
        }
        .dark-mode .text-blue-600 { /* This might be for category tags, adjusting to new palette */
            color: #8a0303 !important;
        }
        .dark-mode .hero-title-main, .dark-mode .nav-link {
            color: #f5f1e6;
        }
        .dark-mode .nav-link:hover {
            color: #ff4d4d; /* Daha parlak kırmızı hover */
        }
    </style>
</head>
<body class="min-h-screen font-body">
    <div class="fixed bottom-4 right-4 z-50">
        <button id="darkModeToggle" class="bg-ash text-parchment p-3 rounded-full shadow-lg hover:bg-blood transition-all">
            <i class="fas fa-moon"></i>
        </button>
    </div>

<header class="sticky top-0 w-full bg-eerie bg-opacity-90 backdrop-blur-sm border-b border-ash z-50">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <a href="#" class="text-2xl font-bold text-parchment font-heading">Beril Coşkun</a>

<nav class="hidden md:flex space-x-8 items-center">
                <a href="#" class="nav-link active text-sm">Biyografi</a>
                <a href="#" class="nav-link text-sm">Portfolyo</a>
                <a href="#" class="nav-link text-sm">Podcast</a>
                <a href="#" class="nav-link text-sm">Blog</a>
            </nav>

<div id="mobile-menu" class="hidden md:hidden bg-eerie py-4 px-4 shadow-lg">
            <div class="flex flex-col space-y-4">
                <a href="#" class="nav-link active text-sm py-2">Biyografi</a>
                <a href="#" class="nav-link text-sm py-2">Portfolyo</a>
                <a href="#" class="nav-link text-sm py-2">Podcast</a>
                <a href="#" class="nav-link text-sm py-2">Blog</a>
            </div>
        </div>
    </header>

<section class="pt-32 pb-16 px-4 relative">
        <div class="absolute top-0 left-0 w-full h-full opacity-10">
            <div class="floating absolute top-1/4 left-1/4 w-40 h-40 rounded-full bg-blood blur-3xl"></div>
            <div class="floating absolute top-1/3 right-1/4 w-32 h-32 rounded-full bg-blood blur-3xl"></div>
        </div>
        <div class="container mx-auto flex flex-col md:flex-row items-center justify-between gap-12 z-10 relative">
            <div class="md:w-1/2 text-center md:text-left">
                <h1 class="hero-title-main text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
                    Beril Coşkun
                </h1>
                <p class="text-lg md:text-xl text-parchment leading-relaxed mb-8 max-w-xl mx-auto md:mx-0 opacity-80">
                    Bornova, İzmir'de yaşayan, kendisini işine adamış bir kültür eleştirmeni ve bloggerım.
                </p>
                <div class="flex justify-center md:justify-start space-x-6 text-parchment">
                    <a href="#" class="hover:text-blood transition-all text-2xl social-icon"><i class="fab fa-instagram"></i></a>
                    <a href="#" class="hover:text-blood transition-all text-2xl social-icon"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" class="hover:text-blood transition-all text-2xl social-icon"><i class="fab fa-twitter"></i></a>
                    <a href="#" class="hover:text-blood transition-all text-2xl social-icon"><i class="fab fa-linkedin-in"></i></a>
                </div>
            </div>

<section id="latest-posts" class="py-16 px-4 bg-eerie">
        <div class="container mx-auto">
            <div class="text-center mb-16">
                <h2 class="hero-title-main text-3xl md:text-4xl font-bold mb-4">En Son Blog Yazıları</h2>
                <div class="section-divider mx-auto w-1/3 my-6"></div>
                <p class="text-parchment max-w-2xl mx-auto opacity-80">
                    Kültür, sanat, yaşam ve daha fazlası üzerine taze bakış açıları ve derinlemesine incelemeler.
                </p>
            </div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <article class="blog-card bg-ash rounded-lg overflow-hidden shadow-md card-hover border border-ash hover:border-blood transition-colors">
                    <div class="h-48 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
                             alt="Blog Post Image"
                             class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    </div>
                    <div class="p-6">
                        <div class="flex items-center text-sm text-gray-400 mb-2">
                            <span>20 Haziran, 2024</span>
                            <span class="mx-2">•</span>
                            <span>7 dk okuma</span>
                        </div>
                        <h3 class="text-xl font-bold mb-3 font-heading text-parchment">İzmir'in Saklı Sanat Galerileri</h3>
                        <p class="text-parchment mb-4 opacity-80">
                            Bornova ve çevresindeki keşfedilmeyi bekleyen sanat mekanları.
                        </p>
                        <a href="#" class="text-blood font-bold inline-flex items-center hover:underline">
                            Devamını Oku
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                            </svg>
                        </a>
                    </div>
                </article>

<article class="blog-card bg-ash rounded-lg overflow-hidden shadow-md card-hover border border-ash hover:border-blood transition-colors">
                    <div class="h-48 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1541462608143-67571c6738dd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
                             alt="Blog Post Image"
                             class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    </div>
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <span class="bg-blood bg-opacity-20 text-blood text-xs px-2 py-1 rounded-full font-medium">Kültür</span>
                            <span class="text-gray-400 text-sm ml-4">12 Mayıs, 2024</span>
                        </div>
                        <h3 class="text-xl font-bold mb-3 font-heading text-parchment">Podcast Dinlemenin Yeni Trendleri</h3>
                        <p class="text-parchment mb-4 opacity-80">
                            Podcast dünyasındaki son gelişmeler ve dinleme alışkanlıkları.
                        </p>
                        <a href="#" class="text-blood font-bold inline-flex items-center hover:underline">
                            Devamını Oku
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                            </svg>
                        </a>
                    </div>
                </article>

<article class="blog-card bg-ash rounded-lg overflow-hidden shadow-md card-hover border border-ash hover:border-blood transition-colors">
                    <div class="h-48 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
                             alt="Blog Post Image"
                             class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    </div>
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <span class="bg-blood bg-opacity-20 text-blood text-xs px-2 py-1 rounded-full font-medium">Yaşam</span>
                            <span class="text-gray-400 text-sm ml-4">01 Nisan, 2024</span>
                        </div>
                        <h3 class="text-xl font-bold mb-3 font-heading text-parchment">Bornova'da Bir Gün: Keşfetmeye Değer Yerler</h3>
                        <p class="text-parchment mb-4 opacity-80">
                            İzmir'in kalbinde, Bornova'da geçirebileceğiniz keyifli bir gün rotası.
                        </p>
                        <a href="#" class="text-blood font-bold inline-flex items-center hover:underline">
                            Devamını Oku
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                            </svg>
                        </a>
                    </div>
                </article>
            </div>

<div class="text-center mt-12">
                <a href="#" class="inline-block border border-blood text-blood hover:bg-blood hover:text-white px-6 py-3 rounded-full font-bold transition-all">
                    Tüm Yazıları Gör
                </a>
            </div>
        </div>
    </section>

<section id="newsletter" class="py-16 px-4 bg-ash text-parchment">
        <div class="container mx-auto max-w-4xl text-center">
            <h2 class="hero-title-main text-3xl md:text-4xl font-bold mb-4">Bültenime Abone Olun</h2>
            <p class="text-lg opacity-80 mb-8 max-w-2xl mx-auto">
                En yeni yazılarımdan, podcast bölümlerimden ve özel içeriklerden haberdar olmak için e-posta bültenime abone olun.
            </p>

<form class="flex flex-col sm:flex-row gap-4 max-w-lg mx-auto">
                <input type="email" placeholder="E-posta adresiniz"
                       class="flex-grow px-4 py-3 rounded-full bg-eerie border border-ash focus:outline-none focus:ring-2 focus:ring-blood focus:border-transparent text-parchment">
                <button type="submit"
                        class="bg-blood hover:bg-red-700 text-white px-6 py-3 rounded-full font-bold transition-all shadow-md">
                    Abone Ol
                </button>
            </form>

<p class="text-xs text-gray-400 mt-4">
                Gizliliğiniz önemlidir. İstediğiniz zaman aboneliğinizi iptal edebilirsiniz.
            </p>
        </div>
    </section>

<footer class="bg-eerie text-parchment py-12 px-4 border-t border-ash">
        <div class="container mx-auto">
            <div class="flex flex-col md:flex-row justify-between">
                <div class="mb-8 md:mb-0">
                    <a href="#" class="text-2xl font-bold text-parchment mb-4 inline-block font-heading">Beril Coşkun</a>
                    <p class="text-gray-400 max-w-xs">
                        Kültür, sanat, yaşam ve kişisel gelişim üzerine düşünceler.
                    </p>
                </div>

<div class="grid grid-cols-2 md:grid-cols-3 gap-8">
                    <div>
                        <h3 class="text-lg font-bold mb-4 font-heading">Keşfet</h3>
                        <ul class="space-y-2">
                            <li><a href="#" class="text-gray-400 hover:text-blood transition">Biyografi</a></li>
                            <li><a href="#" class="text-gray-400 hover:text-blood transition">Portfolyo</a></li>
                            <li><a href="#" class="text-gray-400 hover:text-blood transition">Podcast</a></li>
                            <li><a href="#" class="text-gray-400 hover:text-blood transition">Blog</a></li>
                        </ul>
                    </div>

<div>
                        <h3 class="text-lg font-bold mb-4 font-heading">Bağlantıda Kal</h3>
                        <ul class="space-y-2">
                            <li><a href="#" class="text-gray-400 hover:text-blood transition">Instagram</a></li>
                            <li><a href="#" class="text-gray-400 hover:text-blood transition">Facebook</a></li>
                            <li><a href="#" class="text-gray-400 hover:text-blood transition">Twitter</a></li>
                            <li><a href="#" class="text-gray-400 hover:text-blood transition">LinkedIn</a></li>
                        </ul>
                    </div>

<div>
                        <h3 class="text-lg font-bold mb-4 font-heading">Yasal</h3>
                        <ul class="space-y-2">
                            <li><a href="#" class="text-gray-400 hover:text-blood transition">Gizlilik Politikası</a></li>
                            <li><a href="#" class="text-gray-400 hover:text-blood transition">Kullanım Koşulları</a></li>
                        </ul>
                    </div>
                </div>
            </div>

<div class="border-t border-ash mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
                <p class="text-gray-500 text-sm mb-4 md:mb-0">
                    © 2024 Beril Coşkun. Tüm hakları saklıdır.
                </p>
                <div class="flex space-x-6">
                    <a href="#" class="text-gray-500 hover:text-blood transition social-icon">
                        <i class="fab fa-instagram"></i>
                    </a>
                    <a href="#" class="text-gray-500 hover:text-blood transition social-icon">
                        <i class="fab fa-twitter"></i>
                    </a>
                    <a href="#" class="text-gray-500 hover:text-blood transition social-icon">
                        <i class="fab fa-linkedin-in"></i>
                    </a>
                    <a href="#" class="text-gray-500 hover:text-blood transition social-icon">
                        <i class="fab fa-facebook-f"></i>
                    </a>
                </div>
            </div>
        </div>
    </footer>

menuToggle.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
            hamburger.classList.toggle('active');
        });

// Close mobile menu when clicking on a link
        const navLinksMobile = document.querySelectorAll('#mobile-menu a');
        navLinksMobile.forEach(link => {
            link.addEventListener('click', () => {
                mobileMenu.classList.add('hidden');
                hamburger.classList.remove('active');
            });
        });

// Active nav link indicator (for desktop and mobile)
        const currentPage = window.location.pathname.split('/').pop() || 'index.html';
        const navLinksAll = document.querySelectorAll('.nav-link');

navLinksAll.forEach(link => {
            if (link.textContent.toLowerCase() === 'biyografi' || currentPage === '') {
                link.classList.add('active');
            } else {
                link.classList.remove('active');
            }
        });

// Dark Mode Toggle
        const darkModeToggle = document.getElementById('darkModeToggle');
        const html = document.documentElement;

darkModeToggle.addEventListener('click', () => {
            html.classList.toggle('dark-mode');

if (html.classList.contains('dark-mode')) {
                darkModeToggle.innerHTML = '<i class="fas fa-sun"></i>';
                localStorage.setItem('darkMode', 'enabled');
            } else {
                darkModeToggle.innerHTML = '<i class="fas fa-moon"></i>';
                localStorage.setItem('darkMode', 'disabled');
            }
        });

// Check for saved dark mode preference
        if (localStorage.getItem('darkMode') === 'enabled') {
            html.classList.add('dark-mode');
            darkModeToggle.innerHTML = '<i class="fas fa-sun"></i>';
        }

// Back to Top Button
        const backToTopButton = document.getElementById('backToTop');

backToTopButton.addEventListener('click', (e) => {
            e.preventDefault();
            window.scrollTo({ top: 0, behavior: 'smooth' });
        });
    </script>
</body>
</html>

Beril Coşkun: Blog, Kültür, Yazın - Kişisel Web Sitesi

Recommended

Landing Page - Notice

Calculator UI -Neumorphism -Drak

HTML CSS Portfolio Website Template

HTML

CSS

JS

Recommended

Landing Page - Notice

Calculator UI -Neumorphism -Drak

HTML CSS Portfolio Website Template

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS