216 lines
4.3 KiB
HTML
216 lines
4.3 KiB
HTML
Voici un exemple de composant web complet pour un card de contenu avec animations CSS, design moderne et responsive. Le code est utilisé dans un seul fichier HTML autonome pour faciliter la compréhension.
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Composant Card</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<div class="container mx-auto p-4 md:p-6 lg:p-12 max-w-7xl">
|
|
<div class="card bg-white hover:bg-gray-100 shadow-lg rounded-lg overflow-hidden">
|
|
<div class="h-48 bg-blue-500 relative">
|
|
<img src="https://picsum.photos/200/300" alt="image de fond" class="absolute top-0 left-0 w-full h-full object-cover">
|
|
<div class="absolute top-0 left-0 w-full h-full flex justify-center items-center text-white font-bold text-lg">
|
|
Informations
|
|
</div>
|
|
</div>
|
|
<div class="p-4">
|
|
<h2 class="text-gray-900 leading-tight font-bold">Titre du contenu</h2>
|
|
<p class="text-gray-600 text-sm">Contenu du contenu</p>
|
|
<div class="flex justify-between items-center mt-4">
|
|
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Détails</button>
|
|
<button class="bg-gray-200 hover:bg-gray-300 text-gray-600 font-bold py-2 px-4 rounded">Supprimer</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
Et voici le fichier CSS pour le composant (en utilisant les classes utilitaires similaires à Tailwind CSS) :
|
|
|
|
```css
|
|
/* style.css */
|
|
|
|
/* Classes de base */
|
|
|
|
body {
|
|
font-family: 'Open Sans', sans-serif;
|
|
background-color: #f7f7f7;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1240px;
|
|
}
|
|
|
|
.card {
|
|
max-width: 800px;
|
|
max-height: 600px;
|
|
}
|
|
|
|
.bg-white {
|
|
background-color: #fff;
|
|
}
|
|
|
|
.bg-gray-100 {
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
.shadow-lg {
|
|
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.rounded-lg {
|
|
border-radius: 1rem;
|
|
}
|
|
|
|
.overflow-hidden {
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Animation CSS pour la card */
|
|
|
|
.card {
|
|
transition: transform 0.3s ease-in-out;
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-10px);
|
|
}
|
|
|
|
.card:hover .bg-blue-500 {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.card .bg-blue-500 {
|
|
transition: transform 0.3s ease-in-out;
|
|
}
|
|
|
|
/* Classes pour les éléments de la card */
|
|
|
|
.h-48 {
|
|
height: 48rem;
|
|
}
|
|
|
|
.bg-blue-500 {
|
|
background-color: #3498db;
|
|
}
|
|
|
|
.text-white {
|
|
color: #fff;
|
|
}
|
|
|
|
.font-bold {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.leading-tight {
|
|
line-height: 1.2rem;
|
|
}
|
|
|
|
.leading-normal {
|
|
line-height: 1.5rem;
|
|
}
|
|
|
|
.leading-loose {
|
|
line-height: 2rem;
|
|
}
|
|
|
|
.text-gray-600 {
|
|
color: #777;
|
|
}
|
|
|
|
.text-gray-900 {
|
|
color: #333;
|
|
}
|
|
|
|
.text-sm {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
|
|
.justify-between {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.items-center {
|
|
align-items: center;
|
|
}
|
|
|
|
.mt-4 {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.px-4 {
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
.py-2 {
|
|
padding-top: 0.5rem;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
|
|
.bg-gray-200 {
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
.text-gray-600 {
|
|
color: #777;
|
|
}
|
|
|
|
.font-bold {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.py-2 {
|
|
padding-top: 0.5rem;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
|
|
.px-4 {
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
.bg-blue-500:hover {
|
|
transition: background-color 0.3s ease-in-out;
|
|
}
|
|
```
|
|
|
|
Et voici le fichier JavaScript pour la fonctionnalité de la card :
|
|
|
|
```javascript
|
|
// script.js
|
|
|
|
const card = document.querySelector('.card');
|
|
const boutonDetails = document.querySelector('.bg-blue-500');
|
|
|
|
boutonDetails.addEventListener('click', function() {
|
|
console.log('Bouton détails cliqué');
|
|
});
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const card = document.querySelector('.card');
|
|
|
|
card.addEventListener('mouseover', function() {
|
|
console.log('Souris dessus');
|
|
});
|
|
|
|
card.addEventListener('mouseout', function() {
|
|
console.log('Souris loin');
|
|
});
|
|
});
|
|
```
|
|
|
|
Cet exemple de code crée un composant card avec un design moderne et responsive, qui prend en charge les animations CSS pour une expérience utilisateur plus engageante. Le code est écrit de manière flexible pour être facilement modifiable et personnalisable. |