Skip to content
OverviewSolutions
45
Comments
18
Bashar Khdr
@BasharKhdr1992

All comments

  • Bashar Khdr•930
    @BasharKhdr1992Posted almost 2 years ago

    If you are using a library like React, or VueJs, you can make use of context api or Redux, or Redux Toolkit (in react for example) or Vuex (in case of vue) to create a global state for Dark/light theme. In this way there is no longer need to pass props down the dom tree multiple levels to implement a theme switcher. Instead, you save all state variables related to themes in one central point, and any component that have multiple themes can directly get access to the global state using context (again in case of react).

    Marked as helpful
    1
  • Bashar Khdr•930
    @BasharKhdr1992Posted over 2 years ago

    Great solution! well done. The only two issues you need to fix in my opinion is the button width in the mobile version (it should be wider), and the width of the sidebar also in the mobile version along with the font size of the vertical navbar inside it.

    Marked as helpful
    1
  • Bence Zámbó•510
    @zambobenceSubmitted over 2 years ago

    I found it difficult at the beginning to wire together the JS part with the form answers, and at the end to figure out the different colours one might use for the backgrounds.

    I would appreciate any feedback on the css and JS part because I have a feeling that I have overcomplicated it.

    Thank you.

    Interactive rating component

    2
    Bashar Khdr•930
    @BasharKhdr1992Posted over 2 years ago

    Nice Job. Congrats on completing the challenge. However, you might consider using a brighter color for the rating component background. One opinion, use the same color as the ratings buttons, then add some box-shadow around the buttons to make them separable from the background. That what I have done in my code.

    0
  • Bashar Khdr•930
    @BasharKhdr1992Posted over 2 years ago

    Nice solution. One tiny little note, the next and previous buttons on the lightbox did not work for me. I think you should double check that. Otherwise, good job on solving this intricate challenge

    0
  • Bashar Khdr•930
    @BasharKhdr1992Posted over 2 years ago

    Very nice animation. Is this vanilla Css out there, or are you using a library? Thanks in advance

    Marked as helpful
    1
  • IsNeonPlay•220
    @IsNeonPlaySubmitted over 2 years ago

    // ESPAÑOL // En si el reto fué sencillo en si, pero en el hover de la imagen se me complicó bastante... No supe muy bien el como centrar de forma vertical me frustré bastante en esa parte y pues intenté improvisar un poco para que intentara quedar bien en el diseño movil y escritorio, pero no pude... Acepto sugerencias y criticas constructivas para saber como pude resolverlo mejor...

    pd: Se que el uso de flex y grid son innecesarios en la descripción de la tarjeta, pero es bueno saber como funcionan de forma armoniosa juntos.

    // ENGLISH // The challenge itself was simple, but in the hover of the image it got quite complicated... I didn't know very well how to center vertically, I got quite frustrated in that part and so I tried to improvise a bit so that it would try to look good in the mobile and desktop design, but I couldn't... I accept suggestions and constructive criticism to know how I could solve it better...

    ps: I know the use of flex and grid are unnecessary in the card description, but it's nice to know how they work harmoniously together.

    Solution NFT preview card with Flex and Grid - By IsNeonPlay

    3
    Bashar Khdr•930
    @BasharKhdr1992Posted over 2 years ago

    Your solution is great. However, regarding the hover effect, you can improve it using the follwing steps:

    1. Set the position of the image as relative.

    2. Set the position of the overlay as absolute.

    3. The overlay element should take the whole width and height of the the overlaid element. This achieved by the following: .nft-img-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; width: 100%; border-radius: 12px; background-color: hsl(178, 100%, 50%); opacity: 0; transition: opacity 0.5s; }

    4. And finally for centering the eye icon inside the overly I used the following: .nft-icon-view { position: absolute; opacity: 0; top: 42.5%; left: 42.5%; } 4.1. I used positioning with the icon because I did not want the opacity of the overlay to affect the eye as well. For more information on overlaying visit the following link: Image overly icon

    Marked as helpful
    1
  • Bence Zámbó•510
    @zambobenceSubmitted over 2 years ago

    I found it difficult to declare the correct spacing and line width for the columns in desktop mode. I would be really grateful for your review to see how could I improve my code and enhance my coding skills.

    3 column preview card with flexbox

    1
    Bashar Khdr•930
    @BasharKhdr1992Posted over 2 years ago

    Great solution. There is a tiny bug you have to fix, he text color of the buttons should change as well upon hovering otherwise the text is unreadable

    0
  • Bashar Khdr•930
    @BasharKhdr1992Posted over 2 years ago

    Brilliant design!. Smooth layout. However, there is a slight bug in the mobile version. The slide show is not functional. I think you should check it out.

    0
  • Bashar Khdr•930
    @BasharKhdr1992Posted over 2 years ago

    Great job!

    1
  • Bashar Khdr•930
    @BasharKhdr1992Posted over 2 years ago

    Brilliant!

    0
  • Bashar Khdr•930
    @BasharKhdr1992Posted over 2 years ago

    Good job. However, You still have to add the hover effects to both the image, and the title.

    Marked as helpful
    1
  • Nurcholis•420
    @cholis04Submitted almost 3 years ago

    I decided not to use JavaScript in this challenge. So I need to use the checked state in CSS. Yes, the checkbox allows for that, but to create an accordion element, there is only one element open, the others will be closed automatically.

    So I used some radio buttons to do it. But the drawback is that the radio button cannot be unchecked so the accordion cannot be closed completely. Need some tricks to overcome it.

    What do you think?

    I'm using Radio Button on the Accordion Card FAQ without JavaScript

    2
    Bashar Khdr•930
    @BasharKhdr1992Posted over 2 years ago

    Perfect Design!. May I ask how did you position the background like that below the illustration-woman-online image ?

    0