guoziyun
/
artsite


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About - Art Number Coloring</title>
    <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="/stylesheets/v2/styles.css">
    <style>
        :root {
            --art-color: #ff9f1c;
            /* 用于Art Number Coloring相关的高亮颜色 */
        }

        .about-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            margin-top: 30px;
        }

        .about-item {
            background-color: var(--background-color);
            border-radius: 10px;
            padding: 25px;
            transition: all 0.3s ease;
        }

        .about-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
        }

        .brand-image {
            margin: 30px 0;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .brand-image:hover {
            transform: scale(1.02);
        }

        .brand-image img {
            width: 100%;
            height: auto;
            max-height: 400px;
            object-fit: cover;
        }

        .timeline {
            position: relative;
            margin: 50px 0;
        }

        .timeline::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%;
            width: 2px;
            background-color: var(--secondary-color);
            transform: translateX(-50%);
        }

        .timeline-item {
            position: relative;
            margin-bottom: 40px;
            padding: 20px;
            width: 50%;
        }

        .timeline-item:nth-child(even) {
            left: 50%;
            padding-left: 40px;
        }

        .timeline-item:nth-child(odd) {
            padding-right: 40px;
            text-align: right;
        }

        .timeline-item::after {
            content: '';
            position: absolute;
            top: 20px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: var(--primary-color);
            z-index: 1;
        }

        .timeline-item:nth-child(even)::after {
            left: -10px;
        }

        .timeline-item:nth-child(odd)::after {
            right: -10px;
        }

        /* Art Number Coloring相关里程碑的特殊样式 */
        .timeline-item.art-related::after {
            background-color: var(--art-color);
            transform: scale(1.3);
        }

        .timeline-item.art-related .timeline-year {
            color: var(--art-color);
        }

        .timeline-year {
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 10px;
        }

        .timeline-metric {
            font-weight: 600;
            color: var(--secondary-color);
        }

        .timeline-item.art-related .timeline-metric {
            color: var(--art-color);
        }

        .games-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-top: 30px;
        }

        .game-card {
            background-color: var(--background-color);
            border-radius: 10px;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .game-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
        }

        .game-image {
            height: 260px;
            background-color: #f0f0f0;
            overflow: hidden;
        }

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

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

        .game-content {
            padding: 20px;
        }

        .game-title {
            font-weight: 600;
            margin-bottom: 5px;
            color: var(--text-color);
        }

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

        .game-badge-container {
            display: flex;
            justify-content: start;
            gap: 20px;
        }

        .game-badge {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 120px;
            height: auto;
            background-color: black;
            border-radius: 8px;
            margin: 10px 0 0 0;
            transition: transform 0.3s ease;
        }

        .game-badge:hover {
            transform: translateY(-5px);
        }

        .contact-info {
            text-align: start;
            margin: 30px 0;
        }

        .contact-email {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .contact-email a {
            color: var(--secondary-color);
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .contact-email a:hover {
            color: var(--primary-color);
            text-decoration: underline;
        }

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

        .contact-country {
            font-size: 1.1rem;
            font-weight: bold;
            color: var(--text-color);
        }

        @media (max-width: 768px) {
            h1 {
                font-size: 1.8rem;
            }

            h2 {
                font-size: 1.5rem;
            }

            section {
                padding: 20px;
            }

            .about-grid {
                grid-template-columns: 1fr;
            }

            .games-grid {
                grid-template-columns: 1fr;
            }

            .timeline::before {
                left: 20px;
            }

            .timeline-item {
                width: 100%;
                padding-left: 50px;
                padding-right: 0;
                text-align: left;
            }

            .timeline-item:nth-child(even) {
                left: 0;
            }

            .timeline-item:nth-child(odd)::after,
            .timeline-item:nth-child(even)::after {
                left: 10px;
            }
        }
    </style>
</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">
            <section>
                <h1>About Us</h1>
                <p>Welcome to Art Number Coloring, your go-to destination for high-quality, free printable coloring
                    pages and digital coloring experiences. We're passionate about bringing creativity and joy to people
                    of all ages through the art of coloring.</p>

                <!-- 新增品牌理念图片 -->
                <div class="brand-image">
                    <img src="/assets/images/brand.webp" alt="People enjoying coloring together">
                </div>

                <div class="about-grid">
                    <div class="about-item">
                        <h3>Our Mission</h3>
                        <p>At Art Number Coloring, our mission is to provide a diverse collection of coloring pages that
                            inspire imagination, reduce stress, and promote relaxation, aiming to onboard 1 million new
                            artists to our platform by 2035. We believe that coloring is not just for kids—it's a
                            therapeutic activity that can bring out the artist in everyone.</p>
                    </div>

                    <div class="about-item">
                        <h3>Our Vision</h3>
                        <p>We envision a world where everyone has access to creative outlets that promote mental
                            well-being and artistic expression. Through our platform, we aim to connect people with
                            beautiful, engaging coloring content that sparks joy and creativity.</p>
                    </div>
                </div>
            </section>

            <section>
                <h2>About JCCY</h2>
                <p>JCCY is a company founded in 2015 that specializes in the development of casual entertainment games.
                    Several of our games have been well received by users. Among them, "Coloring Book by Numbers" is one
                    of the most popular coloring by number apps in the world and the most successful ad-driven app,
                    gaining wide recognition.</p>

                <div class="timeline">
                    <div class="timeline-item">
                        <div class="timeline-year">2015</div>
                        <p>JCCY is founded with a vision to create engaging casual games that bring joy to players
                            worldwide.</p>
                    </div>

                    <div class="timeline-item art-related">
                        <div class="timeline-year">2016</div>
                        <p>Develops and releases "Coloring Book by Numbers", which becomes a global sensation, <span
                                class="timeline-metric">reaching 10 million downloads</span> within two years and
                            winning <span class="timeline-metric">5 international awards</span> for Best Casual Game.
                        </p>
                    </div>

                    <div class="timeline-item">
                        <div class="timeline-year">2020</div>
                        <p>Launched the "Jigsaw Puzzle", a puzzle - based casual puzzle game, which has been highly
                            praised.</p>
                    </div>

                    <div class="timeline-item">
                        <div class="timeline-year">2022</div>
                        <p>Launched "Art Puzzle", a casual art puzzle game, to further expand the product line.</p>
                    </div>

                    <div class="timeline-item">
                        <div class="timeline-year">2023</div>
                        <p>Launched "Sudoku" puzzle-solving game and "Find Differences" game, making the product line
                            start to diversify.</p>
                    </div>

                    <div class="timeline-item art-related">
                        <div class="timeline-year">2024</div>
                        <p>Introduces premium features to "Coloring Book by Numbers", enhancing the user experience
                            while maintaining free access, resulting in <span class="timeline-metric">a 300% increase in
                                user engagement</span>.</p>
                    </div>

                    <div class="timeline-item art-related">
                        <div class="timeline-year">2025</div>
                        <p>Launches the web version of "Art Number Coloring", bringing high-quality coloring content to
                            a wider audience.</p>
                    </div>

                </div>
            </section>

            <section>
                <h2>Our Games & Apps</h2>
                <p>Over the years, JCCY has developed several successful games and apps that have captured the hearts of
                    users worldwide. Here are some of our most popular creations:</p>

                <div class="games-grid">
                    <div class="game-card">
                        <div class="game-image">
                            <img src="/assets/icon/color-by-number.webp" alt="Coloring Book by Numbers">
                        </div>
                        <div class="game-content">
                            <div class="game-title">Coloring Book by Numbers</div>
                            <div class="game-desc">A popular coloring app that combines the fun of coloring with the
                                challenge of numbers. Available on iOS and Android.</div>
                            <div class="game-badge-container">
                                <a href="itms-apps://itunes.apple.com/app/id1575480118" target="_blank"
                                    class="game-badge">
                                    <img src="/assets/icon/icon-app-store.svg" alt="Download on the App Store"
                                        style="width:100%">
                                </a>
                                <a href="https://play.google.com/store/apps/details?id=com.pcoloring.art.puzzle.color.by.number&pcampaignid=web_share"
                                    target="_blank" class="game-badge">
                                    <img src="/assets/icon/icon-google-play.svg" alt="Get it on Google Play"
                                        style="width:100%">
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="game-card">
                        <div class="game-image">
                            <img src="/assets/icon/jigsaw-puzzle.webp" alt="Jigaw Puzzle">
                        </div>
                        <div class="game-content">
                            <div class="game-title">Jigsaw Puzzle</div>
                            <div class="game-desc">A online jigsaw puzzle games with over 10,000 high-quality images and
                                different difficulty levels are a boon for puzzle enthusiasts.</div>
                            <div class="game-badge-container">
                                <a href="https://apps.apple.com/us/app/jigsaw-puzzle-hd-game/id6453471674"
                                    target="_blank" class="game-badge">
                                    <img src="/assets/icon/icon-app-store.svg" alt="Download on the App Store"
                                        style="width:100%">
                                </a>
                                <a href="https://play.google.com/store/apps/details?id=com.pcoloring.puzzle.jigsaw"
                                    target="_blank" class="game-badge">
                                    <img src="/assets/icon/icon-google-play.svg" alt="Get it on Google Play"
                                        style="width:100%">
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="game-card">
                        <div class="game-image">
                            <img src="/assets/icon/art-puzzle.webp" alt="Art Puzzle">
                        </div>
                        <div class="game-content">
                            <div class="game-title">Art Puzzle</div>
                            <div class="game-desc">A brand-new type of art game that combines classic coloring games and
                                jigsaw puzzle games.</div>
                            <div class="game-badge-container">
                                <a href="https://apps.apple.com/us/app/jigsaw-art-puzzle-game/id6499138123"
                                    target="_blank" class="game-badge">
                                    <img src="/assets/icon/icon-app-store.svg" alt="Download on the App Store"
                                        style="width:100%">
                                </a>
                                <a href="https://play.google.com/store/apps/details?id=com.pcoloring.jigsaw.art.puzzle"
                                    target="_blank" class="game-badge">
                                    <img src="/assets/icon/icon-google-play.svg" alt="Get it on Google Play"
                                        style="width:100%">
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="game-card">
                        <div class="game-image">
                            <img src="/assets/icon/find-difference.webp" alt="Find Difference">
                        </div>
                        <div class="game-content">
                            <div class="game-title">Find Difference</div>
                            <div class="game-desc">An interesting and challenging puzzle game that tests your
                                observation skills.</div>
                            <div class="game-badge-container">
                                <a href="https://play.google.com/store/apps/details?id=com.find.differences.spot.puzzle"
                                    target="_blank" class="game-badge">
                                    <img src="/assets/icon/icon-google-play.svg" alt="Get it on Google Play"
                                        style="width:100%">
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="game-card">
                        <div class="game-image">
                            <img src="/assets/icon/soduko.webp" alt="Sudoku Puzzle - Brain Puzzle">
                        </div>
                        <div class="game-content">
                            <div class="game-title">Sudoku Puzzle</div>
                            <div class="game-desc">A logic-based number game that trains your brain.</div>
                            <div class="game-badge-container">
                                <a href="https://play.google.com/store/apps/details?id=puzzle.sudoku.free.brain.game"
                                    target="_blank" class="game-badge">
                                    <img src="/assets/icon/icon-google-play.svg" alt="Get it on Google Play"
                                        style="width:100%">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section>
                <a href="/contact">
                    <h2>Contact Us</h2>
                </a>
                <div class="contact-info">
                    <h3>Questions? Partnership?</h3>
                    <p>We'd love to hear from you!</p>


                    <div class="contact-email">
                        <img width="32px" src="/assets/svg/email.svg" alt="email">
                        <a href="mailto:art_number_coloring@jccy-tech.com">Support Or Feedback</a>
                    </div>

                    <div class="contact-address">
                        <div style="display: flex; align-items: center;">
                            <img width="28px" src="/assets/svg/location.svg" alt="location">
                            <div class="contact-country">BEIJING, CHINA</div>
                        </div>
                        <p>17th Floor, Shining Building, No. 35 Xueyuan Road, Haidian District, Beijing</p>
                    </div>
                </div>

            </section>
        </main>

        <%- include('footer') %>

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

</body>

</html>