I am attempting to replicate this design using CSS:
https://i.sstatic.net/zXInr.png
So far, this is what I have achieved:
.container{
height: 30px;
margin-bottom: 10px;
}
.redLine{
background-color: red;
opacity: 0.5;
height: 20px;
border-radius: 5px;
text-align: center;
}
.centered{
font-size: 30px;
}
<div class="container">
<div class="redLine">
<h2 class="centered">Streaming</h2>
</div>
</div>
How do I achieve this CSS effect?