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

Rappel: on veut obtenir ceci:


La prochaine page contient une correction.
Pour bien apprendre, c'est très important de faire les exercices au complet avant de regarder la correction. Si quelque-chose ne vous paraît pas clair, demandez à votre enseignant.