MasterSolis/Events.html at main · kawfeee/MasterSolis · GitHub

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
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mastersolis - Resources </title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
    <script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
    <script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
</head>
<body class="bg-gray-900 text-gray-100">
    <nav class="fixed w-full z-50 bg-gray-900/80 backdrop-blur-sm"></nav>
        <div class="container mx-auto px-6 py-4">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <img src="MasterLogo.webp" alt="Company Logo" class="h-10 w-auto hover:opacity-80 transition-opacity duration-300">
                </div>
                <div class="hidden md:flex space-x-8">
                    <a href="#" class="hover:text-blue-500 transition-colors duration-300">Home</a>
                    <a href="#" class="hover:text-blue-500 transition-colors duration-300">Our Services</a>
                    <a href="#" class="hover:text-blue-500 transition-colors duration-300">Products</a>
                    <a href="#" class="hover:text-blue-500 transition-colors duration-300">Courses</a>
                    <a href="#" class="hover:text-blue-500 transition-colors duration-300">Internships</a>
                    <!-- Dropdown Menu -->
                    <div class="relative" x-data="{ open: false }">
                        <button @click="open = !open"
                                @click.away="open = false"
                                class="hover:text-blue-500 transition-colors duration-300 flex items-center">
                            More
                            <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                            </svg>
                        </button>

                        <!-- Dropdown Content -->
                        <div x-show="open"
                             x-transition:enter="transition ease-out duration-200"
                             x-transition:enter-start="opacity-0 transform scale-95"
                             x-transition:enter-end="opacity-100 transform scale-100"
                             x-transition:leave="transition ease-in duration-150"
                             x-transition:leave-start="opacity-100 transform scale-100"
                             x-transition:leave-end="opacity-0 transform scale-95"
                             class="absolute right-0 mt-2 w-48 bg-gray-800 rounded-lg shadow-xl py-2"
                             style="display: none;">
                            <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-700 hover:text-blue-500 transition-colors duration-300">Events</a>
                            <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-700 hover:text-blue-500 transition-colors duration-300">Blogs</a>
                            <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-700 hover:text-blue-500 transition-colors duration-300">Resources</a>
                            <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-700 hover:text-blue-500 transition-colors duration-300">Groups</a>
                            <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-700 hover:text-blue-500 transition-colors duration-300">Contact Us</a>
                            <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-700 hover:text-blue-500 transition-colors duration-300">My Account</a>
                            <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-700 hover:text-blue-500 transition-colors duration-300">SignUp</a>
                            <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-700 hover:text-blue-500 transition-colors duration-300">Login</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <div class="pt-24 pb-12 bg-gradient-to-r from-gray-900 to-gray-800">
        <div class="container mx-auto px-6">
            <h1 class="text-4xl md:text-5xl font-bold text-center mb-8">MasterSolis Events</h1>
            <p class="text-xl text-gray-400 text-center max-w-3xl mx-auto">Join our innovative events and expand your horizons in technology and professional development.</p>
        </div>
    </div>

    <!-- Hackathon Section -->
    <section class="py-16 bg-gray-900">
        <div class="container mx-auto px-6">
            <h2 class="text-3xl font-bold mb-12 text-blue-500">Hackathons</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="bg-gray-800 rounded-lg overflow-hidden hover:transform hover:scale-105 transition duration-300">
                    <img src="Cicada 2024.jpg" alt="Hackathon - People collaborating at computers" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-2">Cicada 2024</h3>
                        <p class="text-gray-400 mb-4">24-hour hackathon focused on developing solutions for social impact.</p>
                        <div class="flex justify-between items-center">
                            <span class="text-blue-500">November 7, 2024</span>
                            <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition duration-300">Register Now</button>
                        </div>
                    </div>
                </div>

                <div class="bg-gray-800 rounded-lg overflow-hidden hover:transform hover:scale-105 transition duration-300">
                    <img src="TechFusion.jpg" alt="Hackathon - Team brainstorming" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-2">TechFusion 2024</h3>
                        <p class="text-gray-400 mb-4">48-hour hackathon exploring AI and blockchain innovations.</p>
                        <div class="flex justify-between items-center">
                            <span class="text-blue-500">December 15, 2024</span>
                            <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition duration-300">Register Now</button>
                        </div>
                    </div>
                </div>

                <div class="bg-gray-800 rounded-lg overflow-hidden hover:transform hover:scale-105 transition duration-300">
                    <img src="CodeStorm.jpg" alt="Hackathon - Coding competition" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-2">CodeStorm 2024</h3>
                        <p class="text-gray-400 mb-4">36-hour hackathon focused on mobile app development.</p>
                        <div class="flex justify-between items-center">
                            <span class="text-blue-500">January 20, 2025</span>
                            <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition duration-300">Register Now</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Workshops Section -->
    <section class="py-16 bg-gray-800">
        <div class="container mx-auto px-6">
            <h2 class="text-3xl font-bold mb-12 text-blue-500">Workshops</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="bg-gray-900 rounded-lg p-6 hover:transform hover:scale-105 transition duration-300">
                    <div class="text-blue-500 mb-4">
                        <svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                        </svg>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">Web Development Masterclass</h3>
                    <p class="text-gray-400 mb-4">Learn modern web development techniques from industry experts.</p>
                    <div class="flex justify-between items-center">
                        <span class="text-blue-500">November 10, 2024</span>
                        <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition duration-300">Register</button>
                    </div>
                </div>

                <div class="bg-gray-900 rounded-lg p-6 hover:transform hover:scale-105 transition duration-300">
                    <div class="text-blue-500 mb-4">
                        <svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/>
                        </svg>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">Data Science Fundamentals</h3>
                    <p class="text-gray-400 mb-4">Master the basics of data analysis and machine learning algorithms.</p>
                    <div class="flex justify-between items-center">
                        <span class="text-blue-500">November 15, 2024</span>
                        <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition duration-300">Register</button>
                    </div>
                </div>

                <div class="bg-gray-900 rounded-lg p-6 hover:transform hover:scale-105 transition duration-300">
                    <div class="text-blue-500 mb-4">
                        <svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"/>
                        </svg>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">AI & Machine Learning Workshop</h3>
                    <p class="text-gray-400 mb-4">Explore artificial intelligence and practical machine learning applications.</p>
                    <div class="flex justify-between items-center">
                        <span class="text-blue-500">November 20, 2024</span>
                        <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition duration-300">Register</button>
                    </div>
                </div>

                <div class="bg-gray-900 rounded-lg p-6 hover:transform hover:scale-105 transition duration-300">
                    <div class="text-blue-500 mb-4">
                        <svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
                        </svg>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">Cybersecurity Essentials</h3>
                    <p class="text-gray-400 mb-4">Learn crucial cybersecurity practices and threat prevention techniques.</p>
                    <div class="flex justify-between items-center">
                        <span class="text-blue-500">November 25, 2024</span>
                        <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition duration-300">Register</button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Upcoming Events Section -->
    <section class="py-16 bg-gray-900">
        <div class="container mx-auto px-6">
            <h2 class="text-3xl font-bold mb-12 text-blue-500">Upcoming Events</h2>
            <div class="space-y-6">
                <div class="bg-gray-800 rounded-lg p-6 hover:bg-gray-700 transition duration-300">
                    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                        <div>
                            <h3 class="text-xl font-semibold mb-2">AI in Healthcare Symposium</h3>
                            <p class="text-gray-400">Join leading experts discussing the future of AI in healthcare</p>
                        </div>
                        <div class="flex flex-col md:flex-row items-center gap-4">
                            <div class="text-blue-500">
                                <div class="font-semibold">November 20, 2024</div>
                                <div>6:00 PM - 8:00 PM</div>
                            </div>
                            <button class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-lg transition duration-300 whitespace-nowrap">RSVP Now</button>
                        </div>
                    </div>
                </div>

                <div class="bg-gray-800 rounded-lg p-6 hover:bg-gray-700 transition duration-300">
                    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                        <div>
                            <h3 class="text-xl font-semibold mb-2">Cybersecurity Forum</h3>
                            <p class="text-gray-400">Explore the latest trends and threats in cybersecurity with industry professionals</p>
                        </div>
                        <div class="flex flex-col md:flex-row items-center gap-4">
                            <div class="text-blue-500">
                                <div class="font-semibold">December 5, 2024</div>
                                <div>2:00 PM - 5:00 PM</div>
                            </div>
                            <button class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-lg transition duration-300 whitespace-nowrap">RSVP Now</button>
                        </div>
                    </div>
                </div>

                <div class="bg-gray-800 rounded-lg p-6 hover:bg-gray-700 transition duration-300">
                    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                        <div>
                            <h3 class="text-xl font-semibold mb-2">Cloud Computing Workshop</h3>
                            <p class="text-gray-400">Learn about cloud architecture and deployment strategies from cloud experts</p>
                        </div>
                        <div class="flex flex-col md:flex-row items-center gap-4">
                            <div class="text-blue-500">
                                <div class="font-semibold">December 15, 2024</div>
                                <div>1:00 PM - 4:00 PM</div>
                            </div>
                            <button class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-lg transition duration-300 whitespace-nowrap">RSVP Now</button>
                        </div>
                    </div>
                </div>

                <div class="bg-gray-800 rounded-lg p-6 hover:bg-gray-700 transition duration-300">
                    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                        <div>
                            <h3 class="text-xl font-semibold mb-2">Blockchain Technology Summit</h3>
                            <p class="text-gray-400">Discover the potential of blockchain technology and its real-world applications</p>
                        </div>
                        <div class="flex flex-col md:flex-row items-center gap-4">
                            <div class="text-blue-500">
                                <div class="font-semibold">January 10, 2025</div>
                                <div>9:00 AM - 12:00 PM</div>
                            </div>
                            <button class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-lg transition duration-300 whitespace-nowrap">RSVP Now</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Newsletter Section -->
    <section class="py-16 bg-gray-800">
        <div class="container mx-auto px-6 text-center">
            <h2 class="text-3xl font-bold mb-6">Stay Updated</h2>
            <p class="text-gray-400 mb-8">Subscribe to our newsletter to receive updates about upcoming events</p>
            <div class="max-w-md mx-auto">
                <form class="flex gap-4">
                    <input type="email" placeholder="Enter your email" class="flex-1 px-4 py-2 rounded-lg bg-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-lg transition duration-300">Subscribe</button>
                </form>
            </div>
        </div>
    </section>

</body>
</html>