![responsive grids using html css responsive grids using html css](https://i.ytimg.com/vi/Oy9K7iz3aa4/maxresdefault.jpg)
In this design, the following HTML elements are each assigned a specific layout purpose.
![responsive grids using html css responsive grids using html css](https://static.alphorm.com/bgplayer/FR_697/FR_697_03_04.jpg)
This subcontent may appear differently in the layout, depending on the user's viewing device. The following links and supplemental information are accessible on the home page, encouraging the user to explore. Footer - Authorship and/or Copyright information.Message of the day - Rotating "flavor" content, such as a quiz or an inspirational quote.Upcoming events - Information about future business-related events where the user may want to participate.Items for sale - The name, description, price, and current inventory of various items for sale.
![responsive grids using html css responsive grids using html css](https://i.stack.imgur.com/kr2R9.png)
This space may contain important updates, limited-time deals, or recommended items. The user sees this information above the fold, before seeing items for sale. Announcements - The first section of the main body.Name/logo - The identity of the business/service, located in the header, left justified.The primary information to appear on the home page is listed below. The home page is the first thing the user sees when visiting the site. Our example shows one way to create the home page for a fictional business/service. Place index.css and index.html in the same folder. Begin with index.css and index.html from the Grid CSS holy grail layout.