setup - working

LatentArchitect · May 13, 2024 · df3a786 · df3a786
1 parent 6b6bf40
commit df3a786
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 9 deletions.
diff --git a/code/css/styles.css b/code/css/styles.css
@@ -1,9 +1,26 @@
 body {
+    margin: 0;
     color: #D3D3D3;
     background-color: #020202;
     font-family: "Anonymous Pro", monospace;
 }
 
+.container_wrapper_page {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    padding: 0px;
+    margin: 0px;
+    display: block;
+}
+
+.container-wrapper-content {
+    position: relative;
+    height: 100%;
+    margin: 8px;
+    margin-inline: 10vw;
+}
+
 p {
     font-family: "Poppins", sans-serif;
     /* letter-spacing: -0.05em; */
@@ -13,10 +30,41 @@ p {
 .main-title {
     text-transform: uppercase;
     color: #fff;
+    z-index: 10;
 }
 
-.container-wrapper-content {
+.wrapper-section-landing {
+    position: absolute;
+    justify-content: space-between;
+    /* padding-inline: 200px; */
+    z-index: 10;
+}
+
+.image-bg-custom {
+    position: absolute;
+    top: 0px; right: 0px;
+    width: min-content;
+    height: min-content;
+    /* padding-inline: 10vw; */
+    /* padding-top: 8px; */
     display: flex;
-    justify-content: center;
-    padding-inline: 100px;
+    justify-content: right;
+    z-index: 1;
+
+    & img {
+        right: 0px;
+        /* z-index: 1; */
+        background: #000;
+        opacity: 0.7;
+        z-index: 1;
+    }
+}
+
+.asset-filter-dark {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    z-index: 2;
+    background: linear-gradient(to right, #020202, #02020200);
+    box-shadow: inset -32px 32px 34px 2px #020202;
 }
diff --git a/index.html b/index.html
@@ -10,24 +10,25 @@
     <title>Latent Architect's Garden</title>
 </head>
 <body>
+    <div class="container-wrapper-footer"></div>
     <div class="container_wrapper_page">
-        <div class="container-wrapper-nav"></div>
         <div class="container-wrapper-content">
+            <div class="image-bg-custom">
+                <div class="asset-filter-dark"></div>
+                <img src="assets/animas-rage.png">
+            </div>
             <div class="wrapper-section-landing">
                 <div class="wrapper-text-title">
                     <h1 class="main-title">Garden</h1>
                 </div>
-                <div>
+                <div class="main-content">
                     <p>
                         Hello... This is my digital garden and overall where I share my notes, documentation, thoughts, opinions, and anything else I feel might provide some value to myself or others.
                     </p>
                 </div>
             </div>
-            <div class="image-inline-custom">
-                <img src="assets/animas-rage.png">
-            </div>
         </div>
-        <div class="container-wrapper-footer"></div>
+        <div class="container-wrapper-nav"></div>
     </div>
 </body>
 </html>