-
Notifications
You must be signed in to change notification settings - Fork 0
/
card.html
84 lines (75 loc) · 5.21 KB
/
card.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
<main class="container mt-4">
<div class="card-columns mb-4">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="media/dartagnan.jpeg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">D'Artagnan <small>(soldat)</small></h5>
<p class="card-text mb-0"><i class="fas fa-child"></i> Béarn <i class="fas fa-skull-crossbones"></i> Maastricht en 1673</p>
<p class="card-text">Célèbre mousquetaire au service du Roi, D'Artagnan est connu pour son caractère trempé et fier de Béarnais !</p>
<span class="btn btn-primary">Les Trois Mousquetaires</span>
<hr />
Type:
Héro | Opposant | Adjuvant
</div>
</div>
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="media/alice.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Alice <small>(personnage fantastique)</small></h5>
<p class="card-text">Cupiditate quia labore excepturi occaecati ut reiciendis. Ut expedita id rerum aperiam quia iste architecto. Voluptate vel consequatur voluptatum et sed laudantium ut. Illo non id voluptatem quia id. Necessitatibus vel et quaerat.</p>
<span class="btn btn-primary">Les Aventures d'Alice au pays des merveilles</span> <span class="btn btn-primary">De l'autre côté du miroir</span>
</div>
</div>
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="media/athena.jpeg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Athéna <small>(déesse grecque de la guerre)</small></h5>
<p class="card-text mb-0"><i class="fas fa-male"></i> Zeus <i class="fas fa-female"></i> Métis</p>
<p class="card-text mb-0"><i class="fas fa-home"></i> Mont Olympe</p>
<span class="btn btn-primary">L'Odyssée</span>
</div>
</div>
</div>
<div class="card-columns">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="media/dartmoor.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Dartmoor <small>(prison)</small></h5>
<p class="card-text mb-0"><i class="fas fa-map-marker-alt"></i> Royaume-Uni</p>
<span class="btn btn-primary">Le chien des Baskerville</span>
</div>
</div>
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="media/dartagnan.jpeg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">D'Artagnan <small>(soldat)</small></h5>
<p class="card-text mb-0"><i class="fas fa-child"></i> Béarn <i class="fas fa-skull-crossbones"></i> Maastricht en 1673</p>
<p class="card-text">Célèbre mousquetaire au service du Roi, D'Artagnan est connu pour son caractère trempé et fier de Béarnais !</p>
<span class="btn btn-primary">Les Trois Mousquetaires</span>
</div>
</div>
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="media/dartagnan.jpeg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">D'Artagnan <small>(soldat)</small></h5>
<p class="card-text mb-0"><i class="fas fa-child"></i> Béarn <i class="fas fa-skull-crossbones"></i> Maastricht en 1673</p>
<p class="card-text">Célèbre mousquetaire au service du Roi, D'Artagnan est connu pour son caractère trempé et fier de Béarnais !</p>
<span class="btn btn-primary">Les Trois Mousquetaires</span>
</div>
</div>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>