Untitled
unknown
plain_text
a year ago
4.4 kB
1
Indexable
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md-6 col-xl-3">
<div class="card" style="width: 18rem;">
<img src="https://petsatrest.co.nz/cdn/shop/files/shutterstock_76551274_3b1d87c3-c64f-447a-8ea5-bb0649dc11af_1500x.jpg?v=1646877155" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Kitty</h5>
<p class="card-text">5 Fun Facts About Kittens
1) Kittens are fragile and need help using the potty.
2) Kittens are like sponges.
3) Kittens are born with closed eyes.
4) Kittens are born with blue eyes.
5) They have superior senses.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-xl-3">
<div class="card" style="width: 18rem;">
<img src="https://www.ferplast.co.uk/cdn/shop/collections/ricky-kharawala-adK3Vu70DEQ-unsplash_1_1400x.jpg?v=1603988975" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Hamster</h5>
<p class="card-text">ggg</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-xl-3">
<div class="card" style="width: 18rem;">
<img src="https://www.cdc.gov/healthypets/images/pets/hedgehog.jpg?_=88696" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Hedgehog</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="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-xl-3">
<div class="card" style="width: 18rem;">
<img src="https://twinmaplesvethospital.com/wp-content/uploads/2023/01/Exotic-Pets-img.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Bunny</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="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
<div class="row">
<div id="carouselExample" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</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>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>Leave a Comment