guoziyun
/
artsite


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Coloring Page Collections - Art Number Coloring</title>
  <style>
    :root {
      --primary-color: #ff6b6b;
      --secondary-color: #4ecdc4;
      --accent-color: #ffd166;
      --background-color: #f9f9f9;
      --text-color: #333;
      --light-text: #666;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
      background-color: var(--background-color);
      color: var(--text-color);
      line-height: 1.6;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }

    header {
      background-color: var(--primary-color);
      color: white;
      padding: 30px 0;
      text-align: center;
      position: relative;
    }

    .header-logo {
      font-size: 1.8rem;
      font-weight: 700;
      letter-spacing: 1px;
    }

    .breadcrumb {
      margin: 20px 0;
      font-size: 0.9rem;
      color: var(--light-text);
    }

    .breadcrumb a {
      color: var(--primary-color);
      text-decoration: none;
    }

    .breadcrumb a:hover {
      text-decoration: underline;
    }

    .page-title {
      color: var(--secondary-color);
      font-size: 2.2rem;
      margin: 40px 0 20px;
      text-align: center;
    }

    .page-description {
      color: var(--light-text);
      max-width: 800px;
      margin: 0 auto 50px;
      text-align: center;
    }

    .collection-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 30px;
      margin-bottom: 60px;
    }

    .collection-card {
      background-color: white;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
      transition: transform 0.3s ease;
      text-decoration: none;
      display: block;
    }

    .collection-card:hover {
      transform: translateY(-8px);
    }

    .collection-image {
      height: 200px;
      background-color: #f0f0f0;
      overflow: hidden;
    }

    .collection-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }

    .collection-card:hover .collection-image img {
      transform: scale(1.05);
    }

    .collection-info {
      padding: 20px;
    }

    .collection-title {
      font-weight: 700;
      font-size: 1.3rem;
      margin-bottom: 12px;
      color: var(--primary-color);
    }

    .collection-desc {
      color: var(--light-text);
      font-size: 0.95rem;
      margin-bottom: 18px;
      line-height: 1.5;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .read-more-btn {
      display: inline-block;
      background-color: var(--primary-color);
      color: white;
      padding: 10px 20px;
      border-radius: 30px;
      text-decoration: none;
      font-weight: 600;
      transition: all 0.3s ease;
      border: none;
      cursor: pointer;
      text-align: center;
    }

    .read-more-btn:hover {
      background-color: var(--secondary-color);
    }

    footer {
      background-color: var(--text-color);
      color: white;
      text-align: center;
      padding: 30px 0;
      margin-top: 50px;
    }

    .footer-content {
      max-width: 600px;
      margin: 0 auto;
    }

    @media (max-width: 768px) {
      .page-title {
        font-size: 1.8rem;
      }

      .collection-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
      }

      .collection-image {
        height: 180px;
      }

      .collection-info {
        padding: 15px;
      }

      .collection-title {
        font-size: 1.2rem;
      }
    }
  </style>
</head>

<body>
  <header>
    <div class="container">
      <div class="header-logo">Art Number Coloring</div>
      <p>Free Printable Coloring Pages and Birthday Cards</p>
    </div>
  </header>

  <div class="container">
    <div class="breadcrumb">
      <a href="/">Home</a> &gt; Coloring Page Collections
    </div>

    <h1 class="page-title">Explore Coloring Page Collections</h1>
    <p class="page-description">
      Discover our handpicked collections of coloring pages for all ages and interests. Each collection features
      beautiful designs and themes to spark your creativity.
    </p>

    <div class="collection-grid">
      <!-- 合集卡片1 -->
      <a href="#" class="collection-card">
        <div class="collection-image">
          <img src="https://picsum.photos/600/400?random=101" alt="Flower Coloring Pages">
        </div>
        <div class="collection-info">
          <h3 class="collection-title">Flower Coloring Pages</h3>
          <p class="collection-desc">Explore our beautiful collection of flower coloring pages! From delicate roses to
            vibrant sunflowers, these designs offer endless possibilities for creativity. Perfect for all ages and skill
            levels.</p>
          <button class="read-more-btn">View Collection</button>
        </div>
      </a>

      <!-- 合集卡片2 -->
      <a href="#" class="collection-card">
        <div class="collection-image">
          <img src="https://picsum.photos/600/400?random=102" alt="Animal Coloring Pages">
        </div>
        <div class="collection-info">
          <h3 class="collection-title">Animal Coloring Pages</h3>
          <p class="collection-desc">Bring the animal kingdom to life with our animal coloring pages. From cute puppies
            and kittens to wild jungle animals, there's something for every animal lover. Great for kids and adults
            alike.</p>
          <button class="read-more-btn">View Collection</button>
        </div>
      </a>

      <!-- 合集卡片3 -->
      <a href="#" class="collection-card">
        <div class="collection-image">
          <img src="https://picsum.photos/600/400?random=103" alt="Mandala Coloring Pages">
        </div>
        <div class="collection-info">
          <h3 class="collection-title">Mandala Coloring Pages</h3>
          <p class="collection-desc">Discover the calming world of mandala coloring pages. These intricate patterns are
            perfect for relaxation and mindfulness. Explore different styles from simple to complex designs.</p>
          <button class="read-more-btn">View Collection</button>
        </div>
      </a>

      <!-- 合集卡片4 -->
      <a href="#" class="collection-card">
        <div class="collection-image">
          <img src="https://picsum.photos/600/400?random=104" alt="Holiday Coloring Pages">
        </div>
        <div class="collection-info">
          <h3 class="collection-title">Holiday Coloring Pages</h3>
          <p class="collection-desc">Celebrate every season with our holiday coloring pages. From Christmas and
            Halloween to Easter and Thanksgiving, find festive designs to get into the holiday spirit.</p>
          <button class="read-more-btn">View Collection</button>
        </div>
      </a>

      <!-- 合集卡片5 -->
      <a href="#" class="collection-card">
        <div class="collection-image">
          <img src="https://picsum.photos/600/400?random=105" alt="Cartoon Coloring Pages">
        </div>
        <div class="collection-info">
          <h3 class="collection-title">Cartoon Coloring Pages</h3>
          <p class="collection-desc">Bring your favorite cartoon characters to life with our cartoon coloring pages.
            Featuring popular characters from movies, TV shows, and comics, these designs are perfect for kids.</p>
          <button class="read-more-btn">View Collection</button>
        </div>
      </a>

      <!-- 合集卡片6 -->
      <a href="#" class="collection-card">
        <div class="collection-image">
          <img src="https://picsum.photos/600/400?random=106" alt="Nature Coloring Pages">
        </div>
        <div class="collection-info">
          <h3 class="collection-title">Nature Coloring Pages</h3>
          <p class="collection-desc">Immerse yourself in the beauty of nature with our nature coloring pages. From
            majestic mountains and serene lakes to colorful birds and butterflies, explore the natural world.</p>
          <button class="read-more-btn">View Collection</button>
        </div>
      </a>
    </div>
  </div>

  <footer>
    <div class="container footer-content">
      <p>Art Number Coloring - Free Printable Coloring Pages and Birthday Cards</p>
      <p>Bringing creativity to your fingertips, one coloring page at a time.</p>
    </div>
  </footer>

  <script>
    // 卡片点击事件增强
    const collectionCards = document.querySelectorAll('.collection-card');
    collectionCards.forEach(card => {
      card.addEventListener('click', (e) => {
        // 阻止按钮点击冒泡到卡片链接
        if (e.target.closest('.read-more-btn')) {
          return;
        }
        // 卡片本身是链接，无需额外处理
      });
    });
  </script>
</body>

</html>