| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Rose Petal Paradise | Contact</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;600&display=swap'); |
| |
| body { |
| font-family: 'Poppins', sans-serif; |
| } |
| |
| h1, h2, h3 { |
| font-family: 'Playfair Display', serif; |
| } |
| |
| .card-hover { |
| transition: all 0.3s ease; |
| } |
| |
| .card-hover:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| </style> |
| </head> |
| <body class="bg-white"> |
| |
| <nav class="bg-white shadow-sm"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex justify-between h-16"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 flex items-center"> |
| <i data-feather="heart" class="text-rose-500 h-6 w-6"></i> |
| <span class="ml-2 text-xl font-bold text-rose-900">Rose Petal</span> |
| </div> |
| </div> |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> |
| <a href="index.html" class="text-gray-500 hover:text-rose-700 px-3 py-2 rounded-md text-sm font-medium">Home</a> |
| <a href="index.html#features" class="text-gray-500 hover:text-rose-700 px-3 py-2 rounded-md text-sm font-medium">Features</a> |
| <a href="index.html#gallery" class="text-gray-500 hover:text-rose-700 px-3 py-2 rounded-md text-sm font-medium">Gallery</a> |
| <a href="contact.html" class="text-rose-900 hover:text-rose-700 px-3 py-2 rounded-md text-sm font-medium">Contact</a> |
| <a href="dashboard.html" class="text-gray-500 hover:text-rose-700 px-3 py-2 rounded-md text-sm font-medium">Dashboard</a> |
| </div> |
| <div class="md:hidden flex items-center"> |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-rose-700"> |
| <i data-feather="menu"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <div class="bg-rose-50"> |
| <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8"> |
| <div class="text-center"> |
| <h1 class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl"> |
| <span class="block text-rose-600">Contact Us</span> |
| </h1> |
| <p class="mt-6 max-w-lg mx-auto text-xl text-gray-500"> |
| Have questions about our roses or need assistance with an order? We'd love to hear from you. |
| </p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="py-12 bg-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="lg:grid lg:grid-cols-2 lg:gap-8"> |
| <div class="lg:col-span-1"> |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> |
| Get in touch |
| </h2> |
| <p class="mt-3 text-lg text-gray-500"> |
| Fill out the form and our team will get back to you within 24 hours. |
| </p> |
| |
| <div class="mt-8"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 bg-rose-100 rounded-md p-3"> |
| <i data-feather="mail" class="h-6 w-6 text-rose-600"></i> |
| </div> |
| <div class="ml-4"> |
| <h3 class="text-lg font-medium text-gray-900">Email us</h3> |
| <p class="mt-1 text-gray-500">info@rosepetalparadise.com</p> |
| </div> |
| </div> |
| |
| <div class="mt-6 flex items-start"> |
| <div class="flex-shrink-0 bg-rose-100 rounded-md p-3"> |
| <i data-feather="phone" class="h-6 w-6 text-rose-600"></i> |
| </div> |
| <div class="ml-4"> |
| <h3 class="text-lg font-medium text-gray-900">Call us</h3> |
| <p class="mt-1 text-gray-500">+31 20 123 4567</p> |
| </div> |
| </div> |
| |
| <div class="mt-6 flex items-start"> |
| <div class="flex-shrink-0 bg-rose-100 rounded-md p-3"> |
| <i data-feather="map-pin" class="h-6 w-6 text-rose-600"></i> |
| </div> |
| <div class="ml-4"> |
| <h3 class="text-lg font-medium text-gray-900">Visit us</h3> |
| <p class="mt-1 text-gray-500">Keizersgracht 123, Amsterdam</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-12 lg:mt-0 lg:col-span-1"> |
| <div class="bg-white shadow-md rounded-lg p-6"> |
| <form action="#" method="POST" class="space-y-6"> |
| <div> |
| <label for="name" class="block text-sm font-medium text-gray-700">Full name</label> |
| <div class="mt-1"> |
| <input type="text" name="name" id="name" autocomplete="name" class="py-3 px-4 block w-full border border-gray-300 rounded-md focus:ring-rose-500 focus:border-rose-500"> |
| </div> |
| </div> |
| |
| <div> |
| <label for="email" class="block text-sm font-medium text-gray-700">Email address</label> |
| <div class="mt-1"> |
| <input type="email" name="email" id="email" autocomplete="email" class="py-3 px-4 block w-full border border-gray-300 rounded-md focus:ring-rose-500 focus:border-rose-500"> |
| </div> |
| </div> |
| |
| <div> |
| <label for="phone" class="block text-sm font-medium text-gray-700">Phone number</label> |
| <div class="mt-1"> |
| <input type="tel" name="phone" id="phone" autocomplete="tel" class="py-3 px-4 block w-full border border-gray-300 rounded-md focus:ring-rose-500 focus:border-rose-500"> |
| </div> |
| </div> |
| |
| <div> |
| <label for="message" class="block text-sm font-medium text-gray-700">Message</label> |
| <div class="mt-1"> |
| <textarea id="message" name="message" rows="4" class="py-3 px-4 block w-full border border-gray-300 rounded-md focus:ring-rose-500 focus:border-rose-500"></textarea> |
| </div> |
| </div> |
| |
| <div class="flex justify-end"> |
| <button type="submit" class="inline-flex justify-center py-3 px-6 border border-transparent shadow-sm text-base font-medium rounded-md text-white bg-rose-600 hover:bg-rose-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500"> |
| Send message |
| </button> |
| </div> |
| </form> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| feather.replace(); |
| </script> |
| </body> |
| </html> |
