@Monica-MR
@Anubliss-0
Submitted
I was wondering if anyone did the colored bar at the top of each section differently? In the end I used a seperate div with a top border like so...
<div class="border-top"></div>
.border-top {
border-top: 4px solid var(--cyan);
border-radius: 8px 8px 0 0;
}
@Monica-MR
Posted
Hi, I use the pseudoelement before to build the bar at the top like this.
.card::before{
height: .3rem;
background-color: var(--cyan);
content: '';
display: block;
border-top-left-radius: 15px;
border-top-right-radius:15px ;
}
.red::before{
background-color: var(--red);
}
.yellow::before{
background-color: var(--orange);
}
.blue::before{
background-color: var(--blue);
}```
-------HTML look like this:
<div class="card red">
<h2>Team Builder</h2>
<p>Scans our talent network to create the optimal team for your project</p>
<img src="images/icon-team-builder.svg" alt="icon">
</div>
Marked as helpful