feat(browse): add grid effect

BlueprintFramework · Nov 26, 2023 · c305a04 · c305a04
1 parent 5945e57
commit c305a04
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 8 deletions.
diff --git a/browse/index.css b/browse/index.css
@@ -22,4 +22,14 @@
 .product-image {
   aspect-ratio: 16/9;
   object-fit: cover
+}
+
+.bp-grid {
+  background-size: 40px 40px;
+  background-image:
+    linear-gradient(to right, #ffffff10 1px, transparent 1px),
+    linear-gradient(to bottom, #ffffff10 1px, transparent 1px);
+}
+.bp-fade {
+  background-image: linear-gradient(to bottom, #21252900, #212529);
 }
diff --git a/browse/index.html b/browse/index.html
@@ -52,14 +52,18 @@
 
 
   <!-- Content -->
-  <div class="container my-5">
-    <div class="row flex-lg-row-reverse align-items-center g-5 pt-5">
-      <div class="col-lg-7 col-sm-12">
-        <h1 class="display-4 fw-normal lh-1 mb-3 d-lg-inline d-none" style="color: #bbd7ff">Discover <b>powerful extensions</b>.</h1>
-        <h1 class="display-4 fw-normal lh-1 mb-2 d-lg-none d-block text-center" style="color: #fff">Discover <b>powerful extensions</b>.</h1>
-      </div>
-      <div class="col-5 d-none d-sm-none d-lg-inline">
-        <img src="/.assets/storage/misc/png/3.png" class="d-block mx-lg-auto img-fluid" alt="byte.sh" loading="lazy" width="700" height="500">
+  <div class="bp-grid">
+    <div class="bp-fade">
+      <div class="container my-5">
+        <div class="row flex-lg-row-reverse align-items-center g-5 pt-5">
+          <div class="col-lg-7 col-sm-12">
+            <h1 class="display-4 fw-normal lh-1 mb-3 d-lg-inline d-none" style="color: #bbd7ff">Discover <b>powerful extensions</b>.</h1>
+            <h1 class="display-4 fw-normal lh-1 mb-2 d-lg-none d-block text-center" style="color: #fff">Discover <b>powerful extensions</b>.</h1>
+          </div>
+          <div class="col-5 d-none d-sm-none d-lg-inline">
+            <img src="/.assets/storage/misc/png/3.png" class="d-block mx-lg-auto img-fluid" alt="byte.sh" loading="lazy" width="700" height="500">
+          </div>
+        </div>
       </div>
     </div>
   </div>