informatique:cfp:creer_un_magazine_html_css

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision		 Révision précédente
informatique:cfp:creer_un_magazine_html_css [2020/04/17 17:54] – ↷ Page déplacée de informatique:se:linux:cfp:creer_un_magazine_html_css à informatique:cfp:creer_un_magazine_html_css jsideinformatique:cfp:creer_un_magazine_html_css [2023/02/28 21:02] (Version actuelle) – ↷ Page déplacée de informatique:technologie:formats-audio:creer_un_magazine_html_css à informatique:cfp:creer_un_magazine_html_css Cédric ABONNEL
Ligne 1: Ligne 1:
 +====== HTML / CSS : Créer un magazine  ======
  
 +{{tag>"programmation"}}
 +
 +Suivez le cours en ligne depuis l'adresse https://projects.raspberrypi.org/en/projects/magazine/
 +
 +La réalisation s'effectue depuis le site https://trinket.io/embed/html/cef5e64bc0
 +
 +Ci-dessous le corrigé.
 +
 +<code HTML index.html>
 +<html>
 +<head>
 + <link rel="stylesheet" href="style.css">
 +</head>
 +<body>
 +
 +<h1>mon magazine</h1>
 +<div class="column1"></div>
 +<div class="column2">
 +  <div class="item">
 +    <h2>Mignon le chatton !</h2>
 +    <img class="photo" src="kitten.jpg"/>
 +  </div>
 +</div>
 +
 +</body>
 +</html>
 +</code>
 +
 +<code CSS style.css>
 +h1 {
 +  text-align: center;
 +  color: white;
 +  background: teal;
 +  padding: 5px;
 +}
 +
 +
 +body {
 +  background: linear-gradient(to bottom right, lemnchiffon, white);
 +  padding: 15px;
 +  font-family: Carlito;  
 +}
 +
 +.column1 {
 +  width: 48%;
 +  float:left;
 +}
 +
 +.column2 {
 +  width: 48%;
 +  float:right;
 +}
 +
 +img {
 +  max-width: 100%;
 +}
 +
 +.photo {
 +  box-shadow: 4px 4px 4px gray;
 +  transform: rotate(10deg);
 +}
 +
 +.item {
 +  padding: 10px;
 +  margin-bottom: 10px;
 +  border: 3px dashed teal;
 +}
 +
 +h2 {
 +  color: white;
 +  background: teal;
 +  padding: 5px;
 +  margin: 0px 0px 10px 0px;
 +  box-shadow: 2px 2px 2px gray;
 +  text-align: center;
 +}
 +</code>