I've hit a roadblock while working on a project and can't seem to find the right solution. I've already created a design in Photoshop to illustrate what I'm trying to achieve: Photoshop Design.
Basically, I want the main content inside a container, which includes a paragraph on the left and an icon image next to an h1 title on the right – all within a responsive container.
My dilemma is: how can I add a "black box" or a div on the left side next to the container without it overlapping with the main content and still being responsive?
I've been struggling with this issue for the past few days, trying various approaches like utilizing flex properties in Bootstrap, the column system in Bootstrap, and nesting containers, but nothing seems to work. If anyone could offer some guidance, it would be greatly appreciated! Thanks in advance!
(PS: I'm not sharing the code as nothing I've attempted has yielded the desired result.) Here's an example of how I envision the divs to look: example image
HTML:
<div class="container-fluid h-50" id="outerContainer">
<div class="container h-100" id="innerContainer">
<div class="row">
<div class="col">
<p>
At Lux, you come for an entire evening. Enjoy a dinner up to 6 courses and savor the finest wines by the glass, but have your aperitif and digestif at our bar Festiv. This way, you experience two completely different atmospheres without having to leave the premises and escape reality for a while.
</p>
</div>
<div class="col text-center">
<img src="/images/icons/lightbulb.svg" id="iconScale" class="img-fluid" alt="concept icon" />
</div>
<div class="col">
<h2>
CONCEPT
</h2>
</div>
</div>
</div>
</div>
CSS:
html,
body{
height: 100%;
}
#innerContainer{
background-color: black;
}
#outerContainer{
background-color: black;
}
#iconScale{
max-width: 100px;
}
h2{
color: #d8a55d;
font-size: 4rem;
}
p{
color: white;
}