Responsive flex cards

a row with 3 items

by Terrapins Sky

HTML

<html>
<head>
    <title>Responsive flex cards </title>
</head>
<body>
<h1>Cards</h1>
<div id="container">
  <div class="card">
    <div class="photo">
      <span style="background-image:url('https://play-lh.googleusercontent.com/a-/AOh14GghzDA7JhqOUrJ-m7EfaSp32KENXeJEprIMZ3hw')"></span>
    </div>
    <div class="text">
      <div class="inner">sdkhf fsd jk fjlasdf f sdalkfjlf</div>
    </div>
  </div>
  <div class="card">
    <div class="photo">
      <span...

CSS

body {
      background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQOTeWV0ZNq7zpEYx6L_bUYL-FfGMJ5oppNvw&usqp=CAU')
    }

    h1 {
      text-align: center;
    }

    #container {
      width: 100%;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
    }

    .card {
      display: flex;
      width: 30%;
      margin: 0 0 10px 10px;
      border: 0px solid #ccc;
      flex-direction: column;
    }

    .card .photo {
      width: 80%;
      height: 100px;
      margin: 10px auto;
    }

    .card .photo span {
      display: block;
      width: 100%;
      height: 100%;
      background-size: 100%;
      background-position: center;
      background-repeat: no-repeat;
    }

    .card .text {
      display: flex;
      padding: 0 10px 10px 10px;
      flex-grow: 1;
      align-items: center;
      justify-content: center;
    }

JavaScript

// no javascript in this example, pls check js and css.
// demo for https://terrapinssky.blogspot.com/2021/07/cssexample-responsive-flex-cards.html