Fremtidens Restaurant

Skip to content

Vanskelighetsgrad: Medium

I denne oppgaven skal du lage en nettside for en fremtidig restaurant. Du kan lage en fiktiv restaurant basert på en sci-fi film eller serie også hvis du foretrekker det.

Her skal det være minst tre forskjellige HTML-sider med et konsekvent (consistent) design.

Ting du skal ha med:

  • En forside som heter index.html
  • En “meny”-side som heter menu.html
    • Legg inn helt ville matretter her, som for eksempel pizza med ananas🍍 (Helt vilt, i know).
    • Legg gjerne inn bilder av rettene på siden.
  • En “om” side som heter about.html som forteller litt om restauranten
  • Tenk litt på designet på nettsiden, gir fargene mening sammen?

Du skal også ta i bruk et “eksternt” CSS-stilark, kall dette style.css. Les om dette her: External CSS.

Tenk også på fornuftig bruk av class og id til de forskjellige HTML-elementene: Trenger du å skrive samme CSS-kode om igjen og om igjen?

Struktur

  • Ha en navigasjonsmeny på toppen av siden som går til de forskjellige sidene.
    • Bruk gjerne noe CSS-styling her for å separere navigasjonsmenyen fra resten.
    • Legg gjerne til en “logo” på toppen av siden.
  • En hoveddel for innholdet på siden.
  • Menyen er en liste med matretter. Det kan også være kolonner, du bestemmer!

Ekstra utfordringer: Hard

  • Legg til en “footer” på siden som har noe fiktiv “Copyright” informasjon om restauranten.
    • Denne skal plasseres helt på bunnen av siden. Dersom siden er for kort skal det være tomrom mellom footeren og hoveddelen av siden.
  • Legg inn kode for å sentrere hoveddelen på nettsiden.

Ekstra ekstra utfordringer: Hard

  • Legg inn passende animasjoner når du holder musen over forskjellige elementer på siden. Les om animasjoner her: CSS Animations.

Ekstra ekstra ekstra (ekstra ekstra): Cracked

  • Bruk JavaScript til å lage en type “pagination” på meny-siden slik at det kun er 5 (eller 6) meny-elementer på siden om gangen.