BrutalismePortfolioInteractif
Composant de composants interactifs avec un design brutaliste, des couleurs vives et une mise en page complexe à des fins de portefeuille, réactif avec prise en charge du thème sombre.
HTML Code
<div class="bg-gray-900 dark:bg-black p-8 min-h-screen">
<div class="container mx-auto grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Project Card 1 -->
<div class="bg-yellow-400 dark:bg-pink-600 p-6 border-4 border-black dark:border-white shadow-brutal">
<img src="https://picsum.photos/seed/project1/400/300" alt="Project 1" class="w-full h-48 object-cover border-4 border-black dark:border-white mb-4">
<h3 class="text-2xl font-bold mb-2 text-black dark:text-white">Project Alpha</h3>
<p class="mb-4 text-black dark:text-white">A description of Project Alpha, showcasing its features and impact.</p>
<a href="#" class="inline-block bg-black text-yellow-400 dark:bg-white dark:text-pink-600 px-6 py-3 font-bold border-2 border-black dark:border-white hover:bg-gray-700 dark:hover:bg-gray-300 transition-colors">Learn More</a>
</div>
<!-- Project Card 2 -->
<div class="bg-pink-600 dark:bg-yellow-400 p-6 border-4 border-black dark:border-white shadow-brutal">
<img src="https://picsum.photos/seed/project2/400/300" alt="Project 2" class="w-full h-48 object-cover border-4 border-black dark:border-white mb-4">
<h3 class="text-2xl font-bold mb-2 text-black dark:text-white">Project Beta</h3>
<p class="mb-4 text-black dark:text-white">A description of Project Beta, highlighting its innovative aspects.</p>
<a href="#" class="inline-block bg-black text-pink-600 dark:bg-white dark:text-yellow-400 px-6 py-3 font-bold border-2 border-black dark:border-white hover:bg-gray-700 dark:hover:bg-gray-300 transition-colors">View Case Study</a>
</div>
<!-- Interactive Contact Form -->
<div class="md:col-span-2 bg-teal-400 dark:bg-purple-600 p-8 border-4 border-black dark:border-white shadow-brutal">
<h3 class="text-3xl font-bold mb-6 text-black dark:text-white">Get in Touch</h3>
<form action="#" method="post">
<div class="mb-4">
<label for="name" class="block text-black dark:text-white text-sm font-bold mb-2">Name:</label>
<input type="text" id="name" name="name" class="shadow appearance-none border-4 border-black dark:border-white w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-white dark:bg-gray-800 dark:text-white" placeholder="Your Name">
</div>
<div class="mb-4">
<label for="email" class="block text-black dark:text-white text-sm font-bold mb-2">Email:</label>
<input type="email" id="email" name="email" class="shadow appearance-none border-4 border-black dark:border-white w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-white dark:bg-gray-800 dark:text-white" placeholder="Your Email">
</div>
<div class="mb-6">
<label for="message" class="block text-black dark:text-white text-sm font-bold mb-2">Message:</label>
<textarea id="message" name="message" rows="6" class="shadow appearance-none border-4 border-black dark:border-white w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-white dark:bg-gray-800 dark:text-white" placeholder="Your Message"></textarea>
</div>
<div class="flex items-center justify-between">
<button type="submit" class="bg-black text-teal-400 dark:bg-white dark:text-purple-600 font-bold py-3 px-6 rounded border-2 border-black dark:border-white hover:bg-gray-700 dark:hover:bg-gray-300 focus:outline-none focus:shadow-outline transition-colors">
Send Message
</button>
</div>
</form>
</div>
<!-- Testimonials/Avatar Section -->
<div class="md:col-span-2 bg-red-500 dark:bg-blue-600 p-8 border-4 border-black dark:border-white shadow-brutal grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="text-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar 1" class="w-24 h-24 rounded-full mx-auto border-4 border-black dark:border-white mb-4">
<p class="text-black dark:text-white mb-2">"Working with this company was a game-changer!"</p>
<p class="font-bold text-black dark:text-white">- Client A</p>
</div>
<div class="text-center">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar 2" class="w-24 h-24 rounded-full mx-auto border-4 border-black dark:border-white mb-4">
<p class="text-black dark:text-white mb-2">"Highly recommended for their creativity and skill."</p>
<p class="font-bold text-black dark:text-white">- Client B</p>
</div>
<div class="text-center">
<img src="https://randomuser.me/api/portraits/men/47.jpg" alt="Avatar 3" class="w-24 h-24 rounded-full mx-auto border-4 border-black dark:border-white mb-4">
<p class="text-black dark:text-white mb-2">"They exceeded all expectations!"</p>
<p class="font-bold text-black dark:text-white">- Client C</p>
</div>
</div>
</div>
</div>
<style>
.shadow-brutal {
box-shadow: 8px 8px 0 0 #000;
}
.dark .shadow-brutal {
box-shadow: 8px 8px 0 0 #fff;
}
</style>Composants associés
Fiche produit brutaliste
Un composant simple de carte produit interactive pour le e-commerce, avec un design brutaliste en niveaux de gris. Il comporte une image de produit, un titre, un prix et un bouton « Ajouter au panier ». Le composant est réactif et prend en charge le mode sombre. Des effets de survol sont inclus pour l’interactivité.
Composante des composantes interactives
Un composant interactif conçu pour les plateformes d’emploi et de carrière, avec des lignes fluides organiques inspirées de la nature et une palette de couleurs vives de bonbons et de sucreries. Il comprend des cartes de travail avec des boutons d’application et des étiquettes de compétence, prenant en charge la réactivité et le mode sombre.
Composante des composantes interactives
Un composant interactif minimaliste, dynamique et simple conçu pour les plateformes de divertissement et de médias, avec des commandes de lecture/pause, une barre de progression et un contrôle du volume des haut-parleurs. Comprend une réactivité complète et la prise en charge du mode sombre.