Please help me with this HTML code. Kindly follow all the instructions. Two examples of wireframe are also given. The output webpage of A2 is the last image. Please arrange the code as mentioned

Kindly help me with this code. I would be gratefull forever!

OVERVIEW OF THE ASSIGNMENT 3 (A3) A3 requires you to continue working with the single page website that you created in A1/A2. You're required to make this website responsive and implement dark mode. Use the news website from A2 and make it responsive as specified in the next few pages in this document. This web page must: . Follow styling guidelines and basic design principles Use valid CSS (you can use the CSS validator to verify: https://jigsaw.w3.org/css-validator/) Style structural HTML elements such as headings, lists, images, etc. appropriately Style and align container elements appropriately (as specified) Note: this assignment must be submitted both on Brightspace AND Mimir. A3: DETAILED REQUIREMENTS (PAGE 1) . . 1. Use the HTML-only news website (single page website) that you created in A2. Create a new folder named A3 Copy your files from A2 into A3. In the css folder, include this CSS resets file (normalize.css): https:/ecolas.github.ioormalize.css/ . Include a citation to normalize.css in both readme.md and the HTML file, please. Create a new folder named js inside A3 and in this, create a file named scripts.js Create a new folder named files inside A3. You can make changes to HTML as needed to add layout elements. Only make changes to CSS i.e., to main.css - Do not add any more stylesheets other than normalize.css and main.css 5 A3: DETAILED REQUIREMENTS (PAGE 2) 2. Create a Word document named A3-wireframes.docx (submit the PDF of this file as described below). Draw 2 (TWO) x wireframes (you can either draw in Word or draw on paper and scan it or use a tool for wireframing - if you do, include a citation for the tool you use): a) Smartphone/mobile view (until 840px) b) Tablet view (between 840px and 1200px) Important - These two wireframes MUST have different visual elements, i.e., mobile and tablet view CANNOT be the same as each other, and they CANNOT be the same as the desktop view that you have implemented in A2. (see next page for details) These wireframes must be annotated as the examples discussed in class. There are a couple samples of "how* annotated wireframes look along with the assignment files. You are not required to create pages that look like samples these - these are only samples to show you *how to annotate wireframes. Save this Word file as a PDF (A3-wireframes.pdf) - include ONLY this PDF in your submission inside the folder named files. A3: DETAILED REQUIREMENTS (PAGE 3) . 2. (Cont'd) Information on wireframes. For your wireframes, think about how your web page's visual elements (i.e., what you see on the web page) will appear on the phone and on the tablet. Things to consider: What elements will appear full screen, and in what view What elements will occupy half/quarter width, and in what view How will your text content change in appearance in the mobile and tablet views, as compared to your desktop view . Will elements move around, i.e., change order something like what you can do in Flexbox? Etc. . (These are only a few examples to help you get started. Feel free to consider more ways to make your pages responsive) A3: DETAILED REQUIREMENTS (PAGE 4) 3. Styling for responsiveness Update your CSS file (main.css) to implement responsive behaviour. Use the breakpoints for media queries based on values provided in requirement #1 (page 6). You are welcome to use Flexbox or CSS Grids to implement these responsive features. 4. Dark mode/light mode using JS and styles Implement styles that will help you implement a dark mode option in your website. Create a button using the