fh

neerajrekwar · Apr 8, 2024 · 493bb8e · 493bb8e
1 parent c59fd70
commit 493bb8e
Showing 1 changed file with 39 additions and 6 deletions.
diff --git a/form7.html b/form7.html
@@ -18,14 +18,47 @@
 </head>
 
 <body>
-  <main>
-    <div class="m-auto h-screen flex   border-red-500  ">
-      <div class="sm:w-[95vw] w-screen sm:h-[90vh] border h-screen m-auto sm:flex">
-        <div id="hello" class="m-auto p-3 h-[50vh] border border-black sm:w-[50vw]">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam facere provident quod, saepe perspiciatis laudantium harum, autem et cum nisi laboriosam a incidunt nulla culpa tempora libero perferendis. Inventore, illo!</div>
-        <div class="m-auto p-3 h-[50vh] border border-black sm:w-[50vw]">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel, ullam at quod error dolorum deleniti sequi! Distinctio amet corrupti error praesentium deleniti! Est, amet reiciendis similique omnis soluta provident quibusdam.</div>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
+<main>
+  <div class="m-auto flex h-screen border-red-500">
+    <div class="m-auto h-screen w-screen border sm:flex sm:h-[80vh] sm:w-[95vw]">
+      <div id="hello" class="m-auto sm:m-0 mb-6 border border-black p-3 sm:w-[50vw]">
+        <div class=" sm:m-4">
+          <h1 class="text-3xl font-bold text-gray-700 sm:text-4xl">Contact us</h1>
+        <p class="my-4 py-2 font-semibold">Feel free to contact us any time. we will get back as soon as we can.</p>
+        <form action="" method="get">
+          <fieldset>
+            <label for="name">
+              <input class="bg-gray-00 my-2 mb-4 h-12 w-full border-b border-gray-600 bg-transparent py-2 text-sm font-semibold capitalize outline-none" placeholder="Name" type="text" name="name" id="" required="" />
+            </label>
+            <label for="email">
+              <input class="bg-gray-00 my-2 mb-4 h-12 w-full border-b border-gray-600 bg-transparent py-2 text-sm font-semibold outline-none" placeholder="Email" type="email" name="email" id="" required="" />
+            </label>
+            <label for="message">
+              <input class="bg-gray-00 my-2 mb-4 h-12 w-full border-b border-gray-600 bg-transparent py-2 text-sm font-semibold outline-none" placeholder="Message" type="text" name="message" id="" required="" />
+            </label>
+          </fieldset>
+          <button type="submit" class="my-8 w-full bg-black px-10 py-3 text-white transition-colors active:bg-yellow-500 active:text-black">Send</button>
+        </form>
+        </div>
+      </div>
+      <div class="m-auto border h-full border-black p-3 sm:w-[50vw]">
+        <div class="">
+          <div class="absolute z-10 h-[35px] w-[35px] bg-yellow-500"></div>
+          <div class=" ml-4 top-4 mr-4 relative mt-4 h-[65vh] bg-black text-gray-300">
+            <h2 class="mx-4 py-1 pt-8 text-3xl font-bold">info.</h2>
+            <ul class="m-4 flex  flex-col justify-between  text-sm font-semibold sm:text-base">
+              <li class="my-2 flex items-center gap-2 py-1"><span class="material-symbols-outlined"> mail </span><a href=""> [email protected]</a></li>
+              <li class="my-2 flex gap-2 py-1 "><span class="material-symbols-outlined"> call </span><a href="">+91 70421439836</a></li>
+              <li class="my-2 flex gap-2 py-1 "><span class="material-symbols-outlined"> location_on </span><a href="">Dwarka sec 7, New Delhi</a></li>
+              <li class="my-2 flex gap-2 py-1 "><span class="material-symbols-outlined"> schedule </span><a href="">02:45 PM - 06:30 PM</a></li>
+            </ul>
+          </div>
+        </div>
       </div>
     </div>
-  </main>
+  </div>
+</main>
 </body>
 
 </html>