Deploy to GitHub Pages: b9a7e39

Author: renmengye

contact/index.html

@@ -17,7 +17,7 @@
     type="image/x-icon"
 /> -->
 
-<!-- <link rel="stylesheet" href="/css/tailwind-runtime.css" /> -->
+<link rel="stylesheet" href="/css/tailwind-runtime.css" />
 <link rel="stylesheet" href="/css/tailwind-build.css" />
 <link rel="stylesheet" href="/css/index.css" />
 
@@ -96,21 +96,21 @@
         </header>
         <section class="tw-flex tw-w-full tw-flex-col tw-p-[5%] tw-mt-[150px] max-lg:tw-p-4  sm:tw-w-[100%] md:tw-w-[80%] lg:tw-w-[60%] xl:tw-w-[50%]">
             <h3 class="text-left tw-text-4xl tw-font-medium max-md:tw-text-2xl">
-                contact
+                Contact
             </h3>
             <form id="contact-form" class="tw-space-y-4 tw-mt-[30px]">
                 <div>
-                    <label for="name" class="tw-block tw-text-sm tw-font-medium tw-text-gray-700">name</label>
+                    <label for="name" class="tw-block tw-text-sm tw-font-medium tw-text-gray-700">Name</label>
                     <input type="text" id="name" name="name" required
                            class="tw-mt-1 tw-block tw-w-full tw-px-4 tw-py-2 tw-border tw-border-gray-300 tw-rounded-md tw-shadow-sm focus:tw-ring-blue-500 focus:tw-border-blue-500"/>
                 </div>
                 <div>
-                    <label for="email" class="tw-block tw-text-sm tw-font-medium tw-text-gray-700">email</label>
+                    <label for="email" class="tw-block tw-text-sm tw-font-medium tw-text-gray-700">Email</label>
                     <input type="email" id="email" name="email" required
                            class="tw-mt-1 tw-block tw-w-full tw-px-4 tw-py-2 tw-border tw-border-gray-300 tw-rounded-md tw-shadow-sm focus:tw-ring-blue-500 focus:tw-border-blue-500"/>
                 </div>
                 <div>
-                    <label for="message" class="tw-block tw-text-sm tw-font-medium tw-text-gray-700">message</label>
+                    <label for="message" class="tw-block tw-text-sm tw-font-medium tw-text-gray-700">Message</label>
                     <textarea id="message" name="message" rows="5" required
                               class="tw-mt-1 tw-block tw-w-full tw-px-4 tw-py-2 tw-border tw-border-gray-300 tw-rounded-md tw-shadow-sm focus:tw-ring-blue-500 focus:tw-border-blue-500"></textarea>
                 </div>

css/index.css

@@ -224,11 +224,19 @@ header > .collapsible-header{
 }
 
 .text-overlay {
-    position: absolute;
+  position: absolute;
+  top: 50%;
+  left: 40px;
+  transform: translate(0%, -50%);
+/*    display: flex;
+    align-items: center;
+    height: 100vh;
+    */
+/*    position: absolute;*/
     color: white; /* Text color */
-    top: 100px;
-    left: 40px;
-    width: 80%; /* Ensures the image fits the container */
+/*    top: 100px;*/
+/*    left: 40px;*/
+    width: 60%; /* Ensures the image fits the container */
 /*    font-size: 24px; /* Adjust font size */
 /*    font-weight: bold;*/
 /*    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Optional text shadow for readability */*/

css/tailwind-build.css

@@ -1241,11 +1241,6 @@ video {
     padding-right: 1rem;
   }
 
-  .max-lg\:tw-text-4xl {
-    font-size: 2.25rem;
-    line-height: 2.5rem;
-  }
-
   .max-lg\:tw-shadow-md {
     --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
     --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@@ -1272,6 +1267,11 @@ video {
     line-height: 2rem;
   }
 
+  .max-md\:tw-text-4xl {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
+
   .max-md\:tw-text-base {
     font-size: 1rem;
     line-height: 1.5rem;
@@ -1305,6 +1305,11 @@ video {
     -moz-columns: 1;
          columns: 1;
   }
+
+  .sm\:tw-text-4xl {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
 }
 
 @media (min-width: 768px) {
@@ -1321,6 +1326,11 @@ video {
     -moz-columns: 3;
          columns: 3;
   }
+
+  .md\:tw-text-4xl {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
 }
 
 @media (min-width: 1024px) {
@@ -1333,8 +1343,8 @@ video {
     display: none;
   }
 
-  .lg\:tw-w-\[50\%\] {
-    width: 50%;
+  .lg\:tw-w-\[60\%\] {
+    width: 60%;
   }
 
   .lg\:tw-columns-3 {
@@ -1349,6 +1359,11 @@ video {
   .lg\:tw-justify-around {
     justify-content: space-around;
   }
+
+  .lg\:tw-text-6xl {
+    font-size: 3.75rem;
+    line-height: 1;
+  }
 }
 
 @media (min-width: 1280px) {
@@ -1369,6 +1384,11 @@ video {
   .xl\:tw-justify-around {
     justify-content: space-around;
   }
+
+  .xl\:tw-text-7xl {
+    font-size: 4.5rem;
+    line-height: 1;
+  }
 }
 
 @media (prefers-color-scheme: dark) {