All solutions

Please comment on it on where it can be better, thanks.

Please criticize my JS and Tailwind, i think my JS can be shorter and better but i don't know how.

Thank you

<div style="margin-top: 90px; margin-bottom: 90px" class="flex flex-col rounded-2xl bg-white shadow-lg my-24 w-80 mx-auto h-[550px] lg:flex-row-reverse lg:w-5/6 lg:max-w-[1293px] lg:h-[307px]">

Weirdly, my-[90px] is not usable in this code, therefore i used inline css to deal with it, but i don't understand why it doesn't work

Please criticize my work, thanks

1. i think my tailwind doesn't generate because i can't upload the node modules into github, any way to solve this?
2. The social icon, i can only change the color of border when i hover on it, but the icon, how to change the color?

Please critisize it, it is my first attempt of using Tailwind

Do criticize it, thanks guys

Please criticize it, thank you

Please criticize it, thanks

Please criticize it, thanks

Please criticize it and donate some recommendation to make it better, Thank You

• Feel free to comment on the responsiveness of my solution.
• If possible, please educate me on a better way to solve this problem other than using flexbox or gridbox.

Thank you for your help

Please, criticize it. And i used SASS for the first time too

Additional features in this website:

• Dark mode is available
• Keyframes animation (rotate, skew, scale and translate) while the cursor is on the Card
• In my CSS file, i have named each component in the roots by (purpose=>classes that is impacted by the purpose), i think it helps a lot by naming it this way, to improve the readability and easier to amend in the future.
• for the classes, I used BEM method to name each classes, also to make it easier to read and amendable for the future.

Other than using root and class combination, is there more way to write a easier maintainable and readable CSS?

useful website: https://stackoverflow.com/questions/22252472/how-to-change-the-color-of-an-svg-element

Good god, i tried fill in CSS, change the fill in SVG files, none works. Until I used filter and it worked like magic, the SVG files just turn into Cyan like i want them to be. Thanks Stackoverflow.

1. I think the toggle button got a bit of issue. If i click on the button and drag along in the blue area, the round white button could end up not moving, and yet the Javascript will run and change the price from monthly to Annual price.
2. Does anymore really use the font size 15px (or in rem) for any text in the challenge? It seems a little small to me compare to the design pic.
3. and the ::first-letter, i think it impacted the position of the price when the event runs (when i toggle the button). If i chose to preserve the ::first-letter in my CSS, is there anyway to solve the problem on the position of the price?
4. I think my JS is a bit necessary complicated. I vaguely remember on an easier way to do it but i can't remember the source. Can anyone judge my JS?
5. If anyone capable on ONLY using HTML and CSS to solve this problem, please, enlighten me.
6. I used like 7 to 8 hours to solve this problem (including the time on researching on how to solve various problems), is it normal?

• I learned on how to greyed out a website, by using an absolute positioned div with bg color and opacity
• I reinforced my JS skill on onclick function, if statement and create variable with get element by ID and class
• First time using CSS custom properties to improve the readability of my code.

-I would like to learn a faster way to code since it took me more than 6 hours to finish this. -I would like to learn more on responsive website, so that my image and text will be more responsive as the width getting bigger

• (https://www.w3schools.com/cssref/css3_pr_box-shadow.asp) - Remind me on what to do with box shadow
• (https://www.youtube.com/watch?v=PHO6TBq_auI) - Learned CSS Custom Properties in this video
• (https://www.youtube.com/watch?v=9M58urr1CVQ) - Learned VS code shortcut from here.

You guys can go to the README at my github in the respository for more info.

Please criticize my work (especially the responsive part), thanks. If there's some tips on faster coding, please help.

1. How should I amend the background image size for mobile size to be more responsive? if i used cover the background will look different than the design.

1. When submit with an empty textbox, the error icon and "no valid message" still occur, but I can't stop the page from refreshing after that.

2.The area that contained all the text, when it is more than 1440px width, somehow the textbox is having a fixed height compare to the profile picture, despite I insert 100% height on that area that contained all the text ( the profile picture I inserted 100% height)