Success Story Wirausaha<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n :root {\n --primary: #2c3e50;\n --secondary: #e74c3c;\n --accent: #f39c12;\n --light: #ecf0f1;\n --dark: #2c3e50;\n --success: #27ae60;\n }\n \n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n }\n \n body {\n background-color: #f8f9fa;\n color: #333;\n line-height: 1.6;\n }\n \n .container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 20px;\n }\n \n \/* Header Styles *\/\n header {\n background: linear-gradient(135deg, var(--primary) 0%, var(--dark) 100%);\n color: white;\n padding: 20px 0;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n }\n \n .logo-container {\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n \n .logo {\n display: flex;\n align-items: center;\n }\n \n .logo i {\n font-size: 2rem;\n margin-right: 10px;\n color: var(--accent);\n }\n \n .logo h1 {\n font-size: 1.8rem;\n font-weight: 700;\n }\n \n \/* Hero Section *\/\n .hero {\n background: linear-gradient(rgba(44, 62, 80, 0.8), rgba(44, 62, 80, 0.8)), url('https:\/\/images.unsplash.com\/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80');\n background-size: cover;\n background-position: center;\n color: white;\n padding: 80px 0;\n text-align: center;\n }\n \n .hero h2 {\n font-size: 2.5rem;\n margin-bottom: 20px;\n text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);\n }\n \n .hero p {\n font-size: 1.2rem;\n max-width: 800px;\n margin: 0 auto 30px;\n }\n \n .btn {\n display: inline-block;\n background-color: var(--accent);\n color: white;\n padding: 12px 30px;\n border-radius: 30px;\n text-decoration: none;\n font-weight: 600;\n transition: all 0.3s ease;\n border: none;\n cursor: pointer;\n }\n \n .btn:hover {\n background-color: var(--secondary);\n transform: translateY(-3px);\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);\n }\n \n \/* Navigation *\/\n .nav-tabs {\n display: flex;\n justify-content: center;\n background-color: white;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n margin-bottom: 30px;\n }\n \n .nav-tab {\n padding: 15px 30px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s ease;\n border-bottom: 3px solid transparent;\n }\n \n .nav-tab.active {\n color: var(--secondary);\n border-bottom: 3px solid var(--secondary);\n }\n \n .nav-tab:hover {\n color: var(--secondary);\n }\n \n \/* Content Sections *\/\n .content-section {\n display: none;\n padding: 40px 0;\n }\n \n .content-section.active {\n display: block;\n }\n \n .section-title {\n text-align: center;\n margin-bottom: 40px;\n color: var(--primary);\n position: relative;\n }\n \n .section-title:after {\n content: '';\n display: block;\n width: 80px;\n height: 4px;\n background: var(--accent);\n margin: 15px auto;\n border-radius: 2px;\n }\n \n \/* Materi Section *\/\n .story-card {\n background: white;\n border-radius: 10px;\n overflow: hidden;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\n margin-bottom: 30px;\n transition: transform 0.3s ease;\n }\n \n .story-card:hover {\n transform: translateY(-5px);\n }\n \n .story-img {\n height: 200px;\n overflow: hidden;\n }\n \n .story-img img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.5s ease;\n }\n \n .story-card:hover .story-img img {\n transform: scale(1.05);\n }\n \n .story-content {\n padding: 20px;\n }\n \n .story-content h3 {\n color: var(--primary);\n margin-bottom: 10px;\n }\n \n .story-meta {\n display: flex;\n margin-bottom: 15px;\n font-size: 0.9rem;\n color: #777;\n }\n \n .story-meta span {\n margin-right: 15px;\n }\n \n .story-meta i {\n margin-right: 5px;\n color: var(--accent);\n }\n \n \/* Quiz Section *\/\n .quiz-container {\n background: white;\n border-radius: 10px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\n padding: 30px;\n margin-bottom: 30px;\n }\n \n .quiz-progress {\n height: 10px;\n background: #eee;\n border-radius: 5px;\n margin-bottom: 20px;\n }\n \n .progress-bar {\n height: 100%;\n background: var(--success);\n border-radius: 5px;\n width: 0%;\n transition: width 0.3s ease;\n }\n \n .quiz-question {\n font-size: 1.2rem;\n margin-bottom: 20px;\n font-weight: 600;\n color: var(--primary);\n }\n \n .quiz-options {\n list-style: none;\n margin-bottom: 30px;\n }\n \n .quiz-option {\n padding: 15px;\n background: #f8f9fa;\n border: 1px solid #eee;\n border-radius: 5px;\n margin-bottom: 10px;\n cursor: pointer;\n transition: all 0.3s ease;\n }\n \n .quiz-option:hover {\n background: #e9ecef;\n }\n \n .quiz-option.selected {\n background: #d4edda;\n border-color: #c3e6cb;\n }\n \n .quiz-navigation {\n display: flex;\n justify-content: space-between;\n }\n \n \/* External Links Section *\/\n .external-links {\n background: white;\n border-radius: 10px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\n padding: 30px;\n margin-bottom: 30px;\n }\n \n .link-card {\n display: flex;\n align-items: center;\n padding: 20px;\n border: 1px solid #eee;\n border-radius: 8px;\n margin-bottom: 15px;\n transition: all 0.3s ease;\n }\n \n .link-card:hover {\n border-color: var(--accent);\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\n }\n \n .link-icon {\n font-size: 2rem;\n margin-right: 20px;\n color: var(--accent);\n }\n \n .link-content {\n flex: 1;\n }\n \n .link-content h3 {\n margin-bottom: 5px;\n color: var(--primary);\n }\n \n .link-content p {\n color: #777;\n margin-bottom: 10px;\n }\n \n .link-btn {\n background: var(--primary);\n color: white;\n padding: 8px 20px;\n border-radius: 20px;\n text-decoration: none;\n font-size: 0.9rem;\n transition: all 0.3s ease;\n }\n \n .link-btn:hover {\n background: var(--accent);\n }\n \n \/* Footer *\/\n footer {\n background: var(--dark);\n color: white;\n padding: 40px 0;\n text-align: center;\n }\n \n .footer-content {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-around;\n }\n \n .footer-section {\n flex: 1;\n min-width: 300px;\n margin-bottom: 20px;\n }\n \n .footer-section h3 {\n margin-bottom: 20px;\n position: relative;\n padding-bottom: 10px;\n }\n \n .footer-section h3:after {\n content: '';\n display: block;\n width: 50px;\n height: 2px;\n background: var(--accent);\n position: absolute;\n bottom: 0;\n left: 0;\n }\n \n .footer-section.center h3:after {\n left: 50%;\n transform: translateX(-50%);\n }\n \n .social-icons a {\n display: inline-block;\n width: 40px;\n height: 40px;\n background: var(--primary);\n border-radius: 50%;\n line-height: 40px;\n text-align: center;\n color: white;\n margin-right: 10px;\n transition: all 0.3s ease;\n }\n \n .social-icons a:hover {\n background: var(--accent);\n transform: translateY(-3px);\n }\n \n .footer-bottom {\n padding-top: 20px;\n text-align: center;\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n margin-top: 20px;\n }\n \n \/* Responsive Design *\/\n @media (max-width: 768px) {\n .nav-tabs {\n flex-direction: column;\n }\n \n .hero h2 {\n font-size: 2rem;\n }\n \n .hero p {\n font-size: 1rem;\n }\n \n .footer-section {\n flex: 100%;\n }\n \n .link-card {\n flex-direction: column;\n text-align: center;\n }\n \n .link-icon {\n margin-right: 0;\n margin-bottom: 15px;\n }\n }\n <\/style>\n<\/head>\n<body>\n \n <header>\n <div class=\"container\">\n <div class=\"logo-container\">\n <div class=\"logo\">\n <i class=\"fas fa-rocket\"><\/i>\n <h1>Wirausaha Pemuda<\/h1>\n <\/div>\n <\/div>\n <\/div>\n <\/header>\n\n \n <section class=\"hero\">\n <div class=\"container\">\n <h2>Success Story Wirausaha<\/h2>\n <p>Pelajari kisah inspiratif para pengusaha yang berhasil membangun bisnis dari nol dan kuasai kunci kesuksesan mereka melalui pelatihan interaktif ini.<\/p>\n \n <\/div>\n <\/section>\n\n \n <div class=\"nav-tabs\">\n <div class=\"container\">\n <div class=\"nav-tab active\" data-target=\"materi\">Materi Success Story<\/div>\n <div class=\"nav-tab\" data-target=\"quiz\">Quiz & Evaluasi<\/div>\n <div class=\"nav-tab\" data-target=\"links\">Link Eksternal<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"container\">\n \n <section id=\"materi\" class=\"content-section active\">\n <h2 class=\"section-title\">Kisah Sukses Wirausaha<\/h2>\n \n \n \n <div class=\"story-card\">\n <div class=\"story-img\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1568992687947-868a62a9f521?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80\" alt=\"Startup Founder\">\n <\/div>\n <div class=\"story-content\">\n <h3>Berkat Kopi: Dari Hobi ke Bisnis dengan Omset Miliaran<\/h3>\n <div class=\"story-meta\">\n <span><i class=\"fas fa-user\"><\/i> Ahmad Rizki<\/span>\n <span><i class=\"fas fa-building\"><\/i> Berkat Kopi<\/span>\n <span><i class=\"fas fa-calendar\"><\/i> 5 Tahun Berkembang<\/span>\n <\/div>\n <p>Ahmad memulai bisnis kopinya dengan modal terbatas dari garasi rumahnya. Kini, Berkat Kopi telah memiliki 15 outlet di berbagai kota dengan omset mencapai 2 Miliar per bulan.<\/p>\n \n <a href=\"https:\/\/link-anda-di-sini.com\/materi-1\" class=\"btn\" style=\"margin-top: 15px;\">Baca Selengkapnya<\/a>\n <\/div>\n <\/div>\n \n <div class=\"story-card\">\n <div class=\"story-img\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1573164713714-d95e436ab8d6?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80\" alt=\"Tech Entrepreneur\">\n <\/div>\n <div class=\"story-content\">\n <h3>EduTech: Platform Pendidikan yang Memberdayakan Generasi Muda<\/h3>\n <div class=\"story-meta\">\n <span><i class=\"fas fa-user\"><\/i> Siti Nurhaliza<\/span>\n <span><i class=\"fas fa-building\"><\/i> EduTech Indonesia<\/span>\n <span><i class=\"fas fa-calendar\"><\/i> 3 Tahun Berkembang<\/span>\n <\/div>\n <p>Siti mengembangkan platform pembelajaran online yang menyediakan akses pendidikan berkualitas bagi anak-anak di daerah terpencil. Startupnya telah mendapatkan pendanaan seri A senilai 5 juta dolar.<\/p>\n \n <a href=\"https:\/\/link-anda-di-sini.com\/materi-2\" class=\"btn\" style=\"margin-top: 15px;\">Baca Selengkapnya<\/a>\n <\/div>\n <\/div>\n \n <div class=\"story-card\">\n <div class=\"story-img\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80\" alt=\"Social Entrepreneur\">\n <\/div>\n <div class=\"story-content\">\n <h3>EcoWaste: Mengubah Sampah menjadi Berkah dengan Kreativitas<\/h3>\n <div class=\"story-meta\">\n <span><i class=\"fas fa-user\"><\/i> Budi Santoso<\/span>\n <span><i class=\"fas fa-building\"><\/i> EcoWaste Solution<\/span>\n <span><i class=\"fas fa-calendar\"><\/i> 4 Tahun Berkembang<\/span>\n <\/div>\n <p>Budi memelopori bisnis daur ulang sampah menjadi produk fashion yang stylish. Perusahaannya tidak hanya menghasilkan profit tetapi juga memberikan dampak sosial dan lingkungan yang positif.<\/p>\n \n <a href=\"https:\/\/link-anda-di-sini.com\/materi-3\" class=\"btn\" style=\"margin-top: 15px;\">Baca Selengkapnya<\/a>\n <\/div>\n <\/div>\n <\/section>\n \n \n <section id=\"quiz\" class=\"content-section\">\n <h2 class=\"section-title\">Quiz Kewirausahaan<\/h2>\n \n \n \n <div class=\"quiz-container\">\n <div class=\"quiz-progress\">\n <div class=\"progress-bar\" style=\"width: 20%\"><\/div>\n <\/div>\n \n <div class=\"quiz-question\">\n Menurut kisah success story Ahmad Rizki (Berkat Kopi), apa kunci utama kesuksesan bisnisnya?\n <\/div>\n \n <ul class=\"quiz-options\">\n <li class=\"quiz-option\">A. Modal yang besar sejak awal<\/li>\n <li class=\"quiz-option\">B. Konsistensi dalam menjaga kualitas produk<\/li>\n <li class=\"quiz-option\">C. Lokasi strategis di pusat perbelanjaan<\/li>\n <li class=\"quiz-option\">D. Iklan yang masif di televisi<\/li>\n <\/ul>\n \n <div class=\"quiz-navigation\">\n <button class=\"btn\" style=\"background-color: #95a5a6;\">Sebelumnya<\/button>\n \n <a href=\"https:\/\/link-anda-di-sini.com\/quiz-1\" class=\"btn\">Selanjutnya<\/a>\n <\/div>\n <\/div>\n \n <div class=\"quiz-container\">\n <div class=\"quiz-progress\">\n <div class=\"progress-bar\" style=\"width: 40%\"><\/div>\n <\/div>\n \n <div class=\"quiz-question\">\n Dari kisah Siti Nurhaliza (EduTech Indonesia), nilai kewirausahaan apa yang paling menonjol?\n <\/div>\n \n <ul class=\"quiz-options\">\n <li class=\"quiz-option\">A. Keinginan untuk mencari keuntungan semata<\/li>\n <li class=\"quiz-option\">B. Kepedulian terhadap masalah sosial dan pendidikan<\/li>\n <li class=\"quiz-option\">C. Keinginan untuk cepat terkenal<\/li>\n <li class=\"quiz-option\">D. Mengikuti tren bisnis terkini<\/li>\n <\/ul>\n \n <div class=\"quiz-navigation\">\n <button class=\"btn\" style=\"background-color: #95a5a6;\">Sebelumnya<\/button>\n \n <a href=\"https:\/\/link-anda-di-sini.com\/quiz-2\" class=\"btn\">Selanjutnya<\/a>\n <\/div>\n <\/div>\n <\/section>\n \n \n <section id=\"links\" class=\"content-section\">\n <h2 class=\"section-title\">Link Materi dan Quiz Eksternal<\/h2>\n \n <div class=\"external-links\">\n \n \n <div class=\"link-card\">\n <div class=\"link-icon\">\n <i class=\"fas fa-book\"><\/i>\n <\/div>\n <div class=\"link-content\">\n <h3>Materi Success Story Lengkap<\/h3>\n <p>Akses seluruh materi success story wirausaha pemuda dalam format PDF<\/p>\n \n <a href=\"https:\/\/link-anda-di-sini.com\/materi-lengkap\" class=\"link-btn\">Akses Materi<\/a>\n <\/div>\n <\/div>\n \n <div class=\"link-card\">\n <div class=\"link-icon\">\n <i class=\"fas fa-video\"><\/i>\n <\/div>\n <div class=\"link-content\">\n <h3>Video Inspirasi Wirausaha<\/h3>\n <p>Tonton video inspiratif dari para wirausaha muda yang telah sukses<\/p>\n \n <a href=\"https:\/\/link-anda-di-sini.com\/video-inspirasi\" class=\"link-btn\">Tonton Video<\/a>\n <\/div>\n <\/div>\n \n <div class=\"link-card\">\n <div class=\"link-icon\">\n <i class=\"fas fa-tasks\"><\/i>\n <\/div>\n <div class=\"link-content\">\n <h3>Quiz Interaktif<\/h3>\n <p>Uji pemahaman Anda dengan quiz interaktif tentang kewirausahaan<\/p>\n \n <a href=\"https:\/\/link-anda-di-sini.com\/quiz-interaktif\" class=\"link-btn\">Mulai Quiz<\/a>\n <\/div>\n <\/div>\n \n <div class=\"link-card\">\n <div class=\"link-icon\">\n <i class=\"fas fa-file-download\"><\/i>\n <\/div>\n <div class=\"link-content\">\n <h3>Download Materi<\/h3>\n <p>Download seluruh materi pelatihan dalam format ZIP<\/p>\n \n <a href=\"https:\/\/link-anda-di-sini.com\/download-materi\" class=\"link-btn\">Download<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <\/div>\n \n \n <footer>\n <div class=\"container\">\n <div class=\"footer-content\">\n <div class=\"footer-section\">\n \n <div class=\"footer-section center\">\n <h3>Kontak Kami<\/h3>\n <p><i class=\"fas fa-map-marker-alt\"><\/i> Jl. Diponegoro No. 33, Magelang<\/p>\n <p><i class=\"fas fa-phone\"><\/i> +6281998399848<\/p>\n <p><i class=\"fas fa-envelope\"><\/i> pemudakotamagelang@gmail.com<\/p>\n <\/div>\n \n <div class=\"footer-section\">\n <h3>Ikuti Kami<\/h3>\n <div class=\"social-icons\">\n <a href=\"#\"><i class=\"fab fa-facebook-f\"><\/i><\/a>\n <a href=\"#\"><i class=\"fab fa-instagram\"><\/i><\/a>\n <a href=\"#\"><i class=\"fab fa-twitter\"><\/i><\/a>\n <a href=\"#\"><i class=\"fab fa-youtube\"><\/i><\/a>\n <a href=\"#\"><i class=\"fab fa-linkedin-in\"><\/i><\/a>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"footer-bottom\">\n <p>© 2025 Disporapar Kota Magelang. All Rights Reserved.<\/p>\n <\/div>\n <\/div>\n <\/footer>\n\n <script>\n \/\/ Tab Navigation\n document.querySelectorAll('.nav-tab').forEach(tab => {\n tab.addEventListener('click', () => {\n \/\/ Remove active class from all tabs\n document.querySelectorAll('.nav-tab').forEach(t => {\n t.classList.remove('active');\n });\n \n \/\/ Add active class to clicked tab\n tab.classList.add('active');\n \n \/\/ Hide all content sections\n document.querySelectorAll('.content-section').forEach(section => {\n section.classList.remove('active');\n });\n \n \/\/ Show the targeted content section\n const target = tab.getAttribute('data-target');\n document.getElementById(target).classList.add('active');\n });\n });\n \n \/\/ Quiz Option Selection\n document.querySelectorAll('.quiz-option').forEach(option => {\n option.addEventListener('click', () => {\n \/\/ Remove selected class from all options in the same question\n option.parentElement.querySelectorAll('.quiz-option').forEach(opt => {\n opt.classList.remove('selected');\n });\n \n \/\/ Add selected class to clicked option\n option.classList.add('selected');\n });\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Success Story Wirausaha Wirausaha Pemuda Success Story Wirausaha Pelajari kisah inspiratif para pengusaha yang berhasil membangun bisnis dari nol dan kuasai kunci kesuksesan mereka melalui pelatihan interaktif ini. Materi Success Story Quiz & Evaluasi Link Eksternal Kisah Sukses Wirausaha Berkat Kopi: Dari Hobi ke Bisnis dengan Omset Miliaran Ahmad Rizki Berkat Kopi 5 Tahun Berkembang […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wirausahapemuda.magelangkota.go.id\/forum\/index.php?rest_route=\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wirausahapemuda.magelangkota.go.id\/forum\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wirausahapemuda.magelangkota.go.id\/forum\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wirausahapemuda.magelangkota.go.id\/forum\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wirausahapemuda.magelangkota.go.id\/forum\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2"}],"version-history":[{"count":4,"href":"https:\/\/wirausahapemuda.magelangkota.go.id\/forum\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":24,"href":"https:\/\/wirausahapemuda.magelangkota.go.id\/forum\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions\/24"}],"wp:attachment":[{"href":"https:\/\/wirausahapemuda.magelangkota.go.id\/forum\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":2,"date":"2025-08-26T09:00:49","date_gmt":"2025-08-26T09:00:49","guid":{"rendered":"https:\/\/wirausahapemuda.magelangkota.go.id\/forum\/?page_id=2"},"modified":"2025-09-08T02:26:02","modified_gmt":"2025-09-08T02:26:02","slug":"laman-contoh","status":"publish","type":"page","link":"https:\/\/wirausahapemuda.magelangkota.go.id\/forum\/?page_id=2","title":{"rendered":"Success Story"},"content":{"rendered":"\n\n\n\n \n \n Success Story Wirausaha<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n :root {\n --primary: #2c3e50;\n --secondary: #e74c3c;\n --accent: #f39c12;\n --light: #ecf0f1;\n --dark: #2c3e50;\n --success: #27ae60;\n }\n \n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n }\n \n body {\n background-color: #f8f9fa;\n color: #333;\n line-height: 1.6;\n }\n \n .container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 20px;\n }\n \n \/* Header Styles *\/\n header {\n background: linear-gradient(135deg, var(--primary) 0%, var(--dark) 100%);\n color: white;\n padding: 20px 0;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n }\n \n .logo-container {\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n \n .logo {\n display: flex;\n align-items: center;\n }\n \n .logo i {\n font-size: 2rem;\n margin-right: 10px;\n color: var(--accent);\n }\n \n .logo h1 {\n font-size: 1.8rem;\n font-weight: 700;\n }\n \n \/* Hero Section *\/\n .hero {\n background: linear-gradient(rgba(44, 62, 80, 0.8), rgba(44, 62, 80, 0.8)), url('https:\/\/images.unsplash.com\/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80');\n background-size: cover;\n background-position: center;\n color: white;\n padding: 80px 0;\n text-align: center;\n }\n \n .hero h2 {\n font-size: 2.5rem;\n margin-bottom: 20px;\n text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);\n }\n \n .hero p {\n font-size: 1.2rem;\n max-width: 800px;\n margin: 0 auto 30px;\n }\n \n .btn {\n display: inline-block;\n background-color: var(--accent);\n color: white;\n padding: 12px 30px;\n border-radius: 30px;\n text-decoration: none;\n font-weight: 600;\n transition: all 0.3s ease;\n border: none;\n cursor: pointer;\n }\n \n .btn:hover {\n background-color: var(--secondary);\n transform: translateY(-3px);\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);\n }\n \n \/* Navigation *\/\n .nav-tabs {\n display: flex;\n justify-content: center;\n background-color: white;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n margin-bottom: 30px;\n }\n \n .nav-tab {\n padding: 15px 30px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s ease;\n border-bottom: 3px solid transparent;\n }\n \n .nav-tab.active {\n color: var(--secondary);\n border-bottom: 3px solid var(--secondary);\n }\n \n .nav-tab:hover {\n color: var(--secondary);\n }\n \n \/* Content Sections *\/\n .content-section {\n display: none;\n padding: 40px 0;\n }\n \n .content-section.active {\n display: block;\n }\n \n .section-title {\n text-align: center;\n margin-bottom: 40px;\n color: var(--primary);\n position: relative;\n }\n \n .section-title:after {\n content: '';\n display: block;\n width: 80px;\n height: 4px;\n background: var(--accent);\n margin: 15px auto;\n border-radius: 2px;\n }\n \n \/* Materi Section *\/\n .story-card {\n background: white;\n border-radius: 10px;\n overflow: hidden;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\n margin-bottom: 30px;\n transition: transform 0.3s ease;\n }\n \n .story-card:hover {\n transform: translateY(-5px);\n }\n \n .story-img {\n height: 200px;\n overflow: hidden;\n }\n \n .story-img img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.5s ease;\n }\n \n .story-card:hover .story-img img {\n transform: scale(1.05);\n }\n \n .story-content {\n padding: 20px;\n }\n \n .story-content h3 {\n color: var(--primary);\n margin-bottom: 10px;\n }\n \n .story-meta {\n display: flex;\n margin-bottom: 15px;\n font-size: 0.9rem;\n color: #777;\n }\n \n .story-meta span {\n margin-right: 15px;\n }\n \n .story-meta i {\n margin-right: 5px;\n color: var(--accent);\n }\n \n \/* Quiz Section *\/\n .quiz-container {\n background: white;\n border-radius: 10px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\n padding: 30px;\n margin-bottom: 30px;\n }\n \n .quiz-progress {\n height: 10px;\n background: #eee;\n border-radius: 5px;\n margin-bottom: 20px;\n }\n \n .progress-bar {\n height: 100%;\n background: var(--success);\n border-radius: 5px;\n width: 0%;\n transition: width 0.3s ease;\n }\n \n .quiz-question {\n font-size: 1.2rem;\n margin-bottom: 20px;\n font-weight: 600;\n color: var(--primary);\n }\n \n .quiz-options {\n list-style: none;\n margin-bottom: 30px;\n }\n \n .quiz-option {\n padding: 15px;\n background: #f8f9fa;\n border: 1px solid #eee;\n border-radius: 5px;\n margin-bottom: 10px;\n cursor: pointer;\n transition: all 0.3s ease;\n }\n \n .quiz-option:hover {\n background: #e9ecef;\n }\n \n .quiz-option.selected {\n background: #d4edda;\n border-color: #c3e6cb;\n }\n \n .quiz-navigation {\n display: flex;\n justify-content: space-between;\n }\n \n \/* External Links Section *\/\n .external-links {\n background: white;\n border-radius: 10px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\n padding: 30px;\n margin-bottom: 30px;\n }\n \n .link-card {\n display: flex;\n align-items: center;\n padding: 20px;\n border: 1px solid #eee;\n border-radius: 8px;\n margin-bottom: 15px;\n transition: all 0.3s ease;\n }\n \n .link-card:hover {\n border-color: var(--accent);\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\n }\n \n .link-icon {\n font-size: 2rem;\n margin-right: 20px;\n color: var(--accent);\n }\n \n .link-content {\n flex: 1;\n }\n \n .link-content h3 {\n margin-bottom: 5px;\n color: var(--primary);\n }\n \n .link-content p {\n color: #777;\n margin-bottom: 10px;\n }\n \n .link-btn {\n background: var(--primary);\n color: white;\n padding: 8px 20px;\n border-radius: 20px;\n text-decoration: none;\n font-size: 0.9rem;\n transition: all 0.3s ease;\n }\n \n .link-btn:hover {\n background: var(--accent);\n }\n \n \/* Footer *\/\n footer {\n background: var(--dark);\n color: white;\n padding: 40px 0;\n text-align: center;\n }\n \n .footer-content {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-around;\n }\n \n .footer-section {\n flex: 1;\n min-width: 300px;\n margin-bottom: 20px;\n }\n \n .footer-section h3 {\n margin-bottom: 20px;\n position: relative;\n padding-bottom: 10px;\n }\n \n .footer-section h3:after {\n content: '';\n display: block;\n width: 50px;\n height: 2px;\n background: var(--accent);\n position: absolute;\n bottom: 0;\n left: 0;\n }\n \n .footer-section.center h3:after {\n left: 50%;\n transform: translateX(-50%);\n }\n \n .social-icons a {\n display: inline-block;\n width: 40px;\n height: 40px;\n background: var(--primary);\n border-radius: 50%;\n line-height: 40px;\n text-align: center;\n color: white;\n margin-right: 10px;\n transition: all 0.3s ease;\n }\n \n .social-icons a:hover {\n background: var(--accent);\n transform: translateY(-3px);\n }\n \n .footer-bottom {\n padding-top: 20px;\n text-align: center;\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n margin-top: 20px;\n }\n \n \/* Responsive Design *\/\n @media (max-width: 768px) {\n .nav-tabs {\n flex-direction: column;\n }\n \n .hero h2 {\n font-size: 2rem;\n }\n \n .hero p {\n font-size: 1rem;\n }\n \n .footer-section {\n flex: 100%;\n }\n \n .link-card {\n flex-direction: column;\n text-align: center;\n }\n \n .link-icon {\n margin-right: 0;\n margin-bottom: 15px;\n }\n }\n <\/style>\n<\/head>\n<body>\n \n <header>\n <div class=\"container\">\n <div class=\"logo-container\">\n <div class=\"logo\">\n <i class=\"fas fa-rocket\"><\/i>\n <h1>Wirausaha Pemuda<\/h1>\n <\/div>\n <\/div>\n <\/div>\n <\/header>\n\n \n <section class=\"hero\">\n <div class=\"container\">\n <h2>Success Story Wirausaha<\/h2>\n <p>Pelajari kisah inspiratif para pengusaha yang berhasil membangun bisnis dari nol dan kuasai kunci kesuksesan mereka melalui pelatihan interaktif ini.<\/p>\n \n <\/div>\n <\/section>\n\n \n <div class=\"nav-tabs\">\n <div class=\"container\">\n <div class=\"nav-tab active\" data-target=\"materi\">Materi Success Story<\/div>\n <div class=\"nav-tab\" data-target=\"quiz\">Quiz & Evaluasi<\/div>\n <div class=\"nav-tab\" data-target=\"links\">Link Eksternal<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"container\">\n \n <section id=\"materi\" class=\"content-section active\">\n <h2 class=\"section-title\">Kisah Sukses Wirausaha<\/h2>\n \n \n \n <div class=\"story-card\">\n <div class=\"story-img\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1568992687947-868a62a9f521?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80\" alt=\"Startup Founder\">\n <\/div>\n <div class=\"story-content\">\n <h3>Berkat Kopi: Dari Hobi ke Bisnis dengan Omset Miliaran<\/h3>\n <div class=\"story-meta\">\n <span><i class=\"fas fa-user\"><\/i> Ahmad Rizki<\/span>\n <span><i class=\"fas fa-building\"><\/i> Berkat Kopi<\/span>\n <span><i class=\"fas fa-calendar\"><\/i> 5 Tahun Berkembang<\/span>\n <\/div>\n <p>Ahmad memulai bisnis kopinya dengan modal terbatas dari garasi rumahnya. Kini, Berkat Kopi telah memiliki 15 outlet di berbagai kota dengan omset mencapai 2 Miliar per bulan.<\/p>\n \n <a href=\"https:\/\/link-anda-di-sini.com\/materi-1\" class=\"btn\" style=\"margin-top: 15px;\">Baca Selengkapnya<\/a>\n <\/div>\n <\/div>\n \n <div class=\"story-card\">\n <div class=\"story-img\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1573164713714-d95e436ab8d6?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80\" alt=\"Tech Entrepreneur\">\n <\/div>\n <div class=\"story-content\">\n <h3>EduTech: Platform Pendidikan yang Memberdayakan Generasi Muda<\/h3>\n <div class=\"story-meta\">\n <span><i class=\"fas fa-user\"><\/i> Siti Nurhaliza<\/span>\n <span><i class=\"fas fa-building\"><\/i> EduTech Indonesia<\/span>\n <span><i class=\"fas fa-calendar\"><\/i> 3 Tahun Berkembang<\/span>\n <\/div>\n <p>Siti mengembangkan platform pembelajaran online yang menyediakan akses pendidikan berkualitas bagi anak-anak di daerah terpencil. Startupnya telah mendapatkan pendanaan seri A senilai 5 juta dolar.<\/p>\n \n <a href=\"https:\/\/link-anda-di-sini.com\/materi-2\" class=\"btn\" style=\"margin-top: 15px;\">Baca Selengkapnya<\/a>\n <\/div>\n <\/div>\n \n <div class=\"story-card\">\n <div class=\"story-img\">\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80\" alt=\"Social Entrepreneur\">\n <\/div>\n <div class=\"story-content\">\n <h3>EcoWaste: Mengubah Sampah menjadi Berkah dengan Kreativitas<\/h3>\n <div class=\"story-meta\">\n <span><i class=\"fas fa-user\"><\/i> Budi Santoso<\/span>\n <span><i class=\"fas fa-building\"><\/i> EcoWaste Solution<\/span>\n <span><i class=\"fas fa-calendar\"><\/i> 4 Tahun Berkembang<\/span>\n <\/div>\n <p>Budi memelopori bisnis daur ulang sampah menjadi produk fashion yang stylish. Perusahaannya tidak hanya menghasilkan profit tetapi juga memberikan dampak sosial dan lingkungan yang positif.<\/p>\n \n <a href=\"https:\/\/link-anda-di-sini.com\/materi-3\" class=\"btn\" style=\"margin-top: 15px;\">Baca Selengkapnya<\/a>\n <\/div>\n <\/div>\n <\/section>\n \n \n <section id=\"quiz\" class=\"content-section\">\n <h2 class=\"section-title\">Quiz Kewirausahaan<\/h2>\n \n \n \n <div class=\"quiz-container\">\n <div class=\"quiz-progress\">\n <div class=\"progress-bar\" style=\"width: 20%\"><\/div>\n <\/div>\n \n <div class=\"quiz-question\">\n Menurut kisah success story Ahmad Rizki (Berkat Kopi), apa kunci utama kesuksesan bisnisnya?\n <\/div>\n \n <ul class=\"quiz-options\">\n <li class=\"quiz-option\">A. Modal yang besar sejak awal<\/li>\n <li class=\"quiz-option\">B. Konsistensi dalam menjaga kualitas produk<\/li>\n <li class=\"quiz-option\">C. Lokasi strategis di pusat perbelanjaan<\/li>\n <li class=\"quiz-option\">D. Iklan yang masif di televisi<\/li>\n <\/ul>\n \n <div class=\"quiz-navigation\">\n <button class=\"btn\" style=\"background-color: #95a5a6;\">Sebelumnya<\/button>\n \n <a href=\"https:\/\/link-anda-di-sini.com\/quiz-1\" class=\"btn\">Selanjutnya<\/a>\n <\/div>\n <\/div>\n \n <div class=\"quiz-container\">\n <div class=\"quiz-progress\">\n <div class=\"progress-bar\" style=\"width: 40%\"><\/div>\n <\/div>\n \n <div class=\"quiz-question\">\n Dari kisah Siti Nurhaliza (EduTech Indonesia), nilai kewirausahaan apa yang paling menonjol?\n <\/div>\n \n <ul class=\"quiz-options\">\n <li class=\"quiz-option\">A. Keinginan untuk mencari keuntungan semata<\/li>\n <li class=\"quiz-option\">B. Kepedulian terhadap masalah sosial dan pendidikan<\/li>\n <li class=\"quiz-option\">C. Keinginan untuk cepat terkenal<\/li>\n <li class=\"quiz-option\">D. Mengikuti tren bisnis terkini<\/li>\n <\/ul>\n \n <div class=\"quiz-navigation\">\n <button class=\"btn\" style=\"background-color: #95a5a6;\">Sebelumnya<\/button>\n \n <a href=\"https:\/\/link-anda-di-sini.com\/quiz-2\" class=\"btn\">Selanjutnya<\/a>\n <\/div>\n <\/div>\n <\/section>\n \n \n <section id=\"links\" class=\"content-section\">\n <h2 class=\"section-title\">Link Materi dan Quiz Eksternal<\/h2>\n \n <div class=\"external-links\">\n \n \n <div class=\"link-card\">\n <div class=\"link-icon\">\n <i class=\"fas fa-book\"><\/i>\n <\/div>\n <div class=\"link-content\">\n <h3>Materi Success Story Lengkap<\/h3>\n <p>Akses seluruh materi success story wirausaha pemuda dalam format PDF<\/p>\n \n <a href=\"https:\/\/link-anda-di-sini.com\/materi-lengkap\" class=\"link-btn\">Akses Materi<\/a>\n <\/div>\n <\/div>\n \n <div class=\"link-card\">\n <div class=\"link-icon\">\n <i class=\"fas fa-video\"><\/i>\n <\/div>\n <div class=\"link-content\">\n <h3>Video Inspirasi Wirausaha<\/h3>\n <p>Tonton video inspiratif dari para wirausaha muda yang telah sukses<\/p>\n \n <a href=\"https:\/\/link-anda-di-sini.com\/video-inspirasi\" class=\"link-btn\">Tonton Video<\/a>\n <\/div>\n <\/div>\n \n <div class=\"link-card\">\n <div class=\"link-icon\">\n <i class=\"fas fa-tasks\"><\/i>\n <\/div>\n <div class=\"link-content\">\n <h3>Quiz Interaktif<\/h3>\n <p>Uji pemahaman Anda dengan quiz interaktif tentang kewirausahaan<\/p>\n \n <a href=\"https:\/\/link-anda-di-sini.com\/quiz-interaktif\" class=\"link-btn\">Mulai Quiz<\/a>\n <\/div>\n <\/div>\n \n <div class=\"link-card\">\n <div class=\"link-icon\">\n <i class=\"fas fa-file-download\"><\/i>\n <\/div>\n <div class=\"link-content\">\n <h3>Download Materi<\/h3>\n <p>Download seluruh materi pelatihan dalam format ZIP<\/p>\n \n <a href=\"https:\/\/link-anda-di-sini.com\/download-materi\" class=\"link-btn\">Download<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <\/div>\n \n \n <footer>\n <div class=\"container\">\n <div class=\"footer-content\">\n <div class=\"footer-section\">\n \n <div class=\"footer-section center\">\n <h3>Kontak Kami<\/h3>\n <p><i class=\"fas fa-map-marker-alt\"><\/i> Jl. Diponegoro No. 33, Magelang<\/p>\n <p><i class=\"fas fa-phone\"><\/i> +6281998399848<\/p>\n <p><i class=\"fas fa-envelope\"><\/i> pemudakotamagelang@gmail.com<\/p>\n <\/div>\n \n <div class=\"footer-section\">\n <h3>Ikuti Kami<\/h3>\n <div class=\"social-icons\">\n <a href=\"#\"><i class=\"fab fa-facebook-f\"><\/i><\/a>\n <a href=\"#\"><i class=\"fab fa-instagram\"><\/i><\/a>\n <a href=\"#\"><i class=\"fab fa-twitter\"><\/i><\/a>\n <a href=\"#\"><i class=\"fab fa-youtube\"><\/i><\/a>\n <a href=\"#\"><i class=\"fab fa-linkedin-in\"><\/i><\/a>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"footer-bottom\">\n <p>© 2025 Disporapar Kota Magelang. All Rights Reserved.<\/p>\n <\/div>\n <\/div>\n <\/footer>\n\n <script>\n \/\/ Tab Navigation\n document.querySelectorAll('.nav-tab').forEach(tab => {\n tab.addEventListener('click', () => {\n \/\/ Remove active class from all tabs\n document.querySelectorAll('.nav-tab').forEach(t => {\n t.classList.remove('active');\n });\n \n \/\/ Add active class to clicked tab\n tab.classList.add('active');\n \n \/\/ Hide all content sections\n document.querySelectorAll('.content-section').forEach(section => {\n section.classList.remove('active');\n });\n \n \/\/ Show the targeted content section\n const target = tab.getAttribute('data-target');\n document.getElementById(target).classList.add('active');\n });\n });\n \n \/\/ Quiz Option Selection\n document.querySelectorAll('.quiz-option').forEach(option => {\n option.addEventListener('click', () => {\n \/\/ Remove selected class from all options in the same question\n option.parentElement.querySelectorAll('.quiz-option').forEach(opt => {\n opt.classList.remove('selected');\n });\n \n \/\/ Add selected class to clicked option\n option.classList.add('selected');\n });\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Success Story Wirausaha Wirausaha Pemuda Success Story Wirausaha Pelajari kisah inspiratif para pengusaha yang berhasil membangun bisnis dari nol dan kuasai kunci kesuksesan mereka melalui pelatihan interaktif ini. Materi Success Story Quiz & Evaluasi Link Eksternal Kisah Sukses Wirausaha Berkat Kopi: Dari Hobi ke Bisnis dengan Omset Miliaran Ahmad Rizki Berkat Kopi 5 Tahun Berkembang […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wirausahapemuda.magelangkota.go.id\/forum\/index.php?rest_route=\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wirausahapemuda.magelangkota.go.id\/forum\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wirausahapemuda.magelangkota.go.id\/forum\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wirausahapemuda.magelangkota.go.id\/forum\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wirausahapemuda.magelangkota.go.id\/forum\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2"}],"version-history":[{"count":4,"href":"https:\/\/wirausahapemuda.magelangkota.go.id\/forum\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":24,"href":"https:\/\/wirausahapemuda.magelangkota.go.id\/forum\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions\/24"}],"wp:attachment":[{"href":"https:\/\/wirausahapemuda.magelangkota.go.id\/forum\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}