Skip to content
Submitted over 2 years ago

Single Price Grid Component

CharlieeLuna•260
@CharlieeLuna23
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Single price grid component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I had a hard time realizing that I had to use "grid" instead of "flex" which is what I have been using in all past projects. And it's dumb on my part as it is in the name.

Overall I didn't had a hard time on this one as I did with the Huddle Landing Page as the measures for the components where accurate on an image editor.

However, I was not able to come up with a solution on my button. I added two effects, the hover one which according to the README was required and an active effect so the button doesn't seem so flat. The problem is that the transition time "0.4s" gets applied to both the hover and the active effect and I would like to have a faster transition for the active one.

If anyone knows a solution please let me know, and of course, any feedback is welcome.

Thanks!

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted over 2 years ago

    Hello, CharlieeLuna! 👋

    For the hover effect of the button, you can specify each property to have its own transition duration.

    .btn {;
    /* transition: 0.2s ease-in; */
    transition: box-shadow 0.1s ease-in-out, background-color 0.2s ease-in-out;
}

    So, what the above code will do is to set transition duration for the box-shadow is 100ms while the background-color is set to 200ms.

    I recommend adding rel="noopener" to any anchor tags that have target="_blank". This is a security essential for external links. I suggest reading the web.dev article to learn more about this.

    Lastly, I suggest using the actual dollar sign ($) instead of using character references. UTF-8 support almost all characters (including Emoji) which means they can be written directly.

    Hope this helps. 🙂

    Marked as helpful
    2
    CharlieeLuna•260
    @CharlieeLuna23Posted over 2 years ago

    @vanzasetia Thanks a lot, that did it for the transition!

    Regarding the $ sign I will change it too, it's just that that's how it was by default in the file so I didn't think too much about it.

    And I don't think I have any dead links in this project but going to consider it for future ones.

    0
    Vanza Setia•27,775
    @vanzasetiaPosted over 2 years ago

    @CharlieeLuna23 You're welcome! 😊

    I notice one anchor tag that has target="_blank" (the Frontend Mentor link).

    <footer>
    <p class="attribution">
      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
      Coded by <a href="https://www.frontendmentor.io/profile/CharlieeLuna23">CharlieeLuna</a>.
    </p>
</footer>
    0
    CharlieeLuna•260
    @CharlieeLuna23Posted over 2 years ago

    @vanzasetia Oh, you're right, my bad, that's just a copy-paste from a previous project so I didn't really looked into it.

    0
    Vanza Setia•27,775
    @vanzasetiaPosted over 2 years ago

    @CharlieeLuna23 No worries at all! 👍

    0

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