<!DOCTYPE html>
<html lang="pt-br">
<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">
<meta http-equiv="refresh" content="5">
<title>Bootstrap - Cards</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">
</head>
<body class="container mt-2">
<div class="row g-3 my-5">
<div class="col-3">
<div class="card bg-info">
<img src="https://upload.wikimedia.org/wikipedia/commons/1/1e/Bald_Eagle_Portrait.jpg"
class="card-img-top" alt="">
<div class="card-body">
<h5 class="cart-title">Águia americana</h5>
<p class="card-text">Imagem de uma águia americana ...</p>
<a href="#" class="btn btn-primary">Saiba mais</a>
</div>
</div>
</div>
<div class="col-5">
<div class="card bg-primary">
<img src="https://media.gettr.com/group25/getter/2022/05/01/22/d251c839-8cb5-b5cd-81b1-833955b55b56/2d086665a32adb08cf34bdda1ddcaa7b_500x0.jpg"
class="card-img-top" alt="">
<div class="card-body">
<h5 class="cart-title">Águia brasileira</h5>
<p class="card-text">Imagem de uma águia brasileira ...</p>
<a href="#" class="btn btn-primary">Saiba mais</a>
</div>
</div>
</div>
<div class="col-3">
<div class="card bg-secundary">
<img src="https://www.trapp.com.br/wp-content/uploads/2022/09/Baixa_Flor_roxa.jpg"
class="card-img-top" alt="">
<div class="card-body">
<h5 class="cart-title">Beija flor</h5>
<p class="card-text">Imagem de um beija flor ...</p>
<a href="#" class="btn btn-primary">Saiba mais</a>
</div>
</div>
</div>
</div>
<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>
</body>
</html>
Referência:
Nenhum comentário:
Postar um comentário