Single price grid component

Community feedback

• 

  Laharl•1,000

  @UrbanskiDevPosted about 2 years ago

  Hello Kalhara Sandaruwan !

  Congratulation for finishing this project

  I have some suggestion to make :

  1. You used an hover effect for you button, which is a good idea to make your page less rigid, maybe you could also add a little variation of color for the button !

  2. You didn't add a box shadow to your button, it would add some depth to it. A basic example of a box-shadow :

  .btn {
    display: inline-block;
    color: white;
    background: var(--Bright-Yellow);
    padding: 0.8rem 1rem;
    border-radius: 0.3rem;
    width: 100%;
    text-align: center;
    font-weight: 700;
    transition: var(--transition);
    box-shadow: 2px 3px 2px black;
  }
  

  I give you a link to learn more about box-shadows :

  • MDN Box Shadow

  Otherwise, you did a good job !

  I hope it helps you, keep learning and happy coding !

  Marked as helpful

  1

  ---

  

  Kalhara Sandaruwan•190

  @ImpodaysPosted about 2 years ago

  @UrbanskiDev thankss

  0
• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello Kalhara Sandaruwan, Congratulations on completing this challenge!

  Your solution its almost done and I’ve some tips to help you to improve it. TWO TIPS:

  1.Add the box-shadow that you've missed, the value is: box-shadow: 0rem 0.625rem 0.625rem rgb(1 56 45 / 30%);If you’re not familiar to box-shadow you can use this site to create the shadow design and then just drop the code into the CSS: https://html-css-js.com/css/generator/box-shadow/

  2.You've used h3 instead of h2, increase the headings by one level, like h1, h2, h3 to show the titles hierarchy. Remember that you cannot have more than one h1 heading.

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0