publish: HTML / CSS : Créer un magazine
This commit is contained in:
Cédrix
@@ -1,16 +0,0 @@
|
||||
{
|
||||
"title": "HTML / CSS : Créer un magazine",
|
||||
"_updated_at": "2026-05-15 14:37:17",
|
||||
"slug": "creer-un-magazine-html-css",
|
||||
"published": true,
|
||||
"published_at": "2023-02-28 20:02",
|
||||
"category": "Développement",
|
||||
"tags": {
|
||||
"tags": [
|
||||
"HTML",
|
||||
"CSS"
|
||||
]
|
||||
},
|
||||
"seo_title": "",
|
||||
"seo_description": ""
|
||||
}
|
||||
@@ -1,286 +0,0 @@
|
||||
# HTML / CSS : Créer un magazine
|
||||
|
||||
> Tutoriel pas-à-pas pour réaliser une mise en page de type magazine avec HTML et CSS.
|
||||
> Adapté en français du projet *Magazine* de la Raspberry Pi Foundation.
|
||||
|
||||
---
|
||||
|
||||
## Objectifs pédagogiques
|
||||
|
||||
À la fin de ce projet, tu sauras :
|
||||
|
||||
- structurer une page web avec des balises HTML ;
|
||||
- relier une feuille de style CSS à ta page ;
|
||||
- découper une page en **deux colonnes** ;
|
||||
- styliser des titres, des encadrés et des images ;
|
||||
- appliquer une **rotation** et une **ombre portée** à un élément ;
|
||||
- ajouter une petite **animation** pour finir.
|
||||
|
||||
## Ce dont tu as besoin
|
||||
|
||||
- un navigateur web (Firefox, Chrome, Edge…) ;
|
||||
- un éditeur en ligne comme [trinket.io](https://trinket.io) — l'environnement de départ se trouve à l'adresse `https://trinket.io/embed/html/cef5e64bc0` ;
|
||||
- une image au format JPG ou PNG (par exemple une photo d'animal de compagnie).
|
||||
|
||||
Tu peux aussi travailler en local avec un simple éditeur de texte (VS Code, Geany, Notepad++) et créer deux fichiers dans le même dossier : `index.html` et `style.css`.
|
||||
|
||||
---
|
||||
|
||||
## Étape 1 — Le squelette HTML et le titre
|
||||
|
||||
On commence par poser le squelette de la page et lui associer une feuille de style externe.
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>mon magazine</h1>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Dans `style.css`, on stylise le grand titre et le fond de la page :
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: white;
|
||||
background: teal;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(to bottom right, lemonchiffon, white);
|
||||
padding: 15px;
|
||||
font-family: Carlito;
|
||||
}
|
||||
```
|
||||
|
||||
**Ce que l'on a appris :**
|
||||
|
||||
- `<link rel="stylesheet">` connecte le HTML à la feuille CSS ;
|
||||
- `text-align`, `color`, `background` et `padding` modifient l'apparence d'un élément ;
|
||||
- `linear-gradient(...)` crée un dégradé pour le fond.
|
||||
|
||||
> Astuce : `lemonchiffon` est un nom de couleur CSS standard. Si tu écris `lemnchiffon` (oubli du *o*), le navigateur ignore la règle silencieusement.
|
||||
|
||||
---
|
||||
|
||||
## Étape 2 — Créer les deux colonnes
|
||||
|
||||
Une mise en page de magazine, c'est souvent deux colonnes côte à côte. On les déclare dans le HTML…
|
||||
|
||||
```html
|
||||
<div class="column1"></div>
|
||||
<div class="column2"></div>
|
||||
```
|
||||
|
||||
… puis on les place avec du CSS :
|
||||
|
||||
```css
|
||||
.column1 {
|
||||
width: 48%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.column2 {
|
||||
width: 48%;
|
||||
float: right;
|
||||
}
|
||||
```
|
||||
|
||||
Pourquoi 48 % et pas 50 % ? Pour laisser un peu d'air entre les deux colonnes. La propriété `float` indique au navigateur de placer le bloc à gauche ou à droite, et de laisser le reste du contenu s'écouler autour.
|
||||
|
||||
---
|
||||
|
||||
## Étape 3 — Ajouter un premier article
|
||||
|
||||
Chaque article du magazine sera contenu dans une `<div class="item">`. On commence par un encart simple, dans la colonne de droite :
|
||||
|
||||
```html
|
||||
<div class="column2">
|
||||
<div class="item">
|
||||
<h2>Mignon le chaton !</h2>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Et on stylise les titres `h2` et les encadrés `.item` :
|
||||
|
||||
```css
|
||||
h2 {
|
||||
color: white;
|
||||
background: teal;
|
||||
padding: 5px;
|
||||
margin: 0px 0px 10px 0px;
|
||||
box-shadow: 2px 2px 2px gray;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
border: 3px dashed teal;
|
||||
}
|
||||
```
|
||||
|
||||
À retenir :
|
||||
|
||||
- `border: 3px dashed teal;` crée une bordure en **pointillés**. Essaie aussi `solid`, `dotted` ou `double` pour comparer.
|
||||
- `box-shadow` ajoute une ombre portée. Les deux premières valeurs sont le décalage horizontal et vertical, la troisième le flou.
|
||||
|
||||
---
|
||||
|
||||
## Étape 4 — Ajouter la photo
|
||||
|
||||
On insère une image à l'intérieur de l'encart, et on lui donne la classe `photo` pour la styliser à part :
|
||||
|
||||
```html
|
||||
<div class="item">
|
||||
<h2>Mignon le chaton !</h2>
|
||||
<img class="photo" src="chaton.jpg" />
|
||||
</div>
|
||||
```
|
||||
|
||||
Dans le CSS :
|
||||
|
||||
```css
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.photo {
|
||||
box-shadow: 4px 4px 4px gray;
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
```
|
||||
|
||||
Deux notions importantes ici :
|
||||
|
||||
- `max-width: 100%` empêche l'image de **déborder** de son encart, quelle que soit sa taille d'origine ;
|
||||
- `transform: rotate(10deg)` incline l'image de 10 degrés vers la droite — comme une polaroïd collée de travers sur un cahier. Essaie `-10deg` pour la pencher dans l'autre sens.
|
||||
|
||||
> Si tu travailles sur trinket.io, glisse ton image dans le panneau de fichiers à gauche et utilise exactement le même nom dans l'attribut `src`.
|
||||
|
||||
---
|
||||
|
||||
## Étape 5 — Ajouter d'autres articles
|
||||
|
||||
Le principe est désormais simple : à chaque fois que tu veux un nouvel article, tu copies un bloc `<div class="item">…</div>` et tu remplaces son contenu. Tu peux les répartir librement entre `column1` et `column2`.
|
||||
|
||||
Quelques idées d'éléments à mettre dans un `.item` :
|
||||
|
||||
- un titre `<h2>` ;
|
||||
- un paragraphe `<p>` ;
|
||||
- une image avec la classe `photo` ;
|
||||
- une liste `<ul>` avec des `<li>`.
|
||||
|
||||
---
|
||||
|
||||
## Étape 6 — Ajouter une petite animation (bonus)
|
||||
|
||||
Pour donner vie à la page, on peut faire vibrer légèrement la photo au survol de la souris. Voici un exemple de règle à ajouter au CSS :
|
||||
|
||||
```css
|
||||
.photo:hover {
|
||||
transform: rotate(-5deg) scale(1.05);
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
```
|
||||
|
||||
- `:hover` se déclenche quand le curseur passe sur l'élément ;
|
||||
- `scale(1.05)` agrandit l'image de 5 % ;
|
||||
- `transition` rend le changement progressif au lieu d'être brutal.
|
||||
|
||||
---
|
||||
|
||||
## Le corrigé complet
|
||||
|
||||
### `index.html`
|
||||
|
||||
```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 chaton !</h2>
|
||||
<img class="photo" src="chaton.jpg" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### `style.css`
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: white;
|
||||
background: teal;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(to bottom right, lemonchiffon, 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;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Pour aller plus loin
|
||||
|
||||
- Remplace les `float` par **Flexbox** (`display: flex` sur le parent) : c'est la méthode moderne pour disposer des colonnes.
|
||||
- Essaie une grille à 3 colonnes avec **CSS Grid** (`display: grid; grid-template-columns: 1fr 1fr 1fr;`).
|
||||
- Ajoute une **font** depuis [Google Fonts](https://fonts.google.com) pour remplacer Carlito.
|
||||
- Rends ton magazine **responsive** avec une `@media (max-width: 600px)` qui repasse les colonnes en pleine largeur sur mobile.
|
||||
|
||||
## Sources
|
||||
|
||||
- Projet original : [projects.raspberrypi.org/en/projects/magazine](https://projects.raspberrypi.org/en/projects/magazine/) — Raspberry Pi Foundation, sous licence Creative Commons BY-SA 4.0.
|
||||
- Environnement d'édition : [trinket.io](https://trinket.io).
|
||||
@@ -1,15 +1,209 @@
|
||||
# HTML / CSS : Créer un magazine
|
||||
|
||||
Suivez le cours en ligne depuis l'adresse https:*projects.raspberrypi.org/en/projects/magazine/
|
||||
> Tutoriel pas-à-pas pour réaliser une mise en page de type magazine avec HTML et CSS.
|
||||
> Adapté en français du projet *Magazine* de la Raspberry Pi Foundation.
|
||||
|
||||
La réalisation s'effectue depuis le site https:*trinket.io/embed/html/cef5e64bc0
|
||||
---
|
||||
|
||||
Ci-dessous le corrigé.
|
||||
## Objectifs pédagogiques
|
||||
|
||||
```HTML
|
||||
À la fin de ce projet, tu sauras :
|
||||
|
||||
- structurer une page web avec des balises HTML ;
|
||||
- relier une feuille de style CSS à ta page ;
|
||||
- découper une page en **deux colonnes** ;
|
||||
- styliser des titres, des encadrés et des images ;
|
||||
- appliquer une **rotation** et une **ombre portée** à un élément ;
|
||||
- ajouter une petite **animation** pour finir.
|
||||
|
||||
## Ce dont tu as besoin
|
||||
|
||||
- un navigateur web (Firefox, Chrome, Edge…) ;
|
||||
- un éditeur en ligne comme [trinket.io](https://trinket.io) — l'environnement de départ se trouve à l'adresse `https://trinket.io/embed/html/cef5e64bc0` ;
|
||||
- une image au format JPG ou PNG (par exemple une photo d'animal de compagnie).
|
||||
|
||||
Tu peux aussi travailler en local avec un simple éditeur de texte (VS Code, Geany, Notepad++) et créer deux fichiers dans le même dossier : `index.html` et `style.css`.
|
||||
|
||||
---
|
||||
|
||||
## Étape 1 — Le squelette HTML et le titre
|
||||
|
||||
On commence par poser le squelette de la page et lui associer une feuille de style externe.
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>mon magazine</h1>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Dans `style.css`, on stylise le grand titre et le fond de la page :
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: white;
|
||||
background: teal;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(to bottom right, lemonchiffon, white);
|
||||
padding: 15px;
|
||||
font-family: Carlito;
|
||||
}
|
||||
```
|
||||
|
||||
**Ce que l'on a appris :**
|
||||
|
||||
- `<link rel="stylesheet">` connecte le HTML à la feuille CSS ;
|
||||
- `text-align`, `color`, `background` et `padding` modifient l'apparence d'un élément ;
|
||||
- `linear-gradient(...)` crée un dégradé pour le fond.
|
||||
|
||||
> Astuce : `lemonchiffon` est un nom de couleur CSS standard. Si tu écris `lemnchiffon` (oubli du *o*), le navigateur ignore la règle silencieusement.
|
||||
|
||||
---
|
||||
|
||||
## Étape 2 — Créer les deux colonnes
|
||||
|
||||
Une mise en page de magazine, c'est souvent deux colonnes côte à côte. On les déclare dans le HTML…
|
||||
|
||||
```html
|
||||
<div class="column1"></div>
|
||||
<div class="column2"></div>
|
||||
```
|
||||
|
||||
… puis on les place avec du CSS :
|
||||
|
||||
```css
|
||||
.column1 {
|
||||
width: 48%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.column2 {
|
||||
width: 48%;
|
||||
float: right;
|
||||
}
|
||||
```
|
||||
|
||||
Pourquoi 48 % et pas 50 % ? Pour laisser un peu d'air entre les deux colonnes. La propriété `float` indique au navigateur de placer le bloc à gauche ou à droite, et de laisser le reste du contenu s'écouler autour.
|
||||
|
||||
---
|
||||
|
||||
## Étape 3 — Ajouter un premier article
|
||||
|
||||
Chaque article du magazine sera contenu dans une `<div class="item">`. On commence par un encart simple, dans la colonne de droite :
|
||||
|
||||
```html
|
||||
<div class="column2">
|
||||
<div class="item">
|
||||
<h2>Mignon le chaton !</h2>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Et on stylise les titres `h2` et les encadrés `.item` :
|
||||
|
||||
```css
|
||||
h2 {
|
||||
color: white;
|
||||
background: teal;
|
||||
padding: 5px;
|
||||
margin: 0px 0px 10px 0px;
|
||||
box-shadow: 2px 2px 2px gray;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
border: 3px dashed teal;
|
||||
}
|
||||
```
|
||||
|
||||
À retenir :
|
||||
|
||||
- `border: 3px dashed teal;` crée une bordure en **pointillés**. Essaie aussi `solid`, `dotted` ou `double` pour comparer.
|
||||
- `box-shadow` ajoute une ombre portée. Les deux premières valeurs sont le décalage horizontal et vertical, la troisième le flou.
|
||||
|
||||
---
|
||||
|
||||
## Étape 4 — Ajouter la photo
|
||||
|
||||
On insère une image à l'intérieur de l'encart, et on lui donne la classe `photo` pour la styliser à part :
|
||||
|
||||
```html
|
||||
<div class="item">
|
||||
<h2>Mignon le chaton !</h2>
|
||||
<img class="photo" src="chaton.jpg" />
|
||||
</div>
|
||||
```
|
||||
|
||||
Dans le CSS :
|
||||
|
||||
```css
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.photo {
|
||||
box-shadow: 4px 4px 4px gray;
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
```
|
||||
|
||||
Deux notions importantes ici :
|
||||
|
||||
- `max-width: 100%` empêche l'image de **déborder** de son encart, quelle que soit sa taille d'origine ;
|
||||
- `transform: rotate(10deg)` incline l'image de 10 degrés vers la droite — comme une polaroïd collée de travers sur un cahier. Essaie `-10deg` pour la pencher dans l'autre sens.
|
||||
|
||||
> Si tu travailles sur trinket.io, glisse ton image dans le panneau de fichiers à gauche et utilise exactement le même nom dans l'attribut `src`.
|
||||
|
||||
---
|
||||
|
||||
## Étape 5 — Ajouter d'autres articles
|
||||
|
||||
Le principe est désormais simple : à chaque fois que tu veux un nouvel article, tu copies un bloc `<div class="item">…</div>` et tu remplaces son contenu. Tu peux les répartir librement entre `column1` et `column2`.
|
||||
|
||||
Quelques idées d'éléments à mettre dans un `.item` :
|
||||
|
||||
- un titre `<h2>` ;
|
||||
- un paragraphe `<p>` ;
|
||||
- une image avec la classe `photo` ;
|
||||
- une liste `<ul>` avec des `<li>`.
|
||||
|
||||
---
|
||||
|
||||
## Étape 6 — Ajouter une petite animation (bonus)
|
||||
|
||||
Pour donner vie à la page, on peut faire vibrer légèrement la photo au survol de la souris. Voici un exemple de règle à ajouter au CSS :
|
||||
|
||||
```css
|
||||
.photo:hover {
|
||||
transform: rotate(-5deg) scale(1.05);
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
```
|
||||
|
||||
- `:hover` se déclenche quand le curseur passe sur l'élément ;
|
||||
- `scale(1.05)` agrandit l'image de 5 % ;
|
||||
- `transition` rend le changement progressif au lieu d'être brutal.
|
||||
|
||||
---
|
||||
|
||||
## Le corrigé complet
|
||||
|
||||
### `index.html`
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -17,8 +211,8 @@ Ci-dessous le corrigé.
|
||||
<div class="column1"></div>
|
||||
<div class="column2">
|
||||
<div class="item">
|
||||
<h2>Mignon le chatton !</h2>
|
||||
<img class="photo" src="kitten.jpg"/>
|
||||
<h2>Mignon le chaton !</h2>
|
||||
<img class="photo" src="chaton.jpg" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -26,29 +220,30 @@ Ci-dessous le corrigé.
|
||||
</html>
|
||||
```
|
||||
|
||||
```CSS
|
||||
### `style.css`
|
||||
|
||||
```css
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: white;
|
||||
background: teal;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
background: linear-gradient(to bottom right, lemnchiffon, white);
|
||||
background: linear-gradient(to bottom right, lemonchiffon, white);
|
||||
padding: 15px;
|
||||
font-family: Carlito;
|
||||
font-family: Carlito;
|
||||
}
|
||||
|
||||
.column1 {
|
||||
width: 48%;
|
||||
float:left;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.column2 {
|
||||
width: 48%;
|
||||
float:right;
|
||||
float: right;
|
||||
}
|
||||
|
||||
img {
|
||||
@@ -74,4 +269,18 @@ h2 {
|
||||
box-shadow: 2px 2px 2px gray;
|
||||
text-align: center;
|
||||
}
|
||||
```
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Pour aller plus loin
|
||||
|
||||
- Remplace les `float` par **Flexbox** (`display: flex` sur le parent) : c'est la méthode moderne pour disposer des colonnes.
|
||||
- Essaie une grille à 3 colonnes avec **CSS Grid** (`display: grid; grid-template-columns: 1fr 1fr 1fr;`).
|
||||
- Ajoute une **font** depuis [Google Fonts](https://fonts.google.com) pour remplacer Carlito.
|
||||
- Rends ton magazine **responsive** avec une `@media (max-width: 600px)` qui repasse les colonnes en pleine largeur sur mobile.
|
||||
|
||||
## Sources
|
||||
|
||||
- Projet original : [projects.raspberrypi.org/en/projects/magazine](https://projects.raspberrypi.org/en/projects/magazine/) — Raspberry Pi Foundation, sous licence Creative Commons BY-SA 4.0.
|
||||
- Environnement d'édition : [trinket.io](https://trinket.io).
|
||||
@@ -4,10 +4,18 @@
|
||||
"title": "HTML / CSS : Créer un magazine",
|
||||
"author": "cedric@abonnel.fr",
|
||||
"published": true,
|
||||
"published_at": "2023-02-28 20:02:45",
|
||||
"featured": false,
|
||||
"published_at": "2023-02-28 20:02",
|
||||
"created_at": "2023-02-28 20:02:45",
|
||||
"updated_at": "2023-02-28 20:02:45",
|
||||
"revisions": [],
|
||||
"updated_at": "2026-05-15 14:37:17",
|
||||
"revisions": [
|
||||
{
|
||||
"n": 1,
|
||||
"date": "2026-05-15 14:37:17",
|
||||
"comment": "Catégorie modifiée, tags modifiés, contenu modifié",
|
||||
"title": "HTML / CSS : Créer un magazine"
|
||||
}
|
||||
],
|
||||
"cover": "",
|
||||
"files_meta": [],
|
||||
"external_links": [
|
||||
@@ -34,5 +42,11 @@
|
||||
"seo_title": "",
|
||||
"seo_description": "",
|
||||
"og_image": "",
|
||||
"category": "Informatique"
|
||||
"category": "Développement",
|
||||
"tags": {
|
||||
"tags": [
|
||||
"HTML",
|
||||
"CSS"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,77 @@
|
||||
# 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é.
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user