From bfd6ecc50cbc41e2d0d43f1a25907fc16996ddcc Mon Sep 17 00:00:00 2001
From: brooke <brooke@myco.systems>
Date: Fri, 14 Jul 2023 01:46:09 +0000
Subject: [PATCH] Update 'index.html'

Inspiration:
https://codepen.io/pleasedonotdisturb/pen/oNQLVXB
https://codepen.io/simeydotme/pen/abqYGWa
---
 index.html | 155 ++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 148 insertions(+), 7 deletions(-)
diff --git a/index.html b/index.html
index b75ec94..351cc76 100644
--- a/index.html
+++ b/index.html
@@ -1,23 +1,164 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Your Website Title</title>
     <style>
-        body {
-            font-family: Arial, sans-serif;
+        @import url('https://fonts.googleapis.com/css2?family=OpenSans:wght@400;700&display=swap');
+
+        * {
             margin: 0;
             padding: 0;
+            box-sizing: border-box;
+            font-family: OpenSans, sans-serif;
+        }
+
+        body {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            min-height: 100vh;
+            background: #f5f5f5;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .about-me {
+            padding: 2.5rem;
+        }
+
+        .wrapper {
+            background-color: #223142;
+            position: relative;
+            width: 100%;
+            min-height: 100vh;
+            padding: 20px;
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            align-content: center;
+            justify-content: center;
+            gap: 24px;
+        }
+
+        .card {
+            cursor: pointer;
+            position: relative;
+            background: #000;
+            border-radius: 10px;
+            overflow: hidden;
+            width: 100%;
+            height: 25rem;
+            box-shadow: rgba(255, 255, 255, 0.3) 0 5vw 6vw -8vw,
+            rgba(255, 255, 255, 0) 0 4.5vw 5vw -6vw,
+            rgba(50, 50, 80, 0.5) 0px 4vw 8vw -2vw,
+            rgba(0, 0, 0, 0.8) 0px 4vw 5vw -3vw;
+        }
+
+        .poster {
+            position: relative;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+        }
+
+        .poster::before {
+            content: '';
+            position: absolute;
+            bottom: -45%;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 1;
+            transition: .3s;
+            object-fit: cover;
+        }
+
+        .card:hover .poster::before {
+            bottom: 0;
+        }
+
+        .poster img {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            transition: .3s;
+        }
+
+        .card:hover .poster img {
+            transform: scale(1.1);
+        }
+
+        .details {
+            position: absolute;
+            bottom: -100%;
+            left: 0;
+            width: 100%;
+            height: auto;
+            padding: 1.5em 1.5em 2em;
+            background: #000a;
+            backdrop-filter: blur(16px) saturate(120%);
+            transition: .3s;
+            color: #fff;
+            z-index: 2;
+        }
+
+        .card:hover .details {
+            bottom: 0;
+            padding-bottom: 1.5rem;
+            padding-top: 1.5rem;
+        }
+
+        .details h1,
+        .details h2 {
+            font-weight: 700;
+        }
+
+        .details h1 {
+            font-size: 1.5em;
+            margin-bottom: 5px;
+        }
+
+        .details h2 {
+            font-weight: 400;
+            font-size: 1em;
+            opacity: .6;
         }
     </style>
 </head>
+
 <body>
-    <h1>Welcome to Your Website</h1>
-    <p>This is a single-file website.</p>
 
-    <script>
-    </script>
+    <div class="wrapper">
+        <div class="card">
+            <div class="poster"><img src="https://i.postimg.cc/jjBSrfnQ/poster1-img.jpg" alt="Location Unknown"></div>
+            <div class="details">
+                <p class="desc">
+                    Description text.
+                </p>
+            </div>
+        </div>
+        <div class="card">
+            <div class="poster"><img src="https://i.postimg.cc/jjBSrfnQ/poster1-img.jpg" alt="Location Unknown"></div>
+            <div class="details">
+                <p class="desc">
+                    Description text.
+                </p>
+            </div>
+        </div>
+    </div>
+
+    <section class="about-me">
+        <h1>About Me</h1>
+        <p>This is a brief description about me.</p>
+    </section>
+
 </body>
-</html>
 
+</html>
\ No newline at end of file
