The header should be a responsive component.
!!NOTE!!
Content should be centered.
The text displayed in the header is the title of the project: "Butterflies in a weird tone"
Mobile version
Main container should have the following properties:
height: 48px
padding: 16px
background-color: #A479B4
Inside there should be another container that should include:
[ ] the text with the following properties:
colour gray/200, font size 14px, line height 20px, bold.
an animation of a trail of butterflies starting from the end of the text, continuing until the right side
Tablet version
Main container should have the following properties:
height: 60px
padding: 32px
background-color: #A479B4
Inside there should be another container that should include:
[ ] the text with the following properties:
colour gray/200, font size 20px, line height 30px, bold.
an animation of a trail of butterflies starting from the end of the text, continuing until the right side
Desktop version
Main container should have the following properties:
height: 80px
padding: 48px
background-color: #A479B4
Inside there should be another container that should include:
[ ] the text with the following properties:
colour gray/200, font size 24px, line height 32px, bold.
an animation of a trail of butterflies starting from the end of the text, continuing until the right side
The header should be a responsive component. !!NOTE!! Content should be centered. The text displayed in the header is the title of the project: "Butterflies in a weird tone"
Mobile version Main container should have the following properties:
Inside there should be another container that should include:
Tablet version Main container should have the following properties:
Inside there should be another container that should include:
Desktop version Main container should have the following properties:
Inside there should be another container that should include: