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 | class CustomFooter extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| .social-icon { | |
| transition: all 0.3s ease; | |
| } | |
| .social-icon:hover { | |
| transform: translateY(-3px); | |
| } | |
| </style> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div class="md:col-span-2"> | |
| <h3 class="text-2xl font-bold mb-4">ChromaCanvas Studio</h3> | |
| <p class="text-gray-400">Strategic design solutions since 2008. Specializing in brand systems, packaging, and visual storytelling.</p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Quick Links</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="index.html" class="text-gray-400 hover:text-white transition">Home</a></li> | |
| <li><a href="about.html" class="text-gray-400 hover:text-white transition">About</a></li> | |
| <li><a href="#portfolio" class="text-gray-400 hover:text-white transition">Portfolio</a></li> | |
| <li><a href="contact.html" class="text-gray-400 hover:text-white transition">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Connect</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="social-icon text-gray-400 hover:text-white"> | |
| <i data-feather="instagram"></i> | |
| </a> | |
| <a href="#" class="social-icon text-gray-400 hover:text-white"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="social-icon text-gray-400 hover:text-white"> | |
| <i data-feather="linkedin"></i> | |
| </a> | |
| <a href="#" class="social-icon text-gray-400 hover:text-white"> | |
| <i data-feather="dribbble"></i> | |
| </a> | |
| </div> | |
| <p class="text-gray-400 mt-4">hello@pixelcraft.design</p> | |
| <p class="text-gray-400">+1 (555) 123-4567</p> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500"> | |
| <p>© ${new Date().getFullYear()} ChromaCanvas Studio. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| `; | |
| } | |
| } | |
| customElements.define('custom-footer', CustomFooter); |