Submitted over 2 years ago

Four card feature with fkex and grids

Anubliss• 460

@Anubliss-0

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Four card feature section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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;
  }

Community feedback

Monica• 260

@Monica-MR

Posted over 2 years ago

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

Anubliss• 460

@Anubliss-0

Posted over 2 years ago

@Monica-MR

This is a good way of doing it! I will keep this in mind for the future.

Thanks for the feedback :)

Naveen Gumaste• 10,460

@NaveenGumaste

Posted over 2 years ago

Hello Anubliss ! Congo 👏 on completing this challenge

Let's look at some of your issues, shall we:

Warp your card content around the main tag Ex: 👇

<body>
<main class="container">
*all you content here*
</main>
</body>

happy Coding😀

Marked as helpful

Anubliss• 460

@Anubliss-0

Posted over 2 years ago

@Crazimonk

Ah yeah,

Looking at the docs for main I see that I should have wrapped the whole page in it rather than create sections outside of main.

Cheers for the tip!

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord