color-combinations-guide.ejs 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642
  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. <meta name="description"
  7. content="Master color combinations for coloring pages with expert tips on complementary, analogous, and monochromatic schemes. Transform your artwork with harmonious color palettes.">
  8. <title>Color Combinations That Work: A Complete Guide for Colorists - Art Color</title>
  9. <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
  10. <link rel="stylesheet" href="/stylesheets/v2/styles.css">
  11. <style>
  12. :root {
  13. --online-color: #7b68ee;
  14. /* 在线填色功能专属色 */
  15. }
  16. h3 {
  17. color: var(--text-color);
  18. }
  19. .page-title {
  20. color: var(--secondary-color);
  21. font-size: 2.2rem;
  22. margin: 40px 0 20px;
  23. text-align: center;
  24. }
  25. .blog-content {
  26. background-color: white;
  27. border-radius: 10px;
  28. box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  29. padding: 40px;
  30. margin-bottom: 60px;
  31. }
  32. .blog-meta {
  33. color: var(--light-text);
  34. font-size: 0.9rem;
  35. margin-bottom: 20px;
  36. text-align: center;
  37. }
  38. .blog-meta span {
  39. margin: 0 10px;
  40. }
  41. .blog-image {
  42. width: 100%;
  43. max-height: 400px;
  44. object-fit: cover;
  45. border-radius: 10px;
  46. margin-bottom: 30px;
  47. }
  48. .blog-content h2 {
  49. color: var(--primary-color);
  50. font-size: 1.7rem;
  51. margin: 30px 0 15px;
  52. }
  53. .blog-content p {
  54. margin-bottom: 20px;
  55. line-height: 1.7;
  56. }
  57. .blog-content ul {
  58. margin: 20px 0;
  59. padding-left: 40px;
  60. }
  61. .blog-content li {
  62. margin-bottom: 10px;
  63. }
  64. .blog-content .internal-link {
  65. color: var(--primary-color);
  66. /* 或者您喜欢的颜色 */
  67. text-decoration: underline;
  68. font-weight: bold;
  69. /* 稍微加粗,使其更明显 */
  70. }
  71. .blog-content .internal-link:hover {
  72. color: var(--secondary-color);
  73. }
  74. .cta-box {
  75. background-color: var(--background-color);
  76. border-radius: 10px;
  77. padding: 30px;
  78. margin: 40px 0;
  79. text-align: center;
  80. }
  81. .cta-box h3 {
  82. color: var(--secondary-color);
  83. font-size: 1.5rem;
  84. margin-bottom: 15px;
  85. }
  86. .cta-btn {
  87. display: inline-block;
  88. background-color: var(--primary-color);
  89. color: white;
  90. padding: 12px 30px;
  91. border-radius: 30px;
  92. text-decoration: none;
  93. font-weight: 600;
  94. transition: all 0.3s ease;
  95. margin: 15px 10px 0;
  96. }
  97. .cta-btn:hover {
  98. background-color: var(--secondary-color);
  99. }
  100. .online-cta-btn {
  101. display: inline-block;
  102. background-color: var(--online-color);
  103. color: white;
  104. padding: 12px 30px;
  105. border-radius: 30px;
  106. text-decoration: none;
  107. font-weight: 600;
  108. transition: all 0.3s ease;
  109. margin: 15px 10px 0;
  110. box-shadow: 0 4px 12px rgba(123, 104, 238, 0.3);
  111. }
  112. .online-cta-btn:hover {
  113. background-color: #6a5acd;
  114. transform: translateY(-2px);
  115. }
  116. .color-comparison {
  117. display: grid;
  118. grid-template-columns: 1fr 1fr;
  119. gap: 20px;
  120. margin: 30px 0;
  121. background-color: #f5f5f5;
  122. padding: 20px;
  123. border-radius: 10px;
  124. }
  125. .comparison-item {
  126. text-align: center;
  127. padding: 15px;
  128. border-radius: 8px;
  129. }
  130. .comparison-title {
  131. font-weight: bold;
  132. margin-bottom: 10px;
  133. color: var(--primary-color);
  134. }
  135. .comparison-image {
  136. max-width: 100%;
  137. border-radius: 8px;
  138. box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  139. transition: transform 0.3s ease;
  140. }
  141. .comparison-image:hover {
  142. transform: scale(1.02);
  143. }
  144. .related-collections {
  145. margin-top: 60px;
  146. }
  147. .related-collections h3 {
  148. color: var(--secondary-color);
  149. font-size: 1.5rem;
  150. margin-bottom: 25px;
  151. }
  152. .collection-grid {
  153. display: grid;
  154. grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  155. gap: 25px;
  156. }
  157. .collection-card {
  158. background-color: white;
  159. border-radius: 10px;
  160. overflow: hidden;
  161. box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  162. transition: transform 0.3s ease;
  163. text-decoration: none;
  164. display: block;
  165. }
  166. .collection-card:hover {
  167. transform: translateY(-8px);
  168. }
  169. .collection-image {
  170. height: 180px;
  171. background-color: #f0f0f0;
  172. overflow: hidden;
  173. }
  174. .collection-image img {
  175. width: 100%;
  176. height: 100%;
  177. object-fit: cover;
  178. transition: transform 0.5s ease;
  179. }
  180. .collection-card:hover .collection-image img {
  181. transform: scale(1.05);
  182. }
  183. .collection-info {
  184. padding: 18px;
  185. }
  186. .collection-title {
  187. font-weight: 700;
  188. font-size: 1.2rem;
  189. margin-bottom: 10px;
  190. color: var(--primary-color);
  191. }
  192. .collection-desc {
  193. color: var(--light-text);
  194. font-size: 0.9rem;
  195. line-height: 1.4;
  196. display: -webkit-box;
  197. -webkit-line-clamp: 3;
  198. -webkit-box-orient: vertical;
  199. overflow: hidden;
  200. }
  201. .online-feature {
  202. background-color: rgba(123, 104, 238, 0.05);
  203. border-left: 4px solid var(--online-color);
  204. padding: 20px;
  205. margin: 30px 0;
  206. border-radius: 0 8px 8px 0;
  207. }
  208. .online-feature h3 {
  209. color: var(--online-color);
  210. margin-bottom: 15px;
  211. display: flex;
  212. align-items: center;
  213. }
  214. .online-feature h3 svg {
  215. margin-right: 10px;
  216. }
  217. @media (max-width: 768px) {
  218. .page-title {
  219. font-size: 1.8rem;
  220. }
  221. .blog-content {
  222. padding: 25px;
  223. }
  224. .blog-content h2 {
  225. font-size: 1.5rem;
  226. }
  227. .cta-box {
  228. padding: 25px;
  229. }
  230. .cta-box h3 {
  231. font-size: 1.3rem;
  232. }
  233. .collection-grid {
  234. grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  235. gap: 20px;
  236. }
  237. .color-comparison {
  238. grid-template-columns: 1fr;
  239. }
  240. }
  241. </style>
  242. <script type="application/ld+json">
  243. {
  244. "@context": "https://schema.org",
  245. "@type": "BlogPosting",
  246. "mainEntityOfPage": {
  247. "@type": "WebPage",
  248. "@id": "https://art.pcoloring.com/tips-tricks/color-combinations-guide"
  249. },
  250. "headline": "Color Combinations That Work: A Complete Guide for Colorists",
  251. "image": [
  252. "https://art.pcoloring.com/assets/tips-tricks/color-combinations-guide.webp"
  253. ],
  254. "datePublished": "2025-06-15T00:00:00+00:00",
  255. "dateModified": "2025-06-15T00:00:00+00:00",
  256. "author": {
  257. "@type": "Person",
  258. "name": "Art Color"
  259. },
  260. "publisher": {
  261. "@type": "Organization",
  262. "name": "Art Color",
  263. "logo": {
  264. "@type": "ImageObject",
  265. "url": "https://art.pcoloring.com/assets/icon/icon.webp",
  266. "width": 180,
  267. "height": 180
  268. }
  269. },
  270. "description": "Master color combinations for coloring pages with expert tips on complementary, analogous, and monochromatic schemes. Transform your artwork with harmonious color palettes.",
  271. "articleSection": [
  272. "The Basics of Color Theory",
  273. "5 Essential Color Schemes for Coloring Pages",
  274. "Color Combinations for Different Coloring Themes",
  275. "Practical Tips for Applying Color Combinations",
  276. "Recommended Tools for Perfect Color Combinations"
  277. ],
  278. "keywords": "color combinations, color theory, complementary colors, analogous colors, monochromatic colors, triadic colors, split-complementary colors, coloring tips, coloring techniques, color palette"
  279. }
  280. </script>
  281. <script type='text/javascript'
  282. src='https://platform-api.sharethis.com/js/sharethis.js#property=685036ce6c1ae8001abaded7&product=sop'
  283. async='async'></script>
  284. </head>
  285. <!-- Google tag (gtag.js) -->
  286. <script async src="https://www.googletagmanager.com/gtag/js?id=G-JBGGVGLHTP"></script>
  287. <script>
  288. window.dataLayer = window.dataLayer || [];
  289. function gtag() { dataLayer.push(arguments); }
  290. gtag('js', new Date());
  291. gtag('config', 'G-JBGGVGLHTP');
  292. </script>
  293. <body>
  294. <%- include('header') %>
  295. <div class="container">
  296. <div class="breadcrumb">
  297. <a href="/">Home</a> &gt; <a href="/tips-tricks">Tips-Tricks</a> &gt; Color Combinations That Work
  298. </div>
  299. <h1 class="page-title">Color Combinations That Work: A Complete Guide for Colorists</h1>
  300. <div class="blog-content">
  301. <div class="blog-meta">
  302. <span>Posted on June 15, 2025</span>
  303. <span>Category: Coloring Tips & Tricks</span>
  304. </div>
  305. <img src="/assets/tips-tricks/color-combinations-guide.webp"
  306. alt="Color wheel with complementary and analogous color examples" class="blog-image">
  307. <p>Choosing the right color combinations can transform your coloring pages from ordinary to
  308. extraordinary. Whether you're coloring a vibrant mandala, a serene landscape, or a playful animal
  309. scene, understanding how colors interact is key to creating harmonious and eye-catching artwork.
  310. <strong>Our professional designers have pre-colored thousands of pages with expert color
  311. schemes</strong>—explore our online coloring feature to follow guided color palettes with just a
  312. few taps!
  313. </p>
  314. <div class="online-feature">
  315. <h3><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
  316. stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  317. <path d="M12 2a9 9 0 0 1 9 9c0 6-6 10-9 10s-9-4-9-10a9 9 0 0 1 9-9z"></path>
  318. <polyline points="12 2 12 12 16 14"></polyline>
  319. </svg> Try Our Online Coloring Feature</h3>
  320. <p>Every coloring page on our site comes with a professionally colored example created by our design
  321. team. With our online coloring tool, you can:</p>
  322. <ul>
  323. <li>Follow numbered guides to replicate expert color combinations</li>
  324. <li>Experiment with color palettes before printing</li>
  325. <li>Save and share your digital masterpieces with one click</li>
  326. </ul>
  327. </div>
  328. <h2>The Basics of Color Theory</h2>
  329. <p>Before diving into specific color combinations, it's helpful to understand the fundamentals of color
  330. theory. The color wheel is a foundational tool that shows the relationships between different
  331. colors. It consists of:</p>
  332. <ul>
  333. <li><strong>Primary Colors:</strong> Red, blue, and yellow—the base colors from which all others are
  334. created.</li>
  335. <li><strong>Secondary Colors:</strong> Orange, green, and purple—formed by mixing two primary
  336. colors.</li>
  337. <li><strong>Tertiary Colors:</strong> Combinations of primary and secondary colors, such as
  338. red-orange, blue-green, and yellow-purple.</li>
  339. <li><strong>Neutral Colors:</strong> Black, white, gray, and brown—often used as accents or to
  340. balance bold hues.</li>
  341. </ul>
  342. <p>Understanding these relationships helps you create color combinations that are visually appealing and
  343. balanced. Let's explore some of the most popular color schemes and how to use them effectively in
  344. your coloring pages.</p>
  345. <h2>5 Essential Color Schemes for Coloring Pages</h2>
  346. <h3>1. Complementary Colors: Bold and Contrasting</h3>
  347. <p>Complementary colors sit opposite each other on the color wheel, creating high contrast and visual
  348. energy. Examples include:</p>
  349. <ul>
  350. <li>Red & Green (perfect for holiday-themed pages)</li>
  351. <li>Blue & Orange (ideal for ocean or sunset scenes)</li>
  352. <li>Yellow & Purple (great for vibrant floral designs)</li>
  353. </ul>
  354. <p><strong>Pro Tip:</strong> Use one color as the dominant hue and the other as an accent to avoid an
  355. overwhelming effect. For example, color a flower primarily purple with yellow centers for a striking
  356. contrast.</p>
  357. <div class="color-comparison">
  358. <div class="comparison-item">
  359. <div class="comparison-title">Line Art (Before)</div>
  360. <img src="https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/page/480/5c9b4ad1396d4c5a4ea35efd.webp"
  361. alt="Complementary color line art" class="comparison-image">
  362. </div>
  363. <div class="comparison-item">
  364. <div class="comparison-title">Colored Example (After)</div>
  365. <img src="https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/work/480/5c9b4ad1396d4c5a4ea35efd.webp"
  366. alt="Complementary color finished art" class="comparison-image">
  367. </div>
  368. </div>
  369. <div style="text-align: center; margin: 20px 0;">
  370. <a href="/play/5c9b4ad1396d4c5a4ea35efd" class="online-cta-btn" target="_blank"><svg
  371. xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
  372. stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  373. <path d="M12 2a9 9 0 0 1 9 9c0 6-6 10-9 10s-9-4-9-10a9 9 0 0 1 9-9z"></path>
  374. <polyline points="12 2 12 12 16 14"></polyline>
  375. </svg> Paint This Example Now</a>
  376. <a href="/coloring-page/5c9b4ad1396d4c5a4ea35efd" class="cta-btn" target="_blank">About this
  377. coloring page</a>
  378. <p>Follow the numbered guide to replicate this complementary color scheme</p>
  379. </div>
  380. <h3>2. Analogous Colors: Harmonious and Calming</h3>
  381. <p>Analogous colors are adjacent on the color wheel, creating a soft, cohesive look. Examples include:
  382. </p>
  383. <ul>
  384. <li>Blue, Blue-Green, & Green (ideal for nature and forest scenes)</li>
  385. <li>Red, Red-Orange, & Orange (perfect for autumn leaves or fire-themed designs)</li>
  386. <li>Purple, Purple-Pink, & Pink (great for romantic or whimsical pages)</li>
  387. </ul>
  388. <p><strong>Pro Tip:</strong> Use a light shade of one color for backgrounds and darker shades of the
  389. adjacent colors for details. This creates depth without sacrificing harmony.</p>
  390. <h3>3. Monochromatic Colors: Sophisticated and Elegant</h3>
  391. <p>Monochromatic schemes use different shades, tints, and tones of a single color. For example:</p>
  392. <ul>
  393. <li>Light blue, medium blue, and dark blue (ideal for water scenes or winter landscapes)</li>
  394. <li>Soft pink, hot pink, and maroon (perfect for floral designs or romantic themes)</li>
  395. <li>Olive green, forest green, and teal (great for jungle or botanical pages)</li>
  396. </ul>
  397. <p><strong>Pro Tip:</strong> Add a neutral color like white or gray to lighten tints or black to deepen
  398. shades. This creates dimension while maintaining a cohesive palette.</p>
  399. <h3>4. Triadic Colors: Balanced and Vibrant</h3>
  400. <p>Triadic colors are evenly spaced on the color wheel, forming a triangle. Examples include:</p>
  401. <ul>
  402. <li>Red, Yellow, & Blue (primary triad for bold, playful designs)</li>
  403. <li>Orange, Green, & Purple (secondary triad for whimsical or fantasy pages)</li>
  404. <li>Teal, Magenta, & Gold (tertiary triad for bohemian or artistic styles)</li>
  405. </ul>
  406. <p><strong>Pro Tip:</strong> Choose one color as the main hue and use the others as accents. For
  407. example, color a mandala primarily teal with magenta and gold details.</p>
  408. <h3>5. Split-Complementary Colors: Subtle Contrast</h3>
  409. <p>Split-complementary schemes use a color and the two colors adjacent to its complement. For example:
  410. </p>
  411. <ul>
  412. <li>Blue (main color) with Yellow-Orange & Red-Orange (instead of direct complement orange)</li>
  413. <li>Red (main color) with Blue-Green & Yellow-Green (instead of direct complement green)</li>
  414. <li>Green (main color) with Red-Violet & Red-Orange (instead of direct complement red)</li>
  415. </ul>
  416. <p><strong>Pro Tip:</strong> This scheme offers high contrast without the intensity of traditional
  417. complementary colors, making it ideal for detailed designs that need visual interest without
  418. overwhelming the eye.</p>
  419. <h2>Color Combinations for Different Coloring Themes</h2>
  420. <h3>1. Nature and Landscapes</h3>
  421. <p>For nature-themed pages, opt for earthy, calming palettes:</p>
  422. <ul>
  423. <li>Analogous greens and blues for forest and ocean scenes</li>
  424. <li>Monochromatic browns with green accents for woodland designs</li>
  425. <li>Warm yellows, oranges, and reds for sunset or autumn landscapes</li>
  426. </ul>
  427. <h3>2. Floral Designs</h3>
  428. <p>Flowers offer endless color possibilities:</p>
  429. <ul>
  430. <li>Pinks, purples, and whites for romantic roses</li>
  431. <li>Yellows and oranges for cheerful sunflowers</li>
  432. <li>Blues and purples for unique, fantasy-inspired flowers</li>
  433. <li>Complementary red and green for classic poinsettias</li>
  434. </ul>
  435. <h3>3. Mandalas and Abstract Patterns</h3>
  436. <p>Mandalas are perfect for bold, expressive color choices:</p>
  437. <ul>
  438. <li>Triadic color schemes for balanced, vibrant patterns</li>
  439. <li>Complementary colors for high-contrast, eye-catching designs</li>
  440. <li>Monochromatic gradients for sophisticated, modern mandalas</li>
  441. </ul>
  442. <h3>4. Animals and Creatures</h3>
  443. <p>Bring animals to life with realistic or whimsical colors:</p>
  444. <ul>
  445. <li>Earthy browns, tans, and whites for realistic wildlife</li>
  446. <li>Playful pinks, purples, and blues for fantasy creatures</li>
  447. <li>Black and white with a pop of color for dramatic effect (e.g., a black cat with green eyes)</li>
  448. </ul>
  449. <div class="cta-box">
  450. <h3>Put Your Color Skills to the Test</h3>
  451. <p>Ready to experiment with color combinations? Explore our gallery of free printable coloring
  452. pages, designed to inspire your creativity. From nature scenes to abstract patterns, you'll find
  453. the perfect canvas for your color experiments.</p>
  454. <a href="/coloring-page-gallery" class="cta-btn" target="_blank">Browse Coloring Pages</a>
  455. <a href="/coloring-pages" class="cta-btn" target="_blank">Explore Themed Collections</a>
  456. </div>
  457. <h2>Practical Tips for Applying Color Combinations</h2>
  458. <h3>1. Start with a Color Plan</h3>
  459. <p>Before picking up your coloring tools, sketch out a rough color plan. Use a color wheel or online
  460. color picker to experiment with combinations before committing to your page.</p>
  461. <h3>2. Use a Limited Palette</h3>
  462. <p>Limiting your palette to 3-5 main colors helps create a cohesive look. You can always add accents
  463. with neutral colors like black, white, or gray.</p>
  464. <h3>3. Consider the Mood</h3>
  465. <p>Think about the mood you want to convey. Warm colors (reds, oranges, yellows) evoke energy and
  466. happiness, while cool colors (blues, greens, purples) create calm and serenity.</p>
  467. <h3>4. Pay Attention to Values</h3>
  468. <p>Value refers to the lightness or darkness of a color. Mixing light and dark values creates depth and
  469. dimension. For example, use a light blue for sky and a darker blue for shadows.</p>
  470. <h3>5. Experiment and Have Fun</h3>
  471. <p>Don't be afraid to break the rules and experiment with unexpected combinations. The best way to learn
  472. is by practicing and discovering what works for you.</p>
  473. <h2>Recommended Tools for Perfect Color Combinations</h2>
  474. <p>Invest in high-quality coloring tools to achieve the best results. For a comprehensive guide on
  475. selecting and maintaining your art supplies, check out our article on <a
  476. href="/tips-tricks/choose-the-right-coloring-tools" class="internal-link">Choosing and Caring
  477. for Your Coloring Tools</a>.</p>
  478. <ul>
  479. <li><strong>Colored Pencils:</strong> Prismacolor, Faber-Castell, or Derwent for smooth blending
  480. </li>
  481. <li><strong>Markers:</strong> Copic or Tombow for vibrant, consistent color</li>
  482. <li><strong>Watercolor Pencils:</strong> Perfect for creating soft, blended effects</li>
  483. <li><strong>Blending Tools:</strong> Blending stumps, tortillons, or odorless mineral spirits for
  484. pencil blending</li>
  485. <li><strong>Color Wheels:</strong> A physical or digital color wheel to help plan combinations</li>
  486. </ul>
  487. <div class="related-collections">
  488. <h3>Explore These Coloring Collections</h3>
  489. <div class="collection-grid">
  490. <a href="/mandala-coloring-pages" class="collection-card">
  491. <div class="collection-image">
  492. <img src="/assets/coloring-pages/mandala-16-9.webp" alt="Mandalas coloring pages">
  493. </div>
  494. <div class="collection-info">
  495. <div class="collection-title">Mandala Coloring Pages</div>
  496. <p class="collection-desc">Explore intricate patterns perfect for experimenting with
  497. bold color combinations and symmetrical designs.</p>
  498. </div>
  499. </a>
  500. <a href="/butterfly-coloring-pages" class="collection-card">
  501. <div class="collection-image">
  502. <img src="/assets/coloring-pages/butterfly-16-9.webp" alt="Butterfly coloring pages">
  503. </div>
  504. <div class="collection-info">
  505. <div class="collection-title">Butterfly Coloring Pages</div>
  506. <p class="collection-desc">Bring these delicate creatures to life with vibrant colors
  507. and create your own nature-inspired gallery.</p>
  508. </div>
  509. </a>
  510. <a href="/fantasy-coloring-pages" class="collection-card">
  511. <div class="collection-image">
  512. <img src="/assets/coloring-pages/fantasy-16-9.webp" alt="Fantasy coloring pages">
  513. </div>
  514. <div class="collection-info">
  515. <div class="collection-title">Fantasy Coloring Pages</div>
  516. <p class="collection-desc">Let your imagination soar with dragons, unicorns, and magical
  517. landscapes. Perfect for dramatic color combinations.</p>
  518. </div>
  519. </a>
  520. </div>
  521. </div>
  522. </div>
  523. </div>
  524. <%- include('footer') %>
  525. <script src="/scripts/script.js"></script>
  526. <script>
  527. // 卡片点击事件增强
  528. const collectionCards = document.querySelectorAll('.collection-card');
  529. collectionCards.forEach(card => {
  530. card.addEventListener('click', (e) => {
  531. // 阻止按钮点击冒泡到卡片链接
  532. if (e.target.closest('.read-more-btn')) {
  533. return;
  534. }
  535. // 卡片本身是链接,无需额外处理
  536. });
  537. });
  538. // 平滑滚动
  539. document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  540. anchor.addEventListener('click', function (e) {
  541. e.preventDefault();
  542. document.querySelector(this.getAttribute('href')).scrollIntoView({
  543. behavior: 'smooth'
  544. });
  545. });
  546. });
  547. </script>
  548. </body>
  549. </html>