22Theresecodes• 80
@22Theresecodes
Posted
I haven't tried this challenge but I know the Z-index property is used for overlapping, you can try it and see if the blue section will "flow" into the white section.
Marked as helpful
1
Design comparison
Solution retrospective
Hello community, please help me out with the white section part of the design, I've been trying to make the blue section flow into the white section. Anyway I could go about it...?
Community feedback
P
Jeff Baldwin• 30
@jbaldwin406
Posted
One way to get it to 'flow' is to create a container div that will hold the blue section and the white section. So your code would have a container div and then inside that div you have one for the blue and one for the white. The white div doesn't has the same background color as the container div, so it looks like it is part of it, while the left side (blue one) has a background color so it looks like it is flowing over top the white. Hopefully that made sense, if not I am happy to explain more in detail.
0
Finney• 3,030
@Finney06
Posted
@jbaldwin406 I kind of get you but explain in more details please.
0
P
Jeff Baldwin• 30
@jbaldwin406
Posted
@Finney06 sure thing!
For this challenge I thought of it as there are three main sections. The main container: this will be the overall 'card' that we see. The left container: This will hold the content we see on the left side. And is inside the main container. The right container: This will hold the content we see on the right side. And is inside the main container.
We are using the main-content div as the parent flex box and the left and right containers are the children.
Hopefully below example will better show what I am saying. I included a dashed border around the right-content div to show the area it is taking up. Without that border, it just looks like part of the main-content div.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="main-content">
<div class="left-content">
<p>Your content goes here</p>
</div>
<div class="right-content">
<p>Some more content here</p>
</div>
</div>
</body>
</html>
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord