Radiquum/radiquum.github.io
1
0
Fork 0
mirror of https://github.com/Radiquum/radiquum.github.io.git synced 2025-04-05 15:54:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add button to header

Browse source
This commit is contained in:
Kentai Radiquum 2024-09-15 00:57:17 +05:00
parent bde6476631
commit 6d799ebd79
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
2 changed files with 15 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
index.html
View file

@ -8,13 +8,17 @@
</head>
<body class="overflow-x-hidden bg-bg-black">
<header class="fixed top-0 left-0 right-0 z-10 w-full text-white opacity-[var(--header-opacity,0)] bg-bg-pink" id="header">
<div class="container mx-auto">
<div class="container flex items-center justify-between gap-1 mx-auto">
<a href="#section_landing">
<div class="flex items-center gap-4 px-4 py-4">
<img src="./static/avatar_512.png" alt="" class="w-[64px] lg:w-[64px] 2xl:w-[64px]"/>
<h1 class="text-xl font-semibold lg:text-2xl xl:text-3xl 2xl:text-4xl">KENTAI RADIQUUM</h1>
</div>
</a>
<div class="flex gap-2">
<a class="px-4 py-2 text-xl hover:underline bg-bg-gray" href="#section_about">ABOUT ME</a>
<a class="px-4 py-2 text-xl hover:underline bg-bg-gray" href="#section_links">LINKS</a>
</div>
</div>
</header>
<div class="h-screen" id="section_landing">
@ -46,7 +50,7 @@
</div>
</div>
<div class="flex items-end justify-end w-full max-w-[45%] gap-4 p-8 font-medium text-4xl mb-[3%]">
<a class="border-black border-4 hover:translate-x-2 hover:-translate-y-2 shadow-transparent hover:shadow-md hover:shadow-black transition-all border-t-8 border-l-8 border-solid w-[320px] h-[75px] flex items-end justify-end pr-2 pb-2 bg-bg-blue" href="#section_about">READ MORE</a>
<a class="border-black border-4 hover:translate-x-2 hover:-translate-y-2 shadow-transparent hover:shadow-md hover:shadow-black transition-all border-t-8 border-l-8 border-solid w-[320px] h-[75px] flex items-end justify-end pr-2 pb-2 bg-bg-blue" href="#section_about">ABOUT ME</a>
<a class="border-black border-4 hover:translate-x-2 hover:-translate-y-2 shadow-transparent hover:shadow-md hover:shadow-black transition-all border-t-8 border-l-8 border-solid w-[300px] h-[75px] flex items-end justify-end pr-2 pb-2 bg-bg-blue" href="#section_links">LINKS</a>
</div>
</div>

9
static/tailwind.css
View file

@ -766,6 +766,10 @@ video {
gap: 2rem;
}
.gap-1 {
gap: 0.25rem;
}
.overflow-x-hidden {
overflow-x: hidden;
}
@ -844,6 +848,11 @@ video {
padding-bottom: 2rem;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.pb-2 {
padding-bottom: 0.5rem;
}