Adjust paddings,margins and sizes

optimumBA · Apr 30, 2024 · 8613963 · 8613963
1 parent 0ad5e4d
commit 8613963
Showing 1 changed file with 13 additions and 11 deletions.
diff --git a/challenges/order_summary_component/index.html b/challenges/order_summary_component/index.html
@@ -39,26 +39,28 @@
       class="absolute z-10 flex h-[100vh] w-full flex-col place-content-center text-center"
     >
       <div
-        class="shadow-desaturated-blue drop-shadow-2x1 mx-auto flex w-[290px] flex-col items-center overflow-hidden rounded-2xl bg-white lg:w-[350px]"
+        class="shadow-desaturated-blue drop-shadow-2x1 mx-auto flex w-[320px] flex-col items-center overflow-hidden rounded-2xl bg-white lg:w-[350px]"
       >
         <div>
           <img src="images/illustration-hero.svg" alt="hero illustration" />
         </div>
-        <div class="mx-3">
-          <div class="p-4">
-            <h1 class="text-dark-blue text-xl font-bold">Order Summary</h1>
-            <p class="text-desaturated-blue pt-3 text-sm lg:mx-3">
+        <div>
+          <div class="px-8">
+            <h1 class="text-dark-blue pt-6 text-xl font-extrabold">
+              Order Summary
+            </h1>
+            <p class="text-desaturated-blue pt-5 text-sm lg:mx-3">
               You can now listen to millions of songs, audiobooks, and podcasts
               on any device anywhere you like!
             </p>
           </div>
 
           <div>
             <div
-              class="bg-very-pale-blue mx-5 flex items-center rounded-lg py-1"
+              class="bg-very-pale-blue m-8 flex items-center rounded-lg py-1"
             >
               <img class="pl-2" src="images/icon-music.svg" alt="music icon" />
-              <div class="relative flex items-center px-4">
+              <div class="flex w-full items-center justify-between px-4">
                 <h2 class="text-dark-blue text-xs font-bold">
                   Annual Plan
                   <span class="text-desaturated-blue block font-normal"
@@ -67,23 +69,23 @@ <h2 class="text-dark-blue text-xs font-bold">
                 </h2>
                 <a
                   href="#"
-                  class="text-bright-blue absolute -right-12 cursor-pointer text-xs font-bold underline hover:no-underline active:no-underline lg:-right-24"
+                  class="text-bright-blue right-0 cursor-pointer text-xs font-bold underline hover:no-underline active:no-underline lg:-right-24"
                   >Change</a
                 >
               </div>
             </div>
           </div>
-          <div class="py-3">
+          <div class="mx-8">
             <a
               href="#"
-              class="bg-bright-blue shadow-desaturated-blue mx-5 my-3 block rounded-lg py-2 font-bold text-white shadow-2xl"
+              class="bg-bright-blue shadow-desaturated-blue block rounded-lg py-4 text-sm font-bold text-white shadow-2xl"
               >Proceed to Payment</a
             >
           </div>
         </div>
 
         <div>
-          <button class="py-4 text-sm font-bold text-gray-400">
+          <button class="pb-8 pt-6 text-sm font-extrabold text-gray-500">
             Cancel Order
           </button>
         </div>