10.2: Page - Étapes
Avec le CSS de l'exercice précédent, votre page devrait s'afficher comme ceci:
C'est à vous d'écrire le CSS simple: espacements, couleurs et autres proprietés CSS courantes.
CSS généré:
Pour le titre de la page, vous pouvez créer le CSS3 nécessaire avec http://www.3dcsstext.com/ ou https://html-css-js.com/css/generator/text-shadow/
Pour le bas de page, vous pouvez créer le dégradé nécessaire ici:
http://www.colorzilla.com/gradient-editor/
Utilisez une transparence/opacité de 50%
Indications particulières
- Réglez la largeur de « exterieur » à 1000px au lieu de 900px.
- Enlevez les couleurs de fond
- Utilisez background.png
- Réglez la police et la couleur de texte (#333) par défaut dans body (elle sera appliquée partout par héritage):
font-family: sans-serif; - Pour que les trois boites contenant les images soient sur la même ligne, utilisez un flexbox.
Vous pouvez régler les margin à la main, ou bien utiliser "justify-content: space-between;" pour les séparer automatiquement. - Réglez la bordure (3px) et l'espacement entre les boites et des images
- Ajoutez une ombre aux images:
box-shadow: 0 0 11px black; - Pour la couleur de fond de principal utilisez:
background-color: rgba(255,255,255,.5);
remarquez le .5 qui correspond à une transparence de 50% - Ajoutez une grande ombre à navigation:
box-shadow: 0 45px 60px -30px #7D7D7D; - Enlevez les puces de la liste ul:
list-style: none; - Enlevez le padding qui existe par défaut de cet ul
- Pour les liens à l'intérieur du <ul>, utilisez display: block;
Ceci leur fera prendra toute la place à l'intérieur des li. Vous pourrez agrandir ces liens avec du padding. - Pour enlever le souligné par défaut d'un lien, utilisez « text-decoration: none; »
- Pour changer la couleur de fond du lien lorsque la souris passe par-dessus, utilisez la pseudo-classe « :hover »
#navigation li a:hover
{
background-color: white;
} - La couleur du texte et des liens dans le bas de page est #888
- Utilisez « text-align: center; » pour centrer le texte du bas de page
- Ajustez les espacements et les bordures des <span> du bas de page