Bouwdoos

Onderdelen van schep.

Alles waar de one-pager uit bestaat. Elk onderdeel staat los: je kunt het verplaatsen, weglaten of hergebruiken zonder dat de rest breekt. Zo bouw ik ook sites voor echte zaken.

Kleuren

Alle kleuren staan als variabele bovenin css/style.css. Verander er één en de hele site verandert mee.

Roomvar(--room)#FFF3E2 · Achtergrond

Chocolavar(--choc)#3A1E14 · Tekst, knoppen, randen

Framboosvar(--fram)#FF4D7E · Accent, sticker, punt

Framboos diepvar(--fram-diep)#D6195A · Accent op licht, voor contrast

Pistachevar(--pist)#A6D46A · Smaak, Vind ons

Mangovar(--mango)#FFB21E · Smaak, statement

Besvar(--bes)#A98BFF · Smaak, stapelspel

Hoornvar(--hoorn)#E9A55B · Het hoorntje

Letters

Bricolage Grotesque voor koppen, Instrument Sans voor tekst. Beide staan op de eigen server.

Twaalf smaken.

--t-xl

Van melk tot hoorntje.

--t-l

Zomer in een bakje. Zonder melk, dus voor iedereen.

--t-m

Om acht uur draait de machine. Wat we 's ochtends maken, verkopen we dezelfde dag.

--t-body

Knoppen, labels en status

Bekijk de smaken Stapel je ijsje

Vegan
Met noten
Klassieker

Di tot en met zo open

Terug naar Schep

Op donker

Stickers

12 smaken vandaag

2 dagen
vooraf

Druppelrand

Eén SVG, in elke kleur. Hij hangt bovenin een sectie en druipt uit de sectie erboven. Op de site smelt hij langzaam uit als hij in beeld komt.

Secties

Elke sectie heeft zijn eigen JavaScript in js/onderdelen/, en dat draait alleen als de sectie op de pagina staat.

Onderdeel	In de HTML	JavaScript	Wat het doet
Navigatie	`header[data-nav]`	`scroll.js`	Pilmenu dat wegschuift als je naar beneden scrolt en terugkomt als je omhoog scrolt.
Menu op de telefoon	`nav[data-menu]`	`menu.js`	Schermvullend menu dat uit de hoek openvouwt.
Status	`[data-status]`	`status.js`	Open of dicht, in Amsterdamse tijd. Openingstijden staan bovenin status.js.
Opening	`section.hero`	`CSS en beweging.js`	Woordmerk, boog met foto, draaiende sticker en spikkels die met de muis meebewegen.
Lint	`div.lint`	`beweging.js`	Smakenlint dat meeloopt met je scrollrichting.
Smaken	`section[data-smaken]`	`smaken.js`	De sectie kleurt mee met de smaak in beeld; foto's kantelen onder de muis.
Quiz	`section[data-quiz]`	`quiz.js`	Drie vragen, uitslag in de kleur van je smaak, door naar het stapelspel.
Rail	`section[data-proces]`	`beweging.js en videos.js`	Stappen die zijwaarts schuiven terwijl je scrolt; video's spelen in beeld.
Statement	`section[data-opisop]`	`beweging.js en spoor.js`	Grote woorden die ingroeien, met een spoor van foto's achter de muis.
Stapelspel	`section[data-stapel]`	`stapel.js`	Tot drie bollen stapelen, spikkels, bon met prijs.
Aanbod	`section.taart`	`geen`	Foto met sticker, maten en prijzen, knop naar het conceptvenster.
Vind ons	`section.vind`	`beweging.js`	Collage met video, openingstijden en een kaartje met vallende pin.
Vragen	`section.vragen`	`geen, alleen CSS`	Uitklapbare vragen; er staat er altijd maar één open.
Druppelrand	`svg[data-drup]`	`beweging.js`	Smeltende rand die van de sectie erboven in deze sectie druipt.
Conceptvenster	`dialog[data-dialoog]`	`dialoog.js`	Elke knop met data-concept opent het. Legt uit dat Schep verzonnen is.