Assignment: CSS Flexbox, Positioning, Hover Effect, and Transition

Task 1: Flexbox Layout
Create an HTML file that includes a header, main content area, and a footer. Use CSS Flexbox to achieve the following layout:

The header should have a height of 80 pixels and contain a navigation menu with evenly spaced items.
The main content area should have a minimum height of 400 pixels and display its content in a column.
The footer should have a height of 60 pixels and display content centered horizontally and vertically.

Task 2: Flex Items Alignment
Inside the main content area, create three boxes with different background colors and equal widths. Use Flexbox to align these boxes in a row, ensuring they have an equal amount of space between them.

Task 3: Positioning Elements
Create an HTML file that includes an image and two paragraphs of text. Apply the following styles:

Position the image to the top right corner of its parent container, with a margin of 10 pixels from the edges.
Position the first paragraph to the bottom left corner of its parent container, with a margin of 15 pixels from the edges.
Position the second paragraph centered horizontally and vertically within its parent container using absolute positioning.

Task 4: Fixed Navigation Bar
Create a fixed navigation bar that sticks to the top of the viewport when users scroll down the page. Ensure that the navigation links are evenly spaced and styled appropriately.

Task 5: Image Gallery with Hover Effect and Transition
Create an image gallery with thumbnail images. When a user hovers over a thumbnail, apply a transform: scale(1.2) effect to scale up the image. Use CSS transition property to animate the scaling effect smoothly.