coloring-pages.ejs 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
  7. <title>Free Printable Coloring Page Collections</title>
  8. <meta name="description" content="Discover our extensive collection of coloring pages categorized by themes. Each category offers a variety of designs to suit every interest and skill level.">
  9. <link rel="stylesheet" href="/stylesheets/v2/styles.css">
  10. <style>
  11. h1 {
  12. color: var(--secondary-color);
  13. }
  14. .collection-grid {
  15. display: grid;
  16. grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  17. gap: 30px;
  18. margin-top: 40px;
  19. }
  20. .collection-card {
  21. background-color: white;
  22. border-radius: 10px;
  23. overflow: hidden;
  24. box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  25. transition: transform 0.3s ease;
  26. cursor: pointer;
  27. border: 1px solid #eee;
  28. }
  29. .collection-card:hover {
  30. transform: translateY(-8px);
  31. }
  32. .collection-image {
  33. aspect-ratio: 1/1;
  34. background-color: #f0f0f0;
  35. overflow: hidden;
  36. position: relative;
  37. }
  38. .collection-image img {
  39. width: 100%;
  40. height: 100%;
  41. object-fit: cover;
  42. transition: transform 0.5s ease;
  43. }
  44. .collection-card:hover .collection-image img {
  45. transform: scale(1.05);
  46. }
  47. .collection-content {
  48. padding: 20px;
  49. }
  50. .collection-title {
  51. font-weight: 700;
  52. font-size: 1.2rem;
  53. margin-bottom: 8px;
  54. color: var(--primary-color);
  55. }
  56. .collection-description {
  57. font-size: 0.9rem;
  58. color: var(--light-text);
  59. line-height: 1.4;
  60. }
  61. @media (max-width: 768px) {
  62. .collection-grid {
  63. grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  64. gap: 20px;
  65. }
  66. .collection-content {
  67. padding: 15px;
  68. }
  69. .collection-title {
  70. font-size: 1.1rem;
  71. }
  72. .collection-description {
  73. font-size: 0.85rem;
  74. }
  75. }
  76. </style>
  77. <script type="application/ld+json">
  78. {
  79. "@context": "https://schema.org",
  80. "@type": "CollectionPage",
  81. "name": "Free Printable Coloring Page Collections",
  82. "description": "Discover our extensive collection of coloring pages categorized by themes.",
  83. "url": "https://art.pcoloring.com/coloring-pages",
  84. "mainEntity": {
  85. "@type": "ItemList",
  86. "itemListElement": [
  87. {
  88. "@type": "ListItem",
  89. "position": 1,
  90. "item": {
  91. "@type": "CreativeWorkSeries",
  92. "url": "https://art.pcoloring.com/video-coloring-pages",
  93. "name": "Video Story Coloring Pages",
  94. "description": "Watch fascinating videos and turn them into beautiful coloring pages.",
  95. "image": "https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/vs-poster/480/67b2b23b9c09d12e648ea25a.webp"
  96. }
  97. },
  98. {
  99. "@type": "ListItem",
  100. "position": 2,
  101. "item": {
  102. "@type": "CreativeWorkSeries",
  103. "url": "https://art.pcoloring.com/mandala-coloring-pages",
  104. "name": "Mandala Coloring Pages",
  105. "description": "Immerse yourself in the intricate world of mandalas. Perfect for relaxation and mindfulness, these circular designs feature symmetrical patterns that invite you to create stunning, meditative artworks.",
  106. "image": "https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/work/480/66224484aae27d6dda147223.webp"
  107. }
  108. },
  109. {
  110. "@type": "ListItem",
  111. "position": 3,
  112. "item": {
  113. "@type": "CreativeWorkSeries",
  114. "url": "https://art.pcoloring.com/zentangle-coloring-pages",
  115. "name": "Zentangle Coloring Pages 2025",
  116. "description": "Discover the therapeutic art of zentangles with our 2025 collection. These geometric patterns are easy to learn and perfect for both beginners and experienced artists looking to reduce stress and boost creativity.",
  117. "image": "https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/work/480/67c970615f45a930454a9dbd.webp"
  118. }
  119. },
  120. {
  121. "@type": "ListItem",
  122. "position": 4,
  123. "item": {
  124. "@type": "CreativeWorkSeries",
  125. "url": "https://art.pcoloring.com/flower-coloring-pages",
  126. "name": "Flower Coloring Pages",
  127. "description": "Celebrate nature's beauty with our flower collection. From delicate roses to vibrant sunflowers, these designs offer endless possibilities for creativity and are perfect for all ages and skill levels.",
  128. "image": "https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/work/480/6834479759d9eb021eb63b45.webp"
  129. }
  130. },
  131. ]
  132. }
  133. }
  134. </script>
  135. <script type='text/javascript' src='https://platform-api.sharethis.com/js/sharethis.js#property=685036ce6c1ae8001abaded7&product=sop' async='async'></script>
  136. </head>
  137. <!-- Google tag (gtag.js) -->
  138. <script async src="https://www.googletagmanager.com/gtag/js?id=G-JBGGVGLHTP"></script>
  139. <script>
  140. window.dataLayer = window.dataLayer || [];
  141. function gtag() { dataLayer.push(arguments); }
  142. gtag('js', new Date());
  143. gtag('config', 'G-JBGGVGLHTP');
  144. </script>
  145. <body>
  146. <%- include('header') %>
  147. <main class="container">
  148. <div class="breadcrumb">
  149. <a href="/">Home</a> &gt; Coloring Page Collections
  150. </div>
  151. <section>
  152. <h1>Coloring Page Collections</h1>
  153. <p>Our carefully curated collection of coloring pages is a paradise for color enthusiasts! With a diverse range of styles, it includes simple patterns perfect for young children to develop color recognition skills, as well as intricate floral designs that satisfy adults seeking immersive creative experiences. Every piece is an exclusive original by Art Number Coloring, crafted with meticulous care.</p>
  154. <p>You can <strong>download high-definition PDF</strong> versions of our collections, print them at any time to start your creative journey, or <strong>color digitally online</strong>—just tap to bring vibrant hues to life. No painting experience is required—even beginners can easily master the process, turning each coloring session into a magical journey of creating stunning artworks.</p>
  155. <div class="collection-grid">
  156. <a href="/video-coloring-pages">
  157. <div class="collection-card">
  158. <div class="collection-image">
  159. <img src="https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/vs-poster/480/67b2b23b9c09d12e648ea25a.webp" alt="Video Story Coloring Pages">
  160. </div>
  161. <div class="collection-content">
  162. <h2 class="collection-title">Video Story Coloring Pages</h2>
  163. <div class="collection-description">Watch fascinating videos and turn them into beautiful coloring pages. Each video captures moments that our artists transform into detailed coloring designs.</div>
  164. </div>
  165. </div>
  166. </a>
  167. <% list.forEach(item=> { %>
  168. <a href="<%= item.uri %>">
  169. <div class="collection-card">
  170. <div class="collection-image">
  171. <img src="https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/work/480/<%= item.id %>.webp" alt="<%= item.title %>">
  172. </div>
  173. <div class="collection-content">
  174. <h2 class="collection-title"><%= item.title %></h2>
  175. <div class="collection-description"><%= item.description %></div>
  176. </div>
  177. </div>
  178. </a>
  179. <% }); %>
  180. </div>
  181. </section>
  182. </main>
  183. <%- include('footer') %>
  184. <script src="/scripts/script.js"></script>
  185. <script>
  186. </script>
  187. </body>
  188. </html>