Skip to content
OverviewSolutions
7
Comments
6
Harsh
@HarshPrateek559

All comments

  • Femi•40
    @mi-olakSubmitted over 2 years ago

    I've been unable to add the hover effect, somehow it just doesn't work. I'm open to any and all constructive criticism and suggestions, thanks.

    NTF preview card component

    1
    Harsh•210
    @HarshPrateek559Posted over 2 years ago

    I think the design is great. You have put in the effort and must have learned a lot from this project

    Although, there are a few things that can still be fixed.

    1:) You should make your card at the absolute center of the screen. To achieve that, you can do to achieve that is to make the body have 0 paddings and 0 margins while making it have 100vh of height and 100vw of width. As you already made the body a flex container so this move would automatically center the div for you.

    2:) Make the image absolute positioned and then give it a z-index of 1. Make another element in your HTML with the required color and place it on top of the image with the visibility hidden property. When hovered over, make this element visible. This would give you the same effect as you want.

    I think that if you implement these solutions then the project would become perfect.

    Let me know what happened😊

    Marked as helpful
    0
  • Harsh•210
    @HarshPrateek559Posted over 2 years ago

    You are not alone with that white flash problem. Everyone who attempted this project experienced this problem. I also could not find how to fix it, although I do know why it happens.

    It happens because when your website is loaded for the first time, it has to load all the images and other assets. When this happens for the first time, the assets are loaded a little later than the body of the web page, thus what appears as a white flash is just the white body of the webpage which is covered by the background image as soon as it gets loaded.

    I would advise you to not get into that stuff. Your website is already looking pretty neat, what you can do instead is make the website with React so that it does not reload every time a link is clicked. It would be a great upgrade and could very well become your first step in Javascript Frameworks.

    You can also make the buttons round in CSS if you like with the border-radius of 50%, and make the height and width of the buttons equal. I would look much better that way and would be way closer to the original design.

    Hope these suggestions would help😊.

    0
  • Harsh•210
    @HarshPrateek559Posted over 2 years ago

    You could have just made your collapsable navbar. That way, you would have got full control of how it should look and it would have been a better learning opportunity. I too used the bootstrap navbar at first but it was so ugly that I removed it and for the first time made my own collapsable navbar. It is just a personal preference but it helped me with the later project in which I had to make a custom navbar.

    Marked as helpful
    0
  • Raymart Pamplona•16,100
    @pikapikamartSubmitted about 3 years ago

    Hello. This is my 23rd challenge here and trying to be good at framer-motion^^

    It's been really fun doing this even if I finished for days since got loads of school activs :>>.I am still new to using framer-motion so I don't really know if I used it correct but it works for now and i'm glad with that. I also reuse some animations that I used before :>

    I tried to add more animation like page load but I really lack what to add so I kind of erase that one but I added some animations on the different tabs interactive elements and happy with the result. I forgot to right now a navlinks trap-focus but could done in other day:>

    But overall, i'm happy with this one. Would be really great if you have find any other bugs on this one. Thank you^^

    Mobile first, Next.js

    5
    Harsh•210
    @HarshPrateek559Posted over 2 years ago

    Amazing design!!! I was just blown away by all the animations which you have used on your website. I am also trying to do the same, but till now I am no way near as good in terms of animations as you are. Can you tell me how can I improve upon that? It looks so good in the design.

    Also, I saw that your explore button is not redirecting to the destination page. According to the design, you should make use of the button to redirect to the destination page.

    0
  • Harsh•210
    @HarshPrateek559Posted over 2 years ago

    Your solution lacks the dropdown menu which was required to make and also you used the wrong bootstrap navbar, you should have used the off-canvas navbar from bootstrap. It would have fitted perfectly with the demands of this project.

    0
  • Harsh•210
    @HarshPrateek559Posted over 2 years ago

    Actually, async is used when a function is fetching data from a database or API. Also, you have to wait for the fetch API to get data from the API. For this, you are supposed to use await keyword in front of the response which is coming from the API.

    Marked as helpful
    0