หมวดหมู่สินค้า

CATAGORY

<!DOCTYPE html>

<html lang="th">

<head>

  <meta charset="UTF-8">

  <title>แบนเนอร์หมวดหมู่สินค้า</title>

  <style>

    body {

      font-family: 'Sarabun', sans-serif;

      margin: 0;

      padding: 0;

      background-color: #f5f5f5;

    }

    .banner-container {

      display: grid;

      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

      gap: 20px;

      padding: 40px;

      background-color: #fff;

      text-align: center;

    }

    .category-box {

      background-color: #fefefe;

      border: 1px solid #ddd;

      border-radius: 12px;

      padding: 20px;

      text-decoration: none;

      color: #333;

      transition: transform 0.2s, box-shadow 0.2s;

    }

    .category-box:hover {

      transform: translateY(-5px);

      box-shadow: 0 4px 12px rgba(0,0,0,0.1);

    }

    .category-icon {

      font-size: 40px;

      margin-bottom: 10px;

    }

    .category-label {

      font-size: 18px;

      font-weight: bold;

    }

  </style>

  <!-- ใช้ fontawesome สำหรับไอคอน -->

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

</head>

<body>

<div class="banner-container">

  <a href="/category/electronics" class="category-box">

    <div class="category-icon"><i class="fas fa-tv"></i></div>

    <div class="category-label">อิเล็กทรอนิกส์</div>

  </a>

  <a href="/category/fashion" class="category-box">

    <div class="category-icon"><i class="fas fa-tshirt"></i></div>

    <div class="category-label">แฟชั่น</div>

  </a>

  <a href="/category/beauty" class="category-box">

    <div class="category-icon"><i class="fas fa-magic"></i></div>

    <div class="category-label">ความงาม</div>

  </a>

  <a href="/category/home" class="category-box">

    <div class="category-icon"><i class="fas fa-couch"></i></div>

    <div class="category-label">ของใช้ในบ้าน</div>

  </a>

  <a href="/category/sport" class="category-box">

    <div class="category-icon"><i class="fas fa-basketball-ball"></i></div>

    <div class="category-label">กีฬา</div>

  </a>

  <a href="/category/toys" class="category-box">

    <div class="category-icon"><i class="fas fa-puzzle-piece"></i></div>

    <div class="category-label">ของเล่น</div>

  </a>

</div>

</body>

</html>