Update CSS styles for height and width

anas20023 · Jan 3, 2024 · 03f64cf · 03f64cf
1 parent d4c044c
commit 03f64cf
Show file tree

Hide file tree

Showing 2 changed files with 116 additions and 76 deletions.
diff --git a/contact.html b/contact.html
@@ -229,58 +229,59 @@ <h2 class="text-lg lg:text-3xl font-bold text-center text-gray-800">
     </div>
     <!-- Newsletter Popup Section Ends -->
     <!-- Contact Main Cotainer Div Starts -->
-    <section class="h-[60vh] center_d flex flex-col md:flex-row justify-center items-center my-12 gap-2">
-        <div class="h-full w-1/4 bg-white rounded-lg shadow-xl flex flex-col justify-evenly items-center px-1">
-            <div class="flex flex-col justify-center items-center border-b-2 border-gray-200 p-2 gap-2">
+    <section class="md:h-[60vh] center_d flex flex-col md:flex-row justify-center items-center my-12 gap-4">
+        <div
+            class="h-full w-full md:w-1/4 bg-white rounded-lg shadow-xl flex flex-col justify-evenly items-center px-1">
+            <div class="flex flex-col justify-center items-center border-b-2 border-gray-200 p-2 gap-2 w-full">
                 <i class="fa-regular fa-map text-4xl font-semibold text-green-600"></i>
                 <h2 class="text-center text-sm font-medium">2715 Ash Dr. San Jose, South <br> Dakota 83475</h2>
-
             </div>
-            <div class="flex flex-col justify-center items-center border-b-2 border-gray-200 p-2 gap-2">
+            <div class="flex flex-col justify-center items-center border-b-2 border-gray-200 p-2 gap-2 w-full">
                 <i class="fa-regular fa-paper-plane text-4xl font-semibold text-green-600"></i>
                 <h2 class="text-center text-sm font-medium">[email protected] <br> [email protected]</h2>
-
             </div>
-            <div class="flex flex-col justify-center items-center border-b-2 border-gray-200 p-2 gap-2">
+            <div class="flex flex-col justify-center items-center border-b-2 border-gray-200 p-2 gap-2 w-full">
                 <i class="fa-regular fa-phone text-4xl font-semibold text-green-600"></i>
                 <h2 class="text-center text-sm font-medium">(219) 555-0114 <br> (164) 333-0487</h2>
-
             </div>
         </div>
         <div
-            class="h-full w-3/4 bg-white rounded-lg shadow-xl flex flex-col justify-start items-start p-8 text-gray-900">
+            class="h-full w-full md:w-3/4 bg-white rounded-lg shadow-xl flex flex-col justify-start items-start p-8 text-gray-900">
             <h2 class="font-semibold text-xl">Just Say Hello!</h2>
             <p class="font-medium text-xs my-2 !text-gray-500">Do you fancy saying hi to me or you want to get started
                 with
                 your <br> project and you need my help? Feel free to contact me.</p>
-            <form action="#" class="flex flex-wrap flex-col justify-start items-start w-full my-5"
+            <form action="#" class="flex flex-wrap flex-col justify-start items-start w-full my-5 gap-2"
                 onsubmit="return validateForm()">
                 <div class="flex flex-row w-full gap-4">
                     <input type="text" id="default-input"
-                        class="w-1/2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block  p-2.5">
-                        <input type="text" id="default-input"
-                        class="w-1/2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block  p-2.5">
+                        class="w-1/2 md:w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5"
+                        placeholder="Your Name" required>
+                    <input type="text" id="default-input"
+                        class="w-1/2 md:w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5"
+                        placeholder="Your email address" required>
                 </div>
-                <input type="text" name="msg_Sub" id="msg_Sub"
-                    class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-blue-600 peer"
-                    placeholder="Your Email" required />
+                <input type="text" id="default-input"
+                    class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5"
+                    placeholder="Your Subject" required>
                 <textarea id="message" rows="4"
                     class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500"
-                    placeholder="Write your thoughts here..."></textarea>
+                    placeholder="Write your thoughts here..." required></textarea>
 
                 <button type="submit"
-                    class="py-2 px-4 mt-4 bg-blue-600 text-white rounded focus:outline-none">Submit</button>
+                    class="py-2.5 px-8 mt-4 bg-green-600 text-white rounded-full text-sm focus:outline-none">Send
+                    Message</button>
             </form>
-
         </div>
-
     </section>
-    <section class="bg-white w-full h-[40vh] flex flex-col justify-center items-center">
+
+    <!-- Map Iframe section Starts Here -->
+    <section class="bg-white w-full md:h-[40vh] flex flex-col justify-center items-center">
         <iframe
             src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3650.189741737926!2d90.35453857479385!3d23.811850986415447!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3755c12015382851%3A0x3ceca92fcf1a72d2!2sBangladesh%20University%20of%20Business%20and%20Technology%20(BUBT)!5e0!3m2!1sen!2sbd!4v1704286847507!5m2!1sen!2sbd"
             class="w-full h-full border-0" allowfullscreen="" loading="lazy" referrerpolicy="origin"></iframe>
-
     </section>
+    <!-- Map Iframe section Endss Here -->
     <!-- Contact Main Cotainer Div Endss -->
     <!-- Newsletter Section Starts Here -->
     <section

diff --git a/outputt/output.css b/outputt/output.css
@@ -757,6 +757,16 @@ video {
   margin-bottom: 2.5rem;
 }
 
+.my-12 {
+  margin-top: 3rem;
+  margin-bottom: 3rem;
+}
+
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
 .my-5 {
   margin-top: 1.25rem;
   margin-bottom: 1.25rem;
@@ -767,11 +777,6 @@ video {
   margin-bottom: 1.5rem;
 }
 
-.my-12 {
-  margin-top: 3rem;
-  margin-bottom: 3rem;
-}
-
 .-ml-9 {
   margin-left: -2.25rem;
 }
@@ -999,6 +1004,10 @@ video {
   height: 200px;
 }
 
+.h-\[40vh\] {
+  height: 40vh;
+}
+
 .h-\[450px\] {
   height: 450px;
 }
@@ -1011,6 +1020,10 @@ video {
   height: 540px;
 }
 
+.h-\[60vh\] {
+  height: 60vh;
+}
+
 .h-auto {
   height: auto;
 }
@@ -1028,38 +1041,6 @@ video {
   height: 100vh;
 }
 
-.h-\[80vh\] {
-  height: 80vh;
-}
-
-.h-\[90vh\] {
-  height: 90vh;
-}
-
-.h-3\/5 {
-  height: 60%;
-}
-
-.h-2\/5 {
-  height: 40%;
-}
-
-.h-\[10vh\] {
-  height: 10vh;
-}
-
-.h-\[8vh\] {
-  height: 8vh;
-}
-
-.h-\[40vh\] {
-  height: 40vh;
-}
-
-.h-\[60vh\] {
-  height: 60vh;
-}
-
 .max-h-full {
   max-height: 100%;
 }
@@ -1068,6 +1049,14 @@ video {
   min-height: 65vh;
 }
 
+.w-1\/2 {
+  width: 50%;
+}
+
+.w-1\/4 {
+  width: 25%;
+}
+
 .w-1\/5 {
   width: 20%;
 }
@@ -1088,6 +1077,10 @@ video {
   width: 0.75rem;
 }
 
+.w-3\/4 {
+  width: 75%;
+}
+
 .w-3\/5 {
   width: 60%;
 }
@@ -2061,14 +2054,14 @@ video {
   border-width: 1px;
 }
 
-.border-2 {
-  border-width: 2px;
-}
-
 .border-0 {
   border-width: 0px;
 }
 
+.border-2 {
+  border-width: 2px;
+}
+
 .border-x {
   border-left-width: 1px;
   border-right-width: 1px;
@@ -2253,6 +2246,10 @@ video {
   background-color: rgb(220 38 38 / var(--tw-bg-opacity));
 }
 
+.bg-transparent {
+  background-color: transparent;
+}
+
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -2263,16 +2260,6 @@ video {
   background-color: rgb(253 224 71 / var(--tw-bg-opacity));
 }
 
-.bg-blue-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
-}
-
-.\!bg-green-600 {
-  --tw-bg-opacity: 1 !important;
-  background-color: rgb(22 163 74 / var(--tw-bg-opacity)) !important;
-}
-
 .bg-\[url\(https\:\/\/tgihost\.pages\.dev\/image\?id\=BQACAgUAAx0EfBziBwAD42WGqeHFrcX_NQmxqCouZfW5GhrTAAK4DgACOm45VGBERqBg_Ua9MwQ\)\] {
   background-image: url(https://tgihost.pages.dev/image?id=BQACAgUAAx0EfBziBwAD42WGqeHFrcX_NQmxqCouZfW5GhrTAAK4DgACOm45VGBERqBg_Ua9MwQ);
 }
@@ -2439,6 +2426,11 @@ video {
   padding: 2rem;
 }
 
+.px-0 {
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -2504,9 +2496,14 @@ video {
   padding-bottom: 1.25rem;
 }
 
-.py-12 {
-  padding-top: 3rem;
-  padding-bottom: 3rem;
+.px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
 }
 
 .pb-4 {
@@ -2727,6 +2724,11 @@ video {
   line-height: 1.625;
 }
 
+.\!text-gray-500 {
+  --tw-text-opacity: 1 !important;
+  color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
+}
+
 .text-\[\#336699\]\/\[\.35\] {
   color: rgb(51 102 153 / .35);
 }
@@ -3322,6 +3324,16 @@ video {
   text-align: center;
 }
 
+.focus\:border-blue-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(59 130 246 / var(--tw-border-opacity));
+}
+
+.focus\:border-blue-600:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(37 99 235 / var(--tw-border-opacity));
+}
+
 .focus\:border-green-300:focus {
   --tw-border-opacity: 1;
   border-color: rgb(134 239 172 / var(--tw-border-opacity));
@@ -3343,6 +3355,12 @@ video {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.focus\:ring-0:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
 .focus\:ring-4:focus {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -3354,6 +3372,11 @@ video {
   --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
 }
 
+.focus\:ring-blue-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
+}
+
 .focus\:ring-green-300:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(134 239 172 / var(--tw-ring-opacity));
@@ -3572,6 +3595,14 @@ video {
     height: 30vh;
   }
 
+  .md\:h-\[40vh\] {
+    height: 40vh;
+  }
+
+  .md\:h-\[60vh\] {
+    height: 60vh;
+  }
+
   .md\:w-1\/2 {
     width: 50%;
   }
@@ -3592,6 +3623,14 @@ video {
     width: auto;
   }
 
+  .md\:w-3\/4 {
+    width: 75%;
+  }
+
+  .md\:w-full {
+    width: 100%;
+  }
+
   .md\:flex-row {
     flex-direction: row;
   }