Contact - ImFillingUpYourSpace2 <script src="/tailwindcss.js">"></script> </head> <body class="bg-slate-900 text-white min-h-screen flex flex-col"> <header class="bg-violet-600 p-6 text-center shadow-lg"> <nav class="max-w-6xl mx-auto flex items-center justify-between"> <h1 class="text-4xl font-extrabold text-pink-300"> ImFillingUpYourSpace2 </h1> <ul class="flex gap-6"> <li> <a href="/imfillingupyourspace2/index.html" class="hover:underline">Home </li> <li> <a href="/imfillingupyourspace2/about.html" class="hover:underline">About </li> <li> <a href="contact.html" class="underline decoration-pink-400">Contact </li> </ul> </nav> </header> <main class="flex-grow container mx-auto p-8 max-w-4xl"> <section class="backdrop-blur-xl bg-white/10 rounded-2xl p-8 shadow-xl mb-12 animate-fade-in"> <h2 class="text-3xl font-bold text-yellow-400 mb-6 flex items-center justify-center"> <svg class="w-8 h-8 mr-2" viewBox="0 0 24 24">"><path fill="currentColor" d="M12,9l-2.59,6.61a1,1,0,0,1-1.62-.94L9.64,10.56A5.15,5.15,0,0,0,7,12.55V17a1,1,0,0,1-2,0V9.33a1,1,0,0,1,.57-.92l2.86-.73A3,3,0,0,1,9,7.5a3,3,0,0,1,2.5,3l.68-.78L14.34,13a1,1,0,0,1-1.66.91l-2.86-.71a1,1,0,0,1,.54-1.92l2.59-6.61a1,1,0,0,1,1.62.94l-.7,2.57A3,3,0,0,1,15,12.5a3,3,0,0,1-2.5,3l-.68-.77Z" transform="translate(0 0)"/>"/></svg> Say Hello </h2> <form id="contact-form" class="space-y-6"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div class="form-group"> <label class="block text-sm font-medium mb-1">Name <input type="text" required class="bg-neutral-800 w-full p-3 rounded-lg text-white focus:ring-pink-500 focus:border-pink-500 border border-neutral-700" placeholder="Your name here" /> </div> <div class="form-group"> <label class="block text-sm font-medium mb-1">Email <input type="email" required class="bg-neutral-800 w-full p-3 rounded-lg text-white focus:ring-pink-500 focus:border-pink-500 border border-neutral-700" placeholder="you@example.com" /> </div> </div> <div class="form-group"> <label class="block text-sm font-medium mb-1">Subject <input type="text" required class="bg-neutral-800 w-full p-3 rounded-lg text-white focus:ring-pink-500 focus:border-pink-500 border border-neutral-700" placeholder="What's on your mind?" /> </div> <div class="form-group"> <label class="block text-sm font-medium mb-1">Message <textarea required rows="5" class="bg-neutral-800 w-full p-3 rounded-lg text-white focus:ring-pink-500 focus:border-pink-500 border border-neutral-700" placeholder="We'd love to hear from you!">"></textarea> </div> <button type="submit" id="submit-btn" class="w-full py-3 bg-gradient-to-r from-pink-600 to-violet-600 hover:from-pink-700 hover:to-violet-700 rounded-lg text-white font-medium flex items-center justify-center gap-2 transition-all transform hover:-translate-y-1"> <svg class="w-5 h-5" viewBox="0 0 24 24">"><path fill="currentColor" d="M2,21l23-12L2,3V21z"/>"/></svg> Send Message </button> <div class="hidden mt-4 text-sm text-green-500 transition-all" id="success-message"> Thank you for your message! 🌟 We'll respond shortly. </div> </form> </section> <section class="border-b border-neutral-800 mb-12"> <h3 class="text-2xl font-bold text-blue-500 mb-4">Contact Information <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> <div class="flex flex-col space-y-4"> <div class="flex items-center gap-2"> <svg class="w-5 h-5 text-cyan-500" viewBox="0 0 24 24">"><path fill="currentColor" d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5Z M12,14C10.07,14 8.31,15.17 7.35,1