From 698d5e74be8e56a5551709dccc02c8d8e7ebaa32 Mon Sep 17 00:00:00 2001
From: Alam Guardin <alamguardin@gmail.com>
Date: Tue, 6 Aug 2024 21:53:24 -0500
Subject: style: create shadow content

---
 src/components/List.astro   | 10 +++++++++-
 src/components/Shadow.astro | 40 ++++++++++++++++++++++++++++++++++++++++
 src/pages/index.astro       |  6 +++++-
 3 files changed, 54 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Shadow.astro

(limited to 'src')

diff --git a/src/components/List.astro b/src/components/List.astro
index 01998f9..d260e17 100644
--- a/src/components/List.astro
+++ b/src/components/List.astro
@@ -11,4 +11,12 @@ import Link from "./Link.astro";
     <Link></Link>
     <Link></Link>
     <Link></Link>
-</div>
\ No newline at end of file
+</div>
+
+<style>
+    .list {
+        margin-top: 3rem;
+        display: grid;
+        gap: 1rem;
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/Shadow.astro b/src/components/Shadow.astro
new file mode 100644
index 0000000..44344f6
--- /dev/null
+++ b/src/components/Shadow.astro
@@ -0,0 +1,40 @@
+<div class="shadow">
+    <button class="shadow-button">
+        <span class="shadow-button-text">Explore More</span>
+        <span class="shadow-button-icon">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748ZM12.1779 7.17624C11.4834 7.48982 11 8.18846 11 9C11 10.1046 11.8954 11 13 11C13.8115 11 14.5102 10.5166 14.8238 9.82212C14.9383 10.1945 15 10.59 15 11C15 13.2091 13.2091 15 11 15C8.79086 15 7 13.2091 7 11C7 8.79086 8.79086 7 11 7C11.41 7 11.8055 7.06167 12.1779 7.17624Z"></path></svg>
+        </span>
+    </button>
+</div>
+
+<style>
+    .shadow {
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        height: 11.25rem;
+        background: rgb(9,9,11);
+        background: linear-gradient(0deg, rgba(9,9,11,1) 0%, rgba(9,9,11,0) 100%);
+    }
+
+    .shadow-button {
+        margin: auto;
+        padding: 1rem 2.375rem;
+        display: flex;
+        align-items: center;
+        gap: 1.125rem;
+        border: none;
+        outline: none;
+        background: var(--zinc-50);
+        font-size: 0.875rem;
+        color: var(--zinc-950);
+        border-radius: 1.5rem;
+        cursor: pointer;
+    }
+
+    .shadow-button-icon {
+        width: 1.5rem;
+        height: 1.5rem;
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 05f6222..088597a 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -2,20 +2,24 @@
 import Layout from '../layouts/Layout.astro';
 import Profile from '../components/Profile.astro';
 import List from '../components/List.astro';
+import Shadow from '../components/Shadow.astro'
 ---
 
 <Layout title="Welcome to Astro.">
     <main class="container">
         <Profile></Profile>
         <List></List>
+        <Shadow></Shadow>
     </main>
 </Layout>
 
 <style>
 	.container {
+        position: relative;
         margin: auto;
         max-width: 600px;
-        height: auto;
         width: 90%;
+        height: 100vh;
+        overflow: hidden;
     }
 </style>
-- 
cgit v1.2.3