Create a mockup of your personal website and your first home page. Your personal website should contain at least three pages (HTML documents). Your mockup should contain mockups of each HTML document. You should follow a similar format as the sample mockup provided here . Your 5-6-page document should include the following:A description of the site's organizational structure.A description of each page that you'd like to add to the site and its specifications, including color schemes, the size of logos and images, and the fonts being used.Create your first home page. Your home page must include the following elements:At least one heading.At least two paragraphs.My interests include small animal rescue and rehoming for Guinea Pigs. Thanks!

Algorithm : 1. Create a grid with three columns and three rows. 2. Place an image or logo in the first column. 3. Place a site title in the second column. 4. Place a page heading in the third column. 5. Place a main navigation menu in the first column. 6. Place an image in the second column. 7. Place a heading and some text in the third column. 8. Place an image in the first column. 9. Place some text in the second column. 10. Place an image in the third column. 11. Place a page footer with text navigation and the copyright info in the first column.HTML code : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS Grid</title> <style> .top { display: grid; grid-gap: 1rem; grid-template-columns: 1fr 2fr 1fr; margin-bottom: 0.5rem; text-align: center; } .heading { display: grid; grid-gap: 1rem; grid-template-columns: 1fr 2fr 1fr; margin-bottom: 0.5rem; text-align: center; } .content { display: grid; grid-gap: 2rem; grid-template-columns: 1fr 2fr 1fr; margin-bottom: 0.5rem; text-align: center; } .foot { display: grid; grid-gap: 1rem; grid-template-columns: 1fr 2fr 1fr; height: 10px; text-align: center; grid-auto-rows: 25px; } .box { border: 2px solid black; background-color: rgb(44, 177, 182); padding: 34px; } .box4, .box11 { grid-column: 1 /span 3; } .box2{ background-color: rgb(245, 187, 101); } .box6 { background-color: white; grid-column: 2 / span 1; grid-row: 1 / span 3; } .box8{ background-color: white; grid-column: 1 / span 1; grid-row: 2 / span 2; } </style> </head> <body> <div class="top"> <div class="box box1">IMAGE/LOGO</div> <div class="box box2">Side Title</div> <div class="box box3">Page Heading</div> </div> <div class="heading"> <div class="box box4">Main Navigation</div> </div> <div class="content"> <div class="box box5">IMAGE</div> <div class="box box6">Heading <br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit nihil beatae omnis! Nemo delectus mollitia molestiae nam consequatur possimus minima voluptatum sit vel quia alias suscipit sint, eos nihil sed. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque dolore, dicta sint hic asperiores libero sunt voluptates aliquid nam! Quidem voluptates dolorem ipsam voluptatibus est autem facilis voluptate quibusdam a? <br><br> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates, iste placeat distinctio ipsa quisquam velit dolorum libero quae mollitia eos perferendis recusandae consectetur cumque iure maxime cupiditate autem esse, omnis veniam quam laudantium nobis et totam id! Nisi numquam harum quae porro saepe eaque, amet veritatis voluptatem vel at consequatur! </div> <div class="box box7">IMAGE</div> <div class="box box8">Side Content<br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita culpa nobis sint saepe explicabo nisi, dignissimos atque modi blanditiis quas nam, ipsa consectetur corporis.</div> <div class="box box9">IMAGE</div> <div class="box box10">IMAGE0</div> </div> <div class="foot"> <div class="box box11">Page Footer with text navigation.<br>Copyright Info. Contact info</div> </div> </body> </html> Code screenshot :Output screenshot: