1. Styling af en cta

image1

Her har jeg anvendt html tagget: button. Jeg har givet boksen parent-flex for at få placeret knappen i midten. Du skal gøre resten: Give boksen et baggrundsbillede, den rigtige størrelse, farve, border mm. samt style knappens udseende.
OBS! Hvis cursor skal ændres når du holder musen over knappen, så skal du bruge css reglen: cursor)

Tips til boksen:

  • background-image (green.jpeg)
  • background-size

Tip til knappen (button):

  • width
  • padding
  • border
  • text-align
  • color
  • font-family
  • font-size
  • text-decoration

2. Styling af menu

image2

Her skal du style en menu med flere links.

Tip til boksen:

  • background-image (blue.jpeg)
  • background-size

Tip til listen (ul):

  • list-style
  • margin
  • padding

Tip til links (a):

  • margin
  • padding
  • text-align
  • border - du kan bruge shorthand: (border: 1px solid white;)
  • color
  • font-family
  • text-decoration

3. Menu med :hover

image3

Minder om opgave 2 men a-elementerne har en "hover" tilstand (du skal benytte pseudo-selectoren a:hover).
OBS! vær opmærksom på at hover ikke virker på mobilen og andre touch devices.

Tips til boksen:

  • Background-image (pink.jpg)

Tips til listen (ul):

  • list-style
  • margin
  • padding

Tips til listenpunkterne (li)

  • width
  • margin

Tip til links (a):

  • width
  • padding
  • border-radius
  • text-align
  • background-color
  • color
  • font-family (Consolas, "Courier New", mono-space)
  • font-size
  • text-decoration
  • font-weight

Tip til a:hover:

  • color
  • background-color

4. Styling af menu

image4

Minder om opgave 1, 2 og 3 men med anderledes styling.
Du kan evt. lave en skyggevirkning på denne side: cssmatic.com/box-shadow. Læs også om box-shadow her: www.w3schools.com.

Tips til boksen:

  • background-color

Tips til listen (ul):

  • list-style
  • margin
  • padding

Tips til links (a):

  • padding
  • box-shadow
  • text-align
  • background-color
  • color
  • font-family
  • font-size
  • text-decoration

5. Din egen cta

Her er ikke noget billede. Lav din egen knap og brug det som reference senere

Tips: du kan evt skrive dine egne tips her...

6. Din egen menu

Her er ikke noget billede. Lav din egen menu og brug det som reference senere

Tips: du kan evt skrive dine egne tips her...