Sortie au musée des Arts et Métiers
À partir de
sarmate
.
À partir de
https://replit.com
.
Exemples de fichiers html et css :
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Le titre de la page</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="ban"> Le titre dans la bannière </div> <div id="corps"> La partie dans laquelle on va écrire et inclure les photos. <h1>Paragraphe 1</h1> <p> Le texte du premier paragraphe, blabla bla blabla. Blablabla bla bla, blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla. <br /> Blablabla bla bla, blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla. <img src="samothrace.jpg" id="img01" /> Blablabla bla bla, blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla. <br /> Blablabla bla bla, blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla. </p> <h1>Paragraphe 2</h1> <p> Le texte du deuxième paragraphe, blabla bla blabla. Blablabla bla bla, blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla. <br /> Blablabla bla bla, blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla. <img src="pythagore.png" id="img02" /> Blablabla bla bla, blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla. </p> <h1>Paragraphe 3</h1> <p> Le texte du troisième paragraphe, blabla bla blabla. Blablabla bla bla, blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla. <br /> Blablabla bla bla, blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla.blabla bla blabla. </p> </div> </div> <!-- Pour ceux qui auraient besoin d'écrire des formules mathématiques------------------------------------------------------------------------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0/katex.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0/katex.min.js" ></script> <script src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/contrib/auto-render.min.js" ></script> <script> renderMathInElement( document.body, { delimiters: [ {left: "$$", right: "$$", display: true}, {left: "$", right: "$", display: false} ] } ); </script> </body> </html>
style.css
body{ background-image: url('bg_01.jpg'); background-repeat: no-repeat; background-position: fixed; background-size: cover; background-color: black; } #ban{ position: fixed; top: 0px; left: 20px; right: 20px; height: 60px; line-height: 60px; color: white; text-align: center; font-size: 140%; background: rgba(0,0,0,1); } #corps{ position: fixed; top: 70px; bottom: 30px; left: 20px; right:20px; background: rgba(0,0,0,0.8); color: white; padding: 5px; overflow-y: auto; } #img01{ width: 200px; display: block; margin: auto; margin-top: 10px; margin-bottom: 20px; border-radius: 20px; } #img02{ width: 300px; display: block; margin: auto; margin-top: 10px; margin-bottom: 20px; border-radius: 20px; }
Le
résultat
.