summaryrefslogtreecommitdiff
path: root/src/partials/book-progress-banner.html
blob: a10b47792f116e78c994eb6cbb7772dae8e37e17 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!-- Banner -->
<a href="/computer-literacy-book-progress.html" class="font-serif block dark:bg-zinc-800 relative overflow-clip">
    <!-- Binary numbers with gradient overlay -->
    <div class="absolute inset-0 z-0">
        <!-- Binary numbers -->
        <div class="absolute flex text-5xl scale-105 tabular-nums text-black/20 flex-col right-0 top-0 -translate-y-3 dark:text-white">
            <span class="translate-x-0">10101011001010100101101011010100101</span>
            <span class="translate-x-24">01010110101101001010101101001010110</span>
            <span class="translate-x-8">11010010101010110100101011010101001</span>
            <span class="translate-x-16">00101011010010101010101101001011010</span>
            <span class="translate-x-2">10100101010110101001011010101010011</span>
        </div>
        <!-- Gradient overlay -->
        <div class="absolute inset-0 bg-gradient-to-r dark:from-zinc-800 dark:to-zinc-800/0 from-white max-md:from-35% to-white/0"></div>
    </div>

    <!-- Text content on top -->
    <div class="relative dark:text-white z-10 mx-auto py-12 h-54 container max-sm:px-5 flex flex-col justify-between">
        <h1 class="capitalize text-3xl">Компьютерная<br/>грамотность</h1>
        <span class="underline block first-letter:capitalize">Следить за прогрессом выхода книги</span>
    </div>
</a>