Skapa header

[esplito]

Specifikation - skapa header

Uppgift

Följande ska göras:

• Skapa responsiv header
• Lägg in HTML för dess struktur.
• Skriv CSS enligt BEM för header.

Tänk på att jobba mobile-first! dvs. allt som ska synas på skärmar större än mobil ska finnas i media queries. Se wikin för hur du använder mixins (som är fördefinierade media queries).

OBS! Proxima Nova och Minion Pro använs som fonts i designen. De kostar pengar, så vi använder Montserrat och Times New Roman istället, för tillfället.

Krav

Detta krävs för att det ska vara godkänt

• [x] Ska se ut som det gör i designexemplet.
• [x] Headern ska ligga som en egen komponent (så att vi lätt kan implementera den på alla sidor).
• [x] Menyknapparna i headern ska ej synas i mobil.
• [x] Se till att det finns HTML för att implementera dropdown-menyer för knapparna (design ej gjord för dropdown än).
• [x] Det ska gå att klicka på menyknapparna och loggan.

Design

Desktop:

Mobil:

Kontext

Desktop:

Mobil:

[esplito]

Tänk på att headern (och footern) alltid ska täcka upp hela bredden, dvs. "width: 100%". Från vad jag kunde se i koden så har vi en fixed width på 1000px just nu, vilket innebär att det kommer se knasigt ut så länge man inte har en skärm med samma pixelbredd. Återkommer med fler kommentarer och tips när jag har tid att kolla igenom och testa det på min dator.