@Charlie025x
Latest solutions
responsive solution using TS, Tailwind, and, react-hook-form
#tailwind-css#typescript#reactSubmitted 12 months ago
Latest comments
- @Charlie025x
No I don't, I think that will be over engineering this little static site.
- @Charlie025x@Charlie025x
UPDATE* I have just completed this challenge using React.js, using a map method on the data.json to render the cards. All I had to do was convert my html to jsx, impliment a few lines of code from my original js file to the React's .jsx files, and relearn how state and props work.
- @itzjter@Charlie025x
Great solution! I took a peak at your code to see how you did the cyan overlay and learned alot from how you utilized opacity with scss.
Marked as helpful - @gchristofferson@Charlie025x
Looks great!! Only possible improvement you can make is to move your images lower.
I tried to achieve this by adding a "justify-self: flex-end" to your card-icon class, but that didn't work for some reason. However adding "margin-top: auto" to card-icon did the trick. "margin-top: auto" basically gives margin-top the biggest possible, forcing the content to the bottom of it's container. And if you give "auto" to both margin top and bottom to the same content, you end up centering that content vertically. A similar effect can be achieve with margin left and right.
Marked as helpful - @rizky-pm@Charlie025x
Nice solution, the animation was a nice touch too! I also posted my solution using react. After a quick glance at your code I noticed you styled your components within the .jsx files (where I made a separate scss (css) file, and linked it to it's corresponding .jsx component).
Do you write your styles in the .jsx because that's how you're learning react, or is there advantage to writing styles in this way? Just curious.
Another question, why do your class names look weird. I think they look generated, is that because of a dependency you are using or something?
- P@mackieva@Charlie025x
I got the same problem. Adding " overflow: hidden;" to your container might do the trick, however the orange square becomes invisible too.
