HTML, CSS and javascript to build the page.
Design comparison
Solution retrospective
How to toggle the price (annually or monthly) without JS. As toggle button and price are not being direct parents /child or sibling relationship.
Community feedback
- @nityagulatiPosted almost 5 years ago
Nice work, Abhishek! The page looks good and is responsive. Few suggestions to improve upon the code --
-
Instead of using
<div>
tags for the card details, you should use<ul>
as they are a list of features. -
Use meaningful, descriptive class names to style the elements such as
card-list
orcard-details
instead ofrow
. -
Instead of adding another
div
-extra-height
and applyingheight
to it, you can simply addpadding-top
andpadding-bottom
to thecard-selected
element. -
I believe you are overusing the
display: flex
property on some elements that don't necessarily require it. The main element that needs it iscards
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 ofrow 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
.
-
You can instead use
text-align: center
oncard
class to align the content within the cards. -
Removing Flex from
card
will resize the buttons. You can usewidth: -webkit-fill-available
for the buttons to stretch or specify a width using % (responsive) or px.
Keep up the good work!
1 -
- @sauravchamoli17Posted almost 5 years ago
Very well done on your project. Keep up the good work!
1 - @mattstuddertPosted almost 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 ofcards
on. Then your selector would look something like this:input:checked ~ #cards .yearPrice
.Great work on this challenge. Keep it up! 👍
0
Please log in to post a comment
Log in with GitHubJoin 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