Pages Medium
LMS — Professional Certification Landing
A polished, B2B-credible landing page for a professional certification body, built in vanilla HTML, CSS, and JavaScript. It pairs an authoritative slate-and-gold hero and a blockchain-style credential card with filterable certification paths, an interactive exam-blueprint panel showing domain weightings, animated salary-uplift counters, employer-recognition logos, serif testimonials, and a validating enrollment form. Fully responsive from desktop down to mobile, with scroll-reveal motion, a mobile nav, and an accessible toast helper.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--slate: #1f2937;
--slate-d: #111827;
--slate-2: #374151;
--slate-3: #4b5563;
--gold: #c8a24b;
--gold-d: #ab8638;
--gold-50: #f7f1e3;
--ink: #1f2937;
--ink-2: #374151;
--muted: #6b7280;
--bg: #f6f7f9;
--surface: #ffffff;
--surface-2: #fbfbfc;
--line: rgba(31, 41, 55, 0.12);
--line-2: rgba(31, 41, 55, 0.07);
--ok: #2f9e6b;
--danger: #c0432f;
--r-sm: 8px;
--r-md: 14px;
--r-lg: 20px;
--r-xl: 28px;
--sh-sm: 0 1px 2px rgba(17, 24, 39, 0.06), 0 1px 3px rgba(17, 24, 39, 0.05);
--sh-md: 0 8px 24px rgba(17, 24, 39, 0.08);
--sh-lg: 0 24px 60px rgba(17, 24, 39, 0.14);
--max: 1140px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: "Inter", system-ui, -apple-system, sans-serif;
font-size: 16px;
line-height: 1.5;
color: var(--ink);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
ul { margin: 0; padding: 0; list-style: none; }
.wrap { width: min(100% - 40px, var(--max)); margin-inline: auto; }
.skip {
position: absolute; left: -999px; top: 0; z-index: 200;
background: var(--slate); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }
/* Buttons */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-weight: 600; font-size: 0.94rem; padding: 11px 20px; border-radius: var(--r-sm);
border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
white-space: nowrap; font-family: inherit;
}
.btn.lg { padding: 14px 26px; font-size: 1rem; }
.btn.sm { padding: 8px 14px; font-size: 0.85rem; }
.btn.full { width: 100%; }
.btn-gold { background: var(--gold); color: var(--slate-d); box-shadow: 0 6px 18px rgba(200, 162, 75, 0.32); }
.btn-gold:hover { background: var(--gold-d); transform: translateY(-2px); }
.btn-dark { background: var(--slate); color: #fff; }
.btn-dark:hover { background: var(--slate-d); transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--slate); border-color: var(--line); }
.btn-outline:hover { border-color: var(--slate); background: #fff; }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { color: var(--slate-d); }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
outline: 2px solid var(--gold-d); outline-offset: 2px;
}
/* Nav */
.nav {
position: sticky; top: 0; z-index: 100;
background: rgba(255, 255, 255, 0.88); backdrop-filter: saturate(1.4) blur(10px);
border-bottom: 1px solid var(--line-2);
}
.nav.scrolled { box-shadow: var(--sh-sm); }
.nav-inner { display: flex; align-items: center; gap: 24px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; }
.brand-mark {
width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
background: var(--slate); color: var(--gold); font-weight: 800; font-size: 1.05rem;
border: 1px solid rgba(200, 162, 75, 0.5);
}
.brand-text { font-size: 1.08rem; letter-spacing: -0.02em; }
.brand-sub { color: var(--gold-d); font-weight: 700; }
.nav-links { display: flex; gap: 26px; margin-left: 12px; }
.nav-links a { font-weight: 500; font-size: 0.94rem; color: var(--ink-2); position: relative; padding: 4px 0; }
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--gold); transition: width .2s ease; }
.nav-links a:hover { color: var(--slate-d); }
.nav-links a:hover::after { width: 100%; }
.nav-actions { display: flex; gap: 10px; margin-left: auto; align-items: center; }
.hamburger { display: none; background: none; border: 0; width: 42px; height: 42px; flex-direction: column; gap: 5px; align-items: center; justify-content: center; cursor: pointer; margin-left: auto; }
.hamburger span { width: 22px; height: 2px; background: var(--slate); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-nav {
display: none; flex-direction: column; gap: 4px; padding: 12px 20px 20px;
background: #fff; border-bottom: 1px solid var(--line);
}
.mobile-nav.open { display: flex; }
.mobile-nav a { padding: 12px 4px; font-weight: 500; border-bottom: 1px solid var(--line-2); }
.mobile-nav a.btn { border-bottom: 0; margin-top: 10px; }
/* Hero */
.hero { padding: 64px 0 56px; background:
radial-gradient(900px 420px at 85% -10%, rgba(200, 162, 75, 0.14), transparent 60%),
linear-gradient(180deg, #fff, var(--bg)); }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; }
.eyebrow {
display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 600;
letter-spacing: 0.02em; color: var(--slate-2); background: var(--gold-50);
border: 1px solid rgba(200, 162, 75, 0.4); padding: 6px 12px; border-radius: 999px; text-transform: uppercase;
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-d); }
.hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.3rem); margin: 18px 0 16px; font-weight: 800; }
.gold-underline { position: relative; color: var(--slate-d); white-space: nowrap; }
.gold-underline::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 10px; background: rgba(200, 162, 75, 0.4); z-index: -1; border-radius: 4px; }
.lede { font-size: 1.08rem; color: var(--ink-2); max-width: 54ch; }
.hero-cta { display: flex; gap: 12px; margin: 26px 0 30px; flex-wrap: wrap; }
.hero-trust { display: flex; gap: 28px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid var(--line); }
.hero-trust li { display: flex; flex-direction: column; }
.hero-trust strong { font-size: 1.45rem; font-weight: 800; color: var(--slate-d); }
.hero-trust span { font-size: 0.82rem; color: var(--muted); }
/* Credential card */
.cred-card {
background: linear-gradient(165deg, var(--slate-d), var(--slate)); color: #fff;
border-radius: var(--r-lg); padding: 26px; box-shadow: var(--sh-lg);
border: 1px solid rgba(200, 162, 75, 0.3); position: relative; overflow: hidden;
}
.cred-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(400px 200px at 100% 0, rgba(200,162,75,.16), transparent 70%); }
.cred-card > * { position: relative; }
.cred-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.seal { color: var(--gold); }
.cred-status { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(200,162,75,.5); padding: 5px 10px; border-radius: 999px; }
.cred-kicker { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.cred-title { font-size: 1.5rem; font-weight: 700; color: #fff; margin: 4px 0 6px; }
.cred-id { font-size: 0.82rem; color: rgba(255,255,255,.55); font-variant-numeric: tabular-nums; }
.cred-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 20px 0 14px; }
.cred-meta div { display: flex; flex-direction: column; gap: 2px; }
.cred-meta span { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,.5); }
.cred-meta strong { font-size: 0.92rem; color: #fff; font-weight: 600; }
.cred-bar { height: 7px; border-radius: 999px; background: rgba(255,255,255,.16); overflow: hidden; }
.cred-bar-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-d)); border-radius: 999px; }
.cred-note { margin-top: 12px; font-size: 0.78rem; color: rgba(255,255,255,.62); }
/* Logos */
.logos { padding: 30px 0 8px; }
.logos-label { text-align: center; font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.logo-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 44px; }
.logo { font-weight: 700; font-size: 1.05rem; color: var(--slate-3); opacity: 0.7; letter-spacing: -0.01em; transition: opacity .2s ease, color .2s ease; }
.logo:hover { opacity: 1; color: var(--slate-d); }
/* Sections */
.section { padding: 72px 0; }
.sec-head { max-width: 640px; margin-bottom: 36px; }
.sec-kicker { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-d); margin-bottom: 12px; }
.sec-kicker.on-dark { color: var(--gold); }
.sec-head h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; }
.sec-head p { margin-top: 12px; color: var(--ink-2); font-size: 1.02rem; }
/* Filters */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.chip {
font-family: inherit; font-weight: 600; font-size: 0.88rem; padding: 9px 16px; border-radius: 999px;
border: 1px solid var(--line); background: #fff; color: var(--ink-2); cursor: pointer; transition: all .18s ease;
}
.chip:hover { border-color: var(--slate-3); }
.chip.is-active { background: var(--slate); color: #fff; border-color: var(--slate); }
/* Path grid */
.path-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.path-card {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
padding: 22px; display: flex; flex-direction: column; box-shadow: var(--sh-sm);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.path-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: rgba(200,162,75,.5); }
.path-card.hide { display: none; }
.path-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.lvl { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; }
.lvl-int { background: #eef4f1; color: var(--ok); }
.lvl-adv { background: var(--gold-50); color: var(--gold-d); }
.lvl-expert { background: var(--slate); color: var(--gold); }
.path-hours { font-size: 0.82rem; color: var(--muted); font-weight: 500; }
.path-card h3 { font-size: 1.18rem; font-weight: 700; margin-bottom: 8px; }
.path-card > p { color: var(--ink-2); font-size: 0.92rem; flex: 0 0 auto; }
.path-feat { margin: 16px 0; display: flex; flex-direction: column; gap: 8px; }
.path-feat li { position: relative; padding-left: 24px; font-size: 0.88rem; color: var(--ink-2); }
.path-feat li::before {
content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%;
background: var(--gold-50); border: 1px solid rgba(200,162,75,.5);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8l2.5 2.5L12 5' fill='none' stroke='%23ab8638' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: center;
}
.path-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line-2); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.price { font-size: 0.84rem; color: var(--muted); }
.price em { font-style: normal; font-weight: 800; font-size: 1.12rem; color: var(--slate-d); display: block; }
.path-empty { text-align: center; color: var(--muted); padding: 30px 0; font-weight: 500; }
/* Exam dark */
.section-dark { background: linear-gradient(160deg, var(--slate-d), var(--slate)); }
.on-dark { color: #fff; }
.on-dark-muted { color: rgba(255,255,255,.72); margin-top: 12px; max-width: 46ch; }
.exam-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; }
.exam-stats { display: flex; gap: 28px; margin-top: 28px; flex-wrap: wrap; }
.exam-stats div { display: flex; flex-direction: column; }
.exam-stats strong { font-size: 1.7rem; font-weight: 800; color: var(--gold); }
.exam-stats span { font-size: 0.82rem; color: rgba(255,255,255,.62); }
.exam-panel { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-lg); padding: 18px; }
.domains { display: flex; flex-direction: column; gap: 6px; }
.domain {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
font-family: inherit; text-align: left; width: 100%; cursor: pointer;
background: transparent; border: 1px solid transparent; border-radius: var(--r-sm);
padding: 12px 14px; color: rgba(255,255,255,.82); transition: all .18s ease;
}
.domain:hover { background: rgba(255,255,255,.06); }
.domain.is-active { background: rgba(200,162,75,.16); border-color: rgba(200,162,75,.5); color: #fff; }
.d-name { font-weight: 600; font-size: 0.96rem; }
.d-weight { font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
.domain-detail { margin-top: 14px; padding: 18px 14px 6px; border-top: 1px solid rgba(255,255,255,.12); }
.dd-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.14); overflow: hidden; }
.dd-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-d)); border-radius: 999px; transition: width .5s cubic-bezier(.4,0,.2,1); }
.dd-weight { color: rgba(255,255,255,.7); font-size: 0.84rem; margin: 10px 0 4px; }
.dd-weight span { color: var(--gold); font-weight: 700; }
.dd-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.dd-list li { position: relative; padding-left: 20px; color: rgba(255,255,255,.8); font-size: 0.9rem; }
.dd-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 2px; background: var(--gold); }
/* Proof / stats */
.section-proof { background: linear-gradient(180deg, var(--bg), #fff); }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stat-card {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
padding: 26px 22px; box-shadow: var(--sh-sm); border-top: 3px solid var(--gold);
}
.stat-num { font-size: 2.6rem; font-weight: 800; color: var(--slate-d); line-height: 1; display: block; font-variant-numeric: tabular-nums; }
.stat-label { margin-top: 12px; font-weight: 700; color: var(--ink); }
.stat-sub { margin-top: 4px; font-size: 0.85rem; color: var(--muted); }
/* Testimonials */
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.quote { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px; box-shadow: var(--sh-sm); display: flex; flex-direction: column; gap: 14px; margin: 0; transition: transform .2s ease, box-shadow .2s ease; }
.quote:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.stars { color: var(--gold); letter-spacing: 2px; font-size: 0.95rem; }
.quote blockquote { margin: 0; font-family: "Source Serif 4", Georgia, serif; font-size: 1.05rem; color: var(--ink); line-height: 1.45; }
.quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--slate); color: var(--gold); display: grid; place-items: center; font-weight: 700; font-size: 0.85rem; }
.who { display: flex; flex-direction: column; }
.who strong { font-weight: 700; font-size: 0.94rem; }
.who em { font-style: normal; font-size: 0.82rem; color: var(--muted); }
/* Enroll */
.enroll { padding: 72px 0; background: linear-gradient(160deg, var(--slate-d), var(--slate)); color: #fff; }
.enroll-inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.enroll-copy h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; }
.enroll-copy > p { color: rgba(255,255,255,.74); margin-top: 14px; max-width: 46ch; }
.enroll-perks { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.enroll-perks li { position: relative; padding-left: 28px; color: rgba(255,255,255,.88); font-size: 0.96rem; }
.enroll-perks li::before {
content: ""; position: absolute; left: 0; top: 1px; width: 19px; height: 19px; border-radius: 50%;
background: rgba(200,162,75,.22); border: 1px solid var(--gold);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8l2.5 2.5L12 5' fill='none' stroke='%23c8a24b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: center;
}
.enroll-form { background: #fff; border-radius: var(--r-lg); padding: 28px; box-shadow: var(--sh-lg); color: var(--ink); }
.enroll-form h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: 18px; }
.enroll-form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; font-weight: 600; color: var(--ink-2); margin-bottom: 14px; }
.enroll-form input, .enroll-form select {
font-family: inherit; font-size: 0.95rem; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm);
color: var(--ink); background: var(--surface-2); transition: border-color .15s ease, box-shadow .15s ease;
}
.enroll-form input:focus, .enroll-form select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200,162,75,.18); outline: none; }
.enroll-form input.invalid { border-color: var(--danger); }
.err { color: var(--danger); font-weight: 600; font-size: 0.78rem; }
.form-fine { margin-top: 12px; text-align: center; font-size: 0.8rem; color: var(--muted); }
/* Footer */
.footer { background: var(--slate-d); color: rgba(255,255,255,.7); padding: 56px 0 24px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-brand .brand { color: #fff; margin-bottom: 14px; }
.footer-brand .brand-sub { color: var(--gold); }
.footer-brand p { font-size: 0.9rem; max-width: 38ch; }
.footer h4 { color: #fff; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; }
.footer nav a { display: block; font-size: 0.92rem; padding: 5px 0; color: rgba(255,255,255,.7); transition: color .15s ease; }
.footer nav a:hover { color: var(--gold); }
.footer-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 22px; font-size: 0.84rem; }
.footer-badges { display: flex; gap: 12px; }
.footer-badges span { border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 4px 12px; font-size: 0.76rem; }
/* Toast */
.toast {
position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 130%);
background: var(--slate-d); color: #fff; padding: 13px 20px; border-radius: var(--r-sm);
box-shadow: var(--sh-lg); font-weight: 600; font-size: 0.92rem; z-index: 300; opacity: 0;
transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .3s ease; border: 1px solid rgba(200,162,75,.4);
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }
/* Reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
/* Responsive */
@media (max-width: 940px) {
.hero-grid, .exam-grid, .enroll-inner { grid-template-columns: 1fr; gap: 36px; }
.hero-card { max-width: 420px; }
.path-grid, .quote-grid { grid-template-columns: repeat(2, 1fr); }
.stat-grid { grid-template-columns: repeat(2, 1fr); }
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
.nav-links, .nav-actions { display: none; }
.hamburger { display: flex; }
}
@media (max-width: 520px) {
.section { padding: 52px 0; }
.hero { padding: 40px 0 44px; }
.path-grid, .quote-grid, .stat-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.hero-trust { gap: 18px; }
.hero-cta .btn { flex: 1 1 100%; }
.exam-stats { gap: 18px; }
.footer-bar { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
* { scroll-behavior: auto !important; }
.reveal { opacity: 1; transform: none; transition: none; }
}(function () {
"use strict";
/* ---------- Toast helper ---------- */
var toastEl = document.getElementById("toast");
var toastTimer;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = msg;
toastEl.classList.add("show");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () {
toastEl.classList.remove("show");
}, 2800);
}
/* ---------- Sticky nav shadow ---------- */
var nav = document.querySelector(".nav");
function onScroll() {
if (!nav) return;
nav.classList.toggle("scrolled", window.scrollY > 8);
}
window.addEventListener("scroll", onScroll, { passive: true });
onScroll();
/* ---------- Mobile nav ---------- */
var burger = document.getElementById("hamburger");
var mobileNav = document.getElementById("mobileNav");
if (burger && mobileNav) {
burger.addEventListener("click", function () {
var open = mobileNav.classList.toggle("open");
burger.classList.toggle("open", open);
burger.setAttribute("aria-expanded", String(open));
});
mobileNav.querySelectorAll("a").forEach(function (a) {
a.addEventListener("click", function () {
mobileNav.classList.remove("open");
burger.classList.remove("open");
burger.setAttribute("aria-expanded", "false");
});
});
}
/* ---------- Certification path filter ---------- */
var chips = document.querySelectorAll(".chip");
var cards = document.querySelectorAll(".path-card");
var emptyMsg = document.getElementById("pathEmpty");
chips.forEach(function (chip) {
chip.addEventListener("click", function () {
chips.forEach(function (c) {
c.classList.remove("is-active");
c.setAttribute("aria-selected", "false");
});
chip.classList.add("is-active");
chip.setAttribute("aria-selected", "true");
var f = chip.dataset.filter;
var visible = 0;
cards.forEach(function (card) {
var show = f === "all" || card.dataset.cat === f;
card.classList.toggle("hide", !show);
if (show) visible++;
});
if (emptyMsg) emptyMsg.hidden = visible !== 0;
});
});
/* ---------- Exam domain selector ---------- */
var domainData = {
"Architecture & Design": [
"Map business requirements to reference architectures",
"Select compute, storage, and networking topologies",
"Design for multi-region failover and RTO/RPO targets"
],
"Reliability & Resilience": [
"Define availability targets and error budgets",
"Architect self-healing and graceful degradation",
"Plan disaster recovery and chaos validation"
],
"Security & Compliance": [
"Apply least-privilege identity and access models",
"Encrypt data in transit and at rest with key rotation",
"Map controls to ISO 27001 and SOC 2 evidence"
],
"Cost Optimization": [
"Right-size compute and exploit commitment discounts",
"Model unit economics and chargeback reporting",
"Detect and retire idle or orphaned resources"
],
"Operations & Automation": [
"Codify infrastructure with reviewable pipelines",
"Instrument observability: logs, metrics, traces",
"Automate release, rollback, and on-call runbooks"
],
"Data & Migration": [
"Plan phased, low-downtime migration waves",
"Choose data stores against access patterns",
"Govern lineage, retention, and residency"
]
};
var domains = document.querySelectorAll(".domain");
var ddFill = document.getElementById("ddFill");
var ddWeight = document.getElementById("ddWeight");
var ddList = document.getElementById("ddList");
domains.forEach(function (d) {
d.addEventListener("click", function () {
domains.forEach(function (x) {
x.classList.remove("is-active");
x.setAttribute("aria-selected", "false");
});
d.classList.add("is-active");
d.setAttribute("aria-selected", "true");
var weight = d.dataset.weight;
var name = d.querySelector(".d-name").textContent.trim();
if (ddFill) ddFill.style.width = weight + "%";
if (ddWeight) ddWeight.textContent = weight + "%";
if (ddList) {
var items = domainData[name] || [];
ddList.innerHTML = items
.map(function (t) { return "<li>" + t + "</li>"; })
.join("");
}
});
});
/* ---------- Animated stat counters ---------- */
function animateCount(el) {
var target = parseFloat(el.dataset.count);
var prefix = el.dataset.prefix || "";
var suffix = el.dataset.suffix || "";
var dur = 1200;
var start = performance.now();
function frame(now) {
var p = Math.min((now - start) / dur, 1);
var eased = 1 - Math.pow(1 - p, 3);
var val = Math.round(target * eased);
el.textContent = prefix + val + suffix;
if (p < 1) requestAnimationFrame(frame);
else el.textContent = prefix + target + suffix;
}
requestAnimationFrame(frame);
}
/* ---------- Scroll reveal + counter trigger ---------- */
var counted = new WeakSet();
if ("IntersectionObserver" in window) {
var io = new IntersectionObserver(function (entries) {
entries.forEach(function (e) {
if (!e.isIntersecting) return;
e.target.classList.add("in");
var stat = e.target.querySelector ? e.target.querySelector(".stat-num") : null;
if (e.target.classList.contains("stat-card") && stat && !counted.has(stat)) {
counted.add(stat);
animateCount(stat);
}
io.unobserve(e.target);
});
}, { threshold: 0.16, rootMargin: "0px 0px -40px 0px" });
document.querySelectorAll(".reveal").forEach(function (el) { io.observe(el); });
} else {
document.querySelectorAll(".reveal").forEach(function (el) { el.classList.add("in"); });
document.querySelectorAll(".stat-num").forEach(animateCount);
}
/* ---------- Enroll form ---------- */
var form = document.getElementById("enrollForm");
var emailInput = document.getElementById("fEmail");
var emailErr = document.getElementById("emailErr");
var nameInput = document.getElementById("fName");
function validEmail(v) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v); }
if (form) {
form.addEventListener("submit", function (e) {
e.preventDefault();
var ok = true;
if (!nameInput.value.trim()) {
nameInput.classList.add("invalid");
ok = false;
} else {
nameInput.classList.remove("invalid");
}
if (!validEmail(emailInput.value.trim())) {
emailInput.classList.add("invalid");
if (emailErr) emailErr.hidden = false;
ok = false;
} else {
emailInput.classList.remove("invalid");
if (emailErr) emailErr.hidden = true;
}
if (!ok) {
toast("Please complete the highlighted fields.");
return;
}
var cert = document.getElementById("fCert").value;
toast("Seat reserved — your " + cert + " kit is on the way.");
form.reset();
});
emailInput.addEventListener("input", function () {
if (emailErr && !emailErr.hidden && validEmail(emailInput.value.trim())) {
emailErr.hidden = true;
emailInput.classList.remove("invalid");
}
});
}
/* ---------- Path "Start path" buttons ---------- */
document.querySelectorAll(".path-card .btn-dark").forEach(function (b) {
b.addEventListener("click", function () {
var title = b.closest(".path-card").querySelector("h3").textContent;
toast("Added " + title + " to your enrollment.");
});
});
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Meridian Institute — Professional Certifications</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Source+Serif+4:opsz,wght@8..60,500;8..60,600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a class="skip" href="#main">Skip to content</a>
<header class="nav" id="top">
<div class="wrap nav-inner">
<a class="brand" href="#top" aria-label="Meridian Institute home">
<span class="brand-mark" aria-hidden="true">M</span>
<span class="brand-text">Meridian<span class="brand-sub">Institute</span></span>
</a>
<nav class="nav-links" aria-label="Primary">
<a href="#paths">Certifications</a>
<a href="#exam">Exam & Curriculum</a>
<a href="#proof">Outcomes</a>
<a href="#voices">Testimonials</a>
</nav>
<div class="nav-actions">
<a class="btn btn-ghost" href="#enroll">Sign in</a>
<a class="btn btn-gold" href="#enroll">Enroll now</a>
</div>
<button class="hamburger" id="hamburger" aria-label="Open menu" aria-expanded="false" aria-controls="mobileNav">
<span></span><span></span><span></span>
</button>
</div>
<nav class="mobile-nav" id="mobileNav" aria-label="Mobile">
<a href="#paths">Certifications</a>
<a href="#exam">Exam & Curriculum</a>
<a href="#proof">Outcomes</a>
<a href="#voices">Testimonials</a>
<a class="btn btn-gold full" href="#enroll">Enroll now</a>
</nav>
</header>
<main id="main">
<!-- HERO -->
<section class="hero">
<div class="wrap hero-grid">
<div class="hero-copy reveal">
<span class="eyebrow"><span class="dot"></span> Accredited · ISO 17024 aligned</span>
<h1>Earn a credential the industry actually <span class="gold-underline">recognizes.</span></h1>
<p class="lede">Meridian certifications are built with hiring committees from 400+ enterprises and verified by an independent examination board. Prove your expertise, command a higher salary, and join a global registry of certified professionals.</p>
<div class="hero-cta">
<a class="btn btn-gold lg" href="#paths">Explore certification paths</a>
<a class="btn btn-outline lg" href="#exam">View exam blueprint</a>
</div>
<ul class="hero-trust">
<li><strong>32,400+</strong><span>Credentials issued</span></li>
<li><strong>96%</strong><span>Pass on first retake</span></li>
<li><strong>4.9/5</strong><span>Candidate rating</span></li>
</ul>
</div>
<aside class="hero-card reveal" aria-label="Featured credential">
<div class="cred-card">
<div class="cred-top">
<span class="seal" aria-hidden="true">
<svg viewBox="0 0 48 48" width="56" height="56"><circle cx="24" cy="24" r="22" fill="none" stroke="currentColor" stroke-width="2"/><circle cx="24" cy="24" r="16" fill="none" stroke="currentColor" stroke-width="1" stroke-dasharray="2 3"/><path d="M16 24l5 5 11-12" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>
<span class="cred-status">Verified</span>
</div>
<p class="cred-kicker">Certified Professional</p>
<h3 class="cred-title">Cloud Solutions Architect</h3>
<p class="cred-id">ID MI‑CSA‑2026·04417</p>
<div class="cred-meta">
<div><span>Issued</span><strong>Apr 2026</strong></div>
<div><span>Level</span><strong>Expert</strong></div>
<div><span>Validity</span><strong>3 years</strong></div>
</div>
<div class="cred-bar">
<div class="cred-bar-fill" style="width:100%"></div>
</div>
<p class="cred-note">Blockchain-anchored · Shareable to LinkedIn</p>
</div>
</aside>
</div>
</section>
<!-- LOGOS -->
<section class="logos" aria-label="Recognized by employers">
<div class="wrap">
<p class="logos-label">Recognized in hiring at</p>
<div class="logo-row">
<span class="logo">Northwind</span>
<span class="logo">Vertex Labs</span>
<span class="logo">Atlas Bank</span>
<span class="logo">Heliacore</span>
<span class="logo">Brightpath</span>
<span class="logo">Quanta Health</span>
</div>
</div>
</section>
<!-- PATHS -->
<section class="section" id="paths">
<div class="wrap">
<div class="sec-head reveal">
<span class="sec-kicker">Certification paths</span>
<h2>Choose the track that maps to your career.</h2>
<p>Every path is competency-mapped, proctored, and renewable. Filter by the discipline you want to be hired for.</p>
</div>
<div class="filters reveal" role="tablist" aria-label="Filter certifications">
<button class="chip is-active" data-filter="all" role="tab" aria-selected="true">All paths</button>
<button class="chip" data-filter="cloud" role="tab" aria-selected="false">Cloud & Data</button>
<button class="chip" data-filter="security" role="tab" aria-selected="false">Security</button>
<button class="chip" data-filter="leadership" role="tab" aria-selected="false">Leadership</button>
</div>
<div class="path-grid" id="pathGrid">
<article class="path-card reveal" data-cat="cloud">
<div class="path-top">
<span class="lvl lvl-expert">Expert</span>
<span class="path-hours">120 hrs</span>
</div>
<h3>Cloud Solutions Architect</h3>
<p>Design resilient, cost-aware multi-cloud systems and validate them against the Meridian reference architecture.</p>
<ul class="path-feat">
<li>9 domains · 6 labs</li>
<li>Proctored 180-min exam</li>
<li>Renews every 3 years</li>
</ul>
<div class="path-foot">
<span class="price"><em>$1,290</em> exam + prep</span>
<a class="btn btn-dark sm" href="#enroll">Start path</a>
</div>
</article>
<article class="path-card reveal" data-cat="security">
<div class="path-top">
<span class="lvl lvl-adv">Advanced</span>
<span class="path-hours">95 hrs</span>
</div>
<h3>Information Security Lead</h3>
<p>Govern enterprise risk, lead incident response, and align controls to ISO 27001 and SOC 2 frameworks.</p>
<ul class="path-feat">
<li>7 domains · 4 case studies</li>
<li>Proctored 150-min exam</li>
<li>CPE-eligible renewal</li>
</ul>
<div class="path-foot">
<span class="price"><em>$1,150</em> exam + prep</span>
<a class="btn btn-dark sm" href="#enroll">Start path</a>
</div>
</article>
<article class="path-card reveal" data-cat="cloud">
<div class="path-top">
<span class="lvl lvl-int">Intermediate</span>
<span class="path-hours">70 hrs</span>
</div>
<h3>Data Engineering Associate</h3>
<p>Build governed pipelines, model warehouses, and operationalize analytics for decision-grade reporting.</p>
<ul class="path-feat">
<li>6 domains · 5 labs</li>
<li>Proctored 120-min exam</li>
<li>Stackable to Architect</li>
</ul>
<div class="path-foot">
<span class="price"><em>$890</em> exam + prep</span>
<a class="btn btn-dark sm" href="#enroll">Start path</a>
</div>
</article>
<article class="path-card reveal" data-cat="leadership">
<div class="path-top">
<span class="lvl lvl-expert">Expert</span>
<span class="path-hours">80 hrs</span>
</div>
<h3>Technical Program Director</h3>
<p>Lead cross-functional delivery at scale, manage portfolio risk, and drive measurable business outcomes.</p>
<ul class="path-feat">
<li>8 competencies · capstone</li>
<li>Panel-reviewed assessment</li>
<li>Executive registry listing</li>
</ul>
<div class="path-foot">
<span class="price"><em>$1,440</em> exam + prep</span>
<a class="btn btn-dark sm" href="#enroll">Start path</a>
</div>
</article>
<article class="path-card reveal" data-cat="security">
<div class="path-top">
<span class="lvl lvl-int">Intermediate</span>
<span class="path-hours">60 hrs</span>
</div>
<h3>Cloud Security Practitioner</h3>
<p>Harden cloud workloads, automate compliance, and run threat-modeled deployments with confidence.</p>
<ul class="path-feat">
<li>5 domains · 4 labs</li>
<li>Proctored 110-min exam</li>
<li>Pairs with Security Lead</li>
</ul>
<div class="path-foot">
<span class="price"><em>$780</em> exam + prep</span>
<a class="btn btn-dark sm" href="#enroll">Start path</a>
</div>
</article>
<article class="path-card reveal" data-cat="leadership">
<div class="path-top">
<span class="lvl lvl-adv">Advanced</span>
<span class="path-hours">75 hrs</span>
</div>
<h3>Agile Delivery Manager</h3>
<p>Coach high-performing teams, scale agile across portfolios, and tie flow metrics to outcomes.</p>
<ul class="path-feat">
<li>6 competencies · simulation</li>
<li>Scenario-based assessment</li>
<li>Annual micro-renewal</li>
</ul>
<div class="path-foot">
<span class="price"><em>$960</em> exam + prep</span>
<a class="btn btn-dark sm" href="#enroll">Start path</a>
</div>
</article>
</div>
<p class="path-empty" id="pathEmpty" hidden>No certifications in this track yet.</p>
</div>
</section>
<!-- EXAM / CURRICULUM -->
<section class="section section-dark" id="exam">
<div class="wrap exam-grid">
<div class="reveal">
<span class="sec-kicker on-dark">Exam & curriculum</span>
<h2 class="on-dark">A blueprint engineered for credibility.</h2>
<p class="on-dark-muted">The Cloud Solutions Architect examination is weighted across six core domains. Select a domain to see its objectives and exam weighting.</p>
<div class="exam-stats">
<div><strong>180</strong><span>minutes</span></div>
<div><strong>90</strong><span>scored items</span></div>
<div><strong>720</strong><span>passing score</span></div>
</div>
</div>
<div class="exam-panel reveal">
<div class="domains" id="domains" role="tablist" aria-label="Exam domains">
<button class="domain is-active" data-weight="22" role="tab" aria-selected="true">
<span class="d-name">Architecture & Design</span><span class="d-weight">22%</span>
</button>
<button class="domain" data-weight="18" role="tab" aria-selected="false">
<span class="d-name">Reliability & Resilience</span><span class="d-weight">18%</span>
</button>
<button class="domain" data-weight="16" role="tab" aria-selected="false">
<span class="d-name">Security & Compliance</span><span class="d-weight">16%</span>
</button>
<button class="domain" data-weight="15" role="tab" aria-selected="false">
<span class="d-name">Cost Optimization</span><span class="d-weight">15%</span>
</button>
<button class="domain" data-weight="14" role="tab" aria-selected="false">
<span class="d-name">Operations & Automation</span><span class="d-weight">14%</span>
</button>
<button class="domain" data-weight="15" role="tab" aria-selected="false">
<span class="d-name">Data & Migration</span><span class="d-weight">15%</span>
</button>
</div>
<div class="domain-detail" id="domainDetail" aria-live="polite">
<div class="dd-bar"><div class="dd-fill" id="ddFill" style="width:22%"></div></div>
<p class="dd-weight"><span id="ddWeight">22%</span> of the scored exam</p>
<ul class="dd-list" id="ddList">
<li>Map business requirements to reference architectures</li>
<li>Select compute, storage, and networking topologies</li>
<li>Design for multi-region failover and RTO/RPO targets</li>
</ul>
</div>
</div>
</div>
</section>
<!-- PROOF / SALARY -->
<section class="section section-proof" id="proof">
<div class="wrap">
<div class="sec-head reveal">
<span class="sec-kicker">Outcomes that compound</span>
<h2>Certification moves the salary needle.</h2>
<p>Self-reported data from 5,800 certified professionals, 12 months after credentialing.</p>
</div>
<div class="stat-grid">
<div class="stat-card reveal">
<span class="stat-num" data-count="28" data-suffix="%">0%</span>
<p class="stat-label">Average salary uplift</p>
<p class="stat-sub">Within one year of certification</p>
</div>
<div class="stat-card reveal">
<span class="stat-num" data-count="3" data-suffix="x">0x</span>
<p class="stat-label">More interview callbacks</p>
<p class="stat-sub">Versus non-certified peers</p>
</div>
<div class="stat-card reveal">
<span class="stat-num" data-prefix="$" data-count="142" data-suffix="k">$0k</span>
<p class="stat-label">Median post-cert salary</p>
<p class="stat-sub">Architect & lead-level roles</p>
</div>
<div class="stat-card reveal">
<span class="stat-num" data-count="71" data-suffix="%">0%</span>
<p class="stat-label">Promoted within 18 months</p>
<p class="stat-sub">Reported by certified cohort</p>
</div>
</div>
</div>
</section>
<!-- TESTIMONIALS -->
<section class="section" id="voices">
<div class="wrap">
<div class="sec-head reveal">
<span class="sec-kicker">In their words</span>
<h2>Trusted by practitioners and the people who hire them.</h2>
</div>
<div class="quote-grid">
<figure class="quote reveal">
<div class="stars" aria-label="5 out of 5">★★★★★</div>
<blockquote>The exam respected my time and tested real judgment, not trivia. My architect title and a 24% raise followed within four months.</blockquote>
<figcaption>
<span class="avatar" aria-hidden="true">PR</span>
<span class="who"><strong>Priya Raman</strong><em>Cloud Architect · Vertex Labs</em></span>
</figcaption>
</figure>
<figure class="quote reveal">
<div class="stars" aria-label="5 out of 5">★★★★★</div>
<blockquote>We now require the Meridian credential for senior security roles. It is the cleanest signal of capability we have found.</blockquote>
<figcaption>
<span class="avatar" aria-hidden="true">DM</span>
<span class="who"><strong>Daniel Mwangi</strong><em>VP Engineering · Atlas Bank</em></span>
</figcaption>
</figure>
<figure class="quote reveal">
<div class="stars" aria-label="5 out of 5">★★★★★</div>
<blockquote>The curriculum was rigorous but humane. The blockchain-verified badge made my credential trivially easy to share with recruiters.</blockquote>
<figcaption>
<span class="avatar" aria-hidden="true">SL</span>
<span class="who"><strong>Sofia Lindqvist</strong><em>Security Lead · Heliacore</em></span>
</figcaption>
</figure>
</div>
</div>
</section>
<!-- ENROLL CTA -->
<section class="enroll" id="enroll">
<div class="wrap enroll-inner reveal">
<div class="enroll-copy">
<h2>Reserve your exam seat for the next cohort.</h2>
<p>Cohort 26-C opens enrollment for a limited window. Lock your seat, get the full study plan, and a free retake voucher.</p>
<ul class="enroll-perks">
<li>Official study plan & practice exam</li>
<li>Free retake within 30 days</li>
<li>Verified digital credential on pass</li>
</ul>
</div>
<form class="enroll-form" id="enrollForm" novalidate>
<h3>Get the enrollment kit</h3>
<label>
Full name
<input type="text" name="name" id="fName" placeholder="Alex Morgan" autocomplete="name" required />
</label>
<label>
Work email
<input type="email" name="email" id="fEmail" placeholder="alex@company.com" autocomplete="email" required />
<small class="err" id="emailErr" hidden>Enter a valid work email.</small>
</label>
<label>
Target certification
<select name="cert" id="fCert">
<option>Cloud Solutions Architect</option>
<option>Information Security Lead</option>
<option>Data Engineering Associate</option>
<option>Technical Program Director</option>
</select>
</label>
<button class="btn btn-gold full lg" type="submit">Reserve my seat</button>
<p class="form-fine">No card required. We respond within one business day.</p>
</form>
</div>
</section>
</main>
<footer class="footer">
<div class="wrap footer-grid">
<div class="footer-brand">
<a class="brand" href="#top">
<span class="brand-mark" aria-hidden="true">M</span>
<span class="brand-text">Meridian<span class="brand-sub">Institute</span></span>
</a>
<p>Independent professional certification, examination, and credential verification since 2014.</p>
</div>
<nav aria-label="Certifications">
<h4>Certifications</h4>
<a href="#paths">Cloud & Data</a>
<a href="#paths">Security</a>
<a href="#paths">Leadership</a>
</nav>
<nav aria-label="Resources">
<h4>Resources</h4>
<a href="#exam">Exam blueprints</a>
<a href="#proof">Outcome reports</a>
<a href="#voices">Candidate stories</a>
</nav>
<nav aria-label="Company">
<h4>Company</h4>
<a href="#top">Accreditation</a>
<a href="#top">Verify a credential</a>
<a href="#enroll">Contact</a>
</nav>
</div>
<div class="wrap footer-bar">
<p>© 2026 Meridian Institute. A fictional certification body for demonstration.</p>
<p class="footer-badges"><span>ISO 17024 aligned</span><span>ANSI-style review</span></p>
</div>
</footer>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Professional Certification Landing
A full marketing landing page for Meridian Institute, a fictional professional certification body. The design leans on an authoritative slate-and-gold palette, a clean sans-serif voice, and a serif accent for quotes to read as credible and B2B. The hero pairs a confident headline with a verified credential card — a faux blockchain-anchored badge complete with credential ID, level, and validity — to anchor the value proposition immediately.
The page is genuinely interactive. Certification paths can be filtered by track (Cloud & Data,
Security, Leadership) with an empty-state fallback; the exam section is an interactive blueprint
panel where selecting a domain animates its weighting bar and swaps in that domain’s objectives; and
the outcomes section runs animated count-up statistics for salary uplift and promotion rates as they
scroll into view. Employer-recognition logos, serif testimonials, and a validating enrollment form
with an accessible toast() helper round out the experience.
Everything is built with vanilla HTML, CSS, and JavaScript — no frameworks or build step. It uses semantic landmarks, ARIA tablist semantics on the filters and exam domains, keyboard-usable controls, scroll-reveal motion that respects reduced-motion preferences, a working mobile nav, and a responsive layout that holds together from wide desktop down to roughly 360px.
Illustrative UI only — fictional courses, not a real learning platform.