What it is
An online school's landing page, complete: a hero with a rating badge and a bento grid, a partner strip, three promises, four course cards, six claims arranged around a portrait, six instructors, a testimonial rail, an FAQ, a journal, a closing call to action and a footer. One page, one HTML file, ten sections.
The design follows a Webflow template. Its layout, its vertical rhythm and its animation settings were read out of the original by script — durations, easings, offsets, triggers — and then written again from nothing. Not a line of the original code is left, not a photo, not a logo. Page height: 10 002 px against the original's 10 007, and no section is more than 1.2 % off.
What you change first
The colours — one block
Everything lives in part 1 of assets/css/style.css. The
original's accent was a vermilion orange; that is its signature, so it
moved. Erudia is raspberry — the hue changed, the value did not, which is
what keeps the drawing intact.
The accent comes in three shades and they travel together:
--accent (#E8336B, 4.1:1 on white) for shapes and icons,
--accent-strong (#C41F52, 5.7:1) for hover and for accent
text, --accent-soft (#FF8FB4) for an accent laid over a
photo. Change one and you have to change all three, or a label somewhere
goes unreadable.
The name
Search for Erudia: it is in the title, the navigation bar,
the footer, the FAQ, the testimonials and the closing block. No class
name contains it, so a find-and-replace on the name cannot break
anything.
The sizes
Part 2 of the stylesheet, and nowhere else. Four stops — 1440, 991, 767
and 479 px — with the values measured on the original. A heading never
gets its own media query: change --h2 and every h2 follows.
The counters and the pull quote have their own variables, because they
already had their own scale in the original.
The eleven effects, and how they're built
| Effect | Where | Original | Here |
|---|---|---|---|
| Reveal on scroll | every content block | translateY 40px + opacity, 500 ms, outQuad, staggered 0→600 ms | the same, fired at 15 % up from the bottom of the screen instead of at the first visible pixel |
| Curtain over an image | 2 hero portraits, 4 course visuals | width, 1300 ms, 300 ms delay, inOutCirc | scaleX(0) from the right, same duration, delay and curve |
| Partner strip | “250 companies” | translateX -100 in 20 000 ms | two identical rows, one full width in 20 s, no seam |
| Turning flower | green hero tile | 360° in 30 000 ms | the same, a CSS animation |
| Card hover | courses, feature article | scale 1 → 1.2, 800 ms, outQuad | identical |
| Instructor hover | 6 cards | size + rotation, 400/500 ms, easeInOut | card lifts 3 px, photo scales 1.06 and turns 1.5° |
| Accordion | FAQ | height 500 ms open, 400 ms close, icon rotates | native <details>, height animated from the script, the + turns 135° |
| Active slide | testimonials | scale 0.8 ↔ 1, 500 ms, ease | off-centre portraits sit back at 0.9 |
| Carousel | testimonials | tab system with a progress bar | native scroll-snap: dragging, swiping and the keyboard all work with no JS |
| Nav links | navigation bar | text-decoration-color, 0.35 s | identical |
| Social icons | footer | colour, 0.35 s | identical |
prefers-reduced-motion puts everything at its final state
at once — delays included. A delay is movement spread over time.
What you should know
- No external request, no build, no framework. Checked by serving the folder and listing every request: all local.
-
Strict CSP. No inline style, no inline script, no
onclick. Checked by serving the folder with the header, not assumed — and the bench found it out the hard way, since the policy blocked its own attempt to inject a stylesheet. -
With JavaScript off, nothing is hidden. The hidden
state is written
.js [data-reveal], and it isenhance.jsthat adds the class. Delete both script tags: all 38 headings stay visible, the curtains are up, the accordions open, the rail still scrolls. - No horizontal overflow at 390, 1440 and 2560 px, on load and after scrolling the whole page — the moment blocks sliding in from the side would betray themselves.
- The hero's pastel wash is CSS. The original shipped it as a 1.9 MB PNG; four radial gradients give the same picture for nothing.
What isn't perfect
- The hero's video is now a still. 920 kB of MP4 for a 361 × 500 tile. The image weighs a thousandth of that and, at rest, you cannot tell. The pause button went with it.
- The rail gained two buttons and a spoken position, 80 px below it — taken back off the bottom of the section so the overall rhythm holds. The original has no visible control at all, which means no keyboard user ever reaches the second testimonial.
- The "progress" section keeps all six claims on a phone, where the original hides two. It is 34 % taller at 479 px as a result. Hiding content on small screens is not a layout.
- The partner logos are drawn, not photographed. Six invented marks, six SVG symbols in the sprite at the top of the file.
- The images are generated, so they are free to use — but they are generated, and a generated crowd is a generated crowd. Replace them with your own and the layout will not move: every aspect ratio is fixed in the stylesheet.
It’s waiting for you in the library.
Erudia comes with the subscription, alongside the rest of the library and the full course.
Immediate access · No commitment · Cancel in one click