Beril Coşkun: Blog, Culture, Littérature - Site Personnel

63 Metehan

Ouvrir dans l'éditeur Publiez votre code

Beril Coşkun: Blog, Culture, Littérature - Site Personnel

Recommandé

27 October 2024

Site de jeu cracké Public Tout le monde peut poster

30 January 2025

Page de destination du chef personnel

17 July 2024

Modèle de site Web de portfolio HTML 2024

HTML

<!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, Culture, Littérature - Site Personnel

Recommandé

Site de jeu cracké Public Tout le monde peut poster

Page de destination du chef personnel

Modèle de site Web de portfolio HTML 2024

HTML

CSS

JS

Recommandé

Site de jeu cracké Public Tout le monde peut poster

Page de destination du chef personnel

Modèle de site Web de portfolio HTML 2024

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS