Hello, I need help with achieving this design using HTML and CSS. Can you assist me, please?
https://i.stack.imgur.com/xOHVX.jpg
This is what I have attempted so far:
Below is my CSS code:
.line-lg{
width:120%;
text-align: center;
border-bottom: 2px solid #000;
line-height: 0.1em;
margin: 10px 0 20px;
}
.line-lg span{
background:#4e5d6c;
padding:0 10px;
}
.rectangle{
padding-top: 40px;
width:100px;
height:100px;
border:1px solid #000;
position: relative;
text-align: center;
}
And here is my HTML code:
<table class="table">
<tr>
<td>
<div class="rectangle">
<h4 class="line-lg"><span>Lol</span></h4>
</div>
</td>
<td>
<div class="rectangle">
<h4 class="line"><span>Lol</span></h4>
</div>
</td>
<td>
<div class="rectangle"></div>
<h4 class="line"><span>Lol</span></h4>
</div>
</td>
</tr>
</table>
However, the result is not as expected:
https://i.stack.imgur.com/zNDKd.jpg
The line is not filling all the space, and I am unsure of how to fix it. As a beginner in HTML/CSS, any advice or guidance would be greatly appreciated.