je crois que ca na pas archer le code apres display ne marche pas je comprend pas pourquoi
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
<title>nom du titre</title>
</head>
<body>
<div class="page">
<header>
<img src="images/logo-fourchette-2.png" height="96px" width="278px" alt="logo-fourchette"/>
</header>
<ul class="acceuil">
<li><a href="index.html">Accueil</a></li>
<li><a href="html/linguistique.html">Menus</a></li>
<li><a href="html/langues.html">Informations pratiques</a></li>
<li><a href="html/contacts">Contacts</a></li>
</ul>
<p class="azerty"><em>La fourchette: toujours plus cuit, toujours plus bon.</em></p><br>
<h1>Le totalorium du totalier plié</h1>
<p class="date"><em>le 21 novembre 2018 par Etienne Chapeau</em></p>
<div class="restaurant">
<h3>Gastronomie</h3>
<div class="bloc1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies,
purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.</div>
<h3>Produits</h3>
<div class="bloc2>">Lorem ipsum dolor sit amet, consectétuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies,
gurus lectus malesuada libero, Sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivarnus a tellus.
Pellentesque habitant morbi tristique senectus et netus ét malesuada fames ac turpis egestas, pharetra nonummy pede. MauriSet orci,
Aenean nec lorem. In porttitor; Donectaoreet nonummy.ugue. </div></div>
<div class="restaurant2">
<h3>Totalorium</h3>
<div class="bloc3">Lorem ipsum dolor sit amet, consectétuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies,
gurus lectus malesuada libero, Sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivarnus a tellus.
Pellentesque habitant morbi tristique senectus et netus ét malesuada fames ac turpis egestas, pharetra nonummy pede. MauriSet orci,
Aenean nec lorem. In porttitor; Donectaoreet nonummy.ugue. Suspendisse dui purus, scelefisque at, vulputate Vltae, pretium mattis, nunc.
Produits Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mæcenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricieS,
puruS lectus malesuada[ibero, sit amet commodo magna eros quis urna.</div>
<h3>Totalorium</h3>
<div class="bloc4">Lorem ipsum dolor sit amet, consectétuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies,
gurus lectus malesuada libero, Sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivarnus a tellus.
Pellentesque habitant morbi tristique senectus et netus ét malesuada fames ac turpis egestas, pharetra nonummy pede. MauriSet orci,
Aenean nec lorem. In porttitor; Donectaoreet nonummy.ugue. Suspendisse dui purus, scelefisque at, vulputate Vltae, pretium mattis, nunc.
Produits Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mæcenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricieS,
puruS lectus malesuada[ibero, sit amet commodo magna eros quis urna.</div></div>
<h2>Sur le meme sujet</h2>
<div class="images">
<img src="images/gougeres.jpg" alt="gougeres"><figcaption>Gougére joyeuses</figcaption>
<img src="images/table.jpg" alt="table"><figcaption>Table anonyme</figcaption>
<img src="images/biscuit.jpg" alt="biscuit"><figcaption>Biscuits malin</figcaption>
</div>
<footer>©2017 tous droits de reproduction réservés</footer>
</div>
</body>
</html>
.acceuil
{
vertical-align: center;
}
body
{
background-image: url("images/back-cover.jpg");
background-repeat: no-repeat;
background-size : 100%;
}
footer
{
text-align: right;
border-top: 1px solid;
margin-top: 40px;
}
li
{
list-style: none;
float: left;
border-right: 1px solid;
padding-left: 10px;
padding-right: 10px;
font-weight: bold;
}
a
{
text-decoration: none;
}
div.page
{
width: 990px;
height: 1000px;
margin: auto;
text-align: center;
background-color: hsla(358,28%,95%,0.85);
background-size : 100%
}
div.restaurant
{
width: 280px;
padding-left: 15px;
padding-right: 15px;
text-align: left;
float: left;
}
div.restaurant2, h1, .date
{
width: 640px;
padding-left: 15px;
padding-right: 15px;
text-align: left;
float: right;
}
div.images
{
width: 200px;
height: 150px;
}
a:hover
{
color: #d86c0c;
}
.bloc4
{
padding-bottom: 40px;
border-bottom: 1px solid;
}
h2
{
text-align: left;
padding-bottom: 10px;
padding-left: 10px;
}
.bloc4,h2
{
}
.azerty
{
float: right;
}
ul
{
border-top: 1px solid;
padding-top: 10px;
border-bottom:1px solid;
padding-bottom: 25px;
}
a
{
color: #000000;
}
h1,.date{
line-height: 10%;
}
figcaption
{
color: #b32;
}
figcaption:hover
{
color: grey;
}
.images
{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, min-content));
grid-gap: 1em;
}
span
{
grid-row: 2;
}[img]upload/1583681908-79024-azertyu.png[/img]
, sujet qui n'est apparemment pas résolu.
