Skip to main content
PizzaXpressen
Ingen avdeling valgt Velg avdeling Ring 69 00 14 14
0
Stilark · pizzaxpressen · under utvikling

Stil: Gatekjøkken

Dyp skoggrønn, tomatrød og pizzagul på varm krem. Fargene er hentet fra dagens PizzaXpressen-profil, men flatene er roligere og tydeligere, og tittelene er satt i en kraftig skråstilt versalfont som minner om logoen. Siden er laget for tommelen: store knapper, tydelige priser og en meny som leses som en kjøkkenlapp, uten bilder.

Header og hero

PizzaXpressen
Leverer fra Fredrikstad sentrum
Ring 69 00 14 14
2
Over 25 år i Østfold

Du ringer,
vi bringer!

Fersk bunn, hver dag. Deilig, varm pizza rett på døra, eller hent selv på en av våre fem avdelinger.

Bestill pizza Se menyen

Farger

Én tydelig primærfarge (tomatrød) til handlinger, grønt til sekundære handlinger og «åpent», gult som sparsom markering. Dyp grønn bærer header og hero.

PrimærHandlinger, pris-knapper
SekundærGrønn, åpent
AksentPizzagul, sparsom
Dyp grønnHeader, hero, footer
BakgrunnVarm krem
Dempet flateMerker, rader
Overskrift
Tekst
Dempet tekstAllergener
Linjer
Suksess
Feil

Fonter

Overskrifter: Barlow Condensed (700, 800, 800 kursiv). Brødtekst: Barlow (400, 500, 600, 700). Begge har full støtte for æ, ø og å.

H1 · 76 / 44 px · 800 kursiv · versaler
Pizza på døra
H2 · 46 / 32 px · 800
Våre utsalgssteder
H3 · 30 / 24 px · 700
Pizza i Halden
H4 · 20 px · 700 · pizzanavn
Saturday Night Spesial
Ingress · 21 / 18 px · Barlow 400

I mer enn 25 år har vi levert pizza til trofaste kunder i store deler av Østfold.

Brødtekst · 16 px · linjehøyde 1,5

Kjøttdeig, bacon og løk. Alle pizzaer lages på deig som er kjevlet ut samme dag.

Liten tekst · 14 px

Allergener: hvete, melk og selleri

Pris · 24 px · 800 · tabellsiffer
249,-   329,-
Navigasjon og knapper · 17 px · 700 · versaler · 0,06–0,08 em

Pizzameny · Tilbehør

Knapper

Primær (rød)
Til kassen Hover Deaktivert
Sekundær (grønn)
Se tilbehør Hover
Omriss
Se avdelinger Hover
Gul, på mørk bakgrunn
Ring 69 00 14 14 Hover
Stor (hero)
Bestill pizza
Merker
Åpent til 22.00 Stengt nå
Sterk

Meny uten bilder

Hver pizza er en rad: gult nummer, navn, ingredienser og allergener. Til høyre ligger to trykkflater, medium og stor, som legger pizzaen rett i kurven. Sterke pizzaer får chili-merke. Priser og tekster er hentet fra dagens meny.

Stengt avdeling

Varsel øverst, prisknappene er deaktiverte. Menyen kan fortsatt leses.

Sellebakk er stengt nåÅpner i morgen kl. 11.00. Du kan se menyen, men ikke bestille før de åpner. Velg en annen avdeling for å bestille nå.

Bytt avdeling
  • 1

    Millenium

    Kjøttdeig, bacon og løk

    Allergener: Hvete, melk og selleri

    Medium 249,- Stor 329,-
  • 16

    Ekstra Hotty

    Sterk

    Jalapeños, marinert biff, spekepepperoni, skinketerninger, fersk paprika, løk og dryss med peppermiks

    Allergener: Hvete, melk, sennep og selleri

    Medium 259,- Stor 344,-

Avdelingsvalg

Pop-upen kommer første gang kunden besøker butikken, og når kunden trykker på avdelingsknappen i headeren. På mobil glir den opp nedenfra som et ark; på stor skjerm ligger den midt på. Pop-upen velger bare avdeling. Levering eller henting velges i kassen.

Avdelingsknappen i headeren, tre tilstander
Ingen avdeling valgt Velg avdeling
Leverer fra Halden
Leverer fra Sellebakk

Åpningstidene er de oppgitte. «Nå» er satt til mandag kl. 19.30 i eksemplene: da er Sellebakk og Hvaler stengt, de andre åpne.

Velg avdeling

Hvor skal pizzaen komme fra?

×

Du kan bytte avdeling når som helst fra knappen øverst på siden.

Bekreft avdeling

Hele butikken

Komponentene under er bygget med de samme klassene som resten av sitet. Siden er responsiv: gjør nettleservinduet smalt (under 768 px) for å se mobilversjonen av hver komponent.

Avdelinger (side)

Ett kort per avdeling med adresse og åpningstider. Dagens rad er markert. Mandag kveld: Sellebakk og Hvaler er stengt.

Våre utsalgssteder

Avdelinger

Fredrikstad Øst

Stengt nå

Løenveien 6, 1653 Sellebakk

Mandag
11.00–18.00
Tirsdag–fredag
11.00–22.00
Lørdag–søndag
11.00–22.15
Stengt nå Ring 69 00 14 14

Hvaler

Stengt i dag

Fastlandsveien 16, 1684 Vesterøy

Mandag
Stengt
Tirsdag–torsdag
12.00–20.00
Fredag–lørdag
12.00–22.00
Søndag
12.00–21.00
Stengt nå Ring 69 00 14 14

Om oss

Om oss

Pizza til Østfold i over 25 år

I mer enn 25 år har vi levert pizza til trofaste kunder i store deler av Østfold.

Du finner oss på Sellebakk og i sentrum av Fredrikstad, ved gjestehavna i Halden (der har vi også restaurant), på Vesterøy på Hvaler og i Sarpsborg. Vi kjører ut pizza stort sett over hele Østfold.

Se avdelingene
  • 25+ år i drift
  • 5 avdelinger i Østfold
  • Hver dag fersk bunn

Kontakt

Skjemaet er et designeksempel. Telefonnummeret er felles.

Kontakt

Ring oss, så bringer vi

69 00 14 14

Samme nummer til alle avdelingene. Vi tar imot bestillinger og spørsmål hver dag.

  • Fredrikstad sentrum, Freskoveien 5, 1605 Fredrikstad
  • Fredrikstad Øst (Sellebakk), Løenveien 6, 1653 Sellebakk
  • Halden, Kongens Brygge 2, 1767 Halden
  • Hvaler (Vesterøy), Fastlandsveien 16, 1684 Vesterøy
  • Sarpsborg, Skjebergveien 21A, 1739 Borgenhaugen
Navn
Kari Nordmann
Telefon
900 00 000
Gjelder avdeling
Velg avdeling
Melding
Send melding

Handlekurv

Tekstrader med nummer, navn, pris og antall. Levering koster 89 kr, ingen minstegrense.

Handlekurv

  • 1

    Millenium

    Medium · 249,- hver

    249,-
    – 1 +
    Fjern
  • 16

    Ekstra Hotty

    Stor · Jalapeños, marinert biff, spekepepperoni og mer · 344,- hver

    688,-
    – 2 +
    Fjern

Din bestilling

1 × #1 Millenium (medium) 249,-
2 × #16 Ekstra Hotty (stor) 688,-
Levering 89,-
Totalt 1 026,-
Til kassen

Alle priser er oppgitt med mva.

Minikurv

Utskuff fra kurvknappen. På mobil blir den et ark nederst.

Din bestilling

Fredrikstad sentrum
×
  • 1

    Millenium

    Medium · 249,- hver

    249,-
    – 1 +
    Fjern
  • 16

    Ekstra Hotty

    Stor · Jalapeños, marinert biff, spekepepperoni og mer · 344,- hver

    688,-
    – 2 +
    Fjern
Totalt 937,-
Til kassen Fortsett å handle

Kurvlinje (bare mobil)

Fast linje nederst som viser antall og sum. På sitet vises den bare under 768 px; her er den vist på alle bredder.

Menyen ligger her. Linjen under følger med når kunden ruller.

3 varer937,-
Se kurv

Kasse

Levering eller henting velges her. Feil vises under feltet.

Kasse

1

Levering eller henting

Levering Til døra, fra Fredrikstad sentrum. 89,- Henting Hent selv hos Fredrikstad sentrum
Så fort som mulig Vi starter med en gang Velg tidspunkt I dag, før stengetid
2

Dine opplysninger

Fornavn
Kari
Etternavn
Nordmann
Telefon
90 00
Skriv inn et telefonnummer med 8 siffer.
E-post
kari@example.no
Adresse
Gate og husnummer
Postnummer
1601
Sted
Fredrikstad
Merknad til kjøkkenet
Jeg godtar vilkårene for bestilling

Din bestilling

1 × #1 Millenium (medium) 249,-
2 × #16 Ekstra Hotty (stor) 688,-
Levering 89,-
Totalt 1 026,-
Bestill nå

Alle priser er oppgitt med mva. Betaling skjer i testmodus.

Skjemafelt og varsler

Vanlig felt
Tekst
Hjelpetekst under feltet.
Feil
Ugyldig
Dette må rettes.
Deaktivert
Kan ikke endres
Nedtrekk
Velg avdeling
Send meg tilbud på SMS
Lagt i kurven. #5 Tropicana (stor) er med i bestillingen.
Pizzaen er på vei. Beregnet levering kl. 20.15.
Kunne ikke sende bestillingen. Sjekk telefonnummeret og prøv igjen.

Footer

Inneholder lenken «Stilark (under utvikling)» mens sitet bygges.

Klassekatalog

Alle komponentklassene i stilarket (prefiks px-) og hvordan de brukes. Farger og fonter hentes alltid fra variablene (var(--px-…)), aldri hex eller fontnavn. Mobilreglene ligger i stilarket ved 1023 px og 767 px.

Layout og typografi
.px-section (--deep, --alt) Ytre seksjon med luft (--px-section-y). --deep er mørk grønn, --alt dempet flate.
.px-container Innholdsbredde (--px-container). Legg inni .px-section.
.px-h1 .px-h2 .px-h3 .px-h4 Overskrifter i Barlow Condensed, versaler. H1 er kursiv (hero).
.px-lead .px-small .px-eyebrow Ingress, liten tekst (allergener) og versal etikett over overskrift.
.px-stripe Grønn, krem og rød stripe mellom seksjoner.
.px-card Hvit flate med kant og myk skygge.
Knapper, merker og pris
.px-btn + --primary --secondary --accent --ghost Knapper på a eller button. Rød er hovedhandling, gul brukes på mørk bakgrunn.
.px-btn--lg Stor variant for hero og kasse. [disabled] eller aria-disabled gir deaktivert.
.px-badge + --number --chili --open --closed Merker. --number er gult pizzanummer, --chili for sterke pizzaer, --open og --closed for åpningsstatus.
.px-price Pris med tabellsiffer.
.px-price-btn (--alt) + __size Størrelse og pris i én trykkflate som legger i kurv. --alt er lys variant for «Stor».
Meny
.px-menu-list .px-menu-item Menyrad uten bilde: __main (nummer + __body med __title, __ingredients, __allergens) og __prices (to .px-price-btn).
Avdelingsvalg
.px-dept-btn (--empty, --closed) Avdelingsknapp i headeren med __label og __name. Åpner pop-upen.
.px-modal-overlay .px-modal .px-modal__head .px-modal__close Pop-up. Ark nedenfra på mobil, midtstilt på desktop.
.px-dept-list .px-dept-opt (--closed) Radiokort per avdeling med __name og __sub.
.px-closed-banner Stengt-varsel øverst på meny og handlesider. Pris-knappene får disabled.
.px-dept-grid .px-dept-card .px-hours Avdelingskort for siden Avdelinger. Dagens rad i .px-hours__row får .is-today.
Skjema og varsler
.px-field .px-label .px-input .px-textarea .px-help Felt. --error på .px-field gir rød kant og feiltekst i .px-help.
.px-form-grid .px-field--full To kolonner på desktop, én på mobil. --full går over begge.
.px-check Avkrysning med tekst.
.px-notice (--error, --info) Meldinger: suksess, feil, info.
Handlekurv og kasse
.px-cart-list .px-cart-item Kurvrad med nummer, __body, pris og __actions (.px-qty + __remove).
.px-qty Antall (– 1 +).
.px-cart-btn (__count) Kurvknapp i headeren med antall.
.px-minicart (__head, __body, __foot) Minikurv. Arket fyller bredden på mobil.
.px-cart-bar (__info) Sticky kurvlinje nederst. Vises bare under 768 px.
.px-summary (__row, __row--total) Ordreoppsummering.
.px-checkout .px-steps .px-step (__title, __no) Kasse i to kolonner, stables under 1024 px. Nummerert steg.
.px-choice-grid .px-choice Valgkort for levering eller henting og tidspunkt (role=radio, aria-checked).
Innhold, header og footer
.px-about .px-facts .px-fact Om oss: tekst og nøkkeltall.
.px-contact .px-phone-link .px-list-plain Kontakt: info, stort telefonnummer og skjema i kort.
.px-header .px-header__inner .px-header__actions .px-nav Header: logo, nav, avdelingsknapp, ring-knapp og kurvknapp. På mobil skjules nav, og avdelingsknappen får egen linje.
.px-logo-img .px-logo Logo (ekte SVG, media 17) og tekstvariant.
.px-hero .px-hero__actions Hero med stor skråstilt tittel og knapper.
.px-footer (__grid, __col, __title, __bottom) Footer i dyp grønn med tre kolonner.
.px-hide-sm Skjules under 768 px (f.eks. telefonnummeret i ring-knappen).

Klassekatalog, tillegg fra frontend

Header, avdelingsvalg og kurv
.px-site-header Sticky ramme rundt header (header-malen). Legg .px-header, .px-banner-wrap og pop-upen inni.
.px-burger Hamburgerknapp, vises bare under 768 px. Åpner .px-nav.is-open.
.px-banner-wrap Ramme for .px-closed-banner under headeren. Skjult med hidden, vises av JS når valgt avdeling er stengt.
[hidden] .px-modal-overlay, .px-closed-banner, .px-banner-wrap, .px-cart-bar og .px-toast skjules med hidden-attributtet.
.px-toast Bekreftelse nederst («Lagt i kurven»), lages av JS.
.px-price-btn[aria-disabled=true] Prisknapp deaktivert når valgt avdeling er stengt. data-px-id og data-px-var styrer hva som legges i kurven.
Sider og maler
.px-hero-split .px-photo Hero og seksjoner med tekst på den ene siden og bilde på den andre. Stakkes under 1024 px.
.px-menu-head .px-menu-sub Overskriftsblokk over en menyliste.
.px-prose Smal tekstkolonne for vilkår og personvern.
.px-woo Ramme rundt WooCommerce-blokkene (kurv, kasse, konto). Stiler .wc-block-*-klasser med designvariablene. Stengt avdeling gir body.px-is-closed som deaktiverer bestillingsknappene.
.px-pdp .px-pdp-card Produktside: kort med tittel, pris, bunnvalg og legg i kurv.
.px-shop-grid .px-shop-card Produktarkiv (Butikk).
.px-small-on-deep Liten tekst på dyp grønn bakgrunn (footer-adresser).