final submission

slockers37 · Sep 2, 2023 · 779e20d · 779e20d
1 parent 92c28e3
commit 779e20d
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 11 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -4,12 +4,12 @@ import { clsx } from "clsx";
 
 function App() {
   return (
-    <main className="flex justify-center items-center min-h-screen scale-110">
+    <main className="flex justify-center items-center min-h-screen scale-105">
       <div
         className={clsx(
           "flex flex-col",
           "rounded-2xl shadow-custom",
-          "m-14 max-w-2xl",
+          "m-14 max-w-xl",
           "md:flex-row"
         )}
       >

diff --git a/src/components/ResultCard.jsx b/src/components/ResultCard.jsx
@@ -6,29 +6,32 @@ const ResultCard = () => {
       className={clsx(
         "flex flex-col justify-center items-center",
         "bg-gradient-to-b from-gradients-light-slate-blue to-gradients-light-royal-blue",
-        "px-20 py-8 rounded-3xl",
+        "py-2 rounded-3xl",
         "md:w-1/2"
       )}
     >
-      <h1 className="text-neutral-light-lavender font-bold text-lg mb-4">
+      <h1 className="text-neutral-light-lavender font-bold text-lg mb-6 mx-20">
         Your Result
       </h1>
       <div
         className={clsx(
           "flex flex-col items-center",
           "bg-gradient-to-b from-gradients-violet-blue to-gradients-persian-blue",
-          "rounded-full px-12 py-10"
+          "rounded-full px-10 py-8 mx-20"
         )}
       >
         <p className="font-bold text-6xl text-neutral-white">76</p>
         <p className="text-neutral-light-lavender opacity-50">of 100</p>
       </div>
-      <div>
-        <p className="text-neutral-white text-2xl text-center mb-2 mt-4">
-          Great
-        </p>
-        <p className="text-neutral-light-lavender text-center opacity-90">
-          You scored higher than 65% of the people who take these tests
+      <div
+        className={clsx(
+          "flex flex-col justify-center items-center gap-3",
+          "mt-6 px-12"
+        )}
+      >
+        <p className="text-neutral-white text-2xl">Great</p>
+        <p className="text-neutral-light-lavender text-center text-sm opacity-90">
+          You scored higher than 65% of the people who take these tests.
         </p>
       </div>
     </div>