Minggu, 14 September 2025
Kamis, 11 September 2025
Ledera
PROMPT
Buatkan Website (Research Landing Page)
Judul Website: Ledera – Platform untuk Pelatihan dan Pengembangan Diri
Desain & Layout:
Header (Navbar atas):
Logo dengan ikon bulat berisi huruf L dan teks "Ledera".
Navigasi bagian kanan terdiri dari: ikon media sosial (Twitter, Facebook, Pinterest, Instagram).
Kontak di pojok kanan atas: ikon telepon + nomor, ikon email + alamat email.
Gaya minimalis, tipografi modern.
Hero Section (Bagian utama):
Background putih bersih.
Layout 2 kolom:
Kiri:
Judul besar (bold) "Learning and Development Research Academy."
Kata Ledera diberi warna biru untuk penekanan.
Paragraf deskripsi singkat dengan warna teks abu-abu.
Form pencarian:
Input "Search for Activity" dengan ikon search.
Input "Categories" dengan ikon panah dropdown.
Tombol biru "Join Now".
Semua elemen form dalam card dengan background abu-abu muda dan rounded corner.
Kanan:
Gambar ilustrasi (contoh: burung yang terbang atau visual bebas terkait pembelajaran/ilustrasi modern).
Footer (opsional jika ingin dibuat):
Copyright kecil.
Ikon media sosial tambahan.
Warna & Style:
Warna utama: biru lembut (#4A90E2 atau sejenis).
Background: putih.
Font: modern sans-serif (contoh: Poppins atau Inter).
Tombol: biru dengan teks putih, rounded, efek hover lembut.
Elemen form: clean, dengan shadow halus.
Teknologi:
HTML, CSS (Flexbox atau Grid untuk layout).
Responsive (terutama mobile-friendly).
Gunakan ikon dari RemixIcon atau FontAwesome.
HTML
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ledera - Platform untuk Pelatihan dan Pengembangan Diri</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
}
.logo-circle {
background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
}
.search-card {
background: #F8FAFC;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.btn-primary {
background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
transition: all 0.3s ease;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(74, 144, 226, 0.3);
}
.hero-illustration {
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
</style>
</head>
<body class="bg-white">
<!-- Header -->
<header class="bg-white shadow-sm">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center py-4">
<!-- Logo -->
<div class="flex items-center space-x-3">
<div class="logo-circle w-10 h-10 rounded-full flex items-center justify-center">
<span class="text-white font-bold text-lg">L</span>
</div>
<span class="text-2xl font-bold text-gray-900">Ledera</span>
</div>
<!-- Contact & Social -->
<div class="flex items-center space-x-6">
<!-- Contact Info -->
<div class="hidden md:flex items-center space-x-4 text-sm text-gray-600">
<div class="flex items-center space-x-2">
<i class="ri-phone-line text-blue-500"></i>
<span>+62 812-3456-7890</span>
</div>
<div class="flex items-center space-x-2">
<i class="ri-mail-line text-blue-500"></i>
<span>info@ledera.com</span>
</div>
</div>
<!-- Social Icons -->
<div class="flex items-center space-x-3">
<a href="#" class="text-gray-400 hover:text-blue-500 transition-colors">
<i class="ri-twitter-line text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-blue-500 transition-colors">
<i class="ri-facebook-line text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-blue-500 transition-colors">
<i class="ri-pinterest-line text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-blue-500 transition-colors">
<i class="ri-instagram-line text-xl"></i>
</a>
</div>
</div>
</div>
</div>
</header>
<!-- Hero Section -->
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<!-- Left Column -->
<div class="space-y-8">
<div class="space-y-6">
<h1 class="text-4xl lg:text-5xl font-bold text-gray-900 leading-tight">
Learning and Development Research
<span class="text-blue-500">Academy</span>
</h1>
<p class="text-lg text-gray-600 leading-relaxed">
Platform terdepan untuk pengembangan diri dan pelatihan profesional.
Bergabunglah dengan ribuan peserta yang telah meningkatkan karir mereka
melalui program pembelajaran berkualitas tinggi.
</p>
</div>
<!-- Search Form -->
<div class="search-card p-6 rounded-2xl">
<div class="space-y-4">
<div class="grid md:grid-cols-2 gap-4">
<!-- Search Input -->
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<i class="ri-search-line text-gray-400"></i>
</div>
<input
type="text"
placeholder="Search for Activity"
class="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition-all"
>
</div>
<!-- Categories Dropdown -->
<div class="relative">
<select class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition-all appearance-none bg-white">
<option>Categories</option>
<option>Leadership</option>
<option>Digital Marketing</option>
<option>Data Science</option>
<option>Project Management</option>
<option>Soft Skills</option>
</select>
<div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
<i class="ri-arrow-down-s-line text-gray-400"></i>
</div>
</div>
</div>
<!-- Join Button -->
<button class="btn-primary w-full md:w-auto px-8 py-3 text-white font-semibold rounded-lg">
<i class="ri-user-add-line mr-2"></i>
Join Now
</button>
</div>
</div>
</div>
<!-- Right Column - Illustration -->
<div class="flex justify-center lg:justify-end">
<div class="hero-illustration">
<svg width="400" height="400" viewBox="0 0 400 400" class="w-full max-w-md">
<!-- Background Circle -->
<circle cx="200" cy="200" r="180" fill="#F0F7FF" opacity="0.5"/>
<!-- Flying Bird -->
<g transform="translate(150, 120)">
<path d="M20 40 Q30 20 50 30 Q70 20 80 40 Q70 50 50 45 Q30 50 20 40" fill="#4A90E2"/>
<path d="M25 45 Q35 35 45 40" stroke="#357ABD" stroke-width="2" fill="none"/>
</g>
<!-- Books Stack -->
<g transform="translate(120, 250)">
<rect x="0" y="0" width="60" height="8" rx="2" fill="#4A90E2"/>
<rect x="5" y="-10" width="55" height="8" rx="2" fill="#357ABD"/>
<rect x="10" y="-20" width="50" height="8" rx="2" fill="#5BA0F2"/>
</g>
<!-- Graduation Cap -->
<g transform="translate(220, 180)">
<rect x="0" y="0" width="40" height="6" rx="3" fill="#4A90E2"/>
<polygon points="20,0 35,10 5,10" fill="#357ABD"/>
<circle cx="35" cy="3" r="2" fill="#357ABD"/>
</g>
<!-- Learning Icons -->
<g transform="translate(100, 150)">
<circle cx="0" cy="0" r="15" fill="#E3F2FD"/>
<path d="M-8 -3 L-3 2 L8 -8" stroke="#4A90E2" stroke-width="2" fill="none"/>
</g>
<g transform="translate(280, 220)">
<circle cx="0" cy="0" r="12" fill="#E3F2FD"/>
<rect x="-6" y="-6" width="12" height="12" rx="2" fill="#4A90E2"/>
</g>
<!-- Floating Elements -->
<circle cx="80" cy="100" r="4" fill="#4A90E2" opacity="0.6">
<animate attributeName="cy" values="100;90;100" dur="3s" repeatCount="indefinite"/>
</circle>
<circle cx="320" cy="150" r="3" fill="#357ABD" opacity="0.6">
<animate attributeName="cy" values="150;140;150" dur="4s" repeatCount="indefinite"/>
</circle>
<circle cx="300" cy="300" r="5" fill="#5BA0F2" opacity="0.6">
<animate attributeName="cy" values="300;290;300" dur="3.5s" repeatCount="indefinite"/>
</circle>
</svg>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="bg-gray-50 border-t border-gray-200 mt-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
<div class="text-sm text-gray-600">
© 2024 Ledera. All rights reserved.
</div>
<div class="flex items-center space-x-4">
<a href="#" class="text-gray-400 hover:text-blue-500 transition-colors">
<i class="ri-twitter-line text-lg"></i>
</a>
<a href="#" class="text-gray-400 hover:text-blue-500 transition-colors">
<i class="ri-facebook-line text-lg"></i>
</a>
<a href="#" class="text-gray-400 hover:text-blue-500 transition-colors">
<i class="ri-pinterest-line text-lg"></i>
</a>
<a href="#" class="text-gray-400 hover:text-blue-500 transition-colors">
<i class="ri-instagram-line text-lg"></i>
</a>
</div>
</div>
</div>
</footer>
<script>
// Form functionality
document.querySelector('button').addEventListener('click', function(e) {
e.preventDefault();
const searchInput = document.querySelector('input[type="text"]');
const categorySelect = document.querySelector('select');
if (searchInput.value.trim() === '') {
alert('Silakan masukkan kata kunci pencarian!');
searchInput.focus();
return;
}
// Simulate search action
alert(`Mencari "${searchInput.value}" dalam kategori "${categorySelect.value}"...`);
});
// Social media links
document.querySelectorAll('a[href="#"]').forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
const icon = this.querySelector('i').className;
let platform = 'media sosial';
if (icon.includes('twitter')) platform = 'Twitter';
else if (icon.includes('facebook')) platform = 'Facebook';
else if (icon.includes('pinterest')) platform = 'Pinterest';
else if (icon.includes('instagram')) platform = 'Instagram';
alert(`Mengarahkan ke halaman ${platform} Ledera...`);
});
});
</script>
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'97d574a143f6603b',t:'MTc1NzU3NTc4Mi4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
</html>
Rabu, 10 September 2025
Templat Html 2
Prompt Design Website
Judul Website: LinkSite – Personal Links Page
Deskripsi:
Buat desain website sederhana bergaya personal link page seperti Linktree, dengan tampilan modern, minimalis, dan mobile-friendly. Website ini digunakan untuk menampilkan daftar tautan media sosial, portofolio, atau link penting.
Struktur Halaman:
-
Header (Profile Section):
-
Foto profil berbentuk bulat (center).
-
Nama lengkap pemilik website.
-
Deskripsi singkat / tagline (contoh: Content Creator | Designer | Educator).
-
-
Daftar Link (Main Content):
-
Tampilkan tombol/link dengan gaya kotak membulat (rounded).
-
Setiap link berisi teks + ikon.
-
Efek hover: background sedikit lebih gelap / ada animasi transisi halus.
-
Link yang ditampilkan: Instagram, YouTube, TikTok, Portofolio, Blog, Email.
-
-
Footer:
-
Teks copyright kecil (center).
-
Tambahkan ikon media sosial kecil (optional).
-
Style & Warna:
-
Latar belakang (background): gradasi warna lembut (misalnya ungu → biru).
-
Font: modern sans-serif (contoh: Poppins, Inter).
-
Tombol link: warna putih dengan teks hitam, shadow lembut.
-
Hover: tombol sedikit membesar (scale up) + bayangan lebih jelas.
Teknologi:
-
HTML, CSS (flexbox/center alignment).
-
Responsive (ramah untuk HP).
-
Optional: gunakan Google Fonts untuk tipografi modern.
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LinkSite – Personal Links Page</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
<!-- Remix Icon -->
<link href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- HEADER -->
<header class="profile">
<img src="https://picsum.photos/200" alt="Profile Picture" class="profile__img">
<h1 class="profile__name">John Doe</h1>
<p class="profile__tagline">Content Creator | Designer | Educator</p>
</header>
<!-- MAIN LINKS -->
<main class="links">
<a href="#" class="link__btn"><i class="ri-instagram-line"></i> Instagram</a>
<a href="#" class="link__btn"><i class="ri-youtube-line"></i> YouTube</a>
<a href="#" class="link__btn"><i class="ri-tiktok-line"></i> TikTok</a>
<a href="#" class="link__btn"><i class="ri-briefcase-line"></i> Portfolio</a>
<a href="#" class="link__btn"><i class="ri-article-line"></i> Blog</a>
<a href="mailto:example@email.com" class="link__btn"><i class="ri-mail-line"></i> Email</a>
</main>
<!-- FOOTER -->
<footer class="footer">
<p>© 2025 LinkSite | All Rights Reserved</p>
<div class="footer__socials">
<a href="#"><i class="ri-twitter-fill"></i></a>
<a href="#"><i class="ri-facebook-circle-fill"></i></a>
<a href="#"><i class="ri-linkedin-fill"></i></a>
</div>
</footer>
</body>
</html>
styles.css
/* Font */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");
:root {
--bg-gradient: linear-gradient(135deg, #7f7fd5, #86a8e7, #91eae4);
--white: #ffffff;
--text-dark: #111827;
--text-light: #6b7280;
--btn-shadow: rgba(0, 0, 0, 0.1);
}
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Poppins", sans-serif;
background: var(--bg-gradient);
color: var(--text-dark);
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
padding: 2rem 1rem;
}
/* Profile */
.profile {
text-align: center;
margin-bottom: 2rem;
}
.profile__img {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 1rem;
border: 3px solid var(--white);
box-shadow: 0 4px 8px var(--btn-shadow);
}
.profile__name {
font-size: 1.8rem;
font-weight: 700;
}
.profile__tagline {
font-size: 1rem;
font-weight: 400;
color: var(--text-light);
}
/* Links */
.links {
width: 100%;
max-width: 400px;
display: flex;
flex-direction: column;
gap: 1rem;
}
.link__btn {
background: var(--white);
color: var(--text-dark);
padding: 0.9rem 1.2rem;
border-radius: 12px;
font-size: 1.1rem;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
text-decoration: none;
box-shadow: 0 4px 10px var(--btn-shadow);
transition: all 0.3s ease;
}
.link__btn:hover {
background: #f3f4f6;
transform: scale(1.05);
box-shadow: 0 6px 14px var(--btn-shadow);
}
/* Footer */
.footer {
margin-top: auto;
text-align: center;
font-size: 0.9rem;
color: var(--white);
opacity: 0.9;
}
.footer__socials {
margin-top: 0.5rem;
display: flex;
gap: 1rem;
justify-content: center;
}
.footer__socials a {
color: var(--white);
font-size: 1.2rem;
transition: 0.3s;
}
.footer__socials a:hover {
color: #222;
}
Template HTML 1
Prompt Design Website (E-Learning Landing Page)
Judul Website: E-Learning – Single Platform for All Your Learning Needs
Desain & Layout:
-
Header (Navbar atas):
-
Logo dengan ikon bulat berisi huruf E dan teks "Learning".
-
Navigasi bagian kanan terdiri dari: ikon media sosial (Twitter, Facebook, Pinterest, Instagram).
-
Kontak di pojok kanan atas: ikon telepon + nomor, ikon email + alamat email.
-
Gaya minimalis, tipografi modern.
-
-
Hero Section (Bagian utama):
-
Background putih bersih.
-
Layout 2 kolom:
-
Kiri:
-
Judul besar (bold) "Single Platform For All Your Learning Needs."
-
Kata Learning diberi warna biru untuk penekanan.
-
-
Paragraf deskripsi singkat dengan warna teks abu-abu.
-
Form pencarian:
-
Input "Search for Course" dengan ikon search.
-
Input "Categories" dengan ikon panah dropdown.
-
Tombol biru "Search Now".
-
Semua elemen form dalam card dengan background abu-abu muda dan rounded corner.
-
-
-
Kanan:
-
Gambar ilustrasi (contoh: burung yang terbang atau visual bebas terkait pembelajaran/ilustrasi modern).
-
-
-
-
Footer (opsional jika ingin dibuat):
-
Copyright kecil.
-
Ikon media sosial tambahan.
-
Warna & Style:
-
Warna utama: biru lembut (#4A90E2 atau sejenis).
-
Background: putih.
-
Font: modern sans-serif (contoh: Poppins atau Inter).
-
Tombol: biru dengan teks putih, rounded, efek hover lembut.
-
Elemen form: clean, dengan shadow halus.
Teknologi:
-
HTML, CSS (Flexbox atau Grid untuk layout).
-
Responsive (terutama mobile-friendly).
-
Gunakan ikon dari RemixIcon atau FontAwesome.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-Learning Platform</title>
<!-- Remix Icon -->
<link href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- NAVBAR -->
<nav class="navbar">
<div class="nav__logo">
<div class="logo-circle">E</div>
<span>Learning</span>
</div>
<ul class="nav__socials">
<li><a href="#"><i class="ri-twitter-fill"></i></a></li>
<li><a href="#"><i class="ri-facebook-circle-fill"></i></a></li>
<li><a href="#"><i class="ri-pinterest-line"></i></a></li>
<li><a href="#"><i class="ri-instagram-line"></i></a></li>
</ul>
<div class="nav__contact">
<div class="nav__contact__card">
<i class="ri-phone-line"></i>
<div>
<p>Call Us</p>
<h4>+01 98765 4321</h4>
</div>
</div>
<div class="nav__contact__card">
<i class="ri-mail-line"></i>
<div>
<p>Email Us</p>
<h4>info@elearnings.com</h4>
</div>
</div>
</div>
</nav>
<!-- HEADER -->
<header class="header__container">
<div class="header__content">
<h1>Single Platform For All Your <span>Learning</span> Needs.</h1>
<p>
Whether you're seeking to enhance your professional skills, explore
new hobbies, or pursue academic interests, our comprehensive platform
offers diverse courses and resources tailored to support your lifelong
learning journey.
</p>
<form action="/" class="search__form">
<div class="input__row">
<div class="input__group">
<i class="ri-search-line"></i>
<input type="text" placeholder="Search for Course">
</div>
<div class="input__group">
<i class="ri-arrow-down-s-line"></i>
<input type="text" placeholder="Categories">
</div>
</div>
<button type="submit">Search Now</button>
</form>
</div>
<div class="header__image">
<img src="https://picsum.photos/id/1011/600/400" alt="header image">
</div>
</header>
</body>
</html>
style.css
/* Font */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");
:root {
--primary-color: #4a90e2;
--text-dark: #111827;
--text-light: #6b7280;
--white: #ffffff;
--max-width: 1200px;
}
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Poppins", sans-serif;
color: var(--text-dark);
background-color: var(--white);
}
/* NAVBAR */
.navbar {
max-width: var(--max-width);
margin: auto;
padding: 1rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
border-bottom: 1px solid #ddd;
}
.nav__logo {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-color);
}
.logo-circle {
width: 35px;
height: 35px;
display: grid;
place-items: center;
background: var(--primary-color);
color: var(--white);
font-weight: 600;
border-radius: 50%;
}
/* Socials */
.nav__socials {
list-style: none;
display: flex;
gap: 1rem;
}
.nav__socials a {
font-size: 1.3rem;
color: var(--text-dark);
transition: 0.3s;
}
.nav__socials a:hover {
color: var(--primary-color);
}
/* Contact */
.nav__contact {
display: flex;
gap: 1.5rem;
}
.nav__contact__card {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
}
.nav__contact__card i {
font-size: 1.5rem;
color: var(--primary-color);
}
.nav__contact__card p {
color: var(--text-light);
font-size: 0.8rem;
}
.nav__contact__card h4 {
font-size: 0.9rem;
font-weight: 600;
}
/* HEADER */
.header__container {
max-width: var(--max-width);
margin: 2rem auto;
padding: 1rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
align-items: center;
}
.header__content h1 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
}
.header__content h1 span {
color: var(--primary-color);
}
.header__content p {
font-size: 1rem;
line-height: 1.6rem;
margin-bottom: 2rem;
color: var(--text-light);
}
/* Search form */
.search__form {
background: #f6f6f6;
padding: 1rem;
border-radius: 10px;
display: flex;
flex-direction: column;
gap: 1rem;
}
.input__row {
display: flex;
gap: 1rem;
}
.input__group {
flex: 1;
display: flex;
align-items: center;
gap: 0.5rem;
background: var(--white);
padding: 0.5rem 1rem;
border-radius: 8px;
}
.input__group input {
border: none;
outline: none;
flex: 1;
font-size: 1rem;
}
.search__form button {
background: var(--primary-color);
color: var(--white);
border: none;
padding: 0.8rem;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: 0.3s;
}
.search__form button:hover {
background: #357ac8;
}
/* Image */
.header__image img {
width: 100%;
border-radius: 10px;
}
/* Responsive */
@media (max-width: 768px) {
.header__container {
grid-template-columns: 1fr;
text-align: center;
}
.input__row {
flex-direction: column;
}
}
Selasa, 09 September 2025
Ledera
Buatkan desain landing page organisasi riset dan pengembangan masyarakat dengan gaya profesional, bersih, dan minimalis. Gunakan dominasi warna biru tua, putih, dan abu-abu netral. Struktur website terdiri dari:
-
Header (Navigation Bar)
-
Logo organisasi di kiri atas.
-
Menu navigasi kanan: Tentang Kami, Penelitian, Publikasi, Program, Berita, Kontak.
-
Gunakan font modern sans-serif dengan tampilan tipis dan elegan.
-
-
Hero Section
-
Latar belakang gambar ilustratif atau foto representatif kegiatan riset/masyarakat.
-
Judul besar: "Membangun Pengetahuan untuk Perubahan Sosial"
-
Subjudul: "Kami melakukan penelitian independen untuk mendukung kebijakan publik yang inklusif dan berkelanjutan."
-
Tombol call-to-action (CTA): "Pelajari Lebih Lanjut" dan "Publikasi Terbaru".
-
-
Highlight Section (Tentang Organisasi)
-
Ikon/ilustrasi mendampingi teks singkat tentang visi dan misi.
-
Tampilkan 3-4 poin utama (misalnya: penelitian independen, pengembangan masyarakat, advokasi kebijakan, kemitraan global).
-
-
Publikasi & Penelitian Terbaru
-
Grid/card layout dengan gambar thumbnail, judul riset, ringkasan singkat, dan tombol "Baca Selengkapnya".
-
-
Program & Kegiatan
-
Bagian dengan card atau slider menampilkan program unggulan.
-
Sertakan tombol "Lihat Semua Program".
-
-
Berita & Artikel
-
Feed berita/artikel terbaru dalam bentuk daftar atau grid sederhana.
-
-
Testimoni / Mitra
-
Logo partner atau kutipan testimoni dari pihak eksternal.
-
-
Footer
-
Informasi kontak, alamat, email, telepon.
-
Link cepat ke menu utama.
-
Ikon sosial media (Facebook, X/Twitter, LinkedIn, YouTube).
-
Style & Layout:
-
Gunakan layout berbasis grid yang rapi.
-
Warna dominan biru tua (#002147), putih (#ffffff), dan abu-abu netral.
-
Font: Sans-serif modern seperti Open Sans atau Lato.
-
Tampilan minimalis, fokus pada konten teks dan visual pendukung.
-
Pastikan responsif untuk tampilan mobile dan desktop.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ledera - Learning and Development Research Academy</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'primary': '#002147',
'secondary': '#ffffff',
'neutral': '#6b7280'
},
fontFamily: {
'sans': ['Inter', 'sans-serif']
}
}
}
}
</script>
</head>
<body class="font-sans bg-white">
<!-- Header -->
<header class="bg-white shadow-sm fixed w-full top-0 z-50">
<nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<div class="flex items-center">
<div class="flex-shrink-0">
<div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
<span class="text-white font-bold text-lg">L</span>
</div>
</div>
<div class="ml-3">
<span class="text-primary font-semibold text-lg">Ledera</span>
</div>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-8">
<a href="#" class="text-primary hover:text-blue-800 px-3 py-2 text-sm font-medium transition-colors">Beranda</a>
<a href="#program" class="text-neutral hover:text-primary px-3 py-2 text-sm font-medium transition-colors">Program</a>
<a href="#berita" class="text-neutral hover:text-primary px-3 py-2 text-sm font-medium transition-colors">Berita</a>
<a href="#link" class="text-neutral hover:text-primary px-3 py-2 text-sm font-medium transition-colors">Link</a>
<a href="#kontak" class="text-neutral hover:text-primary px-3 py-2 text-sm font-medium transition-colors">Kontak</a>
</div>
</div>
<div class="md:hidden">
<button class="text-neutral hover:text-primary">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</div>
</nav>
</header>
<!-- Home Page -->
<div id="homePage">
<!-- Hero Section -->
<section class="relative bg-gradient-to-br from-primary to-blue-900 text-white pt-16">
<div class="absolute inset-0 bg-black opacity-20"></div>
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 lg:py-32">
<div class="text-center">
<h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">
Ledera
<span class="block text-2xl md:text-3xl font-light mt-2">Learning and Development Research Academy</span>
</h1>
<p class="text-xl md:text-2xl mb-8 max-w-4xl mx-auto font-light leading-relaxed">
Kami Mengembangkan Pembelajaran dan Pelatihan untuk Perubahan Sosial yang inklusif dan berkelanjutan.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<button onclick="showJoinPage()" class="bg-white text-primary px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors">
Join
</button>
<button onclick="showActivitiesPage()" class="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-primary transition-colors">
Aktivitas
</button>
</div>
</div>
</div>
<!-- Decorative SVG -->
<div class="absolute bottom-0 left-0 right-0">
<svg viewBox="0 0 1200 120" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 120L50 110C100 100 200 80 300 70C400 60 500 60 600 65C700 70 800 80 900 85C1000 90 1100 90 1150 90L1200 90V120H1150C1100 120 1000 120 900 120C800 120 700 120 600 120C500 120 400 120 300 120C200 120 100 120 50 120H0Z" fill="white"/>
</svg>
</div>
</section>
<!-- Highlight Section -->
<section class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-primary mb-4">Tentang Organisasi</h2>
<p class="text-lg text-neutral max-w-3xl mx-auto">Membangun kapasitas masyarakat melalui penelitian, pembelajaran, dan pengembangan berkelanjutan</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
<div class="text-center p-6 rounded-lg hover:shadow-lg transition-shadow">
<div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C20.168 18.477 18.582 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-primary mb-2">Pelatihan</h3>
<p class="text-neutral">Program pelatihan komprehensif untuk pengembangan kapasitas masyarakat</p>
</div>
<div class="text-center p-6 rounded-lg hover:shadow-lg transition-shadow">
<div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-primary mb-2">Pengembangan Masyarakat</h3>
<p class="text-neutral">Pemberdayaan komunitas untuk menciptakan perubahan sosial berkelanjutan</p>
</div>
<div class="text-center p-6 rounded-lg hover:shadow-lg transition-shadow">
<div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-primary mb-2">Advokasi Kebijakan</h3>
<p class="text-neutral">Mendorong kebijakan publik yang mendukung pembangunan inklusif</p>
</div>
<div class="text-center p-6 rounded-lg hover:shadow-lg transition-shadow">
<div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-primary mb-2">Kemitraan Global</h3>
<p class="text-neutral">Membangun jaringan kolaborasi internasional untuk dampak yang lebih luas</p>
</div>
</div>
</div>
</section>
<!-- Publikasi & Media Massa -->
<section class="py-20 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-primary mb-4">Publikasi & Media Massa</h2>
<p class="text-lg text-neutral">Hasil penelitian dan publikasi terbaru dari tim kami</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
<div class="h-48 bg-gradient-to-br from-primary to-blue-800"></div>
<div class="p-6">
<h3 class="text-xl font-semibold text-primary mb-2">Penelitian Dampak Sosial Program Pelatihan</h3>
<p class="text-neutral mb-4">Analisis komprehensif tentang efektivitas program pelatihan dalam meningkatkan kapasitas masyarakat lokal...</p>
<button class="text-primary font-semibold hover:text-blue-800 transition-colors">Baca Selengkapnya →</button>
</div>
</div>
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
<div class="h-48 bg-gradient-to-br from-blue-600 to-primary"></div>
<div class="p-6">
<h3 class="text-xl font-semibold text-primary mb-2">Strategi Pemberdayaan Komunitas Rural</h3>
<p class="text-neutral mb-4">Pendekatan inovatif dalam mengembangkan ekonomi lokal melalui program pemberdayaan masyarakat desa...</p>
<button class="text-primary font-semibold hover:text-blue-800 transition-colors">Baca Selengkapnya →</button>
</div>
</div>
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
<div class="h-48 bg-gradient-to-br from-blue-700 to-blue-900"></div>
<div class="p-6">
<h3 class="text-xl font-semibold text-primary mb-2">Policy Brief: Pendidikan Inklusif</h3>
<p class="text-neutral mb-4">Rekomendasi kebijakan untuk meningkatkan akses pendidikan berkualitas bagi seluruh lapisan masyarakat...</p>
<button class="text-primary font-semibold hover:text-blue-800 transition-colors">Baca Selengkapnya →</button>
</div>
</div>
</div>
</div>
</section>
<!-- Program & Kegiatan -->
<section id="program" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-primary mb-4">Program & Kegiatan</h2>
<p class="text-lg text-neutral">Program unggulan untuk pengembangan kapasitas dan pemberdayaan masyarakat</p>
</div>
<div class="grid md:grid-cols-2 gap-8 mb-12">
<div class="bg-gradient-to-br from-primary to-blue-800 text-white rounded-lg p-8">
<div class="w-12 h-12 bg-white bg-opacity-20 rounded-lg flex items-center justify-center mb-4">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
</svg>
</div>
<h3 class="text-2xl font-bold mb-3">Leadership Development Program</h3>
<p class="mb-4 opacity-90">Program pengembangan kepemimpinan untuk menciptakan pemimpin masa depan yang visioner dan berintegritas.</p>
<ul class="space-y-2 mb-6 opacity-90">
<li>• Pelatihan kepemimpinan transformasional</li>
<li>• Mentoring dan coaching</li>
<li>• Project-based learning</li>
</ul>
</div>
<div class="bg-gradient-to-br from-blue-600 to-primary text-white rounded-lg p-8">
<div class="w-12 h-12 bg-white bg-opacity-20 rounded-lg flex items-center justify-center mb-4">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
</svg>
</div>
<h3 class="text-2xl font-bold mb-3">Community Innovation Hub</h3>
<p class="mb-4 opacity-90">Platform kolaborasi untuk mengembangkan solusi inovatif bagi tantangan sosial di tingkat komunitas.</p>
<ul class="space-y-2 mb-6 opacity-90">
<li>• Workshop design thinking</li>
<li>• Inkubasi proyek sosial</li>
<li>• Networking dan partnership</li>
</ul>
</div>
</div>
<div class="text-center">
<button class="bg-primary text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-800 transition-colors">
Lihat Semua Program
</button>
</div>
</div>
</section>
<!-- Berita & Artikel -->
<section id="berita" class="py-20 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-primary mb-4">Berita & Artikel</h2>
<p class="text-lg text-neutral">Update terbaru dari kegiatan dan perkembangan organisasi</p>
</div>
<div class="space-y-6">
<div class="bg-white rounded-lg shadow-md p-6 flex flex-col md:flex-row gap-6">
<div class="w-full md:w-48 h-32 bg-gradient-to-br from-primary to-blue-800 rounded-lg flex-shrink-0"></div>
<div class="flex-1">
<div class="text-sm text-neutral mb-2">15 Desember 2024</div>
<h3 class="text-xl font-semibold text-primary mb-2">Peluncuran Program Kemitraan dengan Universitas Terkemuka</h3>
<p class="text-neutral mb-3">Ledera menjalin kemitraan strategis dengan beberapa universitas terkemuka untuk memperkuat program penelitian dan pengembangan...</p>
<button class="text-primary font-semibold hover:text-blue-800 transition-colors">Baca Selengkapnya →</button>
</div>
</div>
<div class="bg-white rounded-lg shadow-md p-6 flex flex-col md:flex-row gap-6">
<div class="w-full md:w-48 h-32 bg-gradient-to-br from-blue-600 to-primary rounded-lg flex-shrink-0"></div>
<div class="flex-1">
<div class="text-sm text-neutral mb-2">10 Desember 2024</div>
<h3 class="text-xl font-semibold text-primary mb-2">Workshop Nasional: Inovasi dalam Pemberdayaan Masyarakat</h3>
<p class="text-neutral mb-3">Lebih dari 200 peserta dari seluruh Indonesia mengikuti workshop nasional tentang pendekatan inovatif dalam pemberdayaan masyarakat...</p>
<button class="text-primary font-semibold hover:text-blue-800 transition-colors">Baca Selengkapnya →</button>
</div>
</div>
<div class="bg-white rounded-lg shadow-md p-6 flex flex-col md:flex-row gap-6">
<div class="w-full md:w-48 h-32 bg-gradient-to-br from-blue-700 to-blue-900 rounded-lg flex-shrink-0"></div>
<div class="flex-1">
<div class="text-sm text-neutral mb-2">5 Desember 2024</div>
<h3 class="text-xl font-semibold text-primary mb-2">Hasil Evaluasi Program Pelatihan Kepemimpinan 2024</h3>
<p class="text-neutral mb-3">Evaluasi komprehensif menunjukkan peningkatan signifikan dalam kapasitas kepemimpinan peserta program...</p>
<button class="text-primary font-semibold hover:text-blue-800 transition-colors">Baca Selengkapnya →</button>
</div>
</div>
</div>
</div>
</section>
<!-- Testimoni & Mitra -->
<section class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-primary mb-4">Mitra & Testimoni</h2>
<p class="text-lg text-neutral">Dipercaya oleh berbagai organisasi dan institusi terkemuka</p>
</div>
<div class="grid md:grid-cols-2 gap-12 mb-16">
<div class="bg-gray-50 rounded-lg p-8">
<div class="text-4xl text-primary mb-4">"</div>
<p class="text-lg text-neutral mb-6 italic">Program pelatihan dari Ledera sangat transformatif. Tim kami mengalami peningkatan kapasitas yang signifikan dalam mengelola program pemberdayaan masyarakat.</p>
<div class="flex items-center">
<div class="w-12 h-12 bg-primary rounded-full flex items-center justify-center text-white font-bold mr-4">DR</div>
<div>
<div class="font-semibold text-primary">Dr. Rina Sari</div>
<div class="text-sm text-neutral">Direktur Yayasan Pemberdayaan Masyarakat</div>
</div>
</div>
</div>
<div class="bg-gray-50 rounded-lg p-8">
<div class="text-4xl text-primary mb-4">"</div>
<p class="text-lg text-neutral mb-6 italic">Kemitraan dengan Ledera membuka wawasan baru dalam pendekatan penelitian sosial. Metodologi yang digunakan sangat komprehensif dan aplikatif.</p>
<div class="flex items-center">
<div class="w-12 h-12 bg-primary rounded-full flex items-center justify-center text-white font-bold mr-4">PA</div>
<div>
<div class="font-semibold text-primary">Prof. Ahmad Wijaya</div>
<div class="text-sm text-neutral">Dekan Fakultas Ilmu Sosial, Universitas Indonesia</div>
</div>
</div>
</div>
</div>
<div class="text-center">
<h3 class="text-xl font-semibold text-primary mb-8">Mitra Strategis</h3>
<div class="flex flex-wrap justify-center items-center gap-8 opacity-60">
<div class="w-24 h-12 bg-primary rounded flex items-center justify-center">
<span class="text-white font-bold text-sm">UNICEF</span>
</div>
<div class="w-24 h-12 bg-primary rounded flex items-center justify-center">
<span class="text-white font-bold text-sm">UNESCO</span>
</div>
<div class="w-24 h-12 bg-primary rounded flex items-center justify-center">
<span class="text-white font-bold text-sm">UI</span>
</div>
<div class="w-24 h-12 bg-primary rounded flex items-center justify-center">
<span class="text-white font-bold text-sm">ITB</span>
</div>
<div class="w-24 h-12 bg-primary rounded flex items-center justify-center">
<span class="text-white font-bold text-sm">UGM</span>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer id="kontak" class="bg-primary text-white py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid md:grid-cols-4 gap-8">
<div class="md:col-span-2">
<div class="flex items-center mb-4">
<div class="w-10 h-10 bg-white rounded-lg flex items-center justify-center mr-3">
<span class="text-primary font-bold text-lg">L</span>
</div>
<span class="text-white font-semibold text-xl">Ledera</span>
</div>
<p class="text-blue-200 mb-6 max-w-md">Learning and Development Research Academy - Mengembangkan pembelajaran dan pelatihan untuk perubahan sosial yang inklusif dan berkelanjutan.</p>
<div class="space-y-2">
<div class="flex items-center">
<svg class="w-5 h-5 mr-3 text-blue-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
<span class="text-blue-200">Jl. Penelitian No. 123, Jakarta Selatan 12345</span>
</div>
<div class="flex items-center">
<svg class="w-5 h-5 mr-3 text-blue-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
</svg>
<span class="text-blue-200">info@ledera.org</span>
</div>
<div class="flex items-center">
<svg class="w-5 h-5 mr-3 text-blue-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
</svg>
<span class="text-blue-200">+62 21 1234 5678</span>
</div>
</div>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">Link Cepat</h3>
<ul class="space-y-2">
<li><a href="#" class="text-blue-200 hover:text-white transition-colors">Beranda</a></li>
<li><a href="#program" class="text-blue-200 hover:text-white transition-colors">Program</a></li>
<li><a href="#berita" class="text-blue-200 hover:text-white transition-colors">Berita</a></li>
<li><a href="#" class="text-blue-200 hover:text-white transition-colors">Publikasi</a></li>
<li><a href="#kontak" class="text-blue-200 hover:text-white transition-colors">Kontak</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">Ikuti Kami</h3>
<div class="flex space-x-4">
<a href="#" class="w-10 h-10 bg-blue-800 rounded-lg flex items-center justify-center hover:bg-blue-700 transition-colors">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
</svg>
</a>
<a href="#" class="w-10 h-10 bg-blue-800 rounded-lg flex items-center justify-center hover:bg-blue-700 transition-colors">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/>
</svg>
</a>
<a href="#" class="w-10 h-10 bg-blue-800 rounded-lg flex items-center justify-center hover:bg-blue-700 transition-colors">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
</svg>
</a>
<a href="#" class="w-10 h-10 bg-blue-800 rounded-lg flex items-center justify-center hover:bg-blue-700 transition-colors">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
</svg>
</a>
</div>
</div>
</div>
<div class="border-t border-blue-800 mt-12 pt-8 text-center">
<p class="text-blue-200">© 2024 Ledera - Learning and Development Research Academy. All rights reserved.</p>
</div>
</div>
</footer>
</div>
<!-- Join Page -->
<div id="joinPage" class="hidden">
<section class="pt-16 pb-20 bg-gradient-to-br from-primary to-blue-900 text-white">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<div class="text-center mb-12">
<h1 class="text-4xl md:text-5xl font-bold mb-4">Bergabung dengan Ledera</h1>
<p class="text-xl opacity-90">Jadilah bagian dari komunitas yang berkomitmen untuk perubahan sosial berkelanjutan</p>
</div>
<div class="bg-white text-gray-800 rounded-lg p-8 shadow-xl">
<form class="space-y-6">
<div class="grid md:grid-cols-2 gap-6">
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">Nama Lengkap *</label>
<input type="text" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Masukkan nama lengkap">
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">Email *</label>
<input type="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="nama@email.com">
</div>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">Nomor Telepon *</label>
<input type="tel" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="+62 812 3456 7890">
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">Profesi/Pekerjaan</label>
<input type="text" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Profesi saat ini">
</div>
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">Organisasi/Institusi</label>
<input type="text" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Nama organisasi atau institusi">
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">Minat Program *</label>
<select class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
<option value="">Pilih program yang diminati</option>
<option value="leadership">Leadership Development Program</option>
<option value="community">Community Innovation Hub</option>
<option value="research">Research & Publication</option>
<option value="advocacy">Policy Advocacy</option>
<option value="partnership">Global Partnership</option>
</select>
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">Pengalaman Relevan</label>
<textarea rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Ceritakan pengalaman Anda di bidang pengembangan masyarakat, penelitian sosial, atau bidang terkait..."></textarea>
</div>
<div>
<label class="block text-sm font-semibold text-gray-700 mb-2">Motivasi Bergabung *</label>
<textarea rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Mengapa Anda tertarik bergabung dengan Ledera? Apa yang ingin Anda kontribusikan?"></textarea>
</div>
<div class="flex items-start">
<input type="checkbox" class="mt-1 mr-3" id="agreement">
<label for="agreement" class="text-sm text-gray-600">
Saya setuju dengan <a href="#" class="text-primary hover:underline">syarat dan ketentuan</a> serta <a href="#" class="text-primary hover:underline">kebijakan privasi</a> Ledera.
</label>
</div>
<div class="flex flex-col sm:flex-row gap-4 pt-4">
<button type="submit" class="flex-1 bg-primary text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-800 transition-colors">
Kirim Aplikasi
</button>
<button type="button" onclick="showHomePage()" class="flex-1 border-2 border-primary text-primary px-8 py-3 rounded-lg font-semibold hover:bg-primary hover:text-white transition-colors">
Kembali ke Beranda
</button>
</div>
</form>
</div>
<div class="mt-12 text-center">
<h3 class="text-xl font-semibold mb-4">Punya Pertanyaan?</h3>
<p class="opacity-90 mb-4">Tim kami siap membantu Anda. Hubungi kami melalui:</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="mailto:join@ledera.org" class="text-white hover:text-blue-200 transition-colors">
📧 join@ledera.org
</a>
<a href="tel:+622112345678" class="text-white hover:text-blue-200 transition-colors">
📞 +62 21 1234 5678
</a>
</div>
</div>
</div>
</section>
</div>
<!-- Activities Page -->
<div id="activitiesPage" class="hidden">
<section class="pt-16 pb-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<div class="text-center mb-16">
<h1 class="text-4xl md:text-5xl font-bold text-primary mb-4">Aktivitas Ledera</h1>
<p class="text-xl text-neutral max-w-3xl mx-auto">Jelajahi berbagai kegiatan, program, dan inisiatif yang sedang berlangsung di Ledera</p>
</div>
<!-- Filter Tabs -->
<div class="flex flex-wrap justify-center gap-4 mb-12">
<button class="activity-filter active bg-primary text-white px-6 py-2 rounded-full font-semibold transition-colors" data-filter="all">
Semua Aktivitas
</button>
<button class="activity-filter bg-gray-200 text-gray-700 px-6 py-2 rounded-full font-semibold hover:bg-gray-300 transition-colors" data-filter="ongoing">
Sedang Berlangsung
</button>
<button class="activity-filter bg-gray-200 text-gray-700 px-6 py-2 rounded-full font-semibold hover:bg-gray-300 transition-colors" data-filter="upcoming">
Akan Datang
</button>
<button class="activity-filter bg-gray-200 text-gray-700 px-6 py-2 rounded-full font-semibold hover:bg-gray-300 transition-colors" data-filter="completed">
Selesai
</button>
</div>
<!-- Activities Grid -->
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
<!-- Ongoing Activities -->
<div class="activity-card ongoing bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
<div class="h-48 bg-gradient-to-br from-green-500 to-green-700 relative">
<div class="absolute top-4 left-4 bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-semibold">
Sedang Berlangsung
</div>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-primary mb-2">Program Pelatihan Kepemimpinan Batch 5</h3>
<p class="text-neutral mb-4">Program intensif 3 bulan untuk mengembangkan kemampuan kepemimpinan transformasional bagi 30 peserta terpilih.</p>
<div class="flex items-center text-sm text-neutral mb-4">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
Oktober 2024 - Januari 2025
</div>
<button class="w-full bg-primary text-white py-2 rounded-lg font-semibold hover:bg-blue-800 transition-colors">
Lihat Detail
</button>
</div>
</div>
<div class="activity-card ongoing bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
<div class="h-48 bg-gradient-to-br from-blue-500 to-blue-700 relative">
<div class="absolute top-4 left-4 bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-semibold">
Sedang Berlangsung
</div>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-primary mb-2">Penelitian Dampak Sosial COVID-19</h3>
<p class="text-neutral mb-4">Studi longitudinal tentang dampak pandemi terhadap komunitas marginal di 5 provinsi di Indonesia.</p>
<div class="flex items-center text-sm text-neutral mb-4">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
Agustus 2024 - Maret 2025
</div>
<button class="w-full bg-primary text-white py-2 rounded-lg font-semibold hover:bg-blue-800 transition-colors">
Lihat Detail
</button>
</div>
</div>
<!-- Upcoming Activities -->
<div class="activity-card upcoming bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
<div class="h-48 bg-gradient-to-br from-orange-500 to-orange-700 relative">
<div class="absolute top-4 left-4 bg-orange-100 text-orange-800 px-3 py-1 rounded-full text-sm font-semibold">
Akan Datang
</div>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-primary mb-2">Konferensi Internasional Pembangunan Berkelanjutan</h3>
<p class="text-neutral mb-4">Konferensi 2 hari dengan pembicara internasional membahas inovasi dalam pembangunan berkelanjutan.</p>
<div class="flex items-center text-sm text-neutral mb-4">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
15-16 Februari 2025
</div>
<button class="w-full bg-orange-600 text-white py-2 rounded-lg font-semibold hover:bg-orange-700 transition-colors">
Daftar Sekarang
</button>
</div>
</div>
<div class="activity-card upcoming bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
<div class="h-48 bg-gradient-to-br from-purple-500 to-purple-700 relative">
<div class="absolute top-4 left-4 bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm font-semibold">
Akan Datang
</div>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-primary mb-2">Workshop Design Thinking untuk Inovasi Sosial</h3>
<p class="text-neutral mb-4">Pelatihan intensif 3 hari tentang metodologi design thinking untuk menciptakan solusi inovatif.</p>
<div class="flex items-center text-sm text-neutral mb-4">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
20-22 Januari 2025
</div>
<button class="w-full bg-purple-600 text-white py-2 rounded-lg font-semibold hover:bg-purple-700 transition-colors">
Daftar Sekarang
</button>
</div>
</div>
<!-- Completed Activities -->
<div class="activity-card completed bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
<div class="h-48 bg-gradient-to-br from-gray-500 to-gray-700 relative">
<div class="absolute top-4 left-4 bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm font-semibold">
Selesai
</div>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-primary mb-2">Seminar Nasional Pemberdayaan Masyarakat</h3>
<p class="text-neutral mb-4">Seminar dengan 500+ peserta membahas strategi pemberdayaan masyarakat di era digital.</p>
<div class="flex items-center text-sm text-neutral mb-4">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
25 November 2024
</div>
<button class="w-full bg-gray-600 text-white py-2 rounded-lg font-semibold hover:bg-gray-700 transition-colors">
Lihat Dokumentasi
</button>
</div>
</div>
<div class="activity-card completed bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
<div class="h-48 bg-gradient-to-br from-teal-500 to-teal-700 relative">
<div class="absolute top-4 left-4 bg-teal-100 text-teal-800 px-3 py-1 rounded-full text-sm font-semibold">
Selesai
</div>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-primary mb-2">Program Magang Penelitian Sosial</h3>
<p class="text-neutral mb-4">Program magang 6 bulan untuk 20 mahasiswa S1/S2 di bidang penelitian dan pengembangan masyarakat.</p>
<div class="flex items-center text-sm text-neutral mb-4">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
Juni - November 2024
</div>
<button class="w-full bg-teal-600 text-white py-2 rounded-lg font-semibold hover:bg-teal-700 transition-colors">
Lihat Hasil
</button>
</div>
</div>
</div>
<!-- Call to Action -->
<div class="text-center bg-gray-50 rounded-lg p-8">
<h3 class="text-2xl font-bold text-primary mb-4">Tertarik Berpartisipasi?</h3>
<p class="text-neutral mb-6 max-w-2xl mx-auto">Bergabunglah dengan komunitas kami dan ikuti berbagai aktivitas yang dapat mengembangkan kapasitas Anda dalam bidang penelitian dan pengembangan masyarakat.</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<button onclick="showJoinPage()" class="bg-primary text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-800 transition-colors">
Bergabung Sekarang
</button>
<button onclick="showHomePage()" class="border-2 border-primary text-primary px-8 py-3 rounded-lg font-semibold hover:bg-primary hover:text-white transition-colors">
Kembali ke Beranda
</button>
</div>
</div>
</div>
</section>
</div>
<script>
// Page navigation functions
function showHomePage() {
document.getElementById('homePage').classList.remove('hidden');
document.getElementById('joinPage').classList.add('hidden');
document.getElementById('activitiesPage').classList.add('hidden');
window.scrollTo(0, 0);
}
function showJoinPage() {
document.getElementById('homePage').classList.add('hidden');
document.getElementById('joinPage').classList.remove('hidden');
document.getElementById('activitiesPage').classList.add('hidden');
window.scrollTo(0, 0);
}
function showActivitiesPage() {
document.getElementById('homePage').classList.add('hidden');
document.getElementById('joinPage').classList.add('hidden');
document.getElementById('activitiesPage').classList.remove('hidden');
window.scrollTo(0, 0);
}
// Activity filter functionality
document.querySelectorAll('.activity-filter').forEach(button => {
button.addEventListener('click', function() {
// Update active button
document.querySelectorAll('.activity-filter').forEach(btn => {
btn.classList.remove('active', 'bg-primary', 'text-white');
btn.classList.add('bg-gray-200', 'text-gray-700');
});
this.classList.add('active', 'bg-primary', 'text-white');
this.classList.remove('bg-gray-200', 'text-gray-700');
// Filter activities
const filter = this.getAttribute('data-filter');
document.querySelectorAll('.activity-card').forEach(card => {
if (filter === 'all' || card.classList.contains(filter)) {
card.style.display = 'block';
} else {
card.style.display = 'none';
}
});
});
});
// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// Mobile menu toggle
const mobileMenuButton = document.querySelector('.md\\:hidden button');
const mobileMenu = document.createElement('div');
mobileMenu.className = 'md:hidden bg-white shadow-lg absolute top-16 left-0 right-0 z-40 hidden';
mobileMenu.innerHTML = `
<div class="px-4 py-2 space-y-1">
<a href="#" onclick="showHomePage()" class="block px-3 py-2 text-primary font-medium">Beranda</a>
<a href="#program" class="block px-3 py-2 text-neutral hover:text-primary">Program</a>
<a href="#berita" class="block px-3 py-2 text-neutral hover:text-primary">Berita</a>
<a href="#link" class="block px-3 py-2 text-neutral hover:text-primary">Link</a>
<a href="#kontak" class="block px-3 py-2 text-neutral hover:text-primary">Kontak</a>
</div>
`;
document.querySelector('header nav').appendChild(mobileMenu);
mobileMenuButton.addEventListener('click', function() {
mobileMenu.classList.toggle('hidden');
});
// Header scroll effect
window.addEventListener('scroll', function() {
const header = document.querySelector('header');
if (window.scrollY > 100) {
header.classList.add('bg-white', 'shadow-md');
} else {
header.classList.remove('shadow-md');
}
});
</script>
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'97cac165204dfe23',t:'MTc1NzQ2MzU4My4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
</html>
Langganan:
Postingan (Atom)
Coding Web Back End
https://www.youtube.com/watch?v=rMzbqEM8LHE&list=PL3uuG4lYbnOyccQGREqdmpIQkBqOc6YEJ https://www.youtube.com/watch?v=FIsgMZ1m4Zs&li...
-
https://www.youtube.com/watch?v=ronKK1MqcqE https://drive.google.com/file/d/1XG6bPRxZdLmujypKBONwBhlvhbLN0r1g/view https://drive.google.co...
-
https://www.youtube.com/watch?v=mvu1toK5JNQ&t=520s https://www.youtube.com/watch?v=UjS2j2sWXp4 https://www.youtube.com/watch?v=zOulu9wZ9...
-
https://ids.ac.id/object-oriented-programming/ https://techvidvan.com/tutorials/java-class/ https://www.youtube.com/watch?v=TViMwj692Xo...
