Modified owl placement

HackRU · Aug 30, 2023 · 0c9edcd · 0c9edcd
1 parent c123eed
commit 0c9edcd
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 4 deletions.
diff --git a/public/tailwind-output.css b/public/tailwind-output.css
@@ -734,6 +734,22 @@ video {
   left: -20rem;
 }
 
+.top-\[0rem\] {
+  top: 0rem;
+}
+
+.-top-\[8rem\] {
+  top: -8rem;
+}
+
+.-top-\[5rem\] {
+  top: -5rem;
+}
+
+.-top-\[7rem\] {
+  top: -7rem;
+}
+
 .z-30 {
   z-index: 30;
 }
@@ -1156,6 +1172,10 @@ video {
   overflow: hidden;
 }
 
+.overflow-visible {
+  overflow: visible;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -1935,6 +1955,18 @@ video {
     left: -20rem;
   }
 
+  .lg\:top-\[0rem\] {
+    top: 0rem;
+  }
+
+  .lg\:-top-\[6rem\] {
+    top: -6rem;
+  }
+
+  .lg\:-top-\[8rem\] {
+    top: -8rem;
+  }
+
   .lg\:w-\[32rem\] {
     width: 32rem;
   }
@@ -1970,6 +2002,18 @@ video {
     top: 7rem;
   }
 
+  .xl\:top-\[0rem\] {
+    top: 0rem;
+  }
+
+  .xl\:-top-\[6rem\] {
+    top: -6rem;
+  }
+
+  .xl\:-top-\[8rem\] {
+    top: -8rem;
+  }
+
   .xl\:w-\[40rem\] {
     width: 40rem;
   }

diff --git a/src/components/_Landing/sections/faq/FAQ.tsx b/src/components/_Landing/sections/faq/FAQ.tsx
@@ -9,18 +9,18 @@ function FAQ() {
         <div
             id="FAQ"
             className="w-full flex h-fit
-    relative overflow-hidden items-center
+    relative overflow-visible items-center
     flex-col justify-start min-h-[600px]">
             <div className="w-full h-full max-w-7xl relative flex flex-col items-center pb-[24rem]">
                 <QuestionContainer />
                 <img src={owl}
                     loading="lazy"
                     alt="owl"
                     className="absolute owl w-[24rem] z-20
-                    -left-[7rem] top-[10rem]
+                    -left-[7rem] -top-[7rem]
                     md:w-[28rem]
-                    lg:w-[32rem] lg:-left-[10rem] lg:top-[10rem]
-                    xl:w-[40rem] xl:-left-[15rem] xl:top-[10rem]
+                    lg:w-[32rem] lg:-left-[10rem] lg:-top-[8rem]
+                    xl:w-[40rem] xl:-left-[15rem] xl:-top-[8rem]
                     floating" />
                 <img src={cloud}
                     className="absolute cloud w-[24rem] z-10" />