-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcards.html
110 lines (99 loc) · 6.38 KB
/
cards.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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">
<!-- cdn icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<section class="bg-light pt-5 pb-5 shadow-sm">
<div class="container">
<div class="row pt-5">
<div class="col-12">
<h3 class="text-uppercase border-bottom mb-4">Equal height Bootstrap 5 cards example</h3>
</div>
</div>
<div class="row">
<!--ADD CLASSES HERE d-flex align-items-stretch-->
<div class="col-lg-4 mb-3 d-flex align-items-stretch">
<div class="card">
<img src="https://i.postimg.cc/28PqLLQC/dotonburi-canal-osaka-japan-700.jpg" class="card-img-top" alt="Card Image">
<div class="card-body d-flex flex-column">
<h5 class="card-title">Dōtonbori Canal</h5>
<p class="card-text mb-4">Is a manmade waterway dug in the early 1600's and now displays many landmark commercial locals and vivid neon signs.</p>
<a href="#" class="btn btn-primary mt-auto align-self-start">Book now</a>
</div>
</div>
</div>
<!--ADD CLASSES HERE d-flex align-items-stretch-->
<div class="col-lg-4 mb-3 d-flex align-items-stretch">
<div class="card">
<img src="https://i.postimg.cc/4xVY64PV/porto-timoni-double-beach-corfu-greece-700.jpg" class="card-img-top" alt="Card Image">
<div class="card-body d-flex flex-column">
<h5 class="card-title">Porto Timoni Double Beach</h5>
<p class="card-text mb-4">Near Afionas village, on the west coast of Corfu island. The two beaches form two unique bays. The turquoise color of the sea contrasts to the high green hills surrounding it.</p>
<a href="#" class="btn btn-primary mt-auto align-self-start">Book now</a>
</div>
</div>
</div>
<!--ADD CLASSES HERE d-flex align-items-stretch-->
<div class="col-lg-4 mb-3 d-flex align-items-stretch">
<div class="card">
<img src="https://i.postimg.cc/TYyLPJWk/tritons-fountain-valletta-malta-700.jpg" class="card-img-top" alt="Card Image">
<div class="card-body d-flex flex-column">
<h5 class="card-title">Tritons Fountain</h5>
<p class="card-text mb-4">Located just outside the City Gate of Valletta, Malta. It consists of three bronze Tritons holding up a large basin, balanced on a concentric base built out of concrete and clad in travertine slabs.</p>
<a href="#" class="btn btn-primary mt-auto align-self-start">Book now</a>
</div>
</div>
</div>
<div class="col-lg-4 mb-3 d-flex align-items-stretch">
<div class="card">
<img src="https://i.postimg.cc/28PqLLQC/dotonburi-canal-osaka-japan-700.jpg" class="card-img-top" alt="Card Image">
<div class="card-body d-flex flex-column">
<h5 class="card-title">Dōtonbori Canal</h5>
<p class="card-text mb-4">Is a manmade waterway dug in the early 1600's and now displays many landmark commercial locals and vivid neon signs.</p>
<a href="#" class="btn btn-primary mt-auto align-self-start">Book now</a>
</div>
</div>
</div>
<!--ADD CLASSES HERE d-flex align-items-stretch-->
<div class="col-lg-4 mb-3 d-flex align-items-stretch">
<div class="card">
<img src="https://i.postimg.cc/4xVY64PV/porto-timoni-double-beach-corfu-greece-700.jpg" class="card-img-top" alt="Card Image">
<div class="card-body d-flex flex-column">
<h5 class="card-title">Porto Timoni Double Beach</h5>
<p class="card-text mb-4">Near Afionas village, on the west coast of Corfu island. The two beaches form two unique bays. The turquoise color of the sea contrasts to the high green hills surrounding it.</p>
<a href="#" class="btn btn-primary mt-auto align-self-start">Book now</a>
</div>
</div>
</div>
<!--ADD CLASSES HERE d-flex align-items-stretch-->
<div class="col-lg-4 mb-3 d-flex align-items-stretch">
<div class="card">
<img src="https://i.postimg.cc/TYyLPJWk/tritons-fountain-valletta-malta-700.jpg" class="card-img-top" alt="Card Image">
<div class="card-body d-flex flex-column">
<h5 class="card-title">Tritons Fountain</h5>
<p class="card-text mb-4">Located just outside the City Gate of Valletta, Malta. It consists of three bronze Tritons holding up a large basin, balanced on a concentric base built out of concrete and clad in travertine slabs.</p>
<a href="#" class="btn btn-primary mt-auto align-self-start">Book now</a>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI="
crossorigin="anonymous"></script>
</body>
</html>