In this assignment, you will create a personal portfolio website using the concepts of HTML and CSS we covered in class so far. The website will display your skills, projects, and a brief introduction about yourself. You will practice using various HTML elements and CSS styling techniques, including forms, responsive images, media elements $($audio and video$),$ interactive elements, and advanced layout methods like CSS Grid and Media Queries.Assignment Details:$1.$ Website Structure:o Your website should include at least $4$ sections: Home: Introduction and brief personal details. Projects: Display at least two projects with images and brief descriptions. Skills: Create a list of skills with appropriate styling. Contact: A form where users can contact you. The form should include at least four types of input $($e$.$g$.,$ text, radio buttons, checkboxes, and drop$-$downs$)\mathrm{.}2.$ Responsive Images:o Use normal and responsive images with support for high$-$density screens $($e$.$g$.,$ srcset attribute for different resolutions$).$o Ensure that your images are optimized to fit various screen sizes$\mathrm{.}3.$ Media Elements:o Add audio and video elements to your website $($e$.$g$.,$ add an audio file related to your project or a video introduction about yourself$)\mathrm{.}4.$ Interactive Elements:o Add interactive HTML elements, such as buttons, links, or image sliders to enhance the user experience$\mathrm{.}5.$ CSS Styling:o Apply CSS Grid for layout to ensure the website looks professional and structured.o Make use of Media Queries to ensure your website is responsive and adjusts to different screen sizes$\mathrm{.}6.$ CSS Selectors and Pseudo$-$classes:o Use class, ID$,$ and descendant selectors to organize and apply styles.o Add hover effects to hyperlinks and buttons.o Style different text elements $($headings$,$ paragraphs, lists, etc.$)$ using pseudo$-$selectors like :hover, :focus, and others$\mathrm{.}7.$ Layout Considerations:o Ensure your website is responsive.o Use CSS Grid to create flexible, structured layouts.o Use block and inline elements appropriately.o Use the box model to manage padding, margin, and borders$\mathrm{.}8.$ Final Touches:o Ensure all code is clean and properly indented.o Validate your HTML and CSS$.$o Your website should be accessible and work across different devices and screen sizes$\mathrm{.}9.$ Be Creative!o Creativity will play a key role in your grade. Use colors, fonts, layouts, and interactive features that make your website stand out.o Feel free to incorporate animations, transitions, or innovative layout techniques to improve the overall user experience$\mathrm{.}10.$ Provide Screenshots:o Take screenshots of each section of your website $($Home$,$ Projects, Skills, Contact$).$o Include screenshots showing how your website looks on both a desktop and a mobile device.o Add the screenshots to a separate document or include them in the final submission folder.