guoziyun
/
artsite


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552
							<!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 Number Coloring相关的高亮颜色 */
        }
        
        * {
            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 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: 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 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="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 Number Coloring, 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 Number Coloring", 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 Number Coloring 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>