Speed of Your Vision
The first prototype grown into a full home page: an edge-to-edge banner with the DEPO eye and intro, two drifting photo walls around "DEPO – The speed of your vision", then the Client Map and People blocks of the current home, all on the site's animated background.
Summary
A second step on from demo1, built to a running order the owner dictated: the full-width banner (model in a green fringe coat) with the logo and the DEPO intro, the photo wall, the six values under "DEPO – The speed of your vision", a second wall of 15 different covers, the Client Map and the People cards. The values, Client Map and People blocks are the live home page's own markup and styles, so this page shows what the current home looks like with photo walls and a banner added. It became the base for demo3, demo4 and demo5.
Prompt
The brief this page was built from.
Extend the first DEPO home prototype into the full running order of the live home page, with
photo walls added. Keep the real header and footer and reuse the live home page's own markup and
styles for its blocks.
Order: a full-width banner (82 vh, the model in the green fringe coat, dark scrim) with the DEPO
eye logo and the DEPO intro centred; a wall of 15 covers in five columns; the six values under
"DEPO – The speed of your vision" in two columns of three (Lazurski gold titles, grey text); a
second wall of 15 different covers; the Client Map; the People cards. Site palette: #18171a
ground, gold #ffb500 titles, green #469a58 accents. This page is the base for the next variants.Look
- Type: Lato (site body face) for the banner intro; Lazurski 700 in gold for the section titles and value names (from
modules/FirstScreen.css); Poppins in the photo captions; site header and footer unchanged. - Palette: site ground
#18171a, brand gold#ffb500for titles, brand green#469a58in the animated ellipses and the footer button,#949494grey body text in the values, white banner copy over a dark scrim. - Layout: header; banner at 82 vh with the DEPO eye logo and the intro centred; wall of 15 covers (5 columns); values block, two columns of three; second wall of 15 new covers (Lucid, VOÍD, DUSK, Kaleido, Persona.Code, Palisade); Client Map (roles around the logo); People masonry of member portraits with avatars and names; footer.
- Motion: the banner photo settles from
scale(1.06)and the logo and text rise in; the walls fade in tile by tile and their columns drift against each other on scroll (demo1.js); the site's animated background (/demo2/js/ellipses.js) moves soft green glows behind every block.
Built with
| Part | What |
|---|---|
| HTML | public/demo2/index.html |
| CSS | public/demo2/css/demo2.css on top of public/demo2/css/demo1.css + /demo2/css/* site styles incl. modules/FirstScreen.css, modules/Masonry.css |
| JS | public/demo2/js/demo1.js — vanilla (walls); /demo2/js/ellipses.js, site.js, app.js, i18n.js from the site |
| Libraries | none |
| Fonts | Lato, Lazurski, Poppins, self-hosted in /demo2/fonts/ |
| Images | /_img/site/media/c217eb6b….png banner, /_img/site/logo/logo.png, /_img/photos/photo-01…30.jpg, portraits and avatars from /_img/site/first-page/ |
Borrowed
- The real DEPO header and footer, and the values / Client Map / People blocks of the live home page, with the site-asset snapshot (
/demo2/css/,/demo2/js/,/demo2/fonts/,/_img/site/) of the site CSS, JS (animated background), fonts and images (front at commit43a7a8b^). - Magazine covers from the DEPO gallery; banner image and logo supplied by the owner.
Config
None — static page.
Notes
- Built without a browser check, as asked; it was looked at later through demo3–demo5.
Suits a site for…
What kind of website would this design fit? Agree with a tag by clicking it, or add your own — a tag can be several words.
No tags yet — be the first.
Comments 0
No comments yet — be the first.