ຮຽນຮູ້ວິທີສ້າງ Card Box ແບບນີ້ດ້ວຍ CSS.

ຂັ້ນຕອນທີ່ 1 ເພີ່ມໂຄ້ດ HTML ດ້ານລູ່ມນີ້ໃສ່ໃນໄຟລ໌ HTML:

<div class="card">
        <img src="./img/avatar.png" alt="" class="img">
        <div class="container">
            <h2>lao2dev</h2>
            <p>web designer | Graphic designer</p>
        </div>
    </div>

ຂັ້ນຕອນທີ່ 2 ເພີ່ມໂຄ້ດ CSS ດ້ານລູ່ມນີ້ໃສ່ໃນໄຟລ໌ CSS:

.card {
    box-shadow: 0 4px 8px 0 rgb(0,0,0,0.2);
    transition: 0.3s;
    width: 20%;
    margin: auto;
}
.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  }
  .container {
    padding: 2px 16px;
  }
img {
        width: 100%;
      border-radius: 5px 5px 0 0;
    }

ແລະ ​ທັງ​ໝົດ​ນີ້​ຄື​ ການສ້າງ Card Box ທີ່​ເຮົາ​ນຳ​ມາ​ຝາກ​ເພື່ອນ​ໆ​ ລອງ​ໄປ​ປັບ​ໃຊ້​ກັບ​ໂປຣ​ເຈັກ​​ກັນ​ເບິ່ງ​ນະ​ ແລະ​ ຖ້າຫາກ​ບົດ​ຄວາມ​ນີ້​ຜິດ​ພາດ​ປະການ​ໃດ​ ກໍ​ຂໍ​ອ​ະໄພ​ມາ​ນະ​ ທີ່​ນີ້​ດ້ວຍ​.