Need the HTML and CSS code for the following:

Create a single webpage which lays out content using css flexbox.

$$ HTML:

$$ Utilize the following HTML$5$elements $($header$,$footer$,$ nav, section, aside, article$)$

$$ Your webpage will be structured as a traditional html page with a header$/$content$/$footer

$$ Properly create a navigation bar using nav, ul$,$li

$$ The href on the nav items can just go to $\text{'}$#$\text{'},$the same page.

$$ You will be creating the layout in the attached pdf$.$Make sure to pay attention to the larger and smaller resolutions.

$$ As in the attached diagram use Lorem Ipsum text as appropriate, and

$$ Images from $($any location$)($Use the size which is appropriate for your project$)$

$$ CSS:

$$ Use Flexbox to achieve the desired column and navbar layout.

$$ Use a Media Query to allow the navbar to display horizontally on large screens and vertically on smaller screens

$$ The second page of the attached diagram shows the smaller screen layout.

$$ Add background colors to nav items and columns to make it look nice. The colors do not need to match mine

$$ Use CSS styles, to make the webpage look appealing, e$.$g$.$padding$,$ font$-$family...

$$ Make sure the margins between items match the provided diagram.