Skip to content
OverviewSolutions
45
Comments
18
Bashar Khdr
@BasharKhdr1992

All comments

  • Bashar Khdr•930
    @BasharKhdr1992

    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
  • Bashar Khdr•930
    @BasharKhdr1992

    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
  • Bashar Khdr•930
    @BasharKhdr1992

    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.

  • Bashar Khdr•930
    @BasharKhdr1992

    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

  • Bashar Khdr•930
    @BasharKhdr1992

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

    Marked as helpful
  • Bashar Khdr•930
    @BasharKhdr1992

    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
  • Bashar Khdr•930
    @BasharKhdr1992

    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

  • Bashar Khdr•930
    @BasharKhdr1992

    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.

  • Bashar Khdr•930
    @BasharKhdr1992

    Great job!

  • Bashar Khdr•930
    @BasharKhdr1992

    Brilliant!

  • Bashar Khdr•930
    @BasharKhdr1992

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

    Marked as helpful
  • Bashar Khdr•930
    @BasharKhdr1992

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

  • Bashar Khdr•930
    @BasharKhdr1992

    When I opened the site on my browser the image showed under the Intro text. I think there is a tiny little bug around that you should check out. Nonetheless, nice solution, keep it up :). Also, you forgot to add the icons inside the dropdown features menu.

  • Bashar Khdr•930
    @BasharKhdr1992

    Great solution.

  • Bashar Khdr•930
    @BasharKhdr1992

    Nice solution. Congratulations. May I ask how do you set the steps like you did in your app ?

  • Bashar Khdr•930
    @BasharKhdr1992

    Good job on coding this out. However, there is a design flaw in your solution, where the info section is floating over the input element which makes it difficult for the user to see what he/she is typing. Also, the marker which indicates the location does not show on the map when after you have fetched the information.

    Marked as helpful
  • Bashar Khdr•930
    @BasharKhdr1992

    The spinner is pretty impressive. Nice work!

  • Bashar Khdr•930
    @BasharKhdr1992

    The rolling dice animation is really nice. All of your designs are so far 100% identical to the original design files. Really great work.