Skip to content
Submitted over 2 years ago

Four card feature with fkex and grids

Anubliss•460
@Anubliss-0
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

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-MRPosted 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
    1
    Anubliss•460
    @Anubliss-0Posted 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 :)

    1
  • Naveen Gumaste•10,480
    @NaveenGumastePosted 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
    1
    Anubliss•460
    @Anubliss-0Posted 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!

    1

Please log in to post a comment

Log in with GitHub

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