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>Logos & Brand Identity | PixelCraft</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> | |
| <!-- Category Header --> | |
| <section class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Logos & Brand Identity</h1> | |
| <p class="text-xl max-w-3xl mx-auto">Creating distinctive visual identities that communicate brand values and resonate with target audiences. Each logo is crafted with strategic thinking and meticulous attention to detail.</p> | |
| </div> | |
| </section> | |
| <!-- Portfolio Grid --> | |
| <section class="py-20"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Project 1 --> | |
| <a href="project-logo1.html" class="project-card group relative overflow-hidden rounded-xl shadow-lg"> | |
| <img src="http://static.photos/minimal/1200x630/11" alt="NovaTech Logo" class="w-full h-80 object-cover transition duration-500 group-hover:scale-105"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6 opacity-0 group-hover:opacity-100 transition duration-300"> | |
| <div> | |
| <h3 class="text-2xl font-bold text-white mb-2">NovaTech</h3> | |
| <p class="text-gray-200">Technology Startup Identity</p> | |
| <p class="text-gray-300 text-sm mt-2">2023</p> | |
| </div> | |
| </div> | |
| </a> | |
| <!-- Project 2 --> | |
| <a href="project-logo2.html" class="project-card group relative overflow-hidden rounded-xl shadow-lg"> | |
| <img src="http://static.photos/minimal/1200x630/12" alt="EcoHarvest Logo" class="w-full h-80 object-cover transition duration-500 group-hover:scale-105"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6 opacity-0 group-hover:opacity-100 transition duration-300"> | |
| <div> | |
| <h3 class="text-2xl font-bold text-white mb-2">EcoHarvest</h3> | |
| <p class="text-gray-200">Organic Food Branding</p> | |
| <p class="text-gray-300 text-sm mt-2">2022</p> | |
| </div> | |
| </div> | |
| </a> | |
| <!-- Project 3 --> | |
| <a href="project-logo3.html" class="project-card group relative overflow-hidden rounded-xl shadow-lg"> | |
| <img src="http://static.photos/minimal/1200x630/13" alt="Lumina Logo" class="w-full h-80 object-cover transition duration-500 group-hover:scale-105"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6 opacity-0 group-hover:opacity-100 transition duration-300"> | |
| <div> | |
| <h3 class="text-2xl font-bold text-white mb-2">Lumina</h3> | |
| <p class="text-gray-200">Luxury Lighting Brand</p> | |
| <p class="text-gray-300 text-sm mt-2">2021</p> | |
| </div> | |
| </div> | |
| </a> | |
| <!-- Project 4 --> | |
| <a href="project-logo4.html" class="project-card group relative overflow-hidden rounded-xl shadow-lg"> | |
| <img src="http://static.photos/minimal/1200x630/14" alt="Venture Capital Logo" class="w-full h-80 object-cover transition duration-500 group-hover:scale-105"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6 opacity-0 group-hover:opacity-100 transition duration-300"> | |
| <div> | |
| <h3 class="text-2xl font-bold text-white mb-2">Horizon Ventures</h3> | |
| <p class="text-gray-200">Investment Firm Identity</p> | |
| <p class="text-gray-300 text-sm mt-2">2020</p> | |
| </div> | |
| </div> | |
| </a> | |
| <!-- Project 5 --> | |
| <a href="project-logo5.html" class="project-card group relative overflow-hidden rounded-xl shadow-lg"> | |
| <img src="http://static.photos/minimal/1200x630/15" alt="BrewCraft Logo" class="w-full h-80 object-cover transition duration-500 group-hover:scale-105"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6 opacity-0 group-hover:opacity-100 transition duration-300"> | |
| <div> | |
| <h3 class="text-2xl font-bold text-white mb-2">BrewCraft</h3> | |
| <p class="text-gray-200">Artisanal Beer Branding</p> | |
| <p class="text-gray-300 text-sm mt-2">2019</p> | |
| </div> | |
| </div> | |
| </a> | |
| <!-- Project 6 --> | |
| <a href="project-logo6.html" class="project-card group relative overflow-hidden rounded-xl shadow-lg"> | |
| <img src="http://static.photos/minimal/1200x630/16" alt="Apex Logo" class="w-full h-80 object-cover transition duration-500 group-hover:scale-105"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6 opacity-0 group-hover:opacity-100 transition duration-300"> | |
| <div> | |
| <h3 class="text-2xl font-bold text-white mb-2">Apex</h3> | |
| <p class="text-gray-200">Fitness Brand Identity</p> | |
| <p class="text-gray-300 text-sm mt-2">2018</p> | |
| </div> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <custom-footer></custom-footer> | |
| <script>feather.replace();</script> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |