refactor: update Hosting Style. Update card style.

index.html

@@ -100,9 +100,12 @@
         <!--noformat-->
     </div>
 
-    <div class="container max-w-[1440px] mt-14 px-4 py-4">
-        <h1 class="mb-4 text-4xl font-bold text-gray-800 md:ml-0 dark:text-slate-200">Currently
-            hosting</h1>
+    <div class="container max-w-[1440px] mt-16 px-4">
+        <div class="bg-white rounded-lg shadow dark:bg-gray-800">
+            <div class="w-full max-w-screen-xl p-4 mb-4">
+                <h1 class="text-2xl font-bold text-gray-800 dark:text-slate-200">Proudly Hosting</h1>
+            </div>
+        </div>
         <div class="flex flex-row flex-wrap justify-center gap-2 md:justify-start" id="services">
         </div>
     </div>

public/js/cards.js

@@ -61,7 +61,7 @@ function renderCards() {
                   </h5>
                   <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">${cards[index].description}
                   </p>
-                  <div class="flex gap-1 items-center justify-center flex-wrap lg:flex-nowrap lg:justify-start">
+                  <div class="flex gap-1 items-center justify-center flex-wrap">
                       <a href="${cards[index].about}" target="_blank"
                           class="w-full inline-flex justify-center items-center py-2.5 px-5 me-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-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">
                           Read more
@@ -81,7 +81,7 @@ function renderCards() {
 
     const element = document.createElement("div");
     element.className =
-      "max-w-[298px] bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700";
+      "max-w-[324px] sm:max-w-[275px] bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700";
     element.innerHTML = template;
 
     services.appendChild(element);

public/output.css

@@ -1194,6 +1194,10 @@ input:checked + .toggle-bg {
   margin-top: 3.5rem;
 }
 
+.mt-16 {
+  margin-top: 4rem;
+}
+
 .mt-2 {
   margin-top: 0.5rem;
 }
@@ -1302,8 +1306,8 @@ input:checked + .toggle-bg {
   max-width: 1440px;
 }
 
-.max-w-\[298px\] {
-  max-width: 298px;
+.max-w-\[324px\] {
+  max-width: 324px;
 }
 
 .max-w-\[768px\] {
@@ -1633,11 +1637,6 @@ input:checked + .toggle-bg {
   padding-bottom: 0.75rem;
 }
 
-.py-4 {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-
 .pb-6 {
   padding-bottom: 1.5rem;
 }
@@ -1663,11 +1662,6 @@ input:checked + .toggle-bg {
   line-height: 2rem;
 }
 
-.text-4xl {
-  font-size: 2.25rem;
-  line-height: 2.5rem;
-}
-
 .text-6xl {
   font-size: 3.75rem;
   line-height: 1;
@@ -1979,6 +1973,10 @@ input:checked + .toggle-bg {
     margin-top: 0px;
   }
 
+  .sm\:max-w-\[275px\] {
+    max-width: 275px;
+  }
+
   .sm\:text-center {
     text-align: center;
   }
@@ -1989,10 +1987,6 @@ input:checked + .toggle-bg {
     margin-inline-end: 1.5rem;
   }
 
-  .md\:ml-0 {
-    margin-left: 0px;
-  }
-
   .md\:flex {
     display: flex;
   }
@@ -2027,16 +2021,6 @@ input:checked + .toggle-bg {
   }
 }
 
-@media (min-width: 1024px) {
-  .lg\:flex-nowrap {
-    flex-wrap: nowrap;
-  }
-
-  .lg\:justify-start {
-    justify-content: flex-start;
-  }
-}
-
 .rtl\:rotate-180:where([dir="rtl"], [dir="rtl"] *) {
   --tw-rotate: 180deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));