HTML / CSS : Créer un magazine

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é.

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>
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;
}
  • cfp/creer_un_magazine_html_css.txt
  • Dernière modification: 2019/05/16 23:41
  • par Cedric ABONNEL