guoziyun
/
artsite


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

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

        a {
            text-decoration: none;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            background-color: #f8f9fa;
            margin: 0;
            padding: 0;
        }

        .email-container {
            max-width: 600px;
            margin: 0 auto;
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

        .header {
            background-color: var(--primary-color);
            color: white;
            text-align: center;
            padding: 30px 20px;
        }

        .header h1 {
            margin: 0;
            font-size: 1.8rem;
        }

        .content {
            padding: 30px 20px;
        }

        .welcome-message {
            margin-bottom: 30px;
        }

        .welcome-message h2 {
            color: var(--secondary-color);
            margin-bottom: 15px;
        }

        .coloring-pages-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            margin: 30px 0;
        }

        .coloring-page {
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .coloring-page:hover {
            transform: translateY(-5px);
        }

        .coloring-page img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .coloring-page h4 {
            background-color: var(--secondary-color);
            color: white;
            text-align: center;
            padding: 10px;
            margin: 0;
            font-size: 0.9rem;
        }

        .cta-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: center;
            margin: 30px 0;
        }

        .cta-button {
            background-color: var(--accent-color);
            color: var(--text-color);
            padding: 12px 25px;
            border-radius: 5px;
            text-decoration: none;
            font-weight: 600;
            display: inline-block;
            transition: background-color 0.3s ease;
        }

        .cta-button:hover {
            background-color: #ffc14d;
        }

        .app-button {
            background-color: var(--secondary-color);
            color: white;
            padding: 10px 20px;
            border-radius: 5px;
            text-decoration: none;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 200px;
            transition: background-color 0.3s ease;
        }

        .app-button:hover {
            background-color: #3aa39c;
        }

        .app-button svg {
            width: 20px;
            height: 20px;
        }

        .footer {
            background-color: var(--text-color);
            color: white;
            text-align: center;
            padding: 20px;
            font-size: 0.9rem;
        }

        .footer p {
            margin: 5px 0;
        }

        @media (max-width: 480px) {
            .coloring-pages-grid {
                grid-template-columns: 1fr;
            }

            .cta-buttons {
                flex-direction: column;
                align-items: center;
            }
        }
    </style>
</head>

<body>
    <div class="email-container">
        <div class="header">
            <h1>Welcome to Art Color!</h1>
        </div>

        <div class="content">
            <div class="welcome-message">
                <h2>Hello from our coloring community!</h2>
                <p>Thank you for subscribing to Art Color! We're excited to have you join our creative
                    community.</p>
                <p>As a welcome gift, here's your free 18-page Eclectic Coloring Book with themes like architecture and
                    kawaii.</p>
                <p>Click the button below to download your coloring book:</p>
                <a href="https://art.pcoloring.com/art-coloring-book.pdf" class="cta-button">Download Coloring Book</a>
            </div>

            <div>
                <h3>Explore Our Favorite Coloring Pages</h3>
                <p>Here are some of our most popular coloring pages for you to enjoy. Click on any image to download and
                    start coloring!</p>

                <div class="coloring-pages-grid">
                    <a href="https://art.pcoloring.com/coloring-page/685ba37c2fb65d38d9aeea9a" class="coloring-page"
                        target="_blank">
                        <img src="https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/page/480/685ba37c2fb65d38d9aeea9a.webp"
                            alt="Couple Coloring Page">
                        <h4>Sweet Couple</h4>
                    </a>
                    <a href="https://art.pcoloring.com/coloring-page/685417b1e6830677ae9d7e22" class="coloring-page"
                        target="_blank">
                        <img src="https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/page/480/685417b1e6830677ae9d7e22.webp"
                            alt="Flower Coloring Page">
                        <h4>Flower</h4>
                    </a>
                    <a href="https://art.pcoloring.com/coloring-page/62b85f0f79dbae3f38eee1e2" class="coloring-page"
                        target="_blank">
                        <img src="https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/page/480/62b85f0f79dbae3f38eee1e2.webp"
                            alt="Tiger Coloring Page">
                        <h4>King of Forest</h4>
                    </a>
                    <a href="https://art.pcoloring.com/coloring-page/6850e5351908c1750d297cae" class="coloring-page"
                        target="_blank">
                        <img src="https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/page/480/6850e5351908c1750d297cae.webp"
                            alt="Icecream Coloring Page">
                        <h4>Icecream</h4>
                    </a>
                    <a href="https://art.pcoloring.com/coloring-page/67ca444f5f45a930454abd61" class="coloring-page"
                        target="_blank">
                        <img src="https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/page/480/67ca444f5f45a930454abd61.webp"
                            alt="Fantasy Coloring Page">
                        <h4>Dryad</h4>
                    </a>
                    <a href="https://art.pcoloring.com/coloring-page/67d106b75f45a930454d2307" class="coloring-page"
                        target="_blank">
                        <img src="https://d2mb6s2cy1zg97.cloudfront.net/thumbs/coloring-page/page/480/67d106b75f45a930454d2307.webp"
                            alt="Zentangle Coloring Page">
                        <h4>Fish Zentangle</h4>
                    </a>
                </div>
            </div>

            <div>
                <h3>Download Our App</h3>
                <p>Take your coloring experience to the next level with our mobile app. Available for both iOS and
                    Android devices.</p>

                <div class="cta-buttons">
                    <a href="itms-apps://itunes.apple.com/app/id1575480118" class="app-button" target="_blank">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white">
                            <path
                                d="M18.41 16.24c-.34-.48-.79-.91-1.22-1.32-.43-.42-.86-.83-1.29-1.22-.44-.39-.88-.78-1.3-1.18-.43-.4-.87-.78-1.31-1.17-.44-.39-.89-.77-1.33-1.14-.44-.38-.88-.76-1.33-1.13-.45-.37-.9-.74-1.35-1.11-.45-.37-.91-.74-1.36-1.11C6.9 7.31 6.46 7 6 7c-.41 0-.81.11-1.18.33-.37.22-.68.53-.93.91-.25.38-.44.8-.57 1.26-.13.46-.2 1.04-.2 1.75v2.8c0 .71.07 1.29.2 1.75.13.46.32.88.57 1.26.25.38.56.69.93.91.37.22.77.33 1.18.33.46 0 .9-.12 1.32-.35.42-.23.85-.49 1.28-.77.43-.28.87-.58 1.31-.9.44-.32.88-.65 1.32-.99.44-.34.87-.69 1.3-1.05.43-.36.87-.72 1.3-1.09.44-.37.89-.73 1.34-1.09.45-.36.9-.73 1.36-1.09.45-.36.9-.73 1.35-1.09.44-.36.89-.72 1.33-1.08zm-6.41 5.76c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z" />
                        </svg>
                        <span>Download on the App Store</span>
                    </a>

                    <a href="https://play.google.com/store/apps/details?id=com.pcoloring.art.puzzle.color.by.number&pcampaignid=web_share"
                        class="app-button" target="_blank">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white">
                            <path
                                d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
                            <path d="M7.5 14.5V9.5l6 3z" />
                        </svg>
                        <span>Get it on Google Play</span>
                    </a>
                </div>
            </div>

            <p>We'll be sending you regular updates with new coloring pages, tips, and exclusive offers. If you have any
                questions, feel free to reply to this email.</p>
            <p>Happy coloring!</p>
            <p>The Art Color Team</p>
        </div>

        <div class="footer">
            <p>© 2025 Art Color. All rights reserved.</p>
        </div>
    </div>
</body>

</html>