| Élément | Prompt | Code CSS | Résultat |
|---|---|---|---|
| Tableau d'exemple | Création d'un tableau HTML pour afficher des informations relatives à un projet. |
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
th {
background-color: #4b0082;
color: white;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
|
Un tableau avec une bordure, un fond coloré pour les entêtes et des lignes alternées. |
| Formulaire avec les résultats | Création d'un formulaire pour collecter des informations utilisateur. |
form {
margin: 20px 0;
padding: 15px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
input[type="text"], input[type="email"] {
padding: 10px;
margin: 10px 0;
width: 100%;
border: 1px solid #ddd;
border-radius: 4px;
}
|
Un formulaire esthétique avec des champs textuels et des bordures arrondies. |
| Testimonial Design | Création d'un design pour afficher des témoignages utilisateurs dans un bloc stylisé. |
.testimonial {
padding: 20px;
background-color: #f8f1ff;
border-left: 6px solid #4b0082;
border-radius: 10px;
}
.testimonial p {
font-style: italic;
}
|
Un bloc avec fond coloré, bordure à gauche, et texte en italique pour un effet élégant. |
| SEO Optimisé | Création de sections SEO avec des balises spécifiques pour optimiser l'affichage et l'accessibilité. |
section.seo {
padding: 30px;
background-color: #eae0ff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.seo h2 {
color: #4b0082;
font-size: 1.8rem;
}
.seo p {
color: #555;
}
|
Une section avec des marges, un fond stylisé et un titre accrocheur. |
| Image avec effets | Ajout d'un effet visuel sur les images lors du survol pour attirer l'attention. |
img {
width: 100%;
height: auto;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
img:hover {
transform: scale(1.05);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
|
Une image avec un effet de zoom et d'ombre lorsqu'on la survole. |
| Responsive Navigation | Optimisation de la navigation pour les appareils mobiles avec un design flexible. |
nav ul {
display: flex;
justify-content: center;
gap: 30px;
}
@media (max-width: 768px) {
nav ul {
flex-direction: column;
}
}
|
Un menu de navigation qui se transforme en menu vertical sur les petits écrans. |
| Etudiant | Contribution |
|---|---|
| Pénélope | Rédaction de l’ensemble du contenu (présentation du produit, témoignages, choix des mots pour l’optimisation) |
| Lorenzo | Création du site internet (codage page d'accueil et page 2) |
| Maxime | Création du site internet (codage page SEO et page 4) |