suyono/blog-ts
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

upper body finished

Browse Source
This commit is contained in:
Suyono
2023-09-25 22:17:46 +10:00
parent bfed20c1c1
commit 2dbf116ddf
6 changed files with 62 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/globals.css
View File

@@ -1,7 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
.cover {
background-image: url("../public/assets/placeholder.webp");
}

64
app/page.tsx
View File

@@ -2,30 +2,46 @@ import Image from "next/image";
export default function Home() {
return (
<div className="flex flex-col bg-white">
<div className="ml-20 py-10">
<p>SUYONO</p>
</div>
<div className="bg-gray-100">
<div className="flex flex-row ml-20">
<div>one</div>
<div>two</div>
</div>
</div>
<div className="bg-cover bg-center h-screen flex flex-col-reverse cover">
<div className="bg-neutral-100 bg-opacity-40 flex flex-col py-10">
<p className="text-white text-center">SUYONO</p>
<p className="text-white text-center">A Tech Archive</p>
</div>
</div>
<div className="flex flex-row justify-center">
<div className="border">
<Image src="/assets/pthumb.webp" alt="post thumbnail" width={454} height={341} />
<div className="flex flex-col">
</div>
</div>
<div className="flex flex-col bg-white">
<div className="ml-20 py-8">
<p className="font-sans text-2xl font-extralight">SUYONO</p>
</div>
<div className="bg-gray-100">
<div className="flex flex-row ml-20">
<a href="#" className="m-2 font-extralight text-sm">
Home
</a>
<a href="#" className="m-2 font-extralight text-sm">
About
</a>
<a href="#" className="m-2 font-extralight text-sm">
Blog
</a>
</div>
</div>
)
<div className="bg-cover bg-center flex flex-col-reverse bg-blog-cover">
<div className="bg-neutral-100 bg-opacity-30 flex flex-col py-10">
<p className="text-white text-center text-7xl font-extralight font-sans mb-6">
SUYONO
</p>
<p className="text-white text-center font-sans font-extralight text-xl mb-10">
A Tech Archive
</p>
</div>
<div className="h-64"></div> {/* spacer */}
<div className="h-64"></div> {/* spacer */}
</div>
<div className="flex flex-row justify-center">
<div className="border">
<Image
src="/assets/pthumb.webp"
alt="post thumbnail"
width={454}
height={341}
/>
<div className="flex flex-col"></div>
</div>
</div>
</div>
);
}