-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathAnimal.html
92 lines (90 loc) · 4.97 KB
/
Animal.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">Home</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="Animal.html">Animal</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Details.html">Details</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="index.html" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Type
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<div style="display: flex;">
<div class="card" style="width: 28rem; height: 35rem;">
<img src="C:\Users\admin\Bootstrap\pexels-laura-the-explaura-3608263.jpg" height="300px" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Panda</h5>
<p class="card-text">The giant panda, sometimes called a panda bear or simply panda, is a bear species endemic to China. It is characterised by its bold black-and-white coat and rotund body. The name "giant panda" is sometimes used to distinguish it from the red panda, a neighboring musteloid.</p>
</div>
</div>
<div class="card" style="width: 28rem; height: 35rem;">
<img src="C:\Users\admin\Bootstrap\pexels-pixabay-248280.jpg" height="300px" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Cat</h5>
<p class="card-text">The cat, commonly referred to as the domestic cat or house cat, is the only domesticated species in the family Felidae. Recent advances in archaeology and genetics have shown that the domestication of the cat occurred in the Near East around 7500 BC</p>
</div>
</div>
<div class="card" style="width: 28rem; height: 35rem;">
<img src="C:\Users\admin\Bootstrap\pexels-pixabay-208821.jpg" height="300"class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Donkey</h5>
<p class="card-text">The donkey is a domesticated equine. It derives from the African wild ass, Equus africanus, and may be classified either as a subspecies thereof, Equus africanus asinus, or as a separate species, Equus asinus.</p>
</div>
</div>
</div>
<br></br>
<div id="carouselExample" class="carousel slide" style="width: 1350px; height: 675px;">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="C:\Users\admin\Bootstrap\pexels-pixabay-50988.jpg" class="d-block w-100" alt="..." style="height:630px;">
</div>
<div class="carousel-item">
<img src="C:\Users\admin\Bootstrap\pexels-frans-van-heerden-631292.jpg" class="d-block w-100" alt="..." style="height:630px">
</div>
<div class="carousel-item">
<img src="C:\Users\admin\Bootstrap\pexels-pixabay-45170.jpg" class="d-block w-100" alt="..." style="height:630px">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>