Please create a simple responsive personal blog website using PLAIN HTML and CSS following proper formatting and style rules. No third-party libraries are allowed. The blog website will contain two pages: One is the home page, and the other is the page of a detailed blog.

Here is the requirement towards the personal blog, please see below.

CSS Separate From HTML: Portfolio completely separates structure from design/style. There are no attributes present in the body of the document. There are no elements in the document.

CSS Imports: There should be at least 3 imported files in the main CSS file, but the student is welcome to break it down even further if that makes it easier for them.

Directories & Files: Files are organized with a directory structure that separates files based on page and functionality.

Links: There is an intentional user flow on each page with appropriate links as needed.

Flexbox Based Layout: Uses Flexbox at least twice throughout the project to create a component or pattern

Grid Based Layout: Uses CSS Grid at least twice throughout the project to create the layout for pages

Responsiveness: Multi-Device Web Design. Pages are mobile-friendly and display correctly on all display sizes (mobile, tablet, desktop). Note: You can simulate Mobile Devices with Device Mode in Chrome DevTools.

An example has been provided below.

Thank you for your help!

Subscribe Blog Title World Example Blog Post Nov 12 This card represents an example blog post. Design Post title Nov 11 This is a wider card with supporting text below as a natural lead-in to additional content. Continue reading Continue reading World Example Blog Post Nov 12 This card represents an example blog post. Design Post title Nov 11 This is a wider card with supporting text below as a natural lead-in to additional content. Continue reading Continue reading World Example Blog Post Nov 12 This card represents an example blog post. Design Post title Nov 11 This is a wider card with supporting text below as a natural lead-in to additional content. Continue reading Continue reading Subscribe Blog Title a Sample blog post Sanny 1, 2014 Mars This blog post shows a few different types of content that's supported and styled with Bootstrap. Basic typography, images, and code are all supported About Etiam porta Borrhalellada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit. Archives March 2014 February 2014 January 2014 December 2013 November 2013 October 2013 September 2013 August 2013 July 2013 June 2013 May 2012 for 2013 Elsewhere GitHub Twitter Facebook Etiam porta Serrallada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur Heading Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sub-heading Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Example code black Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa Sub-heading Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magra mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. . Praesent commodo cursus magna, vel scelerisque nisl consectetur et. . Donec id elit non mi porta gravida at eget metus. . Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit ibero, a pharetra augue. 1. Vestibulum id ligula porta felis euismod semper. 2. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus 3. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis mus Older Post