Duplicate part
Looking to create a unique layout for a section within my React application that resembles the image below. Please disregard the lines on the right. https://i.sstatic.net/rfgGy.png Here is the initial HTML structure, with placeholder boxes awaiting content.
const projects = () => {
return (
<section className="projects">
<div className="container fcontainer">
<div className="fcol fcol--1">
<div className="box-1"></div>
<div className="box-2"></div>
</div>
<div className="fcol fcol--2">
<div className="box-1"></div>
<div className="box-1"></div>
<div className="box-1"></div>
</div>
<div className="fcol fcol--3">
<div className="box-1"></div>
<div className="box-2"></div>
</div>
</div>
</section>
)
}.fcol {
color: #333;
margin: 1rem;
text-align: center;
font-size: 3rem;
display: flex;
flex-direction: column;
height: 60vh;
flex-grow: 4;
&--1 {
.box-1{
background-color: lightblue;
flex-grow: 1;
margin-bottom: 2rem;
}
.box-2{
background-color: lightgreen;
flex-grow: 2;
}
}
&--2 {
.box-1{
background-color: lightblue;
flex-grow: 1;
justify-content: space-between;
&:not(:last-child){
margin-bottom: 2rem;
}
}
}
&--3 {
.box-1{
background-color: lightblue;
flex-grow: 3;
margin-bottom: 2rem;
}
.box-2{
background-color: lightgreen;
flex-grow: 2;
}
}
}And here is the current output:https://i.sstatic.net/Dw7jj.png
A CodePen link has been provided for editing and issue resolution. Feel free to modify the HTML and scss structures as needed.
Non-duplicative part
Experiencing difficulties in inserting images into each box without them overflowing or encountering errors when importing from a .scss file in my React app. More details can be found in this link. Thank you for your assistance.