Hugging Face's logo

Spaces:
Shakil2024111
/
ml
Running

App Files Community
ml
File size: 13,233 Bytes 
d3e06bf
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Projects - Ceramic Innovation Club</title>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <style>
        .project-hero {
            background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('http://static.photos/technology/1200x630/6');
            background-size: cover;
            background-position: center;
            min-height: 50vh;
        }
        .project-filter button.active {
            background: #3b82f6;
            color: white;
        }
        .project-card {
            transition: all 0.3s ease;
        }
        .project-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
    </style>
</head>
<body class="font-sans antialiased text-gray-800">
    <!-- Navigation -->
    <nav class="fixed w-full z-50 bg-white shadow-md">
        <div class="container mx-auto px-6 py-4">
            <div class="flex justify-between items-center">
                <a href="index.html" class="text-2xl font-bold text-gray-800">Ceramic Innovation Club</a>
                <div class="hidden md:flex space-x-8">
                    <a href="index.html" class="text-gray-800 hover:text-blue-600 transition">Home</a>
                    <a href="about.html" class="text-gray-800 hover:text-blue-600 transition">About</a>
                    <a href="projects.html" class="text-blue-600 font-semibold">Projects</a>
                    <a href="events.html" class="text-gray-800 hover:text-blue-600 transition">Events</a>
                    <a href="members.html" class="text-gray-800 hover:text-blue-600 transition">Members</a>
                    <a href="gallery.html" class="text-gray-800 hover:text-blue-600 transition">Gallery</a>
                    <a href="contact.html" class="text-gray-800 hover:text-blue-600 transition">Contact</a>
                </div>
                <button class="md:hidden">
                    <i data-feather="menu"></i>
                </button>
            </div>
        </div>
    </nav>

    <!-- Projects Hero -->
    <section class="project-hero flex items-center justify-center pt-20">
        <div class="text-center text-white px-6" data-aos="fade-up">
            <h1 class="text-4xl md:text-6xl font-bold mb-6">Our Projects</h1>
            <p class="text-xl md:text-2xl max-w-3xl mx-auto">Explore our innovative ceramic research and development initiatives</p>
        </div>
    </section>

    <!-- Project Filters -->
    <section class="py-12 bg-gray-100">
        <div class="container mx-auto px-6">
            <div class="project-filter flex flex-wrap justify-center gap-4" data-aos="fade-up">
                <button class="px-6 py-2 bg-white rounded-full border transition active" data-filter="all">All Projects</button>
                <button class="px-6 py-2 bg-white rounded-full border transition" data-filter="research">Research</button>
                <button class="px-6 py-2 bg-white rounded-full border transition" data-filter="development">Development</button>
                <button class="px-6 py-2 bg-white rounded-full border transition" data-filter="sustainability">Sustainability</button>
                <button class="px-6 py-2 bg-white rounded-full border transition" data-filter="completed">Completed</button>
            </div>
        </div>
    </section>

    <!-- Projects Grid -->
    <section class="py-20 bg-white">
        <div class="container mx-auto px-6">
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Project 1 -->
                <div class="project-card bg-gray-50 rounded-xl overflow-hidden research" data-aos="fade-up">
                    <img src="http://static.photos/science/640x360/7" alt="Nano-Ceramic Research" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <span class="bg-blue-100 text-blue-800 text-sm font-semibold px-3 py-1 rounded-full mb-4 inline-block">Research</span>
                        <h3 class="text-xl font-semibold mb-2">Nano-Ceramic Composites</h3>
                        <p class="text-gray-600 mb-4">Developing advanced ceramic nanocomposites for high-temperature applications</p>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-500">Ongoing</span>
                            <a href="project-detail.html" class="text-blue-600 font-semibold hover:underline">View Details</a>
                        </div>
                    </div>
                </div>

                <!-- Project 2 -->
                <div class="project-card bg-gray-50 rounded-xl overflow-hidden development" data-aos="fade-up" data-aos-delay="100">
                    <img src="http://static.photos/technology/640x360/8" alt="3D Printing" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <span class="bg-green-100 text-green-800 text-sm font-semibold px-3 py-1 rounded-full mb-4 inline-block">Development</span>
                        <h3 class="text-xl font-semibold mb-2">Ceramic 3D Printing</h3>
                        <p class="text-gray-600 mb-4">Advanced additive manufacturing techniques for complex ceramic structures</p>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-500">Ongoing</span>
                            <a href="project-detail.html" class="text-blue-600 font-semibold hover:underline">View Details</a>
                        </div>
                    </div>
                </div>

                <!-- Project 3 -->
                <div class="project-card bg-gray-50 rounded-xl overflow-hidden sustainability completed" data-aos="fade-up" data-aos-delay="200">
                    <img src="http://static.photos/nature/640x360/9" alt="Sustainable Ceramics" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <span class="bg-purple-100 text-purple-800 text-sm font-semibold px-3 py-1 rounded-full mb-4 inline-block">Sustainability</span>
                        <h3 class="text-xl font-semibold mb-2">Eco-Friendly Ceramics</h3>
                        <p class="text-gray-600 mb-4">Developing sustainable ceramic production methods and recyclable materials</p>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-green-600">Completed</span>
                            <a href="project-detail.html" class="text-blue-600 font-semibold hover:underline">View Details</a>
                        </div>
                    </div>
                </div>

                <!-- Project 4 -->
                <div class="project-card bg-gray-50 rounded-xl overflow-hidden research" data-aos="fade-up">
                    <img src="http://static.photos/medical/640x360/10" alt="Bioceramics" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <span class="bg-blue-100 text-blue-800 text-sm font-semibold px-3 py-1 rounded-full mb-4 inline-block">Research</span>
                        <h3 class="text-xl font-semibold mb-2">Advanced Bioceramics</h3>
                        <p class="text-gray-600 mb-4">Research on ceramic materials for medical implants and dental applications</p>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-500">Ongoing</span>
                            <a href="project-detail.html" class="text-blue-600 font-semibold hover:underline">View Details</a>
                        </div>
                    </div>
                </div>

                <!-- Project 5 -->
                <div class="project-card bg-gray-50 rounded-xl overflow-hidden development" data-aos="fade-up" data-aos-delay="100">
                    <img src="http://static.photos/industry/640x360/11" alt="Industrial Ceramics" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <span class="bg-green-100 text-green-800 text-sm font-semibold px-3 py-1 rounded-full mb-4 inline-block">Development</span>
                        <h3 class="text-xl font-semibold mb-2">Industrial Ceramic Coatings</h3>
                        <p class="text-gray-600 mb-4">Developing protective ceramic coatings for extreme industrial environments</p>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-500">Ongoing</span>
                            <a href="project-detail.html" class="text-blue-600 font-semibold hover:underline">View Details</a>
                        </div>
                    </div>
                </div>

                <!-- Project 6 -->
                <div class="project-card bg-gray-50 rounded-xl overflow-hidden sustainability" data-aos="fade-up" data-aos-delay="200">
                    <img src="http://static.photos/construction/640x360/12" alt="Building Materials" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <span class="bg-purple-100 text-purple-800 text-sm font-semibold px-3 py-1 rounded-full mb-4 inline-block">Sustainability</span>
                        <h3 class="text-xl font-semibold mb-2">Sustainable Building Materials</h3>
                        <p class="text-gray-600 mb-4">Eco-friendly ceramic materials for construction and architectural applications</p>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-500">Ongoing</span>
                            <a href="project-detail.html" class="text-blue-600 font-semibold hover:underline">View Details</a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Load More Button -->
            <div class="text-center mt-12" data-aos="fade-up">
                <button class="bg-gray-800 text-white px-8 py-3 rounded-full font-semibold hover:bg-gray-900 transition">
                    Load More Projects
                </button>
            </div>
        </div>
    </section>

    <!-- Project Statistics -->
    <section class="py-20 bg-gray-100">
        <div class="container mx-auto px-6">
            <div class="grid md:grid-cols-4 gap-8 text-center">
                <div data-aos="fade-up" data-aos-delay="100">
                    <div class="text-4xl font-bold text-blue-600 mb-2">15+</div>
                    <div class="text-gray-600">Active Projects</div>
                </div>
                <div data-aos="fade-up" data-aos-delay="200">
                    <div class="text-4xl font-bold text-green-600 mb-2">8</div>
                    <div class="text-gray-600">Completed Projects</div>
                </div>
                <div data-aos="fade-up" data-aos-delay="300">
                    <div class="text-4xl font-bold text-purple-600 mb-2">12</div>
                    <div class="text-gray-600">Research Papers</div>
                </div>
                <div data-aos="fade-up" data-aos-delay="400">
                    <div class="text-4xl font-bold text-orange-600 mb-2">5</div>
                    <div class="text-gray-600">Patents Filed</div>
                </div>
            </div>
        </div>
    </section>

    <!-- Call to Action -->
    <section class="py-20 bg-white">
        <div class="container mx-auto px-6 text-center" data-aos="fade-up">
            <h2 class="text-3xl md:text-4xl font-bold mb-6">Want to Collaborate?</h2>
            <p class="text-xl text-gray-600 mb-8 max-w-3xl mx-auto">Join us in pushing the boundaries of ceramic technology through innovative projects and research</p>
            <a href="contact.html" class="bg-gray-800 text-white px-8 py-4 rounded-full font-semibold hover:bg-gray-900 transition inline-flex items-center">
                Get Involved
                <i data-feather="arrow-right" class="ml-2"></i>
            </a>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white py-12">
        <div class="container mx-auto px-6">
            <div class="grid md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-xl font-semibold mb-4">Ceramic Innovation Club</h3>
                    <p class="text-gray-400">Pushing the boundaries of ceramic technology through collaboration and innovation</p>
                </div>
                
                <div>
                    <h4 class="text-lg font-sem极
</body>
</html>