Photography_Contact_Form
사진 포트폴리오를 위한 깔끔하고 미니멀한 컨택트 폼으로, 스위스/인터내셔널 타이포그래피(Swiss/International Typography)에서 영감을 받았으며 차분한 레트로/빈티지 컬러 팔레트가 특징입니다. 다크 모드 지원으로 완벽하게 반응합니다.
HTML 코드
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 font-sans">
<div class="max-w-md w-full bg-white dark:bg-gray-800 p-8 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 space-y-6">
<div>
<h2 class="text-center text-3xl font-extrabold text-gray-900 dark:text-gray-100 tracking-tight leading-tight">
Contact Photographer
</h2>
<p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">
Get in touch for bookings or inquiries.
</p>
</div>
<form class="space-y-6" action="#" method="POST">
<div>
<label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
Name
</label>
<div class="mt-1">
<input id="name" name="name" type="text" autocomplete="name" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 transition duration-150 ease-in-out sm:text-sm">
</div>
</div>
<div>
<label for="email-address" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
Email address
</label>
<div class="mt-1">
<input id="email-address" name="email" type="email" autocomplete="email" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 transition duration-150 ease-in-out sm:text-sm">
</div>
</div>
<div>
<label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
Message
</label>
<div class="mt-1">
<textarea id="message" name="message" rows="4" required class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 transition duration-150 ease-in-out sm:text-sm"></textarea>
</div>
</div>
<div>
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-amber-600 hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:bg-amber-700 dark:hover:bg-amber-800 dark:focus:ring-offset-gray-800 transition duration-150 ease-in-out">
Send Message
</button>
</div>
</form>
</div>
</div>