Hi there,
I’m working on the Off-Platform Project, “Tea Cozy”, in the “Build a Website with HTML, CSS, and Github Pages” Skill Path.
Unfortunately, I’m facing an issue with the “mission section” in which there’s a top main and a bottom main. I somehow can’t get the photo divided into two halves for the top and bottom portions each. The class “top-slice” is used to refer to the top section and the class “bottom-slice” is used to refer to the bottom section.
I made both the sections of 100% width and height, but my requirements still aren’t satisfied.
Here’s what I need to achieve:-
The redline seems to indicate a single background image, on the BODY, perhaps, with three overlaying divisions, top, center, and bottom. The top and bottom have no background color and the center has a black background.
Save all your code to a local folder, then Reset. Does it show a finished page in the browser pane? If so, right-click the Tea Cozy header and click Frames, then Open Frame in new tab. That will let you see the standalone page and view the source. Compare it to yours to gain insight.
Note: I’m using Firefox/Windows 10. The context menus may vary but should have the same functionality.