-
Notifications
You must be signed in to change notification settings - Fork 0
/
card.html
105 lines (105 loc) · 11.3 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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!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>My cards</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="data:image/jpeg;base64,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" alt="" width="30" height="24">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="slider.html">slides</a>
</li>
<li class="nav-item">
<a class="nav-link" href="card.html">Card</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="card" style="width: 18rem;">
<img src="images/buddy.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">JIgri Dosto</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="https://www.google.com/" class="btn btn-primary">Visit google</a>
</div>
</div>
<h2>My dividing card</h2>
<div class="card mb-3" style="">
<div class="row g-0">
<div class="col-md-6">
<img src="images/silver.jpg" class="img-fluid rounded-start" alt="...">
</div>
<div class="col-md-6">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
<!-- card groups -->
<h1>My card groups</h1>
<div class="card-group">
<div class="card">
<img src="images/buddy.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title 1</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="images/sleep.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title 2</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="images/star.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-success">Last updated 3 mins ago</small>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>