Hugging Face's logo

Spaces:
chchchadzilla
/
a-i
Running

App Files Community
a-i / index.html
chchchadzilla's picture
chchchadzilla
Add 3 files
f1c731a verified
raw
history blame contribute delete
32.4 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ArtGal.com | Where Young Artists Shine</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&family=Poppins:wght@300;400;600;700&display=swap');
:root {
--primary: #FF9BD2; /* Bubblegum pink */
--secondary: #7BD3F7; /* Sky blue */
--accent: #F7DB6A; /* Sunny yellow */
--dark: #5F6F94; /* Deep blue */
--pop: #FF6D60; /* Coral */
}
body {
font-family: 'Comic Neue', cursive;
background-color: #FFF9F9;
color: #333;
overflow-x: hidden;
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z' fill='%23FF9BD2'/%3E%3Cpath d='M12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z' fill='%237BD3F7'/%3E%3Cpath d='M12 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z' fill='%23F7DB6A'/%3E%3C/svg%3E"), auto;
}
h1, h2, h3 {
font-family: 'Comic Neue', cursive;
font-weight: 700;
}
.btn-rainbow {
background: linear-gradient(90deg,
#FF9BD2 0%,
#FFB7B7 20%,
#FFD6A5 40%,
#F7DB6A 60%,
#7BD3F7 80%,
#B5F8FE 100%);
background-size: 200% auto;
animation: rainbow 1.5s linear infinite;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
@keyframes rainbow {
0% { background-position: 0% center; }
100% { background-position: 200% center; }
}
.art-card {
transition: all 0.3s ease;
transform-style: preserve-3d;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.art-card:hover {
transform: translateY(-10px) rotate(2deg) scale(1.05);
box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}
.art-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 50%);
opacity: 0;
transition: opacity 0.3s ease;
}
.art-card:hover::before {
opacity: 1;
}
.emoji-float {
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-15px); }
100% { transform: translateY(0px); }
}
.bounce {
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.spin {
animation: spin 10s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.confetti {
position: absolute;
width: 10px;
height: 10px;
background-color: var(--pop);
opacity: 0;
}
.social-icon {
transition: all 0.3s ease;
transform-style: preserve-3d;
}
.social-icon:hover {
transform: rotate(10deg) scale(1.2);
filter: drop-shadow(0 0 5px rgba(255,109,96,0.5));
}
.nav-link {
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 3px;
bottom: -5px;
left: 0;
background-color: var(--pop);
transition: width 0.3s ease;
border-radius: 3px;
}
.nav-link:hover::after {
width: 100%;
}
.positive-message {
animation: pulse 2s infinite;
background: linear-gradient(90deg, #FF9BD2, #7BD3F7);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.gradient-text {
background: linear-gradient(90deg, #FF9BD2, #7BD3F7, #F7DB6A, #FF6D60);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
background-size: 300% auto;
animation: gradientText 5s linear infinite;
}
@keyframes gradientText {
0% { background-position: 0% center; }
100% { background-position: 100% center; }
}
.sticker {
position: absolute;
width: 80px;
height: 80px;
background-size: contain;
background-repeat: no-repeat;
z-index: 10;
pointer-events: none;
}
</style>
</head>
<body class="overflow-x-hidden">
<!-- Floating Emojis -->
<div class="sticker emoji-float" style="top:10%; left:5%; font-size:50px;">🎨</div>
<div class="sticker emoji-float bounce" style="top:30%; right:5%; font-size:60px; animation-delay:0.5s;">✨</div>
<div class="sticker emoji-float" style="top:70%; left:8%; font-size:45px; animation-delay:1s;">🖌️</div>
<div class="sticker emoji-float" style="top:50%; right:10%; font-size:55px; animation-delay:1.5s;">🌈</div>
<!-- Header -->
<header class="bg-white shadow-sm sticky top-0 z-50">
<div class="container mx-auto px-6 py-3">
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-14 h-14 rounded-full bg-gradient-to-br from-[#FF9BD2] to-[#7BD3F7] flex items-center justify-center mr-3 spin">
<i class="fas fa-palette text-white text-2xl"></i>
</div>
<h1 class="text-3xl font-bold gradient-text">ArtGal.com</h1>
</div>
<nav class="hidden md:flex space-x-8 items-center">
<a href="#" class="nav-link text-lg text-[#5F6F94] hover:text-[#FF6D60]">Gallery</a>
<a href="#" class="nav-link text-lg text-[#5F6F94] hover:text-[#FF6D60]">Young Artists</a>
<a href="#" class="nav-link text-lg text-[#5F6F94] hover:text-[#FF6D60]">Challenges</a>
<a href="#" class="nav-link text-lg text-[#5F6F94] hover:text-[#FF6D60]">Learn</a>
<a href="#" class="nav-link text-lg text-[#5F6F94] hover:text-[#FF6D60]">Shop</a>
</nav>
<div class="flex items-center space-x-4">
<button class="btn-rainbow text-white px-5 py-2 rounded-full font-bold text-lg">
<i class="fas fa-user-astronaut mr-2"></i> Join Free
</button>
<button class="md:hidden text-[#5F6F94] text-2xl">
<i class="fas fa-bars"></i>
</button>
</div>
</div>
</div>
</header>
<!-- Hero Section -->
<section class="relative bg-gradient-to-br from-[#FFF0F5] to-[#E6F9FF] py-20 overflow-hidden">
<div class="absolute top-0 left-0 w-full h-full opacity-20">
<div class="absolute top-20 left-10 w-40 h-40 rounded-full bg-[#FF9BD2] blur-xl"></div>
<div class="absolute top-1/2 right-20 w-60 h-60 rounded-full bg-[#7BD3F7] blur-xl"></div>
<div class="absolute bottom-10 left-1/2 w-80 h-80 rounded-full bg-[#F7DB6A] blur-xl"></div>
</div>
<div class="container mx-auto px-6 relative z-10">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-10 md:mb-0">
<h2 class="text-5xl md:text-6xl font-bold mb-6 gradient-text">Create. Share. <span class="emoji-float inline-block">✨</span> Inspire.</h2>
<p class="text-xl text-[#5F6F94] mb-8">The happiest place for Gen Alpha artists to showcase their work, get inspired, and connect with other young creators!</p>
<div class="flex flex-wrap gap-4">
<button class="btn-rainbow text-white px-8 py-4 rounded-full font-bold text-lg">
<i class="fas fa-rocket mr-2"></i> Start Creating
</button>
<button class="border-2 border-[#FF6D60] text-[#FF6D60] px-8 py-4 rounded-full font-bold text-lg hover:bg-[#FFF0F0] transition">
<i class="fas fa-star mr-2"></i> Featured Artists
</button>
</div>
<div class="mt-8 flex items-center">
<div class="flex -space-x-2">
<img src="https://randomuser.me/api/portraits/women/12.jpg" class="w-12 h-12 rounded-full border-2 border-white">
<img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-12 h-12 rounded-full border-2 border-white">
<img src="https://randomuser.me/api/portraits/women/45.jpg" class="w-12 h-12 rounded-full border-2 border-white">
<img src="https://randomuser.me/api/portraits/men/76.jpg" class="w-12 h-12 rounded-full border-2 border-white">
</div>
<p class="ml-4 text-[#5F6F94]"><span class="font-bold text-[#FF6D60]">10,000+</span> young artists creating daily!</p>
</div>
</div>
<div class="md:w-1/2 flex justify-center relative">
<div class="relative">
<div class="w-72 h-96 md:w-96 md:h-[500px] bg-white rounded-3xl shadow-xl overflow-hidden art-card">
<img src="https://images.unsplash.com/photo-1579783902614-a3fb39268b5b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1450&q=80"
alt="Young artist painting" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-6">
<p class="text-white text-sm">Featured Artist: <span class="font-bold">Mia, Age 9</span></p>
<h3 class="text-white text-xl font-bold mt-1">"My Colorful Dreams"</h3>
</div>
</div>
<div class="absolute -bottom-6 -right-6 w-32 h-32 bg-[#F7DB6A] rounded-2xl shadow-lg overflow-hidden art-card rotate-6">
<img src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80"
alt="Digital art" class="w-full h-full object-cover">
</div>
<div class="absolute -top-10 -left-10 w-24 h-24 bg-[#FF6D60] rounded-2xl shadow-lg overflow-hidden art-card -rotate-6 flex items-center justify-center">
<span class="text-white text-4xl">🎨</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Featured Young Artists -->
<section class="py-16 bg-white">
<div class="container mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold mb-4 gradient-text">Meet Our Young Artists <span class="emoji-float inline-block">🌟</span></h2>
<p class="text-[#5F6F94] max-w-2xl mx-auto text-lg">These amazing kids are changing the art world one colorful creation at a time!</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Artist 1 -->
<div class="bg-gradient-to-br from-[#FFE6F0] to-[#E6F7FF] rounded-2xl overflow-hidden shadow-lg art-card p-6 text-center">
<div class="w-24 h-24 mx-auto rounded-full border-4 border-white shadow-md overflow-hidden mb-4">
<img src="https://images.unsplash.com/photo-1551650975-87deedd944c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80"
alt="Young artist" class="w-full h-full object-cover">
</div>
<h3 class="text-xl font-bold text-[#5F6F94] mb-1">Emma, 10</h3>
<p class="text-[#FF6D60] mb-3">Digital Illustrator</p>
<p class="text-[#5F6F94] text-sm mb-4">"I love creating magical creatures and fantasy worlds!"</p>
<div class="flex justify-center space-x-2">
<span class="bg-[#FF9BD2] text-white text-xs px-2 py-1 rounded-full">Digital</span>
<span class="bg-[#7BD3F7] text-white text-xs px-2 py-1 rounded-full">Fantasy</span>
<span class="bg-[#F7DB6A] text-white text-xs px-2 py-1 rounded-full">Colorful</span>
</div>
<button class="mt-4 bg-white text-[#FF6D60] border border-[#FF6D60] px-4 py-1 rounded-full text-sm font-bold hover:bg-[#FF6D60] hover:text-white transition">
View Art
</button>
</div>
<!-- Artist 2 -->
<div class="bg-gradient-to-br from-[#FFF0E6] to-[#F0FFE6] rounded-2xl overflow-hidden shadow-lg art-card p-6 text-center">
<div class="w-24 h-24 mx-auto rounded-full border-4 border-white shadow-md overflow-hidden mb-4">
<img src="https://images.unsplash.com/photo-1503454537195-29dc400eb5cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80"
alt="Young artist" class="w-full h-full object-cover">
</div>
<h3 class="text-xl font-bold text-[#5F6F94] mb-1">Liam, 8</h3>
<p class="text-[#FF6D60] mb-3">Clay Sculptor</p>
<p class="text-[#5F6F94] text-sm mb-4">"I make funny monsters and creatures from my imagination!"</p>
<div class="flex justify-center space-x-2">
<span class="bg-[#FF9BD2] text-white text-xs px-2 py-1 rounded-full">Sculpture</span>
<span class="bg-[#7BD3F7] text-white text-xs px-2 py-1 rounded-full">3D</span>
<span class="bg-[#F7DB6A] text-white text-xs px-2 py-1 rounded-full">Funny</span>
</div>
<button class="mt-4 bg-white text-[#FF6D60] border border-[#FF6D60] px-4 py-1 rounded-full text-sm font-bold hover:bg-[#FF6D60] hover:text-white transition">
View Art
</button>
</div>
<!-- Artist 3 -->
<div class="bg-gradient-to-br from-[#E6FFF9] to-[#E6ECFF] rounded-2xl overflow-hidden shadow-lg art-card p-6 text-center">
<div class="w-24 h-24 mx-auto rounded-full border-4 border-white shadow-md overflow-hidden mb-4">
<img src="https://images.unsplash.com/photo-1519682337058-a94d519337bc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
alt="Young artist" class="w-full h-full object-cover">
</div>
<h3 class="text-xl font-bold text-[#5F6F94] mb-1">Sophia, 11</h3>
<p class="text-[#FF6D60] mb-3">Watercolor Painter</p>
<p class="text-[#5F6F94] text-sm mb-4">"Nature inspires me to create beautiful landscapes!"</p>
<div class="flex justify-center space-x-2">
<span class="bg-[#FF9BD2] text-white text-xs px-2 py-1 rounded-full">Painting</span>
<span class="bg-[#7BD3F7] text-white text-xs px-2 py-1 rounded-full">Nature</span>
<span class="bg-[#F7DB6A] text-white text-xs px-2 py-1 rounded-full">Detailed</span>
</div>
<button class="mt-4 bg-white text-[#FF6D60] border border-[#FF6D60] px-4 py-1 rounded-full text-sm font-bold hover:bg-[#FF6D60] hover:text-white transition">
View Art
</button>
</div>
<!-- Artist 4 -->
<div class="bg-gradient-to-br from-[#FFE6F7] to-[#F7E6FF] rounded-2xl overflow-hidden shadow-lg art-card p-6 text-center">
<div class="w-24 h-24 mx-auto rounded-full border-4 border-white shadow-md overflow-hidden mb-4">
<img src="https://images.unsplash.com/photo-1544725176-7c40e5a71c5e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80"
alt="Young artist" class="w-full h-full object-cover">
</div>
<h3 class="text-xl font-bold text-[#5F6F94] mb-1">Noah, 9</h3>
<p class="text-[#FF6D60] mb-3">Comic Artist</p>
<p class="text-[#5F6F94] text-sm mb-4">"I draw superheroes and their amazing adventures!"</p>
<div class="flex justify-center space-x-2">
<span class="bg-[#FF9BD2] text-white text-xs px-2 py-1 rounded-full">Drawing</span>
<span class="bg-[#7BD3F7] text-white text-xs px-2 py-1 rounded-full">Comics</span>
<span class="bg-[#F7DB6A] text-white text-xs px-2 py-1 rounded-full">Action</span>
</div>
<button class="mt-4 bg-white text-[#FF6D60] border border-[#FF6D60] px-4 py-1 rounded-full text-sm font-bold hover:bg-[#FF6D60] hover:text-white transition">
View Art
</button>
</div>
</div>
<div class="text-center mt-12">
<button class="btn-rainbow text-white px-8 py-3 rounded-full font-bold text-lg">
<i class="fas fa-users mr-2"></i> Meet More Artists
</button>
</div>
</div>
</section>
<!-- Weekly Challenge -->
<section class="py-16 bg-gradient-to-r from-[#FFF0F5] to-[#F0F9FF]">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-10 md:mb-0">
<div class="bg-[#FF6D60] text-white text-sm font-bold px-4 py-1 rounded-full inline-block mb-4">
<i class="fas fa-bolt mr-1"></i> This Week's Challenge
</div>
<h2 class="text-4xl font-bold mb-6 gradient-text">"Draw Your Dream Pet" <span class="emoji-float inline-block">🐾</span></h2>
<p class="text-lg text-[#5F6F94] mb-8">What would your ultimate pet look like? A rainbow unicorn? A dragon-puppy hybrid? Get creative and show us your dream pet! The most imaginative entries get featured on our homepage.</p>
<div class="flex flex-wrap gap-4">
<button class="btn-rainbow text-white px-8 py-3 rounded-full font-bold text-lg">
<i class="fas fa-upload mr-2"></i> Submit Your Art
</button>
<button class="border-2 border-[#5F6F94] text-[#5F6F94] px-8 py-3 rounded-full font-bold text-lg hover:bg-white transition">
<i class="fas fa-trophy mr-2"></i> Past Winners
</button>
</div>
</div>
<div class="md:w-1/2 flex justify-center">
<div class="relative">
<div class="w-full max-w-md bg-white rounded-3xl shadow-xl overflow-hidden art-card">
<img src="https://images.unsplash.com/photo-1588943211346-0908a1fbde2e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
alt="Child drawing" class="w-full h-full object-cover">
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-6">
<p class="text-white text-sm">Last Week's Winner: <span class="font-bold">Olivia, Age 8</span></p>
<h3 class="text-white text-xl font-bold mt-1">"My Robot Best Friend"</h3>
</div>
</div>
<div class="absolute -bottom-6 -right-6 w-32 h-32 bg-[#F7DB6A] rounded-2xl shadow-lg overflow-hidden art-card rotate-6 flex items-center justify-center">
<span class="text-4xl">🏆</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Comments Section -->
<section class="py-16 bg-white">
<div class="container mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold mb-4 gradient-text">Art Love <span class="emoji-float inline-block">💖</span></h2>
<div class="bg-gradient-to-r from-[#FFE6F0] to-[#E6F7FF] inline-block px-8 py-3 rounded-full mb-4">
<p class="text-lg font-bold positive-message"><i class="fas fa-heart text-[#FF6D60] mr-2"></i> This is a happy place - only kind comments allowed!</p>
</div>
<p class="text-[#5F6F94] max-w-2xl mx-auto text-lg">Our young artists work hard on their creations. Share some encouragement!</p>
</div>
<div class="max-w-3xl mx-auto">
<!-- Comment Form -->
<div class="bg-gradient-to-br from-[#F0F9FF] to-[#FFF0F5] rounded-2xl shadow-md p-6 mb-8 art-card">
<h3 class="text-xl font-bold text-[#5F6F94] mb-4">Spread Some Art Love <span class="text-[#FF6D60]">💌</span></h3>
<form>
<div class="mb-4">
<textarea class="w-full px-4 py-3 border border-[#FF9BD2] rounded-2xl focus:outline-none focus:ring-2 focus:ring-[#7BD3F7] focus:border-transparent"
rows="4" placeholder="What do you love about this artwork?"></textarea>
</div>
<div class="flex flex-col sm:flex-row justify-between items-center">
<div class="flex items-center mb-4 sm:mb-0">
<input type="checkbox" id="positive" class="mr-2 h-5 w-5 text-[#FF6D60] rounded focus:ring-[#FF6D60]">
<label for="positive" class="text-[#5F6F94]">I promise this is a nice comment!</label>
</div>
<button type="submit" class="btn-rainbow text-white px-6 py-2 rounded-full font-bold">
<i class="fas fa-paper-plane mr-2"></i> Send Love
</button>
</div>
</form>
</div>
<!-- Comments List -->
<div class="space-y-6">
<!-- Comment 1 -->
<div class="bg-gradient-to-r from-[#FFF0F0] to-white rounded-2xl shadow-md p-6 art-card comment-box">
<div class="flex items-start mb-4">
<div class="w-12 h-12 rounded-full bg-[#FF9BD2] flex items-center justify-center mr-4">
<i class="fas fa-user text-white text-xl"></i>
</div>
<div>
<h4 class="font-bold text-[#5F6F94]">ArtFan200</h4>
<div class="flex items-center text-[#FFD166] text-sm mb-1">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
<p class="text-[#5F6F94] mb-4">"The colors in this painting make me so happy! It's like looking at a rainbow explosion. You're so talented!"</p>
<div class="flex justify-between text-sm text-[#7BD3F7]">
<span>On "Sunset Dreams" by Maya, 9</span>
<div class="flex space-x-4">
<button class="hover:text-[#FF6D60]"><i class="fas fa-heart mr-1"></i> 24</button>
<button class="hover:text-[#FF6D60]"><i class="fas fa-hands-helping mr-1"></i> Encourage</button>
</div>
</div>
</div>
<!-- Comment 2 -->
<div class="bg-gradient-to-r from-[#F0FFF9] to-white rounded-2xl shadow-md p-6 art-card comment-box">
<div class="flex items-start mb-4">
<div class="w-12 h-12 rounded-full bg-[#7BD3F7] flex items-center justify-center mr-4">
<i class="fas fa-user-astronaut text-white text-xl"></i>
</div>
<div>
<h4 class="font-bold text-[#5F6F94]">CreativeKid101</h4>
<div class="flex items-center text-[#FFD166] text-sm mb-1">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
</div>
<p class="text-[#5F6F94] mb-4">"Wow! Your sculpture looks like it could come to life any minute. The details are amazing! How did you make the scales look so real?"</p>
<div class="flex justify-between text-sm text-[#7BD3F7]">
<span>On "Dragon Friend" by Leo, 10</span>
<div class="flex space-x-4">
<button class="hover:text-[#FF6D60]"><i class="fas fa-heart mr-1"></i> 18</button>
<button class="hover:text-[#FF6D60]"><i class="fas fa-hands-helping mr-1"></i> Encourage</button>
</div>
</div>
</div>
<!-- Comment 3 -->
<div class="bg-gradient-to-r from-[#FFF0F9] to-white rounded-2xl shadow-md p-6 art-card comment-box">
<div class="flex items-start mb-4">
<div class="w-12 h-12 rounded-full bg-[#F7DB6A] flex items-center justify-center mr-4">
<i class="fas fa-user-ninja text-white text-xl"></i>
</div>
<div>
<h4 class="font-bold text-[#5F6F94]">HappyArtist</h4>
<div class="flex items-center text-[#FFD166] text-sm mb-1">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
<p class="text-[#5F6F94] mb-4">"This comic made me laugh so hard! Your characters are hilarious and the story is awesome. Can't wait to see more adventures!"</p>
<div class="flex justify-between text-sm text-[#7BD3F7]">
<span>On "Super Squirrel" by Noah, 9</span>
<div class="flex space-x-4">
<button class="hover:text-[#FF6D60]"><i class="fas fa-heart mr-1"></i> 32</button>
<button class="hover:text-[#FF6D60]"><i class="fas fa-hands-helping mr-1"></i> Encourage</button>
</div>
</div>
</div>
</div>
<div class="text-center mt-8">
<button class="border-2 border-[#5F6F94] text-[#5F6F94] px-8 py-3 rounded-full font-bold text-lg hover:bg-white transition">
<i class="fas fa-comment-dots mr-2"></i> Load More Happy Comments
</button>
</div>
</div>
</div>
</section>
<!-- Social Media Section -->
<section class="py-16 bg-gradient-to-br from-[#FFF0F5] to-[#E6F9FF]">
<div class="container mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-4xl font-bold mb-4 gradient-text">Join Our Art Family <span class="emoji-float inline-block">👨‍👩‍👧‍👦</span></h2>
<p class="text-[#5F6F94] max-w-2xl mx-auto text-lg">Follow us for daily art inspiration, challenges, and features of our amazing young artists!</p>
</div>
<div class="flex flex-wrap justify-center gap-8 mb-12">
<a href="#" class="social-icon w-20 h-20 rounded-2xl bg-white shadow-lg flex items-center justify-center text-3xl text-[#FF9BD2] hover:text-[#FF6D60]">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="social-icon w-20 h-20 rounded-2xl bg-white shadow-lg flex items-center justify-center text-3xl text-[#7BD3F7] hover:text-[#5F6F94]">
<i class="fab fa-tiktok"></i>
</a>
<a href="#" class="social-icon w-20 h-20 rounded-2xl bg-white shadow-lg flex items-center justify-center text-3xl text-[#F7DB6A] hover:text-[#FF9BD2]">
<i class="fab fa-youtube"></i>
</a>
<a href="#" class="social-icon w-20 h-20 rounded-2xl bg-white shadow-lg flex items-center justify-center text-3xl text-[#FF6D60] hover:text-[#7BD3F
</html>