Exercice 1/7

  • Observez le code des fichiers index.html et stylesheet.css ainsi que le résultat obtenu;
  • Cliquez sur soumettre ma réponse pour passer à la suite;

Leçon 1/7

Dans les quelques exercices qui suivent vous allez utilisez l'ensemble des sélecteurs que vous connaissez pour regrouper de façon distincte des éléments HTML, comme l'exemple qui est présenté ici.

Commentaires les mieux notés

  • menad.amrane-11

    avec qoui vous avez mis les cercles svp?

1 Commentaires

    index.html
    stylesheet.css
    <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>Ce que vous allez réaliser</title> </head> <body> <div class="friend" id="best_friend"><p>Arthur</p></div> <div class="friend"><p>BatManu</p></div> <div class="friend"><p>Capitaine Liberté</p></div> <div class="friend"><p>Louis C.K.</p></div> <div class="friend"><p>Justice</p></div> <div class="family"><p>Maman</p></div> <div class="family"><p>Papa</p></div> <div class="family"><p>Frérot</p></div> <div class="family"><p>Soeurette</p></div> <div class="family"><p>La chose</p></div> <div class="enemy"><p>Ryu</p></div> <div class="enemy"><p>Ken</p></div> <div class="enemy"><p>Zelda</p></div> <div class="enemy"><p>Godzilla</p></div> <div class="enemy" id="archnemesis"><p>Double Face</p></div> </body> </html>
    div { position: relative; display: inline-block; height: 100px; width: 100px; border-radius: 100%; border: 2px solid black; margin-left: 5px; margin-top: 5px; text-align: center; } div p { position: relative; margin-top: 40px; font-size: 12px; } .friend { border: 2px dashed green; } .family { border: 2px dashed blue; } .enemy { border: 2px dashed red; } #best_friend { border: 4px solid #00C957; } #archnemesis { border: 4px solid #cc0000; }