From d06008f690ff8afa8610114ad8707a5fd9014695 Mon Sep 17 00:00:00 2001 From: Kentai Radiquum <kentai.waah@gmail.com> Date: Sun, 15 Sep 2024 16:01:41 +0500 Subject: [PATCH] feat: add collection and friend section links --- index.html | 79 +++++++++++++++++++++++++++++++++++---------- static/tailwind.css | 16 +++++++++ 2 files changed, 78 insertions(+), 17 deletions(-) diff --git a/index.html b/index.html index 3812fa5..60112ed 100644 --- a/index.html +++ b/index.html @@ -87,7 +87,8 @@ <!-- Photo Links --> <div class="flex flex-col w-[416px] gap-4"> <div class="relative w-[416px] h-[376px] flex justify-end items-end"> - <img class="absolute inset-0 w-[416px] h-[376px] object-cover -z-10" alt="" src="./static/assets/photos_section_image.png"/> + <img class="absolute inset-0 w-[416px] h-[376px] object-cover -z-10" alt="" + src="./static/assets/photos_section_image.png" /> <p class="font-bold text-[40px] leading-[1] p-[8px]">PHOTOS</p> </div> <div class="flex gap-4"> @@ -171,37 +172,47 @@ </div> <a href="https://anix.wah.su" target="_blank" referrerpolicy="origin"> <div class="relative w-[416px] h-[180px] flex items-end px-2 py-4"> - <img class="absolute [filter:darken(10%)] inset-0 w-[416px] h-[180px] object-cover -z-10" alt="" src="./static/assets/ANIX.png"/> + <img class="absolute [filter:darken(10%)] inset-0 w-[416px] h-[180px] object-cover -z-10" alt="" + src="./static/assets/ANIX.png" /> <div class="flex flex-col gap-1"> <p class="font-medium text-[24px] leading-[1]">Anix</p> - <p class="font-light text-[14px] leading-[1]">Unofficial web client for Anixart android app, made in Next.JS</p> + <p class="font-light text-[14px] leading-[1]">Unofficial web client for Anixart android app, + made in Next.JS</p> </div> </div> </a> <div class="flex flex-wrap gap-4"> <a href="https://github.com/Radiquum/TG-Photos" target="_blank" referrerpolicy="origin"> - <div class="bg-[#0E1621] text-white w-[200px] h-[180px] p-2 flex flex-col justify-around relative overflow-hidden"> - <img class="absolute [filter:darken(10%)] bottom-[50%] right-[15%] w-[173px] h-[100px]" alt="" src="./static/assets/TG_Photos.png"/> + <div + class="bg-[#0E1621] text-white w-[200px] h-[180px] p-2 flex flex-col justify-around relative overflow-hidden"> + <img class="absolute [filter:darken(10%)] bottom-[50%] right-[15%] w-[173px] h-[100px]" + alt="" src="./static/assets/TG_Photos.png" /> <div class="flex flex-col justify-end h-full gap-1"> <p class="font-medium text-[24px] leading-[1]">TG-Photos</p> - <p class="font-light text-[14px] leading-[1]">Telegram bot to use telegram as a Google Photo alternative</p> + <p class="font-light text-[14px] leading-[1]">Telegram bot to use telegram as a Google + Photo alternative</p> </div> </div> </a> <a href="https://radiquum.github.io/WordGen" target="_blank" referrerpolicy="origin"> - <div class="bg-[#F5F5F5] text-black w-[200px] h-[180px] p-2 flex flex-col justify-around relative overflow-hidden"> - <img class="absolute [filter:darken(10%)] top-0 left-0 right-0 w-[200px] object-cover" alt="" src="./static/assets/WordGen.png"/> + <div + class="bg-[#F5F5F5] text-black w-[200px] h-[180px] p-2 flex flex-col justify-around relative overflow-hidden"> + <img class="absolute [filter:darken(10%)] top-0 left-0 right-0 w-[200px] object-cover" + alt="" src="./static/assets/WordGen.png" /> <div class="flex flex-col justify-end h-full gap-1"> <p class="font-medium text-[24px] leading-[1]">WordGen</p> - <p class="font-light text-[14px] leading-[1]">Random word generator inspired by @tsoding</p> + <p class="font-light text-[14px] leading-[1]">Random word generator inspired by @tsoding + </p> </div> </div> </a> <a href="https://github.com/Radiquum/furaffinity-dl" target="_blank" referrerpolicy="origin"> - <div class="bg-black text-white w-[200px] h-[180px] p-2 flex flex-col justify-around relative overflow-hidden"> + <div + class="bg-black text-white w-[200px] h-[180px] p-2 flex flex-col justify-around relative overflow-hidden"> <div class="flex flex-col justify-end h-full gap-1"> <p class="font-medium text-[24px] leading-[1]">furaffinity-dl</p> - <p class="font-light text-[14px] leading-[1]">Modification of the original project to add more functionality</p> + <p class="font-light text-[14px] leading-[1]">Modification of the original project to + add more functionality</p> </div> </div> </a> @@ -217,7 +228,7 @@ </div> </div> <!-- Contact and Friends links Links --> - <div class="flex flex-col w-[416px] gap-8"> + <div class="flex flex-col w-[416px] gap-4"> <!-- Contact Links --> <div class="flex flex-col gap-4"> <div class="relative w-[416px] h-[180px] flex justify-end items-end bg-bg-pink"> @@ -225,7 +236,7 @@ </div> <div class="flex flex-wrap gap-4"> <a href="https://t.me/radiquum" target="_blank" referrerpolicy="origin"> - <div class="bg-white text-black w-[200px] h-[90px] px-4 py-2 flex gap-2 items-center"> + <div class="bg-white text-black w-[200px] h-[81px] px-4 py-2 flex gap-2 items-center"> <img class="w-10 h-10" alt="" src="./static/assets/Telegram.png" /> <div class="flex flex-col gap-1"> <p class="font-medium text-[24px] leading-[1]">Telegram</p> @@ -234,7 +245,7 @@ </div> </a> <a href="https://matrix.to/#/@radiquum:wah.su" target="_blank" referrerpolicy="origin"> - <div class="bg-white text-black w-[200px] h-[90px] px-4 py-2 flex gap-2 items-center"> + <div class="bg-white text-black w-[200px] h-[81px] px-4 py-2 flex gap-2 items-center"> <img class="w-10 h-10" alt="" src="./static/assets/matrix-favicon.svg" /> <div class="flex flex-col gap-1"> <p class="font-medium text-[24px] leading-[1]">Matrix</p> @@ -243,7 +254,7 @@ </div> </a> <a href="https://vk.com/radiquum" target="_blank" referrerpolicy="origin"> - <div class="bg-white text-black w-[200px] h-[90px] px-4 py-2 flex gap-2 items-center"> + <div class="bg-white text-black w-[200px] h-[81px] px-4 py-2 flex gap-2 items-center"> <img class="w-10 h-10" alt="" src="./static/assets/VKLogo.png" /> <div class="flex flex-col gap-1"> <p class="font-medium text-[24px] leading-[1]">VK</p> @@ -251,7 +262,7 @@ </div> </div> </a> - <div class="bg-white text-black w-[200px] h-[90px] px-4 py-2 flex gap-2 items-center"> + <div class="bg-white text-black w-[200px] h-[81px] px-4 py-2 flex gap-2 items-center"> <img class="w-10" alt="" src="./static/assets/discord-mark-blue.png" /> <div class="flex flex-col gap-1"> <p class="font-medium text-[24px] leading-[1]">Discord</p> @@ -263,7 +274,41 @@ <!-- Friends Links --> <div class="flex flex-col gap-4"> <div class="relative w-[416px] h-[180px] flex justify-end items-end bg-black"> - <p class="font-bold text-[40px] leading-[1] p-[8px]">PROJECTS</p> + <p class="font-bold text-[40px] leading-[1] p-[8px] text-right">COLLECTIONS & FRIENDS</p> + </div> + <div class="flex flex-wrap gap-4"> + <a href="https://t.me/red_panda_stickers" target="_blank" referrerpolicy="origin"> + <div class="bg-white text-black w-[200px] h-[81px] p-2 flex gap-2 items-end"> + <div class="flex flex-col gap-1"> + <p class="font-medium text-[18px] leading-[1]">Red Pandas Stickers</p> + <p class="font-light text-[14px] leading-[1]">Telegram channel with red panda sticker packs</p> + </div> + </div> + </a> + <a href="https://wahs.wah.su" target="_blank" referrerpolicy="origin"> + <div class="bg-white text-black w-[200px] h-[81px] p-2 flex gap-2 items-end"> + <div class="flex flex-col gap-1"> + <p class="font-medium text-[18px] leading-[1]">Red Panda Images</p> + <p class="font-light text-[14px] leading-[1]">Collection with 3000+ Photos and Videos of a red pandas</p> + </div> + </div> + </a> + <a href="https://vk.com/blepstash" target="_blank" referrerpolicy="origin"> + <div class="bg-white text-black w-[200px] h-[81px] p-2 flex gap-2 items-end"> + <div class="flex flex-col gap-1"> + <p class="font-medium text-[18px] leading-[1]">blep stash</p> + <p class="font-light text-[14px] leading-[1]">VK Group of a photographer. City and Trains photography</p> + </div> + </div> + </a> + <a href="https://github.com/itc1205" target="_blank" referrerpolicy="origin"> + <div class="bg-white text-black w-[200px] h-[81px] p-2 flex gap-2 items-end"> + <div class="flex flex-col gap-1"> + <p class="font-medium text-[18px] leading-[1]">itc1205</p> + <p class="font-light text-[14px] leading-[1]">Github profile of another furry programmer</p> + </div> + </div> + </a> </div> </div> </div> diff --git a/static/tailwind.css b/static/tailwind.css index df0a575..7b78d04 100644 --- a/static/tailwind.css +++ b/static/tailwind.css @@ -838,6 +838,14 @@ video { height: 2rem; } +.h-\[81px\] { + height: 81px; +} + +.h-\[82px\] { + height: 82px; +} + .max-h-\[40vh\] { max-height: 40vh; } @@ -1203,6 +1211,10 @@ video { text-align: center; } +.text-right { + text-align: right; +} + .text-2xl { font-size: 1.5rem; line-height: 2rem; @@ -1256,6 +1268,10 @@ video { font-size: 12px; } +.text-\[18px\] { + font-size: 18px; +} + .font-bold { font-weight: 700; }