algorithm background watermark

Edurz135 · Dec 6, 2023 · c6af7b3 · c6af7b3
1 parent 2eb6d7f
commit c6af7b3
Showing 1 changed file with 79 additions and 3 deletions.
diff --git a/src/pages/home/algorithmSection/algorithm.section.jsx b/src/pages/home/algorithmSection/algorithm.section.jsx
@@ -1,9 +1,50 @@
 import React from "react";
 // import "./home.section.css";
+
+const CustomWaterMark = (props) => {
+  return (
+    <span
+      style={{
+        display: "inline-block",
+        position: "relative",
+        transform: `translateX(${props.translateX})`,
+      }}
+    >
+      <span className="opacity-50">
+        <p
+          className="font-fheader"
+          style={{
+            WebkitTextStroke: "3px " + props.color,
+            WebkitTextFillColor:
+              props.variant == "outlined" ? "transparent" : props.color,
+            fontSize: "5.8rem",
+            lineHeight: "5.5rem",
+            letterSpacing: "0.6rem",
+          }}
+        >
+          PUB. IN
+        </p>
+        <p
+          className="font-fheader"
+          style={{
+            WebkitTextStroke: "3px " + props.color,
+            WebkitTextFillColor:
+              props.variant == "outlined" ? "transparent" : props.color,
+            fontSize: "12rem",
+            lineHeight: "8rem",
+          }}
+        >
+          1956
+        </p>
+      </span>
+    </span>
+  );
+};
+
 export default function AlgorithmSection() {
   return (
-    <section className="h-screen bg-con-primary" id="algorithm">
-      <div className="relative h-full p-20 z-30 flex items-center justify-center">
+    <section className="relative h-screen bg-con-primary" id="algorithm">
+      <div className="relative h-full w-full p-20 z-30 flex items-center justify-center">
         <div className="absolute z-30">
           <div className="flex flex-column align-center text-center font-fdecorated">
             <a
@@ -24,7 +65,42 @@ export default function AlgorithmSection() {
         </div>
         <div className="absolute z-20">
           <div className="flex flex-column align-center">
-            <img className="translate-x-[-1%] translate-y-[-38.5%]" src="/EdgerNecklace.png" />
+            <img
+              className="translate-x-[-1%] translate-y-[-38.5%]"
+              src="/EdgerNecklace.png"
+            />
+          </div>
+        </div>
+        <div className="absolute z-0">
+          <div className="flex flex-column w-screen">
+            <div>
+              <CustomWaterMark
+                translateX={"-50%"}
+                variant={"outlined"}
+                color={"#dc2510"}
+              />
+            </div>
+            <div>
+              <CustomWaterMark
+                translateX={"10%"}
+                variant={"filled"}
+                color={"#f9c42c"}
+              />
+            </div>
+            <div>
+              <CustomWaterMark
+                translateX={"70%"}
+                variant={"outlined"}
+                color={"#dc2510"}
+              />
+            </div>
+            <div>
+              <CustomWaterMark
+                translateX={"130%"}
+                variant={"filled"}
+                color={"#f9c42c"}
+              />
+            </div>
           </div>
         </div>
       </div>