Éditeur Tryit de W3Schools

<!DOCTYPE html>
<html>
<head>
<title>Titre de la page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}

body {
font-family: Arial;
marge: 0;
}

/* En-tête */
header {
padding: 60px;
text-align: center;
arrière-plan: #1abc9c;
couleur: blanc;
}

/* Barre de navigation supérieure */
.navbar {
afficher: flex;
couleur de fond: #333;
}

/* Liens de la barre de navigation */
.navbar a {
couleur: blanc;
padding: 14px 20px;
text-decoration: none;
text-align: center;
}

/* Changer la couleur au survol */
.navbar a:hover {
couleur de fond: #ddd;
couleur: noir;
}

/* Conteneur de colonne */
.container {
afficher: flex;
flex-wrap: wrap;
}

/* Barre latérale / colonne de gauche */
.side {
flex: 30%;
couleur-de-fond: #f1f1f1;
padding: 20px;
}

/* Colonne principale */
.main {
flex: 70%;
couleur-de-fond: blanc;
padding: 20px;
}

/* Image factice, juste pour cet exemple */
.fakeimg {
couleur de fond: #aaa;
largeur: 100%;
padding: 20px;
}

/* Pied de page */
footer {
padding: 20px;
text-align: center;
arrière-plan: #ddd;
}

/* Mise en page responsive - lorsque l'écran fait moins de 700px de large, empilez les deux colonnes les unes sur les autres au lieu de les placer côte à côte */
@media screen and (max-width: 700px) {
.container, .navbar {
flex-direction: colonne;
}
}
</style>
</head>
<body>

<div style="background:yellow;padding:5px;text-align:center;">
  <h4>Redimensionnez la fenêtre du navigateur pour voir l'effet réactif.</h4>
</div>

<header>
  <h1>Mon site Web</h1>
  <p>Avec un<b>flexible</b>mise en page.</p>
</header>

<div class="navbar">
  <a href="#">Lien</a>
  <a href="#">Lien</a>
  <a href="#">Lien</a>
  <a href="#">Lien</a>
</div>

<div class="container">
  <div class="side">
    <h2>À propos de moi</h2>
    <h5>Photo de moi :</h5>
    <div class="fakeimg" style="height:200px;">Image</div>
    <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
    <h3>Plus de texte</h3>
    <p>Lorem ipsum dolor sit ame.</p>
    <div class="fakeimg" style="height:60px;">Image</div><br>
    <div class="fakeimg" style="height:60px;">Image</div><br>
    <div class="fakeimg" style="height:60px;">Image</div>
  </div>
  <div class="main">
    <h2>TITRE EN-TÊTE</h2>
    <h5>Titre description, 7 oct. 2025</h5>
    <div class="fakeimg" style="height:200px;">Image</div>
    <p>Certain texte..</p>
    <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    <br>
    <h2>TITRE EN-TÊTE</h2>
    <h5>Titre description, 2 sept. 2025</h5>
    <div class="fakeimg" style="height:200px;">Image</div>
    <p>Certain texte..</p>
    <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
  </div>
</div>

<footer>
  <h2><footer> pied de page </footer></h2>
</footer>

</body>

</html>