Carte d’annonce immobilière - Pastel suisse
Une carte d’annonce immobilière simple, propre et réactive avec un style typographique suisse/international et une palette de couleurs pastel, adaptée aux plateformes immobilières. Inclut la prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-6 bg-rose-50 dark:bg-zinc-800 rounded-lg shadow-md max-w-sm mx-auto transition-colors duration-300">
<div class="relative mb-4 overflow-hidden rounded-md">
<img src="https://picsum.photos/400/250?random=10" alt="Property Image" class="w-full h-48 object-cover rounded-md transition-transform duration-300 hover:scale-105">
<div class="absolute bottom-2 left-2 bg-rose-200 dark:bg-zinc-700 text-zinc-800 dark:text-zinc-200 px-3 py-1 rounded-full text-xs font-semibold uppercase opacity-90">
For Sale
</div>
</div>
<h3 class="text-xl sm:text-2xl font-bold text-zinc-800 dark:text-rose-100 mb-2 truncate">
Modern City Apartment
</h3>
<p class="text-sm text-zinc-600 dark:text-zinc-400 mb-3 truncate">
123 Main St, Anytown, CA 90210
</p>
<div class="grid grid-cols-2 gap-y-2 text-zinc-700 dark:text-zinc-300 text-sm mb-4">
<div class="flex items-center">
<svg class="w-4 h-4 mr-2 text-rose-500 dark:text-rose-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10L6 7l9 4 6-3v11H3V10z"></path></svg>
3 Beds
</div>
<div class="flex items-center">
<svg class="w-4 h-4 mr-2 text-rose-500 dark:text-rose-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.25 15.3A4.5 4.5 0 0115.75 21H12a2.25 2.25 0 00-2.25 2.25h-1.5A2.25 2.25 0 016 21H3.75A2.25 2.25 0 011.5 18.75V9A2.25 2.25 0 013.75 6.75h1.5A2.25 2.25 0 007.5 4.5h9A2.25 2.25 0 0119.5 6.75h1.5A2.25 2.25 0 0122.5 9v9.75A4.5 4.5 0 0120.25 15.3z"></path></svg>
2 Baths
</div>
<div class="flex items-center">
<svg class="w-4 h-4 mr-2 text-rose-500 dark:text-rose-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12V4zm-4 4V4zm-4 4V4zm-4 4v7h16v-7c0-2-1-4-3-4H7c-2 0-3 2-3 4z"></path></svg>
1,200 sqft
</div>
<div class="flex items-center">
<svg class="w-4 h-4 mr-2 text-rose-500 dark:text-rose-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
Central
</div>
</div>
<div class="flex items-center justify-between">
<p class="text-xl sm:text-2xl font-extrabold text-zinc-900 dark:text-rose-200">
$350,000
</p>
<a href="#" class="inline-flex items-center px-4 py-2 bg-rose-400 dark:bg-rose-600 text-white rounded-md hover:bg-rose-500 dark:hover:bg-rose-700 transition-colors duration-200 text-sm sm:text-base font-semibold">
Details
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3"></path></svg>
</a>
</div>
</div>Composants associés
Affichage du contenu de la photographie ludique aux tons de bijoux
Un composant d’affichage de contenu complexe, ludique et amusant pour un portfolio ou une galerie de photographies, avec des tons de bijoux vifs, des éléments arrondis et un design réactif avec prise en charge du mode sombre. Il présente plusieurs éléments interactifs tels que des images en vedette, des mises en page de grille et des sections de profil.
Composant d’affichage du contenu
Un composant d’affichage nostalgique au design rétro, avec des effets réactifs et une prise en charge du thème sombre.
Skeuomorphic_Fashion_Card
Une carte d’affichage de contenu simple et réactive pour les produits de mode/beauté, conçue avec une esthétique skeuomorphe utilisant des tons bleus d’entreprise. Inclut la prise en charge du mode sombre.