guoziyun
/
artsite


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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
  <title>Free Printable Coloring Page Albums</title>
  <meta name="description"
    content="Explore our collection of free Art Color page albums. Download, print, or color online instantly—perfect for all ages. Find your favorite designs today!">
  <link rel="stylesheet" href="/stylesheets/v2/styles.css">
  <style>
    h1 {
      color: var(--secondary-color);
    }

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

    .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;
      cursor: pointer;
      border: 1px solid #eee;
    }

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

    .collection-image {
      aspect-ratio: 1/1;
      background-color: #f0f0f0;
      overflow: hidden;
      position: relative;
    }

    .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-content {
      padding: 20px;
    }

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

    .collection-description {
      font-size: 0.9rem;
      color: var(--light-text);
      line-height: 1.4;
    }

    @media (max-width: 768px) {
      .collection-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 20px;
      }

      .collection-content {
        padding: 15px;
      }

      .collection-title {
        font-size: 1.1rem;
      }

      .collection-description {
        font-size: 0.85rem;
      }
    }
  </style>

  <script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "CollectionPage",
  "name": "Free Printable Coloring Page Collections",
  "description": "Discover our extensive collection of coloring pages categorized by themes.",
  "url": "https://art.pcoloring.com/coloring-page-albums",
  "mainEntity": {
    "@type": "ItemList",
    "itemListElement": [
    <% data.forEach((item, index)=> { %>
      {
        "@type": "ListItem",
        "position": <%= index+1 %>,
        "item": {
          "@type": "CreativeWorkSeries", 
          "url": "https://art.pcoloring.com<%= item.uri %>",
          "name": "<%= item.title %>",
          "description": "<%= item.slogon %>",
          "image": "https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/album_icon/320/<%= item._id %>.webp"
        }
      }<% if(index < data.length - 1){ %>, <%}%>
    <% }); %>
    ]
  }
}
</script>

  <script type='text/javascript'
    src='https://platform-api.sharethis.com/js/sharethis.js#property=685036ce6c1ae8001abaded7&product=sop'
    async='async'></script>
</head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-JBGGVGLHTP"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() { dataLayer.push(arguments); }
  gtag('js', new Date());

  gtag('config', 'G-JBGGVGLHTP');
</script>

<body>
  <%- include('header') %>

    <main class="container">
      <div class="breadcrumb">
        <a href="/">Home</a> &gt; Coloring Page Albums
      </div>
      <section>
        <h1>Coloring Page Albums</h1>
        <p>Dive into our vibrant collection of Art Color page albums, where creativity knows no bounds. Every album is
          packed with captivating designs, and the best part? They’re all completely free to enjoy. Download your
          favorites with a single click, print them out for a hands-on coloring experience, or dive right in and color
          online—whatever suits your mood. Whether you’re a kid looking for fun or an adult seeking a relaxing pastime,
          our albums have something for everyone.</p>

        <div class="collection-grid">

          <% data.forEach(item=> { %>

            <a href="/coloring-page-album/<%= item._id %>">
              <div class="collection-card">
                <div class="collection-image">
                  <img src="<%= item.icon %>" alt="<%= item.title %>">
                </div>
                <div class="collection-content">
                  <h2 class="collection-title">
                    <%= item.title %>
                  </h2>
                  <div class="collection-description">
                    <%= item.slogon %>
                  </div>
                </div>
              </div>
            </a>

            <% }); %>


        </div>
      </section>


    </main>

    <%- include('footer') %>


      <script src="/scripts/script.js"></script>

      <script>
      </script>
</body>

</html>