create simple one page website with three section usable on desktop and mobile

Description: Design a responsive web page with three sections: a bio section, a hobbies section, and a contact me section. All these sections must be implemented in one page. The page must be responsive for two states. First, for standard screens, and second, for cell phone screens whose screen width is less than 450 pixels. In the first design, you should have a fixed left-side menu, which expands from the top to the bottom of the viewport and remains there all the time. On top of the menu, you must put your profile picture, then three buttons that are actually three links, one for each section. Whenever you click on one of these links, it must navigate to the corresponding section on the page. On cell phones, the menu must be on top of the page, and the content must be shown underneath the menu. In this state, the menu is sticky. That means the menu remains at the top whenever you scroll the page. Again, the corresponding section must be shown when you click these buttons. In this case, the content might be shown underneath of the menu. This problem can be solved but not with the stuff that you have learned. So, you do not need to fix this problem. About the content of each section, you should implement at least something similar to mine, but feel free to add more content. Check the video for more detail at https://youtu.be/8YGYQ3jVNDI. To get credit: To earn credit, your grade will be based on the following criteria:  Making the page responsive (20%).  Implementing the menu for each state (30%).  Ensuring your page is visually appealing (20%).  The content of the page, including images, text, links, lists, etc (25%).  On time submission (10%) Yes, it sums up 105%. The extra 5% is a bonus. ???? To Submit: Zip all the files and upload the zip file  before the deadline. You only must upload one ZIP file containing all the images, HTML, and CSS files, nothing more, nothing less. Make sure that you include the images in your zip file. Note  Do NOT go beyond the course materials. If you use something that we have not talked about yet, you will lose the credit of the assignment.  You may need to add some margin to the target of menu options in Mobile view. In that case, you may need to add the following CSS rule to your Mobile View CSS rules. Explanation What is :target? The :target pseudo-class selects an HTML element that matches the current URL fragment identifier (the part of the URL that comes after the # symbol). For example, if you have:

Section 1

Go to Section 1 When you click the link, the URL becomes yourpage.html#section1, and the

element with id="section1" becomes the :target. What is scroll-margin-top? This property sets a top margin used when scrolling an element into view (e.g., via anchor link navigation like #section1). If a fixed header is covering the top of your content when jumping to a section, scroll-margin-top is a solution. What This Rule Does When you navigate to an element via an anchor (#id), this rule adds 200px of space above that target element during scrolling. So, the element won’t be flush with the top of the page — it will appear 200px lower (leaving room, for example, for a sticky header). Change 200px to the height of your own menu. Why Use It? It's helpful when: - You have a fixed/sticky header - You want to avoid the header overlapping your anchor target - You want to control scroll behavior for better UX only use syntax and code types found in the zip  file create another word document or pdf where you cite where i nthe document you pdfs in the zip you got your code