Show and display the Laudiolin logo

seiKiMo-Inc · Sep 10, 2023 · 67330f1 · 67330f1
1 parent b662aaa
commit 67330f1
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 0 deletions.
diff --git a/public/laudiolin.png b/public/laudiolin.png
diff --git a/src/css/pages/LandingPage.scss b/src/css/pages/LandingPage.scss
@@ -13,6 +13,20 @@
     @apply w-full h-full;
 }
 
+.LandingPage_Image {
+    @apply absolute;
+
+    width: 384px;
+    height: 384px;
+
+    left: 10%;
+
+    background: var(--bg-color);
+
+    border-radius: 100%;
+    align-self: center;
+}
+
 .LandingPage_TextContainer {
     @apply flex flex-col;
 
@@ -55,6 +69,15 @@
 }
 
 @media screen and (max-width: 1200px) {
+    .LandingPage_Image {
+        display: none;
+    }
+
+    .LandingPage_Container {
+        @apply flex flex-col justify-center items-center;
+        @apply w-full h-full p-0;
+    }
+
     .LandingPage_Segment {
         background-size: cover !important;
         background-repeat: no-repeat !important;

diff --git a/src/ui/pages/LandingPage.tsx b/src/ui/pages/LandingPage.tsx
@@ -20,6 +20,12 @@ function Laudiolin() {
             <div className={"LandingPage_Container"}
                  style={{ background: "linear-gradient(90deg, transparent, #4d7bd6)" }}
             >
+                <img
+                    className={"LandingPage_Image"}
+                    src={"laudiolin.png"}
+                    alt={"Laudiolin"}
+                />
+
                 <div className={"LandingPage_TextContainer"}
                      style={{ alignItems: "end", textAlign: "end", marginLeft: "50%" }}
                 >