Advertisement
vincentperaud

[MDC01] Exercice TP9

Feb 17th, 2020
189
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 3.07 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <link href="https://fonts.googleapis.com/css?family=Indie+Flower&display=swap" rel="stylesheet">
  5.     <title>Exercice TP9</title>
  6.     <meta charset="utf-8">
  7.     <style type="text/css">
  8.         #cercle, #carre, #losange {
  9.             width: 50px;
  10.             height: 50px;
  11.             float: left;
  12.             margin-right: 10px;
  13.             margin-top: 10px;
  14.         }
  15.         #cercle:hover, #carre:hover, #losange:hover {  
  16.             background-color: transparent;
  17.         }
  18.         #cercle {
  19.             background-color: #1abc9c;
  20.             border: 1px solid #1abc9c;
  21.             border-radius: 50%;
  22.         }
  23.         #carre {
  24.             background-color: #e67e22;
  25.             border: 1px solid #e67e22;
  26.         }
  27.         #losange {
  28.             background-color: #e74c3c;
  29.             border: 1px solid #e74c3c;
  30.             transform: rotate(45deg);
  31.             margin-left: 10px;
  32.         }
  33.         .clear {
  34.             clear: both;
  35.         }
  36.  
  37.         article {
  38.             border: 1px solid black;
  39.             border-radius: 20px;
  40.             padding: 20px;
  41.             margin-top: 30px;
  42.             font-family: 'Indie Flower', cursive;
  43.         }
  44.         article:hover {
  45.             border: 1px dashed black;
  46.         }
  47.         img {
  48.             width: 200px;
  49.             float: left;
  50.             margin-right: 20px;
  51.         }
  52.         p {
  53.             font-size: 20px;
  54.             line-height: 40px;
  55.             text-align: justify;
  56.             margin: 0;
  57.         }
  58.         h1 {
  59.             margin: 0;
  60.             padding: 0;
  61.             margin-bottom: 10px;
  62.             font-size: 40px;
  63.         }
  64.         #premiereLettre {
  65.             font-size: 40px;
  66.         }
  67.  
  68.     </style>
  69. </head>
  70. <body>
  71.     <div id="cercle"></div>
  72.     <div id="carre"></div>
  73.     <div id="losange"></div>
  74.     <div class="clear"></div>
  75.     <article>
  76.         <h1>Les chats</h1>
  77.         <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Collage_of_Six_Cats-02.jpg/1024px-Collage_of_Six_Cats-02.jpg" alt="Chats">
  78.         <p>
  79.             <span id="premiereLettre">L</span>e Chat domestique (Felis silvestris catus) est la sous-espèce issue de la domestication du Chat sauvage, mammifère carnivore de la famille des Félidés.
  80.         </p>
  81.         <p>
  82.             Il est l’un des principaux animaux de compagnie et compte aujourd’hui une cinquantaine de races différentes reconnues par les instances de certification. Dans de très nombreux pays, le chat entre dans le cadre de la législation sur les carnivores domestiques à l’instar du chien et du furet. Essentiellement territorial, le chat est un prédateur de petites proies comme les rongeurs ou les oiseaux. Les chats ont diverses vocalisations dont les ronronnements, les miaulements, les feulements ou les grognements, bien qu’ils communiquent principalement par des positions faciales et corporelles et des phéromones.
  83.         </p>
  84.         <p>
  85.             Selon les résultats de travaux menés en 2006 et 20071, le chat domestique est une sous-espèce du chat sauvage (Felis silvestris) issue d’ancêtres appartenant à la sous-espèce du chat sauvage d’Afrique (Felis silvestris lybica). Les premières domestications auraient eu lieu il y a 8 000 à 10 000 ans au Néolithique dans le Croissant fertile, époque correspondant au début de la culture de céréales et à l’engrangement de réserves susceptibles d’être attaquées par des rongeurs, le chat devenant alors pour l’Homme un auxiliaire utile se prêtant à la domestication.
  86.         </p>
  87.         <div class="clear"></div>
  88.     </article>
  89. </body>
  90. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement