guoziyun
/
artsite


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

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

    * {
      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;
    }

    main {
      padding: 40px 0;
    }

    section {
      margin-bottom: 50px;
      background-color: white;
      border-radius: 10px;
      padding: 30px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    }

    h1 {
      color: var(--primary-color);
      font-size: 2.2rem;
      margin-bottom: 20px;
    }

    h2 {
      color: var(--secondary-color);
      margin: 25px 0 15px;
      font-size: 1.8rem;
    }

    h3 {
      color: var(--accent-color);
      margin: 20px 0 12px;
      font-size: 1.4rem;
    }

    p {
      margin-bottom: 15px;
      color: var(--text-color);
    }

    .btn {
      display: inline-block;
      background-color: var(--primary-color);
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      font-size: 1rem;
      font-weight: 500;
      cursor: pointer;
      transition: background-color 0.3s ease;
      text-decoration: none;
      text-align: center;
      margin-right: 10px;
      margin-bottom: 10px;
    }

    .btn:hover {
      background-color: #ff4d4d;
    }

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

    .btn-secondary:hover {
      background-color: #37b0a8;
    }

    .btn-accent {
      background-color: var(--accent-color);
      color: var(--text-color);
    }

    .btn-accent:hover {
      background-color: #ffc14d;
    }

    .btn-outline {
      background-color: transparent;
      border: 2px solid var(--primary-color);
      color: var(--primary-color);
    }

    .btn-outline:hover {
      background-color: var(--primary-color);
      color: white;
    }

    .tag {
      display: inline-block;
      background-color: var(--background-color);
      color: var(--light-text);
      padding: 5px 10px;
      border-radius: 20px;
      font-size: 0.9rem;
      margin-right: 10px;
      margin-bottom: 10px;
      transition: background-color 0.3s ease;
    }

    .tag:hover {
      background-color: var(--border-color);
    }

    .share-buttons {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin: 20px 0;
    }

    .share-buttons span {
      margin-right: 15px;
      font-weight: 500;
    }

    .share-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background-color: var(--background-color);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .share-btn:hover {
      background-color: var(--border-color);
    }

    .lineart-container {
      background-color: white;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
      margin-bottom: 30px;
      text-align: center;
    }

    .lineart-container img {
      max-width: 100%;
      height: auto;
      border-radius: 8px;
      display: block;
      margin: 0 auto;
    }

    .creator-info {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
    }

    .creator-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: var(--secondary-color);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: 600;
      margin-right: 15px;
    }

    .creator-name {
      font-weight: 600;
    }

    .creator-date {
      color: var(--light-text);
      font-size: 0.9rem;
    }

    .related-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 25px;
      margin: 30px 0;
    }

    .related-card {
      background-color: white;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
    }

    .related-card:hover {
      transform: translateY(-5px);
    }

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

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

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

    .related-content {
      padding: 15px;
    }

    .related-title {
      font-weight: 600;
      margin-bottom: 8px;
      color: var(--text-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) {
      h1 {
        font-size: 1.8rem;
      }

      h2 {
        font-size: 1.5rem;
      }

      h3 {
        font-size: 1.3rem;
      }

      section {
        padding: 20px;
      }

      .btn {
        width: 100%;
        margin-right: 0;
      }

      .related-grid {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>

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

  <main class="container">
    <section>
      <h1>Intricate Floral Pattern</h1>
      <p class="text-light">An elaborate floral pattern design that's great for relaxation and creating stunning colored
        masterpieces.</p>

      <div class="creator-info">
        <div class="creator-avatar">JS</div>
        <div>
          <div class="creator-name">Jane Smith</div>
          <div class="creator-date">Published on June 10, 2023</div>
        </div>
      </div>

      <div class="tags">
        <span class="tag">Floral</span>
        <span class="tag">Pattern</span>
        <span class="tag">Adult Coloring</span>
        <span class="tag">Relaxation</span>
        <span class="tag">Detailed</span>
      </div>

      <div class="lineart-container">
        <img src="https://picsum.photos/800/800?random=1" alt="Intricate Floral Pattern Coloring Page">
      </div>

      <div class="buttons">
        <button class="btn">Continue</button>
        <button class="btn btn-secondary">Repaint</button>
        <button class="btn btn-outline">Review</button>
        <button class="btn btn-accent">Paint Online</button>
        <button class="btn btn-accent">Paint On APP</button>
        <button class="btn">Download</button>
        <button class="btn">Print</button>
        <button class="btn btn-outline" style="color: #ff4d4d; border-color: #ff4d4d;">Delete</button>
      </div>

      <div class="share-buttons">
        <span>Share:</span>
        <div class="share-btn">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" stroke="currentColor" stroke-width="2"
              stroke-linejoin="round" />
          </svg>
        </div>
        <div class="share-btn">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"
              stroke="currentColor" stroke-width="2" />
          </svg>
        </div>
        <div class="share-btn">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" stroke="currentColor"
              stroke-width="2" />
          </svg>
        </div>
        <div class="share-btn">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"
              stroke="currentColor" stroke-width="2" />
          </svg>
        </div>
      </div>

      <h2>About This Coloring Page</h2>
      <p>This intricate floral pattern is designed to provide hours of relaxation and creative expression. The detailed
        design features various flowers and leaves intertwined in a beautiful pattern that's perfect for both beginners
        and experienced colorists.</p>
      <p>Coloring this page can help reduce stress, improve focus, and allow you to express your artistic side. Whether
        you prefer traditional coloring tools or digital methods, this design will look stunning when complete.</p>
      <p>After coloring, you can share your creation with our community or use it as decorative art for your home or
        workspace. Enjoy the therapeutic benefits of coloring with this beautiful floral pattern!</p>
    </section>

    <section>
      <h2>You May Also Like</h2>

      <div class="related-grid">
        <div class="related-card">
          <div class="related-image">
            <img src="https://picsum.photos/500/500?random=2" alt="Floral Mandala Coloring Page">
          </div>
          <div class="related-content">
            <div class="related-title">Floral Mandala</div>
            <p>A beautiful mandala design filled with flowers and intricate patterns.</p>
          </div>
        </div>

        <div class="related-card">
          <div class="related-image">
            <img src="https://picsum.photos/500/500?random=3" alt="Butterfly Garden Coloring Page">
          </div>
          <div class="related-content">
            <div class="related-title">Butterfly Garden</div>
            <p>Butterflies flying among colorful flowers in this serene garden scene.</p>
          </div>
        </div>

        <div class="related-card">
          <div class="related-image">
            <img src="https://picsum.photos/500/500?random=4" alt="Ocean Waves Coloring Page">
          </div>
          <div class="related-content">
            <div class="related-title">Ocean Waves</div>
            <p>Peaceful ocean waves with sea creatures and shells along the shore.</p>
          </div>
        </div>
      </div>
    </section>
  </main>

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

</html>