Off-Platform Project: Tea Cozy Issue

[haris_iftikhar]

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:-

This is what I managed to get:-

Here are the rulesets for top-slice and bottom-slice:-

/* Image Top */
.top-slice {
width: 100%;
height: 100%;
object-fit: cover;
}

/* Image Bottom /
.bottom-slice {
width: 100%;
height: 100%;
object-fit: cover;
position: relative;
/ right: 0; */
}

The complete CSS code:-

https://gist.github.com/haris-bit/0a172f4502dfc5e8878e2288f72f76ec

Any help would be appreciated.
Thank You!

[mtf]

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.

[haris_iftikhar]

I wonder how that would look like in code?

[mtf]

Been years since I did this project, and not keen on doing it again. Did the author supply a sample page for you to compare to?

[haris_iftikhar]

They provided a Document Spec but no solution code.

[mtf]

Please post a link to the landing page for this project.

[haris_iftikhar]

There’s actually no link provided to the completed landing page. But here’s a link to the exercise:
https://www.codecademy.com/paths/learn-how-to-build-websites/tracks/advanced-css-flexbox-and-animations/modules/layout-with-flexbox/projects/tea-cozy

[mtf]

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.

[haris_iftikhar]

Thanks, appreciate it!