How do I add multiple floating images but keep them contained to the layout below like the guide image I have below? I have a floating image but it is just staying in the middle of the page. Also why is my footer image on the right instead of at the bottom where it should be?HTML<html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title>Flexbox Coding</title></head> <link rel="stylesheet" href="Style.css"> <body> <header class="header-image"> <img src="57mBcYi.jpeg" alt="Header Image"> </header> <div class="flex-container"> <div> <ul> <li><a href="Page1.html">Link to Page 1</a></li> <li><a href="Page2.html">Link to Page 2</a></li> </ul> </div> <div>An country demesne message it. Bachelor domestic extended doubtful as concerns at. Morning prudent removal an letters by. On could my in order never it. Or excited certain sixteen it to parties colonel. Depending conveying direction has led immediate. Law gate her well bed life feet seen rent. On nature or no except it sussex. <img class="floating-image" src="OIP.jpg" alt="Lego Star Wars"> </div> <div>May indulgence difficulty ham can put especially. Bringing remember for supplied her why was confined. Middleton principle did she procuring extensive believing add. Weather adapted prepare oh is calling. These wrong of he which there smile to my front. He fruit oh enjoy it of whose table. Cultivated occasional old her unpleasing unpleasant. At as do be against pasture covered viewing started. Enjoyed me settled mr respect no spirits civilly. </div> <footer class="footer-image"> <img src="banner.jpg" alt="Footer Image"> </footer> </body></html>CSS:body { background-color: black; margin: 0; padding: 0;}.flex-container { display: flex;} .flex-container > div { background-color: white; width: 50%; margin: 10px; padding: 10px; font-size: 16px; }.floating-image { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 100%; max-height: 100%;}.header-image img { width: 100%; height: auto;}.footer-image { text-align: center; background-color: #f0f0f0; padding: 20px;} .footer-image img { width: 100%; height: auto; } **Educational Website Page Transcription****Background Image Description:**The background showcases a LEGO-themed desert landscape under a clear blue sky. LEGO structures are reminiscent of iconic science fiction settings, blending creativity with popular culture.**Center Image:**At the center is a prominent poster featuring LEGO characters from a popular science-fiction franchise. The poster includes figures resembling fantasy warriors with glowing swords, set against a dramatic backdrop.**Text Blocks:**- **Link Section:** - Link to Page 1 - Link to Page 2- **Main Text:** - "An country demesne message it. Bachelor domestic extended doubtful as concerns at. Morning prudent removal an letters by. Oh could in my order never it. Or prepare to parties colonel. Depending peculiar tolerance oh on." - "Immediate. Law gate her well the written involve table am immediate of whose table. Bringing confined. Middleton believing add." - "Weather wrong of the which there. Immediate uneasiness settled unpleasing unpleasant. As at do yet an else did. Started. Enjoyed me settled mr respect no spirits civilly."**Right Side Image:**Illustrates LEGO figures resembling a patrol in an expansive desert territory with armed characters, evoking scenes of exploration and adventure.**Bottom Image Strip:**A banner-style image displays additional LEGO characters in a cosmic setting, suggesting an intergalactic journey or adventure. **Page 1:**- **Header** - Theme picture/image (should be the same on both pages)- **Navigation** - Link to **Page 1** - Link to **Page 2** - (should be the same on both pages)- **Content of Page 1** - That contains at least two floating images - That contains at least one floating image- **Footer** - (should be the same on both pages)---**Page 2:**- **Header** - Theme picture/image (should be the same on both pages)- **Navigation** - Link to **Page 1** - Link to **Page 2** - (should be the same on both pages)- **Content of Page 2** - That contains at least two floating images - That contains at least one floating image- **Footer** - (should be the same on both pages)

Modifying the CSS and HTML code to attain the described Functionalities

How do I add multiple floating images but keep them contained to the layout below like the guide image I have below? I have a floating image but it is just staying in the middle of the page. Also why is my footer image on the right instead of at the bottom where it should be? HTML Flexbox Coding Link to Page 1 Link to Page 2 An country demesne message it. Bachelor domestic extended doubtful as concerns at. Morning prudent removal an letters by. On could my in order never it. Or excited certain sixteen it to parties colonel. Depending conveying direction has led immediate. Law gate her well bed life feet seen rent. On nature or no except it sussex. May indulgence difficulty ham can put especially. Bringing remember for supplied her why was confined. Middleton principle did she procuring extensive believing add. Weather adapted prepare oh is calling. These wrong of he which there smile to my front. He fruit oh enjoy it of whose table. Cultivated occasional old her unpleasing unpleasant. At as do be against pasture covered viewing started. Enjoyed me settled mr respect no spirits civilly. CSS: body { background-color: black; margin: 0; padding: 0; } .flex-container { display: flex; } .flex-container > div { background-color: white; width: 50%; margin: 10px; padding: 10px; font-size: 16px; } .floating-image { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 100%; max-height: 100%; } .header-image img { width: 100%; height: auto; } .footer-image { text-align: center; background-color: #f0f0f0; padding: 20px; } .footer-image img { width: 100%; height: auto; }