Skip to content
Submitted over 1 year ago

Responsive Single Price Grid Component | HTML & CSS

Arda Bozan•160
@ArdaBozan
A solution to the Single price grid component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What did you find difficult when creating the project?

I couldn't adjust the text of the third field, otherwise I had no difficulty :)

Which areas of your code are you unsure about?

In the text

Code

Please log in to post a comment

Log in

Community feedback

  • tediko•6,700
    @tediko

    Hello @ArdaBozan! Good job on this challenge! Here's my few suggestions:

    • Don't separate your HTML class names with "|". Separate the class names with a space, e.g. <div class="class1 class2">.
    • I'd use only one paragraph for your .price and .opacity text. Wrap opacity text into span element and style it. This will also get rid of .price-block div.
    • Your <button> element should be <a> anchor. Links take the user to a new location, such as a new web page or new section of the current page, buttons trigger some action, such as showing content on the page that was previously hidden, playing a video, or submitting a form. To me "Sign up" will take user to new page.

    Have fun!

    Marked as helpful

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