Dans cet exercice, vous devez essayer de reproduire une mise en forme CSS juste en vous référant à un modèle donné sous la forme d’une image.
Consignes
Créez un dossier racine local qui contiendra la totalité des fichiers de votre exercice et veillez à nommer ce dossier correctement.
Téléchargez ci-dessous le fichier .html de base nécessaire pour démarrer l’exercice ainsi que le fichier modèle au format .png.
Vous pouvez faire l’exercice à partir de deux fichiers différents :
– css03-page.html : dans lequel vous ne devrez pas modifier le code HTML ;
– css03-page-v2.html : dans lequel vous allez devoir effctuer des modifications du code HTML (ajout de classe, de balise strong, etc).
Pour télécharger un fichier, faites un clic droit sur le fichier désiré et choisissez l’option Télécharger.
Pour télécharger plusieurs fichiers, sélectionnez les fichiers désirés puis cliquez sur Télécharger les sélectionnés. Les fichiers seront téléchargés sous la forme d’une archive .zip. Veillez à bien extraire le contenu de l’archive avant de commencer à travailler.
Placez les fichiers que vous venez de télécharger dans votre dossier racine local.
Créez un fichier .css dans votre dossier racine local.
Intégrez la feuille de style que vous venez de créer dans votre page .html.
Code à placer dans l’en-tête de la page HTML en personnalisant la valeur de l’attribut href si nécessaire afin qu’elle corresponde à l’emplacement et au nom du fichier CSS.
<link rel="stylesheet" type="text/css" href="style.css">
Intégrez, à partir de Google Font, la police de caractère de votre choix à votre fichier .css afin de l’utiliser comme police par défaut.
Utilisez le site https://coolors.co pour générer une palette de couleur de votre choix que vous utiliserez pour l’exercice. Notez que pour des raisons de visibilité, l’exercice utilise plus de 5 couleurs, vous devez vous limiter aux 5 couleurs de votre palette.
Créez le code CSS permettant de reproduire la mise en forme du document modèle. Essayez d’en être le plus proche possible…
Si vous êtes parti du fichier css_exercice_mise_en_forme_03.html, vous ne devez pas modifier le code du fichier .html pour réaliser cet exercice.
background-colorborderborder-bottomborder-radiuscolorfont-familyfont-sizefont-stylefont-weightlist-style-typemarginmargin-bottommargin-rightmargin-toppaddingpadding-bottompadding-toptext-aligntext-decorationtext-transform