🎨 Website header

[jrosseel]

Create the website header

---

Quick links: Summary | Description | Technical-Analysis | Acceptance-Criteria

---

Summary

As a user I want a header I can use to navigate the website.

Description

Your task is to add the website header as described below.

The content of this header will include:

1. "Elewa" logo on the left
2. A transparent background 
3. Black text in correct font 
4. Contact button on the right

The header looks as follows:

TODO Logo Url -> https://res.cloudinary.com/dyl3rncv3/image/upload/v1675690297/elewa-group-website/Icons/SVG/_Logo/Logo_White_arvoyx.svg

The header needs to be absolute and of higher z-index so that it appears on top of the page banner.

Full design reference: https://xd.adobe.com/view/b98caf27-6549-49e5-8ed8-c5234788df61-ecdf/

The container adapts naturally to the following screen widths:

Device	Screen width	Container width
Large Screens (Desktops and Laptops)	1440px	1200px
Tablets	768px	728px
Mobiles	360px	320px

Technical Analysis

• Create an angular package in libs/elements/layout/header. Name the module AppHeaderModule
• Create a header component inside a components folder of the package above.
• Export the header in the package
• Use labels to make the header available in two languages

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the design above.
2. The header adapts naturally to different screen widths
3. The header can change language

[Okellothomas]

Working on this issue with Elvis Rono, Martin Ntwiga

[dennis-mburu]

Working on this issue

[KaranjaK]

Working on this Issue

[stephenonchieku1]

working on this Issue

[stephenonchieku1]

@LemmyMwaura the logo url provided belongs to elewa group

[philipNgungi037]

Working on this issue