68 lines
3.2 KiB
Text
68 lines
3.2 KiB
Text
<main class="grid grid-cols-[25%_50%_25%]">
|
|
<div class="flex flex-col items-center mt-5 gap-5">
|
|
<input placeholder="Search" class="border border-gray-300 px-4 py-3 rounded-xl outline-none w-[90%]"/>
|
|
<div class="text-sm rounded-xl border border-gray-300 p-2 w-[90%]">
|
|
<textarea placeholder="What's on your mind?" class="h-[150px] w-full resize-none border-none focus:ring-0"></textarea>
|
|
<div>
|
|
<button class="text-white bg-black px-3 py-1 rounded-xl">Post</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="relative border border-gray-300 shadow-md mt-5 rounded-t-xl overflow-hidden">
|
|
<div class="relative w-full aspect-[3/1]">
|
|
<img src={~p"/images/banner.jpg"} class="w-full h-full object-cover" />
|
|
<img src={~p"/images/avatar.jpg"} class="absolute left-4 bottom-0 translate-y-1/2 rounded-full border-4 border-white w-[8.33vw] h-[8.33vw] min-w-[80px] min-h-[80px] max-w-[160px] max-h-[160px]"/>
|
|
</div>
|
|
<div class="mt-[4.5vw] px-4 flex flex-col">
|
|
<span class="text-xl font-bold">Mirai Kumiko</span>
|
|
<span class="text-gray-500">@miraikumiko@nulla.social</span>
|
|
<div class="text-sm pt-2">
|
|
<p>Cryptopunk in the past.</p>
|
|
<p>Silent girl now and admin of this instance.</p>
|
|
<br>
|
|
<p>Grew up on hacker culture, philosophy, good old movies and anime. That's why I love cyberpunk — modern philosophy and technolization in one bottle. I also use Linux on a first-name basis and can program.</p>
|
|
<br>
|
|
<p>Can play shooters, chess and other games where strategy and psychological analysis of opponents are important.</p>
|
|
<br>
|
|
<p>Bunnies and rabbits are superior!</p>
|
|
</div>
|
|
<dl class="mt-2 space-y-1 text-sm text-gray-700">
|
|
<div class="flex items-center gap-2">
|
|
<dt><.icon name="hero-map-pin" class="mt-0.5 h-5 w-5 flex-none" /></dt>
|
|
<dd>Catalonia, Spain</dd>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<dt><.icon name="hero-cake" class="mt-0.5 h-5 w-5 flex-none" /></dt>
|
|
<dd>2005/02/25 (20 years old)</dd>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<dt><.icon name="hero-calendar" class="mt-0.5 h-5 w-5 flex-none" /></dt>
|
|
<dd>03/20/2025 (2mo ago)</dd>
|
|
</div>
|
|
</dl>
|
|
<dl class="pt-5">
|
|
<div class="flex items-center gap-5">
|
|
<dt>Website</dt>
|
|
<dd>
|
|
<a href="https://miraikumiko.com" class="text-[#1D9BF0]">miraikumiko.com</a>
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
<div class="flex mt-5 gap-3">
|
|
<a href="/@miraikumiko">1.7K <span class="text-gray-700">Posts</span></a>
|
|
<a href="/@miraikumiko/following">33 <span class="text-gray-700">Following</span></a>
|
|
<a href="/@miraikumiko/followers">31 <span class="text-gray-700">Followers</span></a>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-between px-20 py-2 mt-5 border border-gray-300">
|
|
<div>Posts</div>
|
|
<div>Posts and replies</div>
|
|
<div>Media</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col items-center mt-5 gap-5">
|
|
<div class="text-sm rounded-xl border border-gray-300 p-4 w-[90%] h-[300px]">
|
|
|
|
</div>
|
|
</div>
|
|
</main>
|