Exercice 05 - Styliser le portfolio
Mise en place de l'exercice
- Dans votre dossier designweb ouvrez le dossier nommé ex02_portfolio
- Créez ensuite un dossier nommé css et dans ce dossier créez le fichier styles.css où vous allez écrire votre code css.
- Reliez votre fichier css au fichier index.html
Consignes
Pour chacune des modifications suivantes:
- Appliquez les styles demandés en respectant les valeurs proposées.
- Expérimentez avec différentes valeurs et observez les changements sur votre page.
- Conservez les valeurs qui correspondent au visuel que vous désirez.
Modifications
Styles à appliquer à la page (body)
- Modifiez la couleur de fond de la page pour une couleur unie foncée de votre choix.
- Appliquez une bordure d'au moins 5 pixels, pointillée et d'une couleur pâle de votre choix.
- Appliquez une marge (margin) de 100 pixels et observez le résultat sur la page.
- Appliquez un remplissage (padding) de 50 pixels et observez le résultat sur la page.
- Inspectez le style de la balise body dans l'inspecteur de votre navigateur et regardez comment la boîte est représentée.
- Changez la couleur de fond pour un dégradé. Vous pouvez faire des recherches sur Internet et/ou utiliser un générateur.
- Changez le dégradé pour une image de fond (n'hésitez pas à faire des recherches sur Internet pour obtenir le résultat désiré).
- Choisissez des valeurs qui correspondent au visuel que vous désirez. Vous pouvez modifier ou supprimer les styles comme bon vous semble.
Styles à appliquer au texte (titres, paragraphes, etc.)
- Modifiez les titres :
- Changez la couleur et la taille. Utilisez la même couleur pour tous les titres (h1, h2, etc.) avec des tailles différentes.
- Appliquez une police de caractères disponible sur Google Font ou Font Awesome. Utilisez la même police pour tous les titres.
- Modifiez le reste du texte (tout sauf les titres):
- La couleur doit être la même que les titres.
- La police de caractères doit être sûre (web-safe font). Basez vous sur cet article pour vous assurer d'utiliser une police web sûre : https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/Fundamentals#polices_web_sûres
- Utilisez la propriété font-weight pour représenter le texte de la section Présentation en gras.
- Choisissez des valeurs qui correspondent au visuel que vous désirez. Vous pouvez modifier ou supprimer les styles comme bon vous semble.
Styles à appliquer aux images
- Utilisez la propriété border-radius pour arrondir les coins de votre avatar afin qu'il soit dans un cercle.
- Changez le niveau d'opacité et appliquez un filtre de votre choix sur l'image présente dans la section "Une petite image pour finir".
- Choisissez des valeurs qui correspondent au visuel que vous désirez. Vous pouvez modifier ou supprimer les styles comme bon vous semble.
Styles à appliquez aux listes à puce
- Appliquez les styles suivants sur les éléments de la liste (li) présents dans la balise nav.
- display: inline;
- background-color: couleur de votre choix qui s'agence bien avec le fond de votre page
- margin: 0 30px;
- padding: 10px 20px 30px 40px;
- Inspectez le style d'un élément de liste dans l'inspecteur de votre navigateur et regardez comment la boîte est représentée.
- Ajustez les marges et l'espace de remplissage selon vos préférences.
- Changez la couleur de fond quand on survol avec la souris un des éléments de la liste.
- Modifiez le style des puces de la liste présente dans la section "Liens utiles".
- Choisissez des valeurs qui correspondent au visuel que vous désirez. Vous pouvez modifier ou supprimer les styles comme bon vous semble.
Styles à appliquer au tableau
- Prenez le temps de lire cet article sur la mise en forme des tableaux: https://developer.mozilla.org/fr/docs/Learn/CSS/Building_blocks/Styling_tables
- Testez votre compréhension en complétant ce défi : https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Tables_tasks
- Stylisez le tableau de la section "Mes voisins de tables" en vous assurant de respecter les règles suivantes:
- l'entête du tableau doit être mise en évidence avec une couleur de fond foncée de votre choix
- la couleur de fond des lignes doivent être en alternance avec des couleurs de fond pâles de votre choix.
- les bordures doivent être présentes mais discrètes.
- Choisissez des valeurs qui correspondent au visuel que vous désirez. Vous pouvez modifier ou supprimer les styles comme bon vous semble. N'hésitez pas à rechercher des exemples sur Internet.
Styles à appliquer aux sections
- Ajoutez une fine bordure au bas de chacune des sections en appliquant un style css sur la balise section.
- Ajustez la marge et l'espace de remplissage selon vos préférences.
- Modifiez le style de la dernière section pour qu'elle n'ait pas de bordure en utilisant l'id de cette section ou une pseudo-classe permettant de cibler la dernière section de la page.
Un peu de créativité
Ajoutez 5 styles de votre choix à votre page
Apprendre par les pairs
Présentez votre page à au moins 2 autres personnes de la classe. Prenez le temps de comparer le résultat et d'expliquer les styles utilisés en leur montrant de CSS que vous avez écrit.