<!–
LANDING PAGE PELATIHAN & SERTIFIKASI DSC LST FMIPA UI
Cara cepat:
1. Salin seluruh kode ke blok "Custom HTML" WordPress.
2. Ganti setiap URL bertuliskan https://LINK-REGISTRASI-ANDA…
3. Ganti tanggal, format, biaya, dan status program sesuai informasi terbaru.
4. Jika WordPress menghapus atau , pindahkan bagian CSS ke
Appearance > Customize > Additional CSS dan JS ke plugin Code Snippets/WPCode.
–>
.dsc-training-page {
–dsc-navy: #071b33;
–dsc-navy-2: #0d2b4b;
–dsc-blue: #145da0;
–dsc-yellow: #f5b700;
–dsc-yellow-2: #ffd667;
–dsc-white: #ffffff;
–dsc-bg: #f5f8fc;
–dsc-text: #18263a;
–dsc-muted: #627086;
–dsc-line: #dce5ef;
–dsc-success: #16866b;
–dsc-shadow: 0 18px 50px rgba(7, 27, 51, 0.12);
–dsc-radius: 24px;
–dsc-radius-sm: 16px;
position: relative;
overflow: hidden;
width: 100%;
background: var(–dsc-bg);
color: var(–dsc-text);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI”, sans-serif;
line-height: 1.6;
}
.dsc-training-page *,
.dsc-training-page *::before,
.dsc-training-page *::after {
box-sizing: border-box;
}
.dsc-training-page a {
color: inherit;
text-decoration: none;
}
.dsc-training-page button,
.dsc-training-page a {
-webkit-tap-highlight-color: transparent;
}
.dsc-training-page button {
font: inherit;
}
.dsc-container {
width: min(1180px, calc(100% – 40px));
margin-inline: auto;
}
.dsc-section {
padding: 88px 0;
}
.dsc-section-head {
max-width: 760px;
margin-bottom: 34px;
}
.dsc-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
color: #8a6500;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.11em;
text-transform: uppercase;
}
.dsc-eyebrow::before {
width: 34px;
height: 3px;
border-radius: 999px;
background: var(–dsc-yellow);
content: “”;
}
.dsc-title {
margin: 0;
color: var(–dsc-navy);
font-size: clamp(2rem, 4vw, 3.45rem);
line-height: 1.08;
letter-spacing: -0.04em;
}
.dsc-subtitle {
margin: 16px 0 0;
color: var(–dsc-muted);
font-size: clamp(1rem, 1.5vw, 1.12rem);
}
.dsc-btn {
display: inline-flex;
min-height: 50px;
align-items: center;
justify-content: center;
gap: 9px;
padding: 0 22px;
border: 1px solid transparent;
border-radius: 13px;
font-weight: 800;
line-height: 1;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.dsc-btn:hover {
transform: translateY(-2px);
}
.dsc-btn:focus-visible,
.dsc-filter:focus-visible,
.dsc-faq-button:focus-visible {
outline: 3px solid rgba(245, 183, 0, 0.5);
outline-offset: 3px;
}
.dsc-btn-primary {
background: var(–dsc-yellow);
color: var(–dsc-navy);
box-shadow: 0 12px 28px rgba(245, 183, 0, 0.28);
}
.dsc-btn-primary:hover {
background: #ffc72c;
box-shadow: 0 16px 34px rgba(245, 183, 0, 0.38);
}
.dsc-btn-secondary {
border-color: rgba(255, 255, 255, 0.25);
background: rgba(255, 255, 255, 0.08);
color: var(–dsc-white);
backdrop-filter: blur(8px);
}
.dsc-btn-secondary:hover {
border-color: rgba(255, 255, 255, 0.45);
background: rgba(255, 255, 255, 0.14);
}
.dsc-arrow {
font-size: 1.15em;
transition: transform 0.2s ease;
}
.dsc-btn:hover .dsc-arrow {
transform: translateX(3px);
}
/* Hero */
.dsc-hero {
position: relative;
isolation: isolate;
overflow: hidden;
min-height: 710px;
padding: 92px 0 84px;
background:
radial-gradient(circle at 80% 16%, rgba(245, 183, 0, 0.22), transparent 27%),
radial-gradient(circle at 88% 78%, rgba(53, 163, 255, 0.16), transparent 30%),
linear-gradient(135deg, #06182d 0%, #0a2847 55%, #0b355c 100%);
color: var(–dsc-white);
}
.dsc-hero::before,
.dsc-hero::after {
position: absolute;
z-index: -1;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 50%;
content: “”;
}
.dsc-hero::before {
top: -270px;
right: -180px;
width: 680px;
height: 680px;
}
.dsc-hero::after {
right: 140px;
bottom: -330px;
width: 620px;
height: 620px;
}
.dsc-hero-grid {
display: grid;
align-items: center;
gap: 62px;
grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr);
}
.dsc-hero-kicker {
display: inline-flex;
align-items: center;
gap: 9px;
margin-bottom: 22px;
padding: 9px 13px;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
color: #f7d66c;
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
backdrop-filter: blur(10px);
}
.dsc-pulse {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(–dsc-yellow);
box-shadow: 0 0 0 6px rgba(245, 183, 0, 0.12);
}
.dsc-hero h1 {
max-width: 800px;
margin: 0;
font-size: clamp(2.7rem, 6vw, 5.6rem);
line-height: 0.98;
letter-spacing: -0.055em;
}
.dsc-hero h1 span {
color: var(–dsc-yellow);
}
.dsc-hero-copy {
max-width: 700px;
margin: 24px 0 0;
color: rgba(255, 255, 255, 0.78);
font-size: clamp(1rem, 1.7vw, 1.18rem);
}
.dsc-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 13px;
margin-top: 34px;
}
.dsc-hero-trust {
display: flex;
flex-wrap: wrap;
gap: 12px 24px;
margin-top: 34px;
color: rgba(255, 255, 255, 0.72);
font-size: 0.92rem;
}
.dsc-trust-item {
display: inline-flex;
align-items: center;
gap: 8px;
}
.dsc-check {
display: inline-grid;
width: 21px;
height: 21px;
place-items: center;
border-radius: 50%;
background: rgba(245, 183, 0, 0.16);
color: var(–dsc-yellow);
font-size: 0.72rem;
font-weight: 900;
}
.dsc-hero-panel {
position: relative;
padding: 24px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 28px;
background: rgba(255, 255, 255, 0.09);
box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28);
backdrop-filter: blur(16px);
}
.dsc-panel-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 19px;
}
.dsc-panel-label {
color: rgba(255, 255, 255, 0.62);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.dsc-panel-status {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 10px;
border-radius: 999px;
background: rgba(34, 197, 94, 0.12);
color: #8df5ad;
font-size: 0.76rem;
font-weight: 800;
}
.dsc-mini-program {
display: grid;
align-items: center;
gap: 15px;
padding: 15px;
border-radius: 17px;
background: rgba(255, 255, 255, 0.09);
grid-template-columns: 46px minmax(0, 1fr);
}
.dsc-mini-program + .dsc-mini-program {
margin-top: 11px;
}
.dsc-mini-icon {
display: grid;
width: 46px;
height: 46px;
place-items: center;
border-radius: 14px;
background: var(–dsc-yellow);
color: var(–dsc-navy);
font-size: 1.15rem;
font-weight: 900;
}
.dsc-mini-program strong {
display: block;
margin-bottom: 2px;
color: var(–dsc-white);
font-size: 0.96rem;
}
.dsc-mini-program span {
color: rgba(255, 255, 255, 0.58);
font-size: 0.8rem;
}
.dsc-data-orbit {
position: absolute;
top: -31px;
right: -28px;
display: grid;
width: 80px;
height: 80px;
place-items: center;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 50%;
background: linear-gradient(135deg, var(–dsc-yellow), var(–dsc-yellow-2));
color: var(–dsc-navy);
box-shadow: 0 18px 40px rgba(245, 183, 0, 0.25);
font-size: 1.5rem;
font-weight: 900;
transform: rotate(7deg);
}
/* Info strip */
.dsc-info-strip {
position: relative;
z-index: 3;
margin-top: -38px;
}
.dsc-info-grid {
display: grid;
overflow: hidden;
border: 1px solid rgba(220, 229, 239, 0.8);
border-radius: 22px;
background: var(–dsc-white);
box-shadow: var(–dsc-shadow);
grid-template-columns: repeat(4, 1fr);
}
.dsc-info-item {
position: relative;
padding: 26px 23px;
}
.dsc-info-item:not(:last-child)::after {
position: absolute;
top: 24%;
right: 0;
width: 1px;
height: 52%;
background: var(–dsc-line);
content: “”;
}
.dsc-info-item strong {
display: block;
margin-bottom: 3px;
color: var(–dsc-navy);
font-size: 1.08rem;
}
.dsc-info-item span {
color: var(–dsc-muted);
font-size: 0.88rem;
}
/* Programs */
.dsc-programs {
padding-top: 110px;
}
.dsc-program-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 28px;
}
.dsc-filters {
display: flex;
flex-wrap: wrap;
gap: 9px;
}
.dsc-filter {
min-height: 42px;
padding: 0 16px;
border: 1px solid var(–dsc-line);
border-radius: 999px;
background: var(–dsc-white);
color: var(–dsc-muted);
font-weight: 750;
cursor: pointer;
transition: all 0.2s ease;
}
.dsc-filter:hover,
.dsc-filter.is-active {
border-color: var(–dsc-navy);
background: var(–dsc-navy);
color: var(–dsc-white);
}
.dsc-results-count {
flex: 0 0 auto;
color: var(–dsc-muted);
font-size: 0.9rem;
}
.dsc-program-grid {
display: grid;
gap: 22px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.dsc-program-card {
position: relative;
display: flex;
min-height: 100%;
overflow: hidden;
flex-direction: column;
border: 1px solid var(–dsc-line);
border-radius: var(–dsc-radius);
background: var(–dsc-white);
box-shadow: 0 12px 34px rgba(7, 27, 51, 0.06);
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.dsc-program-card:hover {
border-color: rgba(20, 93, 160, 0.28);
box-shadow: 0 22px 55px rgba(7, 27, 51, 0.13);
transform: translateY(-6px);
}
.dsc-program-card[hidden] {
display: none;
}
.dsc-card-cover {
position: relative;
min-height: 164px;
overflow: hidden;
padding: 22px;
background:
radial-gradient(circle at 82% 18%, rgba(245, 183, 0, 0.45), transparent 28%),
linear-gradient(135deg, #0a2745, #104a7b);
color: var(–dsc-white);
}
.dsc-card-cover::before,
.dsc-card-cover::after {
position: absolute;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 50%;
content: “”;
}
.dsc-card-cover::before {
right: -45px;
bottom: -72px;
width: 160px;
height: 160px;
}
.dsc-card-cover::after {
right: 55px;
bottom: -52px;
width: 112px;
height: 112px;
}
.dsc-card-cover.dsc-cover-gold {
background:
radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.26), transparent 28%),
linear-gradient(135deg, #946d00, #e0a600);
}
.dsc-card-cover.dsc-cover-teal {
background:
radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.2), transparent 28%),
linear-gradient(135deg, #0c4f58, #15857e);
}
.dsc-card-cover.dsc-cover-indigo {
background:
radial-gradient(circle at 82% 18%, rgba(245, 183, 0, 0.28), transparent 28%),
linear-gradient(135deg, #202e63, #3d57a5);
}
.dsc-card-cover.dsc-cover-purple {
background:
radial-gradient(circle at 82% 18%, rgba(245, 183, 0, 0.25), transparent 28%),
linear-gradient(135deg, #44225f, #70449a);
}
.dsc-card-cover.dsc-cover-slate {
background:
radial-gradient(circle at 82% 18%, rgba(245, 183, 0, 0.28), transparent 28%),
linear-gradient(135deg, #263545, #4a6278);
}
.dsc-card-badges {
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.dsc-badge {
display: inline-flex;
align-items: center;
min-height: 29px;
padding: 0 10px;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 999px;
background: rgba(255, 255, 255, 0.13);
color: var(–dsc-white);
font-size: 0.72rem;
font-weight: 800;
backdrop-filter: blur(7px);
}
.dsc-card-symbol {
position: absolute;
right: 22px;
bottom: 15px;
z-index: 1;
color: rgba(255, 255, 255, 0.2);
font-size: 4rem;
font-weight: 900;
line-height: 1;
}
.dsc-card-body {
display: flex;
flex: 1;
flex-direction: column;
padding: 24px;
}
.dsc-card-title {
margin: 0;
color: var(–dsc-navy);
font-size: 1.28rem;
line-height: 1.28;
letter-spacing: -0.02em;
}
.dsc-card-description {
margin: 11px 0 19px;
color: var(–dsc-muted);
font-size: 0.91rem;
}
.dsc-card-meta {
display: grid;
gap: 10px;
margin: 0 0 22px;
padding: 0;
list-style: none;
}
.dsc-card-meta li {
display: grid;
align-items: start;
gap: 10px;
color: #42536a;
font-size: 0.86rem;
grid-template-columns: 22px minmax(0, 1fr);
}
.dsc-meta-icon {
display: inline-grid;
width: 22px;
height: 22px;
place-items: center;
border-radius: 7px;
background: #edf3f9;
color: var(–dsc-blue);
font-size: 0.72rem;
font-weight: 900;
}
.dsc-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 13px;
margin-top: auto;
padding-top: 19px;
border-top: 1px solid var(–dsc-line);
}
.dsc-status {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(–dsc-success);
font-size: 0.78rem;
font-weight: 850;
}
.dsc-status::before {
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 0 4px rgba(22, 134, 107, 0.1);
content: “”;
}
.dsc-status.dsc-status-soon {
color: #9a6c00;
}
.dsc-card-link {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(–dsc-navy);
font-size: 0.86rem;
font-weight: 850;
}
.dsc-card-link:hover {
color: var(–dsc-blue);
}
/* Why */
.dsc-why {
background: var(–dsc-white);
}
.dsc-why-grid {
display: grid;
align-items: center;
gap: 58px;
grid-template-columns: 0.9fr 1.1fr;
}
.dsc-feature-panel {
position: relative;
min-height: 500px;
overflow: hidden;
padding: 34px;
border-radius: 30px;
background:
radial-gradient(circle at 22% 16%, rgba(245, 183, 0, 0.25), transparent 28%),
linear-gradient(145deg, #071b33, #103b65);
box-shadow: var(–dsc-shadow);
color: var(–dsc-white);
}
.dsc-feature-panel::before {
position: absolute;
right: -85px;
bottom: -110px;
width: 330px;
height: 330px;
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 50%;
content: “”;
}
.dsc-panel-quote {
position: relative;
z-index: 1;
max-width: 430px;
margin: 0;
font-size: clamp(1.55rem, 3vw, 2.5rem);
font-weight: 800;
line-height: 1.17;
letter-spacing: -0.035em;
}
.dsc-panel-quote span {
color: var(–dsc-yellow);
}
.dsc-panel-note {
position: relative;
z-index: 1;
max-width: 430px;
margin-top: 20px;
color: rgba(255, 255, 255, 0.68);
}
.dsc-metric-stack {
position: absolute;
right: 28px;
bottom: 28px;
left: 28px;
z-index: 1;
display: grid;
gap: 11px;
grid-template-columns: repeat(3, 1fr);
}
.dsc-metric {
padding: 17px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 16px;
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(8px);
}
.dsc-metric strong {
display: block;
margin-bottom: 3px;
color: var(–dsc-yellow);
font-size: 1.25rem;
}
.dsc-metric span {
color: rgba(255, 255, 255, 0.62);
font-size: 0.75rem;
}
.dsc-feature-list {
display: grid;
gap: 15px;
margin-top: 28px;
}
.dsc-feature-item {
display: grid;
align-items: start;
gap: 15px;
padding: 18px;
border: 1px solid var(–dsc-line);
border-radius: 17px;
background: #fbfdff;
grid-template-columns: 46px minmax(0, 1fr);
}
.dsc-feature-icon {
display: grid;
width: 46px;
height: 46px;
place-items: center;
border-radius: 14px;
background: #fff5cc;
color: #8a6500;
font-weight: 900;
}
.dsc-feature-item strong {
display: block;
margin-bottom: 3px;
color: var(–dsc-navy);
}
.dsc-feature-item p {
margin: 0;
color: var(–dsc-muted);
font-size: 0.88rem;
}
/* Steps */
.dsc-steps-grid {
display: grid;
gap: 18px;
counter-reset: dsc-step;
grid-template-columns: repeat(4, 1fr);
}
.dsc-step {
position: relative;
padding: 26px;
border: 1px solid var(–dsc-line);
border-radius: 20px;
background: var(–dsc-white);
counter-increment: dsc-step;
}
.dsc-step::before {
display: grid;
width: 42px;
height: 42px;
margin-bottom: 19px;
place-items: center;
border-radius: 13px;
background: var(–dsc-navy);
color: var(–dsc-yellow);
content: counter(dsc-step, decimal-leading-zero);
font-size: 0.82rem;
font-weight: 900;
}
.dsc-step h3 {
margin: 0 0 7px;
color: var(–dsc-navy);
font-size: 1.02rem;
}
.dsc-step p {
margin: 0;
color: var(–dsc-muted);
font-size: 0.86rem;
}
/* FAQ */
.dsc-faq-wrap {
display: grid;
align-items: start;
gap: 48px;
grid-template-columns: 0.78fr 1.22fr;
}
.dsc-faq-list {
display: grid;
gap: 12px;
}
.dsc-faq-item {
overflow: hidden;
border: 1px solid var(–dsc-line);
border-radius: 17px;
background: var(–dsc-white);
}
.dsc-faq-button {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
gap: 15px;
padding: 20px 21px;
border: 0;
background: transparent;
color: var(–dsc-navy);
text-align: left;
font-weight: 800;
cursor: pointer;
}
.dsc-faq-plus {
position: relative;
flex: 0 0 auto;
width: 28px;
height: 28px;
border-radius: 9px;
background: #edf3f9;
}
.dsc-faq-plus::before,
.dsc-faq-plus::after {
position: absolute;
top: 50%;
left: 50%;
width: 11px;
height: 2px;
border-radius: 99px;
background: var(–dsc-navy);
content: “”;
transform: translate(-50%, -50%);
transition: transform 0.2s ease;
}
.dsc-faq-plus::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.dsc-faq-button[aria-expanded=”true”] .dsc-faq-plus::after {
transform: translate(-50%, -50%) rotate(0);
}
.dsc-faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.dsc-faq-answer-inner {
padding: 0 21px 21px;
color: var(–dsc-muted);
font-size: 0.9rem;
}
/* Closing CTA */
.dsc-closing {
padding-top: 20px;
padding-bottom: 94px;
}
.dsc-closing-box {
position: relative;
overflow: hidden;
padding: 52px;
border-radius: 30px;
background:
radial-gradient(circle at 85% 15%, rgba(245, 183, 0, 0.22), transparent 25%),
linear-gradient(135deg, #071b33, #0e3f6a);
color: var(–dsc-white);
box-shadow: var(–dsc-shadow);
}
.dsc-closing-box::before {
position: absolute;
right: -70px;
bottom: -170px;
width: 360px;
height: 360px;
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 50%;
content: “”;
}
.dsc-closing-content {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 34px;
}
.dsc-closing h2 {
max-width: 720px;
margin: 0;
font-size: clamp(2rem, 4vw, 3.35rem);
line-height: 1.06;
letter-spacing: -0.04em;
}
.dsc-closing p {
max-width: 650px;
margin: 14px 0 0;
color: rgba(255, 255, 255, 0.7);
}
.dsc-closing-actions {
display: flex;
flex: 0 0 auto;
flex-direction: column;
gap: 10px;
}
.dsc-admin-note {
color: rgba(255, 255, 255, 0.55);
font-size: 0.75rem;
text-align: center;
}
.dsc-mobile-cta {
display: none;
}
@media (max-width: 1024px) {
.dsc-hero-grid,
.dsc-why-grid,
.dsc-faq-wrap {
grid-template-columns: 1fr;
}
.dsc-hero {
min-height: auto;
}
.dsc-hero-panel {
max-width: 700px;
}
.dsc-program-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dsc-info-grid {
grid-template-columns: repeat(2, 1fr);
}
.dsc-info-item:nth-child(2)::after {
display: none;
}
.dsc-info-item:nth-child(-n + 2) {
border-bottom: 1px solid var(–dsc-line);
}
.dsc-steps-grid {
grid-template-columns: repeat(2, 1fr);
}
.dsc-closing-content {
align-items: flex-start;
flex-direction: column;
}
.dsc-closing-actions {
width: 100%;
align-items: flex-start;
}
}
@media (max-width: 720px) {
.dsc-container {
width: min(100% – 26px, 1180px);
}
.dsc-section {
padding: 66px 0;
}
.dsc-hero {
padding: 68px 0 72px;
}
.dsc-hero-grid {
gap: 42px;
}
.dsc-hero h1 {
font-size: clamp(2.55rem, 13vw, 4.1rem);
}
.dsc-hero-actions,
.dsc-hero-actions .dsc-btn {
width: 100%;
}
.dsc-data-orbit {
top: -23px;
right: -8px;
width: 66px;
height: 66px;
}
.dsc-info-strip {
margin-top: -24px;
}
.dsc-info-grid,
.dsc-program-grid,
.dsc-steps-grid,
.dsc-metric-stack {
grid-template-columns: 1fr;
}
.dsc-info-item {
padding: 20px;
border-bottom: 1px solid var(–dsc-line);
}
.dsc-info-item:last-child {
border-bottom: 0;
}
.dsc-info-item::after {
display: none;
}
.dsc-programs {
padding-top: 84px;
}
.dsc-program-toolbar {
align-items: flex-start;
flex-direction: column;
}
.dsc-results-count {
display: none;
}
.dsc-filters {
overflow-x: auto;
width: 100%;
flex-wrap: nowrap;
padding-bottom: 4px;
scrollbar-width: none;
}
.dsc-filters::-webkit-scrollbar {
display: none;
}
.dsc-filter {
flex: 0 0 auto;
}
.dsc-feature-panel {
min-height: 620px;
padding: 28px;
}
.dsc-metric-stack {
right: 20px;
bottom: 20px;
left: 20px;
}
.dsc-closing-box {
padding: 34px 25px;
}
.dsc-closing-actions,
.dsc-closing-actions .dsc-btn {
width: 100%;
}
.dsc-mobile-cta {
position: fixed;
right: 12px;
bottom: 12px;
left: 12px;
z-index: 999;
display: flex;
align-items: center;
justify-content: space-between;
gap: 13px;
padding: 11px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 17px;
background: rgba(7, 27, 51, 0.94);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
color: var(–dsc-white);
backdrop-filter: blur(12px);
}
.dsc-mobile-cta span {
padding-left: 5px;
font-size: 0.77rem;
font-weight: 750;
}
.dsc-mobile-cta .dsc-btn {
min-height: 42px;
padding: 0 15px;
border-radius: 11px;
font-size: 0.78rem;
}
}
@media (prefers-reduced-motion: reduce) {
.dsc-training-page *,
.dsc-training-page *::before,
.dsc-training-page *::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
Program Pengembangan Kompetensi DSC
Tingkatkan kompetensi.
Percepat karier.
Pelatihan data science, artificial intelligence, data analytics, dan
sertifikasi kompetensi yang dirancang bersama akademisi serta praktisi
untuk kebutuhan dunia kerja.
✓ Materi aplikatif
✓ Mentor berpengalaman
✓ Sertifikat program
DS
Program Pilihan
Pendaftaran aktif
01
Data Science Training
Fondasi analisis data hingga machine learning
02
Sertifikasi Kompetensi BNSP
Program pelatihan dan uji kompetensi
03
In-House Training
Kurikulum khusus untuk institusi dan perusahaan
Berbasis Kompetensi
Fokus pada keterampilan yang dapat langsung digunakan.
Online & Offline
Pilihan format belajar yang fleksibel.
Project-Based
Latihan menggunakan studi kasus dan proyek nyata.
Untuk Berbagai Level
Mulai dari pemula hingga profesional.
Program Pelatihan
Pilih program sesuai tujuan belajar Anda
Gunakan filter kategori untuk menemukan pelatihan reguler, workshop,
atau program sertifikasi yang paling sesuai.
Data Science Training Basic
Pelajari alur kerja data science, Python, pengolahan data, visualisasi,
dan pengantar machine learning secara terstruktur.
Pelatihan & Sertifikasi Data Scientist
Program persiapan kompetensi dan uji sertifikasi untuk peserta yang
ingin memperoleh pengakuan profesional di bidang data science.
Sertifikasi
Data Analyst
%
Pelatihan & Sertifikasi Data Analyst
Kuasai proses pengumpulan, pembersihan, analisis, visualisasi, dan
penyampaian insight data untuk kebutuhan bisnis.
Excel in Action: From Data to Insight
Workshop ramah pemula untuk membersihkan data, melakukan eksplorasi,
menggunakan rumus penting, dan membangun insight.
Artificial Intelligence & Machine Learning
Pelatihan konsep dan praktik machine learning, evaluasi model, serta
implementasi AI untuk menyelesaikan masalah nyata.
In-House Training untuk Institusi
Program pelatihan khusus dengan topik, level, studi kasus, jadwal,
dan metode pembelajaran yang disesuaikan dengan kebutuhan organisasi.
Belajar bukan hanya memahami konsep, tetapi mampu
mengubah data menjadi keputusan.
Program DSC memadukan fondasi akademik, praktik terarah, dan kebutuhan
kompetensi profesional.
01
Konsep yang terstruktur
02
Praktik dan studi kasus
03
Evaluasi kompetensi
Mengapa DSC
Pengalaman belajar yang relevan dan terarah
Dirancang untuk membantu peserta membangun keterampilan teknis sekaligus
cara berpikir analitis yang dibutuhkan di lingkungan akademik dan industri.
01
Kurikulum aplikatif
Materi disusun dari konsep inti menuju praktik dan penyelesaian studi kasus.
02
Pengajar akademisi dan praktisi
Peserta memperoleh perspektif ilmiah sekaligus pengalaman implementasi.
03
Jalur belajar fleksibel
Tersedia program publik, sertifikasi, workshop, dan pelatihan khusus institusi.
Cara Mendaftar
Empat langkah sederhana untuk mulai belajar
Pilih program
Temukan program yang sesuai dengan level, tujuan, dan jadwal Anda.
Klik daftar
Tombol pendaftaran akan membuka formulir Google Apps Script.
Lengkapi data
Isi data peserta dan unggah dokumen yang dibutuhkan.
Terima konfirmasi
Tim DSC akan mengirimkan informasi lanjutan melalui kontak terdaftar.
Informasi Umum
Pertanyaan yang sering diajukan
Sesuaikan jawaban di bawah dengan kebijakan masing-masing program.
Apakah program dapat diikuti oleh pemula?
Ya. Setiap kartu program mencantumkan level peserta. Program tingkat dasar
dirancang agar dapat diikuti peserta yang belum memiliki pengalaman teknis.
Apakah peserta memperoleh sertifikat?
Peserta yang memenuhi ketentuan program akan memperoleh sertifikat pelatihan.
Untuk program sertifikasi kompetensi, ketentuan sertifikat mengikuti hasil asesmen.
Bagaimana jika tautan pendaftaran tidak dapat dibuka?
Hubungi admin DSC melalui tombol konsultasi dan sertakan nama program yang
ingin diikuti serta tangkapan layar kendala yang muncul.
Apakah tersedia pelatihan khusus untuk perusahaan?
Ya. DSC menyediakan in-house training dengan topik, studi kasus, format,
jumlah peserta, dan jadwal yang dapat disesuaikan dengan kebutuhan institusi.
Siap membangun kompetensi data untuk masa depan?
Temukan program terbaik untuk Anda atau konsultasikan kebutuhan pelatihan
khusus bersama tim Data Science Center LST FMIPA UI.
(function () {
const root = document.querySelector(“.dsc-training-page”);
if (!root) return;
// Filter program
const filters = root.querySelectorAll(“.dsc-filter”);
const cards = root.querySelectorAll(“.dsc-program-card”);
const count = root.querySelector(“#dsc-program-count”);
filters.forEach(function (button) {
button.addEventListener(“click”, function () {
const selected = button.getAttribute(“data-filter”);
let visible = 0;
filters.forEach(function (item) {
item.classList.toggle(“is-active”, item === button);
});
cards.forEach(function (card) {
const category = card.getAttribute(“data-category”);
const show = selected === “all” || selected === category;
card.hidden = !show;
if (show) visible += 1;
});
if (count) count.textContent = visible;
});
});
// FAQ accordion
const faqButtons = root.querySelectorAll(“.dsc-faq-button”);
faqButtons.forEach(function (button) {
button.addEventListener(“click”, function () {
const answer = button.nextElementSibling;
const expanded = button.getAttribute(“aria-expanded”) === “true”;
faqButtons.forEach(function (otherButton) {
if (otherButton !== button) {
otherButton.setAttribute(“aria-expanded”, “false”);
const otherAnswer = otherButton.nextElementSibling;
otherAnswer.style.maxHeight = null;
}
});
button.setAttribute(“aria-expanded”, String(!expanded));
answer.style.maxHeight = expanded ? null : answer.scrollHeight + “px”;
});
});
// Smooth scroll hanya untuk anchor di dalam landing page
root.querySelectorAll(‘a[href^=”#”]’).forEach(function (link) {
link.addEventListener(“click”, function (event) {
const target = document.querySelector(link.getAttribute(“href”));
if (!target) return;
event.preventDefault();
target.scrollIntoView({ behavior: “smooth”, block: “start” });
});
});
})();