Create a polished graphic design portfolio website for an experienced designer showcasing work produced over multiple years. The website should feel professional, confident, and refined, suitable for agencies, studios, and direct clients.
6494c8b verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Contact | ChromaCanvas Studio</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| </head> | |
| <body class="bg-white text-gray-900 font-sans antialiased"> | |
| <custom-navbar></custom-navbar> | |
| <!-- Contact Hero --> | |
| <section class="relative py-28 bg-gray-50 overflow-hidden"> | |
| <div class="container mx-auto px-6 relative z-10"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Let's Create Together</h1> | |
| <p class="text-xl text-gray-600">Have a project in mind? Get in touch to discuss how we can bring your vision to life</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Form --> | |
| <section class="py-20"> | |
| <div class="container mx-auto px-6"> | |
| <div class="max-w-3xl mx-auto"> | |
| <form class="space-y-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label> | |
| <input type="text" id="name" name="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-600 focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label> | |
| <input type="email" id="email" name="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-600 focus:border-transparent"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Subject</label> | |
| <input type="text" id="subject" name="subject" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-600 focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Project Details</label> | |
| <textarea id="message" name="message" rows="6" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-600 focus:border-transparent"></textarea> | |
| </div> | |
| <div> | |
| <button type="submit" class="w-full md:w-auto px-8 py-4 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 transition duration-300">Send Message</button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Info --> | |
| <section class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="text-center"> | |
| <div class="bg-white p-6 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6 shadow-md"> | |
| <i data-feather="mail" class="text-indigo-600 w-6 h-6"></i> | |
| </div> | |
| <h3 class="font-bold text-xl mb-2">Email</h3> | |
| <p class="text-gray-600">hello@chromacanvas.studio</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="bg-white p-6 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6 shadow-md"> | |
| <i data-feather="phone" class="text-indigo-600 w-6 h-6"></i> | |
| </div> | |
| <h3 class="font-bold text-xl mb-2">Phone</h3> | |
| <p class="text-gray-600">+1 (555) 123-4567</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="bg-white p-6 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6 shadow-md"> | |
| <i data-feather="map-pin" class="text-indigo-600 w-6 h-6"></i> | |
| </div> | |
| <h3 class="font-bold text-xl mb-2">Studio</h3> | |
| <p class="text-gray-600">123 Design Street<br>Creative City, CD 10001</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <custom-footer></custom-footer> | |
| <script>feather.replace();</script> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |