Initial commit

author: Matthew Lemon <y@yulqen.org> 2024-03-18 15:58:01 +0000
committer: Matthew Lemon <y@yulqen.org> 2024-03-18 15:58:01 +0000
commit: 050504c848e5cca96d1af31aad038c712ec750ed (patch)
tree: dbfe504b5749bc59a08c744d0460856567975ab1 /index_alt.html
1 files changed, 183 insertions, 0 deletions
diff --git a/index_alt.html b/index_alt.html
new file mode 100644
index 0000000..aac4c67
--- /dev/null
+++ b/index_alt.html
@@ -0,0 +1,183 @@
+<!-- from https://www.youtube.com/watch?v=ypYZBd80EUg -->
+
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width" />
+        <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8">
+        <title>Index_alt</title>
+    </head>
+    <body>
+        <div class="flex flex-col min-h-[100dvh]">
+            <header class="px-4 lg:px-6 py-6 lg:py-10 flex flex-col items-center justify-center space-y-2 text-center">
+                <div class="space-y-2">
+                    <h1 class="text-3xl font-bold tracking-tighter sm:text-5xl">Creative Works by Joanna</h1>
+                    <p class="max-w-[600px] text-gray-500 md:text-xl/relaxed xl:text-xl/relaxed dark:text-gray-400">
+                    Welcome to my gallery of creativity. Here you'll find a collection of my latest works, from paintings to
+                    pottery, all lovingly crafted by hand.
+                    </p>
+                </div>
+                <nav class="flex flex-col gap-2 min-[600px]:flex-row">
+                    <a
+                            class="inline-flex h-10 items-center justify-center rounded-md text-sm hover:underline underline-offset-4"
+                            href="#"
+                            >
+                            Gallery
+                    </a>
+                        <a
+                                class="inline-flex h-10 items-center justify-center rounded-md text-sm hover:underline underline-offset-4"
+                                href="#"
+                                >
+                                About Me
+                        </a>
+                            <a
+                                    class="inline-flex h-10 items-center justify-center rounded-md text-sm hover:underline underline-offset-4"
+                                    href="#"
+                                    >
+                                    Contact
+                            </a>
+                </nav>
+            </header>
+            <main class="grid gap-4 px-4 md:px-6 lg:gap-10 lg:grid-cols-[1fr_300px]">
+                <div class="flex flex-col gap-2">
+                    <div class="grid gap-2">
+                        <div class="rounded-lg border bg-card text-card-foreground shadow-sm" data-v0-t="card">
+                            <div class="space-y-1.5 p-6 flex flex-col gap-1">
+                                <h3 class="text-base font-bold">Paintings</h3>
+                                <p class="text-sm text-gray-500 dark:text-gray-400">Beautiful art created with passion.</p>
+                            </div>
+                            <div class="p-6 grid gap-4">
+                                <img
+                                        src="/placeholder.svg"
+                                        alt="Paintings"
+                                        class="aspect-[2/1] rounded-xl overflow-hidden object-cover object-center"
+                                        width="400"
+                                        height="200"
+                                        />
+                                <button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2">
+                                    View Gallery
+                                </button>
+                            </div>
+                        </div>
+                        <div class="rounded-lg border bg-card text-card-foreground shadow-sm" data-v0-t="card">
+                            <div class="space-y-1.5 p-6 flex flex-col gap-1">
+                                <h3 class="text-base font-bold">Pottery</h3>
+                                <p class="text-sm text-gray-500 dark:text-gray-400">Unique and elegant ceramic creations.</p>
+                            </div>
+                            <div class="p-6 grid gap-4">
+                                <img
+                                        src="/placeholder.svg"
+                                        alt="Pottery"
+                                        class="aspect-[2/1] rounded-xl overflow-hidden object-cover object-center"
+                                        width="400"
+                                        height="200"
+                                        />
+                                <button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2">
+                                    View Gallery
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="grid gap-2">
+                        <div class="rounded-lg border bg-card text-card-foreground shadow-sm" data-v0-t="card">
+                            <div class="space-y-1.5 p-6 flex flex-col gap-1">
+                                <h3 class="text-base font-bold">Crafts</h3>
+                                <p class="text-sm text-gray-500 dark:text-gray-400">Handmade treasures for every occasion.</p>
+                            </div>
+                            <div class="p-6 grid gap-4">
+                                <img
+                                        src="/placeholder.svg"
+                                        alt="Crafts"
+                                        class="aspect-[2/1] rounded-xl overflow-hidden object-cover object-center"
+                                        width="400"
+                                        height="200"
+                                        />
+                                <button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2">
+                                    View Gallery
+                                </button>
+                            </div>
+                        </div>
+                        <div class="rounded-lg border bg-card text-card-foreground shadow-sm" data-v0-t="card">
+                            <div class="space-y-1.5 p-6 flex flex-col gap-1">
+                                <h3 class="text-base font-bold">Artwork</h3>
+                                <p class="text-sm text-gray-500 dark:text-gray-400">Creative expressions in various mediums.</p>
+                            </div>
+                            <div class="p-6 grid gap-4">
+                                <img
+                                        src="/placeholder.svg"
+                                        alt="Artwork"
+                                        class="aspect-[2/1] rounded-xl overflow-hidden object-cover object-center"
+                                        width="400"
+                                        height="200"
+                                        />
+                                <button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2">
+                                    View Gallery
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex flex-col gap-4 min-w-[300px]">
+                    <div class="flex flex-col gap-2">
+                        <div class="space-y-2">
+                            <h2 class="text-2xl font-bold tracking-tighter sm:text-3xl">Latest Creations</h2>
+                            <p class="text-gray-500 dark:text-gray-400">Crafted with Care</p>
+                        </div>
+                        <div class="grid gap-4">
+                            <img
+                                    src="/placeholder.svg"
+                                    alt="Latest Creations"
+                                    class="aspect-square rounded-xl overflow-hidden object-cover object-center"
+                                    width="300"
+                                    height="300"
+                                    />
+                            <img
+                                    src="/placeholder.svg"
+                                    alt="Latest Creations"
+                                    class="aspect-square rounded-xl overflow-hidden object-cover object-center"
+                                    width="300"
+                                    height="300"
+                                    />
+                        </div>
+                    </div>
+                    <div class="flex flex-col gap-2">
+                        <div class="space-y-2">
+                            <h2 class="text-2xl font-bold tracking-tighter sm:text-3xl">Featured Collection</h2>
+                            <p class="text-gray-500 dark:text-gray-400">Discover the Artistry</p>
+                        </div>
+                        <div class="grid gap-4">
+                            <img
+                                    src="/placeholder.svg"
+                                    alt="Featured Collection"
+                                    class="aspect-square rounded-xl overflow-hidden object-cover object-center"
+                                    width="300"
+                                    height="300"
+                                    />
+                            <img
+                                    src="/placeholder.svg"
+                                    alt="Featured Collection"
+                                    class="aspect-square rounded-xl overflow-hidden object-cover object-center"
+                                    width="300"
+                                    height="300"
+                                    />
+                        </div>
+                    </div>
+                </div>
+            </main>
+            <footer class="flex flex-col gap-2 sm:flex-row py-6 w-full shrink-0 items-center px-4 md:px-6 border-t">
+                <p class="text-xs text-gray-500 dark:text-gray-400">© 2024 Acme Inc. All rights reserved.</p>
+                <nav class="sm:ml-auto flex gap-4 sm:gap-6">
+                    <a class="text-xs hover:underline underline-offset-4" href="#">
+                        Terms of Service
+                    </a>
+                    <a class="text-xs hover:underline underline-offset-4" href="#">
+                        Privacy
+                    </a>
+                </nav>
+            </footer>
+        </div>
+    </body>
+</html>
+
+
author	Matthew Lemon <y@yulqen.org>	2024-03-18 15:58:01 +0000
committer	Matthew Lemon <y@yulqen.org>	2024-03-18 15:58:01 +0000
commit	050504c848e5cca96d1af31aad038c712ec750ed (patch)
tree	dbfe504b5749bc59a08c744d0460856567975ab1 /index_alt.html