API tools faq
paste
hasanqqsp

demo-akmapesa

hasanqqsp
Aug 29th, 2025
49
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 23.41 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="id" class="scroll-smooth">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>HIMASI - Himpunan Mahasiswa Sistem Informasi</title>
  7. <script src="https://cdn.tailwindcss.com"></script>
  8. <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
  9. </head>
  10. <body class="bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 text-white">
  11.  
  12. <!-- Navbar -->
  13. <nav class="fixed top-0 w-full bg-black/10 backdrop-blur-lg border-b border-white/10 z-50">
  14. <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  15. <div class="flex justify-between items-center py-4">
  16. <div class="flex items-center space-x-2">
  17. <div class="w-10 h-10 bg-gradient-to-r from-purple-400 to-pink-400 rounded-lg flex items-center justify-center">
  18. <i class="fas fa-graduation-cap text-white text-lg"></i>
  19. </div>
  20. <span class="text-xl font-bold bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">HIMASI</span>
  21. </div>
  22.  
  23. <div class="hidden md:flex space-x-8">
  24. <a href="#beranda" class="hover:text-purple-400 transition-all duration-300 hover:scale-105">Beranda</a>
  25. <a href="#program" class="hover:text-purple-400 transition-all duration-300 hover:scale-105">Program Kerja</a>
  26. <a href="#artikel" class="hover:text-purple-400 transition-all duration-300 hover:scale-105">Artikel</a>
  27. <a href="#kontak" class="hover:text-purple-400 transition-all duration-300 hover:scale-105">Kontak</a>
  28. </div>
  29.  
  30. <div class="md:hidden">
  31. <button class="text-white hover:text-purple-400 transition-colors">
  32. <i class="fas fa-bars text-xl"></i>
  33. </button>
  34. </div>
  35. </div>
  36. </div>
  37. </nav>
  38.  
  39. <!-- Jumbotron -->
  40. <section id="beranda" class="min-h-screen flex items-center justify-center relative overflow-hidden pt-20">
  41. <!-- Background decorative elements -->
  42. <div class="absolute inset-0 overflow-hidden">
  43. <div class="absolute -top-40 -right-40 w-80 h-80 bg-purple-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse"></div>
  44. <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-pink-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse" style="animation-delay: 1s;"></div>
  45. <div class="absolute top-40 left-1/2 w-80 h-80 bg-indigo-500 rounded-full mix-blend-multiply filter blur-xl opacity-10 animate-pulse" style="animation-delay: 2s;"></div>
  46. </div>
  47.  
  48. <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
  49. <div class="mb-8">
  50. <h1 class="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-white via-purple-200 to-pink-200 bg-clip-text text-transparent leading-tight">
  51. HIMASI
  52. </h1>
  53. <p class="text-xl md:text-2xl text-gray-300 mb-2 font-light">Himpunan Mahasiswa Sistem Informasi</p>
  54. <p class="text-lg text-purple-300 mb-8">Universitas Teknologi Digital Indonesia</p>
  55. </div>
  56.  
  57. <div class="max-w-3xl mx-auto mb-12">
  58. <p class="text-lg md:text-xl text-gray-300 leading-relaxed mb-8">
  59. Organisasi mahasiswa yang berkomitmen untuk mengembangkan potensi mahasiswa
  60. Sistem Informasi melalui kegiatan akademik, soft skill, dan pengabdian masyarakat.
  61. </p>
  62.  
  63. <div class="flex flex-col sm:flex-row gap-4 justify-center">
  64. <a href="#program" class="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 px-8 py-4 rounded-full text-white font-semibold transition-all duration-300 transform hover:scale-105 hover:shadow-2xl inline-flex items-center justify-center">
  65. <i class="fas fa-rocket mr-2"></i>
  66. Jelajahi Program
  67. </a>
  68. <a href="#artikel" class="border-2 border-purple-400 hover:bg-purple-400 px-8 py-4 rounded-full text-purple-400 hover:text-white font-semibold transition-all duration-300 transform hover:scale-105 inline-flex items-center justify-center">
  69. <i class="fas fa-book mr-2"></i>
  70. Baca Artikel
  71. </a>
  72. </div>
  73. </div>
  74.  
  75. <!-- Stats -->
  76. <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
  77. <div class="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:bg-white/10 transition-all duration-300">
  78. <div class="text-3xl font-bold text-purple-400 mb-2">500+</div>
  79. <div class="text-gray-300">Anggota Aktif</div>
  80. </div>
  81. <div class="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:bg-white/10 transition-all duration-300">
  82. <div class="text-3xl font-bold text-pink-400 mb-2">50+</div>
  83. <div class="text-gray-300">Program Kerja</div>
  84. </div>
  85. <div class="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:bg-white/10 transition-all duration-300">
  86. <div class="text-3xl font-bold text-indigo-400 mb-2">5</div>
  87. <div class="text-gray-300">Tahun Berprestasi</div>
  88. </div>
  89. </div>
  90. </div>
  91. </section>
  92.  
  93. <!-- Program Kerja -->
  94. <section id="program" class="py-20 relative">
  95. <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  96. <div class="text-center mb-16">
  97. <h2 class="text-4xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
  98. Program Kerja
  99. </h2>
  100. <p class="text-xl text-gray-300 max-w-3xl mx-auto">
  101. Berbagai program inovatif untuk mengembangkan potensi mahasiswa Sistem Informasi
  102. </p>
  103. </div>
  104.  
  105. <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
  106. <!-- Program 1 -->
  107. <div class="group bg-white/5 backdrop-blur-sm rounded-3xl p-8 border border-white/10 hover:bg-white/10 transition-all duration-500 transform hover:-translate-y-2 hover:shadow-2xl">
  108. <div class="w-16 h-16 bg-gradient-to-r from-purple-500 to-pink-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
  109. <i class="fas fa-code text-white text-2xl"></i>
  110. </div>
  111. <h3 class="text-xl font-bold mb-4 text-white group-hover:text-purple-300 transition-colors">Workshop Programming</h3>
  112. <p class="text-gray-300 leading-relaxed">
  113. Pelatihan intensif programming dengan berbagai bahasa pemrograman modern
  114. untuk meningkatkan skill teknis mahasiswa.
  115. </p>
  116. </div>
  117.  
  118. <!-- Program 2 -->
  119. <div class="group bg-white/5 backdrop-blur-sm rounded-3xl p-8 border border-white/10 hover:bg-white/10 transition-all duration-500 transform hover:-translate-y-2 hover:shadow-2xl">
  120. <div class="w-16 h-16 bg-gradient-to-r from-blue-500 to-indigo-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
  121. <i class="fas fa-users text-white text-2xl"></i>
  122. </div>
  123. <h3 class="text-xl font-bold mb-4 text-white group-hover:text-blue-300 transition-colors">Leadership Training</h3>
  124. <p class="text-gray-300 leading-relaxed">
  125. Program pengembangan kepemimpinan untuk membentuk karakter pemimpin
  126. masa depan di bidang teknologi informasi.
  127. </p>
  128. </div>
  129.  
  130. <!-- Program 3 -->
  131. <div class="group bg-white/5 backdrop-blur-sm rounded-3xl p-8 border border-white/10 hover:bg-white/10 transition-all duration-500 transform hover:-translate-y-2 hover:shadow-2xl">
  132. <div class="w-16 h-16 bg-gradient-to-r from-green-500 to-teal-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
  133. <i class="fas fa-heart text-white text-2xl"></i>
  134. </div>
  135. <h3 class="text-xl font-bold mb-4 text-white group-hover:text-green-300 transition-colors">Pengabdian Masyarakat</h3>
  136. <p class="text-gray-300 leading-relaxed">
  137. Kegiatan sosial untuk memberikan kontribusi nyata kepada masyarakat
  138. melalui penerapan teknologi informasi.
  139. </p>
  140. </div>
  141.  
  142. <!-- Program 4 -->
  143. <div class="group bg-white/5 backdrop-blur-sm rounded-3xl p-8 border border-white/10 hover:bg-white/10 transition-all duration-500 transform hover:-translate-y-2 hover:shadow-2xl">
  144. <div class="w-16 h-16 bg-gradient-to-r from-orange-500 to-red-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
  145. <i class="fas fa-trophy text-white text-2xl"></i>
  146. </div>
  147. <h3 class="text-xl font-bold mb-4 text-white group-hover:text-orange-300 transition-colors">Kompetisi IT</h3>
  148. <p class="text-gray-300 leading-relaxed">
  149. Menyelenggarakan dan mengikuti berbagai kompetisi IT untuk mengasah
  150. kemampuan dan meraih prestasi.
  151. </p>
  152. </div>
  153.  
  154. <!-- Program 5 -->
  155. <div class="group bg-white/5 backdrop-blur-sm rounded-3xl p-8 border border-white/10 hover:bg-white/10 transition-all duration-500 transform hover:-translate-y-2 hover:shadow-2xl">
  156. <div class="w-16 h-16 bg-gradient-to-r from-purple-500 to-blue-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
  157. <i class="fas fa-graduation-cap text-white text-2xl"></i>
  158. </div>
  159. <h3 class="text-xl font-bold mb-4 text-white group-hover:text-purple-300 transition-colors">Seminar Teknologi</h3>
  160. <p class="text-gray-300 leading-relaxed">
  161. Menghadirkan para ahli untuk berbagi pengetahuan tentang perkembangan
  162. terkini dalam dunia teknologi informasi.
  163. </p>
  164. </div>
  165.  
  166. <!-- Program 6 -->
  167. <div class="group bg-white/5 backdrop-blur-sm rounded-3xl p-8 border border-white/10 hover:bg-white/10 transition-all duration-500 transform hover:-translate-y-2 hover:shadow-2xl">
  168. <div class="w-16 h-16 bg-gradient-to-r from-pink-500 to-rose-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
  169. <i class="fas fa-handshake text-white text-2xl"></i>
  170. </div>
  171. <h3 class="text-xl font-bold mb-4 text-white group-hover:text-pink-300 transition-colors">Networking Event</h3>
  172. <p class="text-gray-300 leading-relaxed">
  173. Membangun jaringan profesional dengan alumni dan praktisi industri
  174. untuk membuka peluang karir di masa depan.
  175. </p>
  176. </div>
  177. </div>
  178. </div>
  179. </section>
  180.  
  181. <!-- Artikel -->
  182. <section id="artikel" class="py-20 bg-black/20">
  183. <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  184. <div class="text-center mb-16">
  185. <h2 class="text-4xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
  186. Artikel Terbaru
  187. </h2>
  188. <p class="text-xl text-gray-300 max-w-3xl mx-auto">
  189. Baca artikel menarik seputar teknologi, tips karir, dan pengalaman mahasiswa
  190. </p>
  191. </div>
  192.  
  193. <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
  194. <!-- Artikel 1 -->
  195. <article class="group bg-white/5 backdrop-blur-sm rounded-3xl overflow-hidden border border-white/10 hover:bg-white/10 transition-all duration-500 transform hover:-translate-y-2">
  196. <div class="h-48 bg-gradient-to-r from-purple-600 to-pink-600 relative overflow-hidden">
  197. <div class="absolute inset-0 bg-black/20 group-hover:bg-black/10 transition-all duration-300"></div>
  198. <div class="absolute bottom-4 left-4">
  199. <span class="bg-white/20 backdrop-blur-sm px-3 py-1 rounded-full text-xs text-white">Teknologi</span>
  200. </div>
  201. </div>
  202. <div class="p-6">
  203. <h3 class="text-xl font-bold mb-3 text-white group-hover:text-purple-300 transition-colors">
  204. Tren AI dan Machine Learning di 2024
  205. </h3>
  206. <p class="text-gray-300 mb-4 leading-relaxed">
  207. Eksplorasi mendalam tentang perkembangan artificial intelligence
  208. dan dampaknya terhadap industri teknologi...
  209. </p>
  210. <div class="flex items-center justify-between">
  211. <div class="flex items-center space-x-2 text-sm text-gray-400">
  212. <i class="fas fa-calendar"></i>
  213. <span>15 Januari 2024</span>
  214. </div>
  215. <a href="#" class="text-purple-400 hover:text-purple-300 text-sm font-medium transition-colors">
  216. Baca Selengkapnya →
  217. </a>
  218. </div>
  219. </div>
  220. </article>
  221.  
  222. <!-- Artikel 2 -->
  223. <article class="group bg-white/5 backdrop-blur-sm rounded-3xl overflow-hidden border border-white/10 hover:bg-white/10 transition-all duration-500 transform hover:-translate-y-2">
  224. <div class="h-48 bg-gradient-to-r from-blue-600 to-indigo-600 relative overflow-hidden">
  225. <div class="absolute inset-0 bg-black/20 group-hover:bg-black/10 transition-all duration-300"></div>
  226. <div class="absolute bottom-4 left-4">
  227. <span class="bg-white/20 backdrop-blur-sm px-3 py-1 rounded-full text-xs text-white">Karir</span>
  228. </div>
  229. </div>
  230. <div class="p-6">
  231. <h3 class="text-xl font-bold mb-3 text-white group-hover:text-blue-300 transition-colors">
  232. Tips Membangun Portfolio Developer
  233. </h3>
  234. <p class="text-gray-300 mb-4 leading-relaxed">
  235. Panduan lengkap untuk membuat portfolio yang menarik bagi
  236. recruiter dan meningkatkan peluang karir...
  237. </p>
  238. <div class="flex items-center justify-between">
  239. <div class="flex items-center space-x-2 text-sm text-gray-400">
  240. <i class="fas fa-calendar"></i>
  241. <span>12 Januari 2024</span>
  242. </div>
  243. <a href="#" class="text-blue-400 hover:text-blue-300 text-sm font-medium transition-colors">
  244. Baca Selengkapnya →
  245. </a>
  246. </div>
  247. </div>
  248. </article>
  249.  
  250. <!-- Artikel 3 -->
  251. <article class="group bg-white/5 backdrop-blur-sm rounded-3xl overflow-hidden border border-white/10 hover:bg-white/10 transition-all duration-500 transform hover:-translate-y-2">
  252. <div class="h-48 bg-gradient-to-r from-green-600 to-teal-600 relative overflow-hidden">
  253. <div class="absolute inset-0 bg-black/20 group-hover:bg-black/10 transition-all duration-300"></div>
  254. <div class="absolute bottom-4 left-4">
  255. <span class="bg-white/20 backdrop-blur-sm px-3 py-1 rounded-full text-xs text-white">Pengalaman</span>
  256. </div>
  257. </div>
  258. <div class="p-6">
  259. <h3 class="text-xl font-bold mb-3 text-white group-hover:text-green-300 transition-colors">
  260. Journey Magang di Startup Teknologi
  261. </h3>
  262. <p class="text-gray-300 mb-4 leading-relaxed">
  263. Cerita inspiratif dari mahasiswa yang berhasil mendapatkan
  264. pengalaman berharga di startup teknologi terkemuka...
  265. </p>
  266. <div class="flex items-center justify-between">
  267. <div class="flex items-center space-x-2 text-sm text-gray-400">
  268. <i class="fas fa-calendar"></i>
  269. <span>10 Januari 2024</span>
  270. </div>
  271. <a href="#" class="text-green-400 hover:text-green-300 text-sm font-medium transition-colors">
  272. Baca Selengkapnya →
  273. </a>
  274. </div>
  275. </div>
  276. </article>
  277. </div>
  278.  
  279. <div class="text-center mt-12">
  280. <a href="#" class="inline-flex items-center bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 px-8 py-4 rounded-full text-white font-semibold transition-all duration-300 transform hover:scale-105">
  281. <i class="fas fa-newspaper mr-2"></i>
  282. Lihat Semua Artikel
  283. </a>
  284. </div>
  285. </div>
  286. </section>
  287.  
  288. <!-- Footer -->
  289. <footer id="kontak" class="bg-black/40 border-t border-white/10 py-16">
  290. <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  291. <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
  292. <!-- Logo & Deskripsi -->
  293. <div class="lg:col-span-2">
  294. <div class="flex items-center space-x-2 mb-6">
  295. <div class="w-12 h-12 bg-gradient-to-r from-purple-400 to-pink-400 rounded-lg flex items-center justify-center">
  296. <i class="fas fa-graduation-cap text-white text-xl"></i>
  297. </div>
  298. <span class="text-2xl font-bold bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">HIMASI</span>
  299. </div>
  300. <p class="text-gray-300 leading-relaxed max-w-md mb-6">
  301. Himpunan Mahasiswa Sistem Informasi yang berkomitmen mengembangkan
  302. potensi mahasiswa melalui berbagai program inovatif dan berkelanjutan.
  303. </p>
  304. <div class="flex space-x-4">
  305. <a href="#" class="w-10 h-10 bg-white/10 hover:bg-purple-500 rounded-full flex items-center justify-center transition-all duration-300 hover:scale-110">
  306. <i class="fab fa-instagram text-white"></i>
  307. </a>
  308. <a href="#" class="w-10 h-10 bg-white/10 hover:bg-blue-500 rounded-full flex items-center justify-center transition-all duration-300 hover:scale-110">
  309. <i class="fab fa-twitter text-white"></i>
  310. </a>
  311. <a href="#" class="w-10 h-10 bg-white/10 hover:bg-blue-600 rounded-full flex items-center justify-center transition-all duration-300 hover:scale-110">
  312. <i class="fab fa-linkedin text-white"></i>
  313. </a>
  314. <a href="#" class="w-10 h-10 bg-white/10 hover:bg-green-500 rounded-full flex items-center justify-center transition-all duration-300 hover:scale-110">
  315. <i class="fab fa-whatsapp text-white"></i>
  316. </a>
  317. </div>
  318. </div>
  319.  
  320. <!-- Quick Links -->
  321. <div>
  322. <h4 class="text-lg font-semibold mb-6 text-white">Quick Links</h4>
  323. <ul class="space-y-3">
  324. <li><a href="#beranda" class="text-gray-300 hover:text-purple-400 transition-colors">Beranda</a></li>
  325. <li><a href="#program" class="text-gray-300 hover:text-purple-400 transition-colors">Program Kerja</a></li>
  326. <li><a href="#artikel" class="text-gray-300 hover:text-purple-400 transition-colors">Artikel</a></li>
  327. <li><a href="#" class="text-gray-300 hover:text-purple-400 transition-colors">Tentang Kami</a></li>
  328. </ul>
  329. </div>
  330.  
  331. <!-- Kontak -->
  332. <div>
  333. <h4 class="text-lg font-semibold mb-6 text-white">Kontak</h4>
  334. <ul class="space-y-3">
  335. <li class="flex items-start space-x-3">
  336. <i class="fas fa-map-marker-alt text-purple-400 mt-1"></i>
  337. <span class="text-gray-300">
  338. Gedung Informatika Lt.3<br>
  339. Universitas Teknologi Digital Indonesia
  340. </span>
  341. </li>
  342. <li class="flex items-center space-x-3">
  343. <i class="fas fa-envelope text-purple-400"></i>
  344. <span class="text-gray-300">[email protected]</span>
  345. </li>
  346. <li class="flex items-center space-x-3">
  347. <i class="fas fa-phone text-purple-400"></i>
  348. <span class="text-gray-300">+62 812-3456-7890</span>
  349. </li>
  350. </ul>
  351. </div>
  352. </div>
  353.  
  354. <!-- Copyright -->
  355. <div class="border-t border-white/10 pt-8">
  356. <div class="text-center text-gray-400">
  357. <p>&copy; 2024 HIMASI - Himpunan Mahasiswa Sistem Informasi. All rights reserved.</p>
  358. </div>
  359. </div>
  360. </div>
  361. </footer>
  362. </body>
  363. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!