HTML ve CSS ile Basit Tarzda Dipnot Sistemi

        p {
            margin-bottom: 1rem;
            text-align: justify;
        }

        sup.footnote {
            vertical-align: super;
            font-size: 0.8em;
        }

        sup.footnote a {
            color: var(--primary-color);
            text-decoration: none;
            font-weight: bold;
            border-bottom: 1px dotted var(--primary-color);
            transition: color 0.3s;
        }

        sup.footnote a:hover {
            color: #1a4a9c;
        }

        .footnotes-section {
            margin-top: 3rem;
            padding-top: 1.5rem;
            border-top: 1px solid var(--border-color);
        }

        .footnotes-section h2 {
            font-size: 1.5rem;
            color: var(--text-color);
            border-bottom: none;
        }

        ol.footnotes {
            padding-left: 1.5rem;
            list-style: none;
        }

        ol.footnotes li {
            font-size: 0.9em;
            margin-bottom: 0.8rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        ol.footnotes li a {
            text-decoration: none;
        }

        .footnote-backlink {
            font-size: 1.2em;
            text-decoration: none;
            color: var(--primary-color);
            transition: color 0.3s;
        }

        .footnote-backlink:hover {
            color: #1a4a9c;
        }

<h1>Wikipedia Tarzı Dipnot Sistemi</h1>

    <p>
        Bu paragraf, Wikipedia'da sıkça gördüğünüz dipnot sistemini taklit etmek için yazılmıştır. Metin içerisinde belirli bilgilere referans vermek için dipnotlar kullanılır.<sup class="footnote" id="ref-1"><a href="#footnote-1">[1]</a></sup> Bu sayede okuyucu, bilginin kaynağını kolayca kontrol edebilir ve daha detaylı bilgiye ulaşabilir.<sup class="footnote" id="ref-2"><a href="#footnote-2">[2]</a></sup>
    </p>

    <p>
        Dipnot sistemi, metnin akıcılığını bozmadan ek bilgileri sunar. Modern web tasarımında bu tür dinamik sistemler, kullanıcı deneyimini önemli ölçüde artırır.<sup class="footnote" id="ref-3"><a href="#footnote-3">[3]</a></sup> Tıpkı bir makalede olduğu gibi, burada da dipnotlar ilgili cümlenin hemen sonrasında görünür.
    </p>
	
	<p>Vestibulum bibendum odio vel nisl sodales dictum. Aliquam blandit nisi quis tortor ornare, vitae pellentesque ante hendrerit. Nunc pretium justo sed purus laoreet faucibus. Nam feugiat, risus at tincidunt dignissim, purus risus hendrerit nunc, et eleifend dolor turpis sed lacus. Praesent eu volutpat magna, ut dictum diam. Cras at velit risus. Etiam facilisis lacinia pretium. Nullam nunc velit, rutrum ut nisl a, ullamcorper rutrum felis. Curabitur sodales nisl non ante faucibus, eget commodo nisl maximus. Praesent porttitor dapibus dui a tempus. In accumsan sem eget neque facilisis aliquet. Vivamus semper, felis id maximus maximus, neque ante egestas elit, id facilisis enim lacus et orci. Suspendisse aliquam pulvinar diam ut ultricies. In id purus ornare, ullamcorper magna a, laoreet velit. Curabitur et condimentum turpis. Maecenas luctus magna eros, sed efficitur est dictum ac.</p>
	
	<p>Suspendisse tincidunt mauris suscipit quam euismod, sed vestibulum dolor malesuada. Aenean in felis placerat, consequat tellus auctor, bibendum arcu. Proin nec finibus tortor. Sed sit amet ipsum vitae nulla sodales dictum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque imperdiet, mauris sed auctor maximus, ligula purus varius urna, quis molestie felis magna euismod ante. Etiam congue risus augue, ut elementum nunc consequat eu. Suspendisse est tortor, consectetur lobortis convallis in, commodo at nisi. Nulla quis ligula faucibus, auctor lorem vitae, imperdiet massa. Phasellus hendrerit posuere est, sed posuere enim malesuada nec.<sup class="footnote" id="ref-4"><a href="#footnote-4">[4]</a></sup> Cras sit amet volutpat tellus. Cras metus tortor, luctus a purus non, dapibus elementum nisl. Phasellus ullamcorper augue est, in euismod tortor posuere eu. Aenean pretium dictum lorem ut gravida.</p>

    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<sup class="footnote" id="ref-5"><a href="#footnote-5">[5]</a></sup> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<sup class="footnote" id="ref-6"><a href="#footnote-6">[6]</a></sup>
    </p>
	
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin massa eros, consequat vitae sapien consectetur, aliquam condimentum felis. In tortor mauris, pulvinar accumsan porttitor in, dictum vel erat. Donec volutpat ut ligula eu malesuada. Donec ut lacinia tortor, eu tincidunt nisl. Pellentesque vel ligula mauris. Ut finibus varius quam, a tempus magna rutrum eu. In ac orci massa. Ut quis quam massa. Curabitur vel sagittis turpis, id aliquet nisi. Integer venenatis ullamcorper ex, non elementum libero faucibus sed. Maecenas id elementum neque. Sed mollis turpis eu suscipit tristique. Nunc sed mi non quam ullamcorper aliquet. Praesent hendrerit, justo sit amet pretium dapibus, lacus nisl interdum ante, at pharetra turpis enim sed ligula. Maecenas ultricies dui consequat turpis ultrices, vel mattis massa pellentesque. Phasellus ullamcorper dui vel augue volutpat, nec pellentesque lectus suscipit.</p>

    <p>Sed in ipsum cursus quam placerat fermentum quis accumsan neque. Praesent lacinia ullamcorper turpis, a ullamcorper augue accumsan eget. Phasellus feugiat elementum risus, vel tempus nisi interdum in. Donec ex nulla, euismod nec arcu eget, tincidunt laoreet tortor. Cras porttitor tincidunt sapien sed efficitur. Nam justo tortor, pretium a euismod vel, lobortis a felis. Donec gravida elit eget nunc finibus, eu volutpat sapien laoreet. Vestibulum tristique, massa in dignissim lacinia, nulla odio semper eros, eget finibus purus lacus at mi. Proin odio dui, posuere sed risus at, cursus consequat libero. Sed aliquet lacus in lacus imperdiet bibendum. Morbi ultrices orci sit amet diam porttitor tempus.</p>

    <p>Etiam dapibus eros a vestibulum congue. Phasellus quis consectetur tellus, at rhoncus orci. Suspendisse justo tortor, semper sed tempor at, vehicula non lorem. Cras lectus nisi, ornare non mi a, scelerisque venenatis sapien. In ac porta diam. Morbi imperdiet eros semper ligula consequat finibus. Etiam posuere nisi at sapien tempus, ac blandit libero ultricies. Cras semper convallis malesuada. Cras in placerat magna. Praesent eget fermentum sapien. Integer vitae sapien nibh. Quisque finibus ligula sit amet tellus pharetra, nec varius nisl faucibus. Etiam pharetra odio et ultrices cursus. Nunc suscipit scelerisque sapien, quis tincidunt risus tristique ut.</p>

    <p>Curabitur nec volutpat erat. Vivamus at lectus id tellus malesuada faucibus. Sed vitae sollicitudin lectus. Proin lacus mi, accumsan a ultricies non, rutrum quis dui. Integer sit amet mauris semper, tincidunt ligula vitae, eleifend velit. Donec dignissim ac mi efficitur vestibulum. Integer consequat scelerisque orci et malesuada. Sed sit amet sapien nunc. Quisque ac tortor ut orci euismod volutpat at id libero.</p>
	
	<p>
        Curabitur pretium, velit non convallis gravida, ipsum velit efficitur justo, id volutpat nisi elit nec velit. In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam erat volutpat.<sup class="footnote" id="ref-7"><a href="#footnote-7">[7]</a></sup> Maecenas non interdum ligula, a iaculis leo. Proin ut elit ut felis luctus tincidunt a sit amet arcu.<sup class="footnote" id="ref-8"><a href="#footnote-8">[8]</a></sup>
    </p>
	
	<p>Etiam ut pulvinar lorem. Nunc venenatis porttitor nulla ut aliquam. Nulla ut risus pretium, laoreet lectus at, mattis urna. Suspendisse varius mi at cursus egestas. Quisque sed ornare justo. Phasellus rutrum nunc interdum risus porta ornare. Aenean vitae viverra est, at ultricies velit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam eros sem, lacinia et semper quis, aliquam in lorem. Sed convallis mauris erat, vitae ultrices quam rutrum vel. In commodo blandit tortor, ac scelerisque turpis malesuada sit amet. Integer lectus erat, tincidunt vel urna in, consectetur laoreet orci. Morbi tincidunt massa eu dui iaculis dapibus viverra quis quam. Proin gravida pulvinar dolor, quis scelerisque neque tincidunt a.</p>
    
    <p>
        Nam gravida, ligula in facilisis malesuada, odio elit scelerisque dolor, vel faucibus magna libero eu dolor. Praesent nec mi sit amet mauris dignissim bibendum.<sup class="footnote" id="ref-9"><a href="#footnote-9">[9]</a></sup> Cras vel felis ac est ultricies accumsan. Quisque eget risus a felis egestas facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nam ut nisi quis risus rhoncus facilisis.<sup class="footnote" id="ref-10"><a href="#footnote-10">[10]</a></sup>
    </p>

    <div class="footnotes-section">
    <h2>Dipnotlar</h2>
        <ol class="footnotes">
            <li id="footnote-1">
                <a class="footnote-backlink" href="#ref-1" title="Metindeki referansa dön">↑</a> Kaynak: Wikimedia Vakfı, Dipnot kullanımı rehberi, 2023.
            </li>
            <li id="footnote-2">
                <a class="footnote-backlink" href="#ref-2" title="Metindeki referansa dön">↑</a> John Smith, "Web Tasarımında Kullanıcı Deneyimi", sayfa 45.
            </li>
            <li id="footnote-3">
                <a class="footnote-backlink" href="#ref-3" title="Metindeki referansa dön">↑</a> Jane Doe, "İnteraktif Metin Referans Sistemleri", 2022.
            </li>
            <li id="footnote-4">
                <a class="footnote-backlink" href="#ref-4" title="Metindeki referansa dön">↑</a> Bu bir örnek metindir, gerçek bir kaynağı temsil etmez.
            </li>
            <li id="footnote-5">
                <a class="footnote-backlink" href="#ref-5" title="Metindeki referansa dön">↑</a> Lorem ipsum dolor sit amet, "Web Tasarımı ve Kullanıcı Deneyimi", Bölüm 7, sayfa 112.
            </li>
            <li id="footnote-6">
                <a class="footnote-backlink" href="#ref-6" title="Metindeki referansa dön">↑</a> "Dinamik Sistemler ve Etkileşimli Arayüzler", 2023 yayını.
            </li>
            <li id="footnote-7">
                <a class="footnote-backlink" href="#ref-7" title="Metindeki referansa dön">↑</a> Lorem ipsum'a göre, metinlerin referans verme yetenekleri artırılmalıdır.
            </li>
            <li id="footnote-8">
                <a class="footnote-backlink" href="#ref-8" title="Metindeki referansa dön">↑</a> Consectetur adipiscing elit, "Yazılım Geliştirme Temelleri", sayfa 89.
            </li>
            <li id="footnote-9">
                <a class="footnote-backlink" href="#ref-9" title="Metindeki referansa dön">↑</a> Sed do eiusmod, "Dijital Yayıncılıkta Yenilikler", 2024.
            </li>
            <li id="footnote-10">
                <a class="footnote-backlink" href="#ref-10" title="Metindeki referansa dön">↑</a> Duis aute irure dolor, "Kullanıcı Etkileşimi Tasarımı", Bölüm 3.
            </li>
        </ol>
    </div>

<sup class="footnote" id="ref-1"><a href="#footnote-1">[1]</a></sup>

<ol class="footnotes">
            <li id="footnote-1">
                <a class="footnote-backlink" href="#ref-1" title="Metindeki referansa dön">↑</a> Kaynak: Wikimedia Vakfı, Dipnot kullanımı rehberi, 2023.
            </li>
</ol>