recette.html.<h1> pour le nom de la recette (ex: "Gâteau au Chocolat").<img>. N'oubliez pas l'attribut alt.<h2> pour "Ingrédients" et une liste non ordonnée (<ul>) pour les énumérer.<h2> pour "Préparation" et une liste ordonnée (<ol>) pour les étapes.styles.css lié, changez la couleur du <body> et la police de caractères des titres.<h1>), une photo (<img>), et une description (<p>).<strong>) son trait de caractère principal et en italique (<em>) sa nourriture préférée.<a>) vers la page Wikipédia de son espèce.<header> pour le logo du site et une <nav>.<main> contiendra un <article> principal.<h1>, et à l'intérieur, une <section> pour chaque partie de l'article.<footer> avec des liens vers les réseaux sociaux.<header> et au <footer> en utilisant les sélecteurs de balise.<div> avec la classe .card.<h3> et un paragraphe <p>.#special-card..card pour donner à toutes les cartes une bordure et un padding.#special-card pour donner à cette carte une couleur de fond et une bordure différentes.14px.<div> qui contiendra la biographie d'un auteur.width) de 400px, une bordure (border), une ombre (box-shadow), et des coins arrondis (border-radius).padding généreux pour que le texte ne touche pas les bords.margin: 50px auto; pour centrer la boîte horizontalement sur la page.box-sizing: border-box;.<a>) qui serviront de "tags" (ex: "Voyage", "Cuisine", "Technologie").inline. Changez leur display en inline-block.padding, une couleur de fond, une couleur de texte, et un border-radius.margin pour qu'ils ne se collent pas les uns aux autres.:hover qui change leur couleur de fond..gallery et placez-y 6 <div> contenant une image et une légende.display: grid et grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); pour rendre la grille responsive.gap pour espacer les photos.grid-column: span 2;.grid-template-areas comme :
"header header"
"sidebar stats"
"sidebar chart"<div> correspondants (header, sidebar, stats, chart) et assignez-les à leur grid-area.<footer>. À l'intérieur, placez un paragraphe de copyright, et une <nav> avec une liste de liens (ex: "Contact", "Mentions Légales").<footer> pour aligner les éléments.justify-content: space-between;.align-items: center;.<div> contenant une icône (un simple emoji fera l'affaire) et un bloc de texte (titre + paragraphe).flex-grow: 1;.gap pour les espacer.position: relative;.<span>.absolute en haut à droite de l'icône pour simuler un badge de notification.z-index pour vous assurer qu'il est bien au-dessus de l'icône.position: sticky; et top: 20px; à la barre latérale.flex-direction: column; pour lister les articles récents.justify-content: space-between).<div> externe (le conteneur de la barre) et une <div> interne (la progression).10%).100%.transition sur la propriété width pour que le changement soit fluide et dure 2 secondes.position: relative;.<input type="text"> et une icône (emoji 🔍).padding-left suffisant pour faire de la place à l'icône.absolute à gauche à l'intérieur du champ de saisie.:focus.position: absolute pour superposer les deux faces.backface-visibility: hidden; pour cacher la face arrière au début.transform: rotateY(180deg); pour la faire pivoter et révéler la face arrière. N'oubliez pas la perspective sur le parent.@keyframes nommée "pulse".transform: scale() et l'opacity de l'élément pour donner une impression de pulsation.infinite).vh : height: 100vh;.vw pour que la taille de la police du titre s'adapte à la largeur de l'écran.type="email") et un champ mot de passe.required sur les deux champs.:valid et :invalid pour changer la couleur de la bordure des champs en vert s'ils sont valides et en rouge s'ils sont invalides (après que l'utilisateur ait interagi avec).:focus pour mettre en évidence le champ en cours de saisie.