Galeria De Cards

Galeria de cards

CARDS

Código

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Photo Gallery</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

  <style>
    body {
      background-color: #1c1c1e;
      color: white;
      font-family: 'Arial', sans-serif;
    }

    .gallery-container {
      padding: 40px 0;
    }

    .gallery-item {
      margin-bottom: 20px;
      transition: transform 0.3s ease;
    }

    .gallery-item:hover {
      transform: scale(1.05);
    }

    .gallery-item img {
      width: 100%;
      height: auto;
      border-radius: 8px;
    }

    .gallery-item h5 {
      margin-top: 10px;
      font-size: 18px;
      color: #ffffff;
      text-align: center;
    }

    .gallery-item p {
      font-size: 14px;
      color: #b0b0b0;
      text-align: center;
    }

    @media (max-width: 576px) {
      .gallery-item h5 {
        font-size: 16px;
      }

      .gallery-item p {
        font-size: 12px;
      }

      /* Reduce padding for small screens */
      .gallery-container {
        padding: 20px 0;
      }
    }

    @media (min-width: 1200px) {
      .gallery-container {
        max-width: 1200px;
        margin: 0 auto;
      }
    }
  </style>
</head>
<body>

<div class="container gallery-container">
  <h2 class="text-center mb-5">Galeria - 8 Fotos</h2>

  <div class="row">
    <!-- Item 1 -->
    <div class="col-sm-6 col-md-4 col-lg-3 gallery-item">
      <img src="https://via.placeholder.com/300x300/1e90ff/ffffff?text=Foto+1" alt="Foto 1">
      <h5>Foto 1</h5>
      <p>Descrição da foto 1.</p>
    </div>

    <!-- Item 2 -->
    <div class="col-sm-6 col-md-4 col-lg-3 gallery-item">
      <img src="https://via.placeholder.com/300x300/ff6b6b/ffffff?text=Foto+2" alt="Foto 2">
      <h5>Foto 2</h5>
      <p>Descrição da foto 2.</p>
    </div>

    <!-- Item 3 -->
    <div class="col-sm-6 col-md-4 col-lg-3 gallery-item">
      <img src="https://via.placeholder.com/300x300/32cd32/ffffff?text=Foto+3" alt="Foto 3">
      <h5>Foto 3</h5>
      <p>Descrição da foto 3.</p>
    </div>

    <!-- Item 4 -->
    <div class="col-sm-6 col-md-4 col-lg-3 gallery-item">
      <img src="https://via.placeholder.com/300x300/f39c12/ffffff?text=Foto+4" alt="Foto 4">
      <h5>Foto 4</h5>
      <p>Descrição da foto 4.</p>
    </div>

    <!-- Item 5 -->
    <div class="col-sm-6 col-md-4 col-lg-3 gallery-item">
      <img src="https://via.placeholder.com/300x300/9b59b6/ffffff?text=Foto+5" alt="Foto 5">
      <h5>Foto 5</h5>
      <p>Descrição da foto 5.</p>
    </div>

    <!-- Item 6 -->
    <div class="col-sm-6 col-md-4 col-lg-3 gallery-item">
      <img src="https://via.placeholder.com/300x300/e74c3c/ffffff?text=Foto+6" alt="Foto 6">
      <h5>Foto 6</h5>
      <p>Descrição da foto 6.</p>
    </div>

    <!-- Item 7 -->
    <div class="col-sm-6 col-md-4 col-lg-3 gallery-item">
      <img src="https://via.placeholder.com/300x300/3498db/ffffff?text=Foto+7" alt="Foto 7">
      <h5>Foto 7</h5>
      <p>Descrição da foto 7.</p>
    </div>

    <!-- Item 8 -->
    <div class="col-sm-6 col-md-4 col-lg-3 gallery-item">
      <img src="https://via.placeholder.com/300x300/2ecc71/ffffff?text=Foto+8" alt="Foto 8">
      <h5>Foto 8</h5>
      <p>Descrição da foto 8.</p>
    </div>
  </div>
</div>

<!-- Bootstrap JS and Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

</body>
</html>