Fix Mobile View

joinfirefly · Jul 19, 2024 · caa2618 · caa2618
1 parent 2a81f91
commit caa2618
Showing 1 changed file with 19 additions and 20 deletions.
diff --git a/templates/home.html b/templates/home.html
@@ -85,25 +85,24 @@ <h4 class="text-xl font-bold mb-2">{{ Open_Source }}</h4>
                 </div>
             </div>
         </section>
-        <section id="getting-started" class=" mx-auto px-40">
-            <h3 class="text-3xl font-bold text-center mb-8">{{ Start_using_Hol0 }}</h3>
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
-                <div class="bg-white p-6 rounded-lg shadow text-center">
-                    <i class="ti ti-user text-blue-500 text-4xl mb-4"></i>
-                    <h4 class="text-xl font-bold mb-2">{{ For_Users }}</h4>
-                    <p class="text-gray-600">{{ Join_the_Hol0_public_server }}</p>
-                    <br>
-                    <a  class="bg-gray-500 text-white px-6 py-3 rounded-full shadow hover:bg-blue-600" tabindex="-1">{{ Comming_Soon }}</a> <!-- bg-blue-500 href="https://join.hol0.dev/servers" Learn More -->
-                </div>
-                <div class="bg-white p-6 rounded-lg shadow text-center">
-                    <i class="ti ti-settings text-green-500 text-4xl mb-4"></i>
-                    <h4 class="text-xl font-bold mb-2">{{ For_Admins }}</h4>
-                    <p class="text-gray-600">{{ Check_out_our_guide_on_how_to_build_a_Hol0_server }}</p>
-                    <br>
-                    <a href="https://docs.hol0.dev/for-admin/getting-started"
-                        class="bg-green-500 text-white px-6 py-3 rounded-full shadow hover:bg-green-600">{{ Learn_More }}</a>
-                </div>
-            </div>
+        <section id="getting-started" class="mx-auto px-4 sm:px-6 lg:px-8">
+    <h3 class="text-xl sm:text-2xl md:text-3xl font-bold text-center mb-8">{{ Start_using_Hol0 }}</h3>
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+        <div class="bg-white p-4 sm:p-6 rounded-lg shadow text-center">
+            <i class="ti ti-user text-blue-500 text-3xl sm:text-4xl mb-4"></i>
+            <h4 class="text-lg sm:text-xl font-bold mb-2">{{ For_Users }}</h4>
+            <p class="text-gray-600">{{ Join_the_Hol0_public_server }}</p>
+            <br>
+            <a class="bg-gray-500 text-white px-4 sm:px-6 py-2 sm:py-3 rounded-full shadow hover:bg-blue-600" tabindex="-1">{{ Comming_Soon }}</a> <!-- bg-blue-500 href="https://join.hol0.dev/servers" Learn More -->
+        </div>
+        <div class="bg-white p-4 sm:p-6 rounded-lg shadow text-center">
+            <i class="ti ti-settings text-green-500 text-3xl sm:text-4xl mb-4"></i>
+            <h4 class="text-lg sm:text-xl font-bold mb-2">{{ For_Admins }}</h4>
+            <p class="text-gray-600">{{ Check_out_our_guide_on_how_to_build_a_Hol0_server }}</p>
+            <br>
+            <a href="https://docs.hol0.dev/for-admin/getting-started" class="bg-green-500 text-white px-4 sm:px-6 py-2 sm:py-3 rounded-full shadow hover:bg-green-600">{{ Learn_More }}</a>
+        </div>
+    </div>
         </section>
         <div class="bg-gradient">
             <footer class="bg-transparent shadow mt-16">
@@ -113,4 +112,4 @@ <h4 class="text-xl font-bold mb-2">{{ For_Admins }}</h4>
             </footer>
         </div>
     </body>
-</html>
+</html>