<!DOCTYPE html>
Browse files<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Creative Minds Academy Hub</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#6366f1',
secondary: '#a855f7',
dark: '#1e1b4b',
},
animation: {
'fade-in': 'fadeIn 1s ease-out',
'float-1': 'float 6s ease-in-out infinite',
'float-2': 'float 8s ease-in-out infinite 1s',
'float-3': 'float 7s ease-in-out infinite 2s',
'float-4': 'float 9s ease-in-out infinite 3s',
},
keyframes: {
fadeIn: {
'0%': { opacity: '0', transform: 'translateY(20px)' },
'100%': { opacity: '1', transform: 'translateY(0)' },
},
float: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-20px)' },
}
}
}
}
}
</script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="components/testimonial-card.js"></script>
<script src="components/team-card.js"></script>
</head>
<body class="bg-gray-50 font-sans">
<custom-navbar></custom-navbar>
<!-- Hero Section with Graduating Students Image -->
<section class="relative h-screen overflow-hidden">
<!-- Main background image of graduating students -->
<div class="absolute inset-0">
<img
src="https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1920&q=80"
alt="Group of happy graduating students throwing caps in the air"
class="w-full h-full object-cover"
>
<!-- Dark overlay for better text readability -->
<div class="absolute inset-0 bg-black/50"></div>
<!-- Subtle gradient overlay -->
<div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/40 to-transparent"></div>
</div>
<!-- Content overlay -->
<div class="absolute inset-0 flex items-center justify-center">
<div class="text-center px-4 z-10 max-w-5xl mx-auto">
<h1 class="text-5xl md:text-7xl font-bold text-white mb-6 animate-fade-in">Unlock Your <span class="text-yellow-300">Creative</span> Potential</h1>
<p class="text-xl md:text-2xl text-gray-100 mb-8 animate-fade-in delay-100">Join our academy to master the art of design, development and digital innovation.</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center animate-fade-in delay-200">
<a href="#courses" class="bg-white text-primary hover:bg-gray-100 px-8 py-4 rounded-full font-semibold text-lg transition-all duration-300 transform hover:scale-105 shadow-lg">Explore Courses</a>
<a href="#contact" class="border-2 border-white text-white hover:bg-white hover:text-primary px-8 py-4 rounded-full font-semibold text-lg transition-all duration-300 transform hover:scale-105 shadow-lg">Get Started</a>
</div>
</div>
</div>
<!-- Decorative elements -->
<div class="absolute bottom-10 left-1/2 transform -translate-x-1/2">
<div class="text-white text-center">
<p class="mb-2 animate-bounce">Scroll to explore</p>
<i data-feather="chevron-down" class="w-8 h-8 animate-bounce mx-auto"></i>
</div>
</div>
</section>
<!-- Featured Projects with Graduation Success Image -->
<section id="projects" class="py-20 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-4xl font-bold text-dark mb-4">Featured Projects</h2>
<div class="w-24 h-1 bg-primary mx-auto"></div>
<p class="text-gray-600 mt-6 max-w-2xl mx-auto">Explore our students' most innovative work that pushes creative boundaries.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Project 1 - Updated with graduation image -->
<div class="group relative overflow-hidden rounded-xl shadow-lg transition-all duration-500 hover:shadow-2xl">
<div class="h-64 overflow-hidden">
<img
src="https://images.unsplash.com/photo-1541339907198-e08756dedf3f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
alt="Graduating students celebrating success"
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
>
</div>
<div class="p-6 bg-white">
<h3 class="text-xl font-bold text-dark mb-2">Graduation Success Stories</h3>
<p class="text-gray-600 mb-4">Celebrating our graduates' achievements and career milestones.</p>
<div class="flex flex-wrap gap-2">
<span class="bg-primary bg-opacity-10 text-primary px-3 py-1 rounded-full text-sm">Success</span>
<span class="bg-secondary bg-opacity-10 text-secondary px-3 py-1 rounded-full text-sm">Graduation</span>
</div>
</div>
<a href="#" class="absolute inset-0 z-10"></a>
</div>
<!-- Project 2 -->
<div class="group relative overflow-hidden rounded-xl shadow-lg transition-all duration-500 hover:shadow-2xl">
<div class="h-64 overflow-hidden">
<img src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80" alt="Student working on creative project" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
</div>
<div class="p-6 bg-white">
<h3 class="text-xl font-bold text-dark mb-2">Interactive Learning Platform</h3>
<p class="text-gray-600 mb-4">A gamified educational experience for digital art students.</p>
<div class="flex flex-wrap gap-2">
<span class="bg-primary bg-opacity-10 text-primary px-3 py-1 rounded-full text-sm">UI/UX</span>
<span class="bg-secondary bg-opacity-10 text-secondary px-3 py-1 rounded-full text-sm">Web Development</span>
</div>
</div>
<a href="#" class="absolute inset-0 z-10"></a>
</div>
<!-- Project 3 -->
<div class="group relative overflow-hidden rounded-xl shadow-lg transition-all duration-500 hover:shadow-2xl">
<div class="h-64 overflow-hidden">
<img src="https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80" alt="Design studio work" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
</div>
<div class="p-6 bg-white">
<h3 class="text-xl font-bold text-dark mb-2">Brand Identity System</h3>
<p class="text-gray-600 mb-4">Comprehensive visual identity for a sustainable fashion startup.</p>
<div class="flex flex-wrap gap-2">
<span class="bg-primary bg-opacity-10 text-primary px-3 py-1 rounded-full text-sm">Branding</span>
<span class="bg-secondary bg-opacity-10 text-secondary px-3 py-1 rounded-full text-sm">Illustration</span>
</div>
</div>
<a href="#" class="absolute inset-0 z-10"></a>
</div>
</div>
<!-- Additional Graduation Image Section -->
<div class="mt-20 bg-white rounded-xl shadow-lg overflow-hidden">
<div class="md:flex">
<div class="md:w-1/2">
<img
src="https://images.unsplash.com/photo-1543269865-cbf427effbad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
alt="Academic students celebrating graduation with diplomas"
class="w-full h-full object-cover"
>
</div>
<div class="md:w-1/2 p-12">
<h2 class="text-3xl font-bold text-dark mb-4">Celebrate Your Academic Journey</h2>
<p class="text-gray-600 mb-6">Join hundreds of successful graduates who have launched their creative careers through our comprehensive programs. Our students achieve remarkable success in various creative fields.</p>
<div class="grid grid-cols-2 gap-6 mb-8">
<div class="text-center">
<div class="text-4xl font-bold text-primary mb-2">95%</div>
<div class="text-gray-600">Graduation Rate</div>
</div>
<div class="text-center">
<div class="text-4xl font-bold text-primary mb-2">100+</div>
<div class="text-gray-600">Annual Gr
|
@@ -10,13 +10,17 @@ body {
|
|
| 10 |
from { opacity: 0; transform: translateY(20px); }
|
| 11 |
to { opacity: 1; transform: translateY(0); }
|
| 12 |
}
|
| 13 |
-
|
| 14 |
@keyframes float {
|
| 15 |
0% { transform: translateY(0px); }
|
| 16 |
50% { transform: translateY(-20px); }
|
| 17 |
100% { transform: translateY(0px); }
|
| 18 |
}
|
| 19 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 20 |
.animate-fade-in {
|
| 21 |
animation: fadeIn 1s ease-out forwards;
|
| 22 |
}
|
|
|
|
| 10 |
from { opacity: 0; transform: translateY(20px); }
|
| 11 |
to { opacity: 1; transform: translateY(0); }
|
| 12 |
}
|
|
|
|
| 13 |
@keyframes float {
|
| 14 |
0% { transform: translateY(0px); }
|
| 15 |
50% { transform: translateY(-20px); }
|
| 16 |
100% { transform: translateY(0px); }
|
| 17 |
}
|
| 18 |
|
| 19 |
+
@keyframes bounce {
|
| 20 |
+
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
|
| 21 |
+
40% { transform: translateY(-10px); }
|
| 22 |
+
60% { transform: translateY(-5px); }
|
| 23 |
+
}
|
| 24 |
.animate-fade-in {
|
| 25 |
animation: fadeIn 1s ease-out forwards;
|
| 26 |
}
|