Revert Changes

index.html

@@ -117,28 +117,33 @@ <h2 class="text-xs text-center sm:text-3xl sm:text-left font-semibold text-white
     </section>
 
     <section class="sec mx-7 mb-2 flex flex-wrap lg:flex-row justify-center items-center sm:justify-start">
-        <div class="max-w-xs mx-auto">
+        <div
+            class="lg:max-w-xs max-w-none bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 mb-4 mx-2 transform transition-transform hover:scale-105 ease-in-out duration-500 hover:shadow-lg">
             <div>
                 <img data-modal-target="default-one" data-modal-toggle="default-one" class="rounded-t-lg"
                     src="example/bolls/Card/card_1.png" alt="" />
             </div>
         </div>
-
         <div id="default-one" tabindex="-1" aria-hidden="true"
-            class="hidden fixed inset-0 z-50 overflow-y-auto bg-black bg-opacity-50">
-            <div class="flex justify-center items-center h-full">
-                <div class="bg-white rounded-lg shadow-lg">
+            class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
+            <div class="relative p-4 w-full max-w-2xl max-h-full">
+                <!-- Modal content -->
+                <div class="relative bg-slate-800 rounded-lg shadow">
                     <img src="example/bolls/Card/card_1.png">
-                    <div class="p-4">
-                        <div class="flex justify-between">
-                            <div>
-                                <button data-modal-hide="default-modal" type="button" class="btn-primary">Button
-                                    1</button>
-                                <button data-modal-hide="default-modal" type="button" class="btn-secondary">Button
-                                    2</button>
-                            </div>
-                            <h1 class="text-white font-semibold italic hover:text-red-500">- YOLO-GIT</h1>
+                    <!-- Modal footer -->
+                    <div
+                        class="flex items-center justify-between p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
+                        <div>
+                            <button data-modal-hide="default-modal" type="button"
+                                class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">ٱلْحَمْدُ
+                                لِلَّٰهِ</button>
+                            <button data-modal-hide="default-modal" type="button"
+                                class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-red-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">سُبْحَانَ
+                                اللَّه</button>
                         </div>
+                        <h1 class="text-white font-semibold italic hover:text-red-500">
+                            - YOLO-GIT
+                        </h1>
                     </div>
                 </div>
             </div>