guoziyun
/
artsite


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About - Yay! Coloring Pages</title>
    <style>
        :root {
            --primary-color: #ff6b6b;
            --secondary-color: #4ecdc4;
            --accent-color: #ffd166;
            --background-color: #f9f9f9;
            --text-color: #333;
            --light-text: #666;
            --art-color: #ff9f1c;
            /* 用于Art Color相关的高亮颜色 */
        }

        * {
            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;
            text-align: center;
        }

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

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

        p {
            margin-bottom: 15px;
        }

        .btn {
            display: inline-block;
            background-color: var(--secondary-color);
            color: white;
            padding: 10px 20px;
            border-radius: 25px;
            text-decoration: none;
            font-size: 1rem;
            transition: all 0.3s ease;
        }

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

        .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;
            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 Color相关里程碑的特殊样式 */
        .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: repeat(auto-fill, minmax(250px, 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: 180px;
            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);
        }

        .team-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 30px;
            margin-top: 30px;
        }

        .team-member {
            text-align: center;
        }

        .team-avatar {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            overflow: hidden;
            margin: 0 auto 15px;
            border: 3px solid var(--secondary-color);
            transition: all 0.3s ease;
        }

        .team-member:hover .team-avatar {
            border-color: var(--primary-color);
        }

        .team-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .team-name {
            font-weight: 600;
            color: var(--text-color);
        }

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

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

            section {
                padding: 20px;
            }

            .about-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>

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

    <main class="container">
        <section>
            <h1>About Us</h1>
            <p>Welcome to Art Color, 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="https://picsum.photos/1200/400?random=20" alt="People enjoying coloring together">
            </div>

            <div class="about-grid">
                <div class="about-item">
                    <h3>Our Mission</h3>
                    <p>At Art Color, our mission is to provide a diverse collection of coloring pages that inspire
                        imagination, reduce stress, and promote relaxation. 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">
                    <div class="timeline-year">2016</div>
                    <p>Releases its first mobile game, "Pixel Puzzle", which quickly gains a dedicated user base of over
                        500,000 downloads in the first month.</p>
                </div>

                <div class="timeline-item">
                    <div class="timeline-year">2017</div>
                    <p>Launches "Doodle Draw", a creative drawing app that introduces users to digital art, receiving
                        critical acclaim from parenting and education platforms.</p>
                </div>

                <div class="timeline-item art-related">
                    <div class="timeline-year">2018</div>
                    <p>Develops and releases "Coloring Book by Numbers", which becomes a global sensation, <span
                            class="timeline-metric">reaching 100 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>Expands its portfolio with "Pattern Paradise", a mandala coloring app that receives critical
                        acclaim and is featured in Apple's "App of the Day".</p>
                </div>

                <div class="timeline-item art-related">
                    <div class="timeline-year">2022</div>
                    <p>Launches the web version of "Art Color", bringing high-quality coloring content to a wider
                        audience and <span class="timeline-metric">gaining 10 million monthly active users</span> in the
                        first year.</p>
                </div>

                <div class="timeline-item art-related">
                    <div class="timeline-year">2023</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>
        </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="https://picsum.photos/600/400?random=30" 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>
                </div>

                <div class="game-card">
                    <div class="game-image">
                        <img src="https://picsum.photos/600/400?random=31" alt="Pattern Paradise">
                    </div>
                    <div class="game-content">
                        <div class="game-title">Pattern Paradise</div>
                        <div class="game-desc">An immersive mandala and pattern coloring app that helps users create
                            stunning artwork with ease.</div>
                    </div>
                </div>

                <div class="game-card">
                    <div class="game-image">
                        <img src="https://picsum.photos/600/400?random=32" alt="Doodle Draw">
                    </div>
                    <div class="game-content">
                        <div class="game-title">Doodle Draw</div>
                        <div class="game-desc">A creative drawing app that lets users express their artistic side with a
                            variety of tools and colors.</div>
                    </div>
                </div>

                <div class="game-card">
                    <div class="game-image">
                        <img src="https://picsum.photos/600/400?random=33" alt="Pixel Puzzle">
                    </div>
                    <div class="game-content">
                        <div class="game-title">Pixel Puzzle</div>
                        <div class="game-desc">A unique puzzle game that combines pixel art with challenging puzzles for
                            all ages.</div>
                    </div>
                </div>
            </div>
        </section>

        <section>
            <h2>Our Team</h2>
            <p>Behind every great app and game is a talented team of designers, developers, and creatives. Meet the
                people who make JCCY and Art Color possible:</p>

            <div class="team-grid">
                <div class="team-member">
                    <div class="team-avatar">
                        <img src="https://picsum.photos/400/400?random=40" alt="CEO">
                    </div>
                    <div class="team-name">Sarah Johnson</div>
                    <div class="team-role">CEO & Founder</div>
                </div>

                <div class="team-member">
                    <div class="team-avatar">
                        <img src="https://picsum.photos/400/400?random=41" alt="CTO">
                    </div>
                    <div class="team-name">David Chen</div>
                    <div class="team-role">CTO</div>
                </div>

                <div class="team-member">
                    <div class="team-avatar">
                        <img src="https://picsum.photos/400/400?random=42" alt="Lead Designer">
                    </div>
                    <div class="team-name">Emily Rodriguez</div>
                    <div class="team-role">Lead Designer</div>
                </div>

                <div class="team-member">
                    <div class="team-avatar">
                        <img src="https://picsum.photos/400/400?random=43" alt="Marketing Director">
                    </div>
                    <div class="team-name">Michael Brown</div>
                    <div class="team-role">Marketing Director</div>
                </div>

                <div class="team-member">
                    <div class="team-avatar">
                        <img src="https://picsum.photos/400/400?random=44" alt="Art Director">
                    </div>
                    <div class="team-name">Sophia Kim</div>
                    <div class="team-role">Art Director</div>
                </div>

                <div class="team-member">
                    <div class="team-avatar">
                        <img src="https://picsum.photos/400/400?random=45" alt="Product Manager">
                    </div>
                    <div class="team-name">James Wilson</div>
                    <div class="team-role">Product Manager</div>
                </div>
            </div>
        </section>

        <section>
            <h2>Contact Us</h2>
            <p>We'd love to hear from you! Whether you have questions, feedback, or just want to say hello, feel free to
                reach out to our team.</p>

            <div class="btn-container" style="text-align: center; margin-top: 30px;">
                <a href="#" class="btn">Contact Support</a>
            </div>
        </section>
    </main>

    <footer>
        <div class="container footer-content">
            <p>Yay! Coloring Pages - 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>