W3Schools Éditeur Tryit

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}

body {
marge: 0;
padding: 0;
}

header {
couleur-de-fond: #f1f1f1;
padding: 10px;
text-align: center;
}

/* Styliser la barre de navigation supérieure */
ul.topnav {
afficher: flex;
list-style-type: none;
marge: 0;
padding: 0;
couleur-de-fond: #333333;
}

/* Styliser les liens dans la barre de navigation */
ul.topnav li a {
afficher: bloc;
couleur: #f1f1f1;
padding: 14px 16px;
text-decoration: none;
}

/* Changer la couleur au survol */
ul.topnav li a:hover {
couleur-de-fond: #dddddd;
couleur: noir;
}

div.flex-container {
affichage: flex;
flex-direction: row;
}

div.flex-container > div {
marge: 10px;
}

/* Styliser le pied de page */
footer {
position: fixe;
bas: 0;
gauche: 0;
largeur: 100%;
couleur de fond: #f1f1f1;
padding: 8px;
text-align: center;
z-index: 1000;
}

/* Utilisez une requête média et affichez les 3 colonnes verticalement si la largeur de l'écran est inférieure à 600px */
@media screen and (max-width:600px) {
div.flex-container {
flex-direction: colonne;
}
}
</style>
</head>
<body>

<header>
  <h1>Mon En-tête</h1>
  <p>Redimensionnez la fenêtre du navigateur pour voir l'effet réactif.</p>
</header>

<ul class="topnav">
  <li><a href="#">Accueil</a></li>
  <li><a href="#">Nouvelles</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">À propos</a></li>
</ul>

<div class="flex-container">
  <div>
    <h2>Côté</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna.</p>
  </div>

<div>
    <h2>Contenu principal</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
  </div>

<div>
    <h2>Côté</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.</p>
  </div>  
</div>

</body>

</html>