Hugging Face's logo

Spaces:
Araptoo
/
createlab
Running

App Files Community
Araptoo commited on
Commit
7698710
·
verified ·
1 Parent(s): e6631ab

Add 2 files

Browse files
Files changed (1) hide show
  1. index.html +125 -1
index.html CHANGED
@@ -49,5 +49,129 @@
49
  @keyframes float {
50
  0% { transform: translateY(0px); }
51
  50% { transform: translateY(-20px); }
52
- 100% {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
53
  </html>
 
49
  @keyframes float {
50
  0% { transform: translateY(0px); }
51
  50% { transform: translateY(-20px); }
52
+ 100% { transform: translateY(0px); }
53
+ }
54
+ </style>
55
+ </head>
56
+ <body class="bg-gray-50">
57
+ <!-- Navigation -->
58
+ <nav class="bg-white shadow-lg fixed w-full z-50">
59
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
60
+ <div class="flex justify-between h-20 items-center">
61
+ <div class="flex items-center">
62
+ <div class="flex-shrink-0">
63
+ <a href="index.html">
64
+ <img class="h-12" src="https://via.placeholder.com/150x50?text=CreateLab+Africa" alt="CreateLab Africa Logo">
65
+ </a>
66
+ </div>
67
+ </div>
68
+ <div class="hidden md:block">
69
+ <div class="ml-10 flex items-baseline space-x-8">
70
+ <a href="index.html" class="nav-link text-gray-800 hover:text-blue-600 px-3 py-2 text-sm font-medium">Home</a>
71
+ <a href="about.html" class="nav-link text-gray-800 hover:text-blue-600 px-3 py-2 text-sm font-medium">About</a>
72
+ <a href="programs.html" class="nav-link text-gray-800 hover:text-blue-600 px-3 py-2 text-sm font-medium">Programs</a>
73
+ <a href="impact.html" class="nav-link text-gray-800 hover:text-blue-600 px-3 py-2 text-sm font-medium">Impact</a>
74
+ <a href="partners.html" class="nav-link text-gray-800 hover:text-blue-600 px-3 py-2 text-sm font-medium">Partners</a>
75
+ <a href="contact.html" class="nav-link text-gray-800 hover:text-blue-600 px-3 py-2 text-sm font-medium">Contact</a>
76
+ </div>
77
+ </div>
78
+ <div class="hidden md:block">
79
+ <a href="donate.html" class="ml-8 whitespace-nowrap inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700">
80
+ Support Our Mission
81
+ </a>
82
+ </div>
83
+ <div class="-mr-2 flex md:hidden">
84
+ <button type="button" class="bg-white inline-flex items-center justify-center p-2 rounded-md text-gray-800 hover:text-blue-600 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" aria-controls="mobile-menu" aria-expanded="false" id="mobile-menu-button">
85
+ <span class="sr-only">Open main menu</span>
86
+ <i class="fas fa-bars"></i>
87
+ </button>
88
+ </div>
89
+ </div>
90
+ </div>
91
+
92
+ <!-- Mobile menu -->
93
+ <div class="hidden md:hidden" id="mobile-menu">
94
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white">
95
+ <a href="index.html" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 hover:text-blue-600 hover:bg-gray-50">Home</a>
96
+ <a href="about.html" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 hover:text-blue-600 hover:bg-gray-50">About</a>
97
+ <a href="programs.html" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 hover:text-blue-600 hover:bg-gray-50">Programs</a>
98
+ <a href="impact.html" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 hover:text-blue-600 hover:bg-gray-50">Impact</a>
99
+ <a href="partners.html" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 hover:text-blue-600 hover:bg-gray-50">Partners</a>
100
+ <a href="contact.html" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 hover:text-blue-600 hover:bg-gray-50">Contact</a>
101
+ <a href="donate.html" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-blue-600 hover:bg-blue-700">Support Our Mission</a>
102
+ </div>
103
+ </div>
104
+ </nav>
105
+
106
+ <!-- Hero Section -->
107
+ <section class="hero-gradient pt-24 pb-32 text-white">
108
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
109
+ <div class="lg:grid lg:grid-cols-12 lg:gap-8">
110
+ <div class="px-4 sm:px-0 sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left lg:flex lg:items-center">
111
+ <div>
112
+ <h1 class="mt-4 text-4xl tracking-tight font-extrabold sm:mt-5 sm:leading-none lg:mt-6 lg:text-5xl xl:text-6xl">
113
+ <span class="block">Empowering Africa's</span>
114
+ <span class="block text-blue-300">Next Generation</span>
115
+ <span class="block">of Innovators</span>
116
+ </h1>
117
+ <p class="mt-3 text-base text-blue-100 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
118
+ We're building an inclusive and innovative Africa where every young mind is empowered to create, explore, and lead through STEM.
119
+ </p>
120
+ <div class="mt-10 sm:flex sm:justify-center lg:justify-start">
121
+ <div class="rounded-md shadow">
122
+ <a href="programs.html" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-blue-700 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10">
123
+ Explore Programs
124
+ </a>
125
+ </div>
126
+ <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
127
+ <a href="donate.html" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-500 hover:bg-blue-600 md:py-4 md:text-lg md:px-10">
128
+ Support Our Mission
129
+ </a>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ </div>
134
+ <div class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center">
135
+ <div class="relative mx-auto w-full rounded-lg shadow-lg lg:max-w-md">
136
+ <div class="relative block w-full bg-white rounded-lg overflow-hidden">
137
+ <img class="animate-float w-full" src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="Students learning STEM">
138
+ </div>
139
+ </div>
140
+ </div>
141
+ </div>
142
+ </div>
143
+ </section>
144
+
145
+ <!-- Featured Programs -->
146
+ <section class="py-20 bg-white">
147
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
148
+ <div class="lg:text-center">
149
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Our Programs</h2>
150
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
151
+ Transforming STEM Education
152
+ </p>
153
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
154
+ Discover our flagship programs designed to inspire and educate
155
+ </p>
156
+ </div>
157
+
158
+ <div class="mt-16 grid grid-cols-1 gap-8 md:grid-cols-3">
159
+ <!-- Program 1 -->
160
+ <div class="bg-gray-50 rounded-xl shadow-lg overflow-hidden transition-all duration-300 card-hover">
161
+ <div class="p-6">
162
+ <div class="flex items-center">
163
+ <div class="flex-shrink-0 bg-blue-100 p-3 rounded-lg">
164
+ <i class="fas fa-flask text-blue-600 text-xl"></i>
165
+ </div>
166
+ <div class="ml-4">
167
+ <h3 class="text-lg leading-6 font-medium text-gray-900">STEM Labs</h3>
168
+ </div>
169
+ </div>
170
+ <div class="mt-4">
171
+ <p class="text-base text-gray-500">
172
+ Hands-on learning spaces equipped with modern technology for practical STEM education.
173
+ </p>
174
+ </div>
175
+ <div class="mt-6">
176
+ <a href="programs.html#stem-labs" class="text-blue-600 hover:text-blue-800 font
177
  </html>