HTML, CSS and javascript to build the page.

Community feedback

• 

  P

  Nitya Gulati•665

  @nityagulati

  Posted over 5 years ago

  Nice work, Abhishek! The page looks good and is responsive. Few suggestions to improve upon the code --

  1. Instead of using <div> tags for the card details, you should use <ul> as they are a list of features.

  2. Use meaningful, descriptive class names to style the elements such as card-list or card-details instead of row.

  3. Instead of adding another div - extra-height and applying height to it, you can simply add padding-top and padding-bottom to the card-selected element.

  4. I believe you are overusing the display: flex property on some elements that don't necessarily require it. The main element that needs it is cards container that holds and aligns all three cards next to each other.

  • card class (applied to each card) doesn't require flex property because <div> elements are block elements and are naturally aligned in columnar/vertical orientation.
  • row doesn't require flex as you don't have any child elements within the rows that need to be aligned. Also if you use <ul> instead of row divs then they will be listed as a list (column) naturally.
  • you can remove all the accompanying flex properties from these elements as well. flex-direction align-content justify-content align-items.

  5. You can instead use text-align: center on card class to align the content within the cards.

  6. Removing Flex from card will resize the buttons. You can use width: -webkit-fill-available for the buttons to stretch or specify a width using % (responsive) or px.

  Keep up the good work!

  10
• 

  Saurav Chamoli•370

  @sauravchamoli17

  Posted over 5 years ago

  Very well done on your project. Keep up the good work!

  10
• 

  

  Matt Studdert•13,611

  @mattstuddert

  Posted over 5 years ago

  Really nice work Abishek! You've received some amazing feedback from Nitya already, so I'll just jump straight to your question. In order to get the toggle working without JS you'd need to re-structure your HTML to make the input element a sibling of the element you've currently got an ID of cards on. Then your selector would look something like this: input:checked ~ #cards .yearPrice.

  Great work on this challenge. Keep it up! 👍

  00