diff options
| -rw-r--r-- | assets/images/book.webp | bin | 0 -> 251594 bytes | |||
| -rw-r--r-- | assets/images/book_angle.webp | bin | 0 -> 232170 bytes | |||
| -rw-r--r-- | src/pages/computer-literacy-book-progress.html | 33 |
3 files changed, 28 insertions, 5 deletions
diff --git a/assets/images/book.webp b/assets/images/book.webp Binary files differnew file mode 100644 index 0000000..79a9cdd --- /dev/null +++ b/assets/images/book.webp diff --git a/assets/images/book_angle.webp b/assets/images/book_angle.webp Binary files differnew file mode 100644 index 0000000..eeef907 --- /dev/null +++ b/assets/images/book_angle.webp diff --git a/src/pages/computer-literacy-book-progress.html b/src/pages/computer-literacy-book-progress.html index 74b135d..d43783b 100644 --- a/src/pages/computer-literacy-book-progress.html +++ b/src/pages/computer-literacy-book-progress.html @@ -18,15 +18,37 @@ <meta name="viewport" content="width=device-width, initial-scale=1"> </head> -<body class="relative"> +<body> <div class="fixed top-0 translate-x-12 translate-y-10 z-40 right-0"> <span class="font-bold text-black rotate-45 w-[200px] text-center block bg-yellow-400">В разработке</span> </div> <!-- %include.header% --> <main> - <div class="py-12 mx-auto container max-sm:px-5"> - <h1 class="text-3xl mb-4 font-medium font-serif">Компьюетрная грамотность</h1> - <p>TODO</p> + <div class="py-12 mx-auto pb-[2000px] container max-sm:px-5"> + <section class="flex pt-64 gap-4 relative"> + <div class="-z-1 w-[90vw] max-w-[396px] absolute top-0 left-1/2 -translate-x-1/2"> + <img + class="" + src="/assets/images/book_angle.webp" + alt="Обложка книги" + width="708" + height="877" + loading="lazy" + decoding="async" + fetchpriority="low" + > + <div class="absolute inset-0 bg-gradient-to-t from-white from-35% to-white/0"></div> + </div> + <div class="flex flex-col"> + <h1 class="text-5xl first-letter:capitalize gap-5 mb-4 font-medium font-serif">моя книга</h1> + <div class="space-y-2"> + <p>В данный момент я занимаюсь написанием своей книги по теме комьютерной грамотности. Делаю я это в своё свободное время и исключительно на энтузиазме. Поэтому дело идёт долго.</p> + <p>Текущий прогресс я оцениваю примерно на 12%</p> + <p>Поддержать чтобы я видел заинтересованность и подзарядился энтузиазмом можно пожертвованием.</p> + <p>Примерный список тем затронутых в книге будет такой:</p> + </div> + </div> + </section> <a class="mt-4 underline underline-offset-6 decoration-yellow-500 decoration-[0.07rem] decoration-wavy first-letter:capitalize block" href="/">← На главную</a> </div> <!-- %include.common-section% --> @@ -34,4 +56,5 @@ <!-- %include.footer% --> </body> -</html>
\ No newline at end of file +</html> + |
