// Ici, on peut faire tourner un objet

.App-logo {
  animation: App-logo-spin infinite 10s linear;
}
  
  
@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


CSS keyframe

Amélioration syntaxique de niveau 4

<§@media (width <= 30em) {
    ...
}
§>

<§@media (30em <= width <= 50em ) {
    ...
}§>




Média queries

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

html base

// balise meter
<meter value="90" min="0" max="100"  high="70" ></meter> <span>Meter</span>

// css
meter::-webkit-meter-optimum-value {
    background-image: linear-gradient(
      #719fd1 100%,
      #719fd1 100%
    );
}

// balise progress
<progress value="85"  max="100">    </progress>


Balise meter et progress

// Afficher un tableau
<§
<table>
  <caption>Prices (title)</caption>
  <thead>
    <tr>
       <th>Produit</th>
       <th>Prix</th>
    </tr>
  </thead>
  <tbody>
    <tr>
       <td>collier</td>
       <td>200</td>
    </tr>
    <tr>
        <td>bague</td>
        <td>50</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
        <td>total</td>
        <td>150</td>
    </tr>
  </tfoot>
</table>
§>

HTML/CSS

CSS keyframe

Média queries

html base

Balise meter et progress

Table

Balises liste