Skip to content
OverviewSolutions
3
Comments
4
Blueberry Turtle
@AbraCadabstrax

All comments

  • Blueberry Turtle•80
    @AbraCadabstraxPosted over 1 year ago

    Hello. You pushed code and real artists ship. So take this as a win.

    First, a note. "Responsive" is not the same thing as "responsible". Change up that title and have a good laugh, you learned something about the difference.

    Now, as far as getting the responsive part set up. This is done largely through @media queries. A great place to start for this would be Kevin Powell's youtube video where he takes on this same challenge: https://www.youtube.com/watch?v=B2WL6KkqhLQ.

    Good luck on your journey.

    0
  • iamis15•70
    @iamis15Submitted over 1 year ago

    Hello. To whoever's reading, if you have the time, please check out this recreation of a design from this website.

    -The part i found hardest was getting the website to be responsive. Almost all options i tried always ended up in an undesirable result

    • Another thing is measurements. Ive always not known how to use them. or when its appropriate to use rem, em, percentage or pixels.

    I am very new to this so any feedback and tips will be greatly appreciated. Thank you

    Project Preview

    3
    Blueberry Turtle•80
    @AbraCadabstraxPosted over 1 year ago

    Hello, there is a broken link to the code source for your project. Now, this may be my issue as a user or you may have done something like delete the repository or change its name. Either way it makes it hard to provide useful feedback.

    That said, the preview looked pretty good. So, if anything, the end result is ok.

    Marked as helpful
    0
  • Lucas 👾•104,400
    @correlucasSubmitted about 2 years ago

    👾 Hello, Frontend Mentor coding community. This is my solution for the challenge Product Preview Card.

    🎨This is an old old old solution and the first one that I've applied some customization. I did some improvement in the code but there are many things to improve, but I was just lazy to change the html structure to use the proper tags like the picture for the image, because I was afraid to have to write again the grayscale effect on it. 🤭

    • 👨‍🔬 Custom Images + Grayscale/Saturation Hover Effect
    • 🧚‍♀️ Intro Zoom Out Animation (I need to study it more to make smooth transitions).
    • 🎨 Gradient

    Feel free to leave any feedback about my design chances and help me improve my solution or make the code clean!

    Product Preview Card (Vanilla CSS and Custom Hover State on Hero)

    10
    Blueberry Turtle•80
    @AbraCadabstraxPosted over 1 year ago

    Perhaps a bit trivial, but I would swap out the shopping cart emoji for the one provided with the assets for the project.

    Otherwise very good job.

    0
  • Blueberry Turtle•80
    @AbraCadabstraxPosted about 2 years ago

    Not much to say here, other than you did a great job. From what I can tell the outcome lines up with the spec and the code is clean. I checked it out for mobile and that seemed to work well too.

    As far as the React code is concerned, I am not well versed in React so I can't comment much on that. I do think that it might be overkill for this particular project as the only moving part is the custom validator. Still, since it is one of your first React projects this was probably an easy way to get your feet wet.

    Kudos!

    Marked as helpful
    0