Skip to content
OverviewSolutions
16
Comments
4

Ivan Mercedes

@Draghonite270 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Ivan Mercedes•270
    @Draghonite

    I see, what you mean...for tablet and below, you made it scale down infinitely, which is a great idea though a min-width would've been good.

    Also, there's currently a javascript error in the console, when loading the favicon.

    I missed the active state and the bonus part...I got stuck on getting the images positioned right and couldn't get the shadow under the orange box with my method, which you accomplished. So I will be digging into your code for some pointers, especially given your css-only approach.

    Overall, a solid attempt.

    Marked as helpful
  • Ivan Mercedes•270
    @Draghonite

    Brittany, this was a brave attempt for your first challenge; keep it up. I tackled this one 7th and still found it challenging due to the background images: it calls for placing 2 background images on the same element, which already isn't your everyday task, but then also requires careful placement of the backgrounds.

    I would highly recommend looking into CSS Flexbox and Grid to kick your layout skills up a notch and to ditch using tables for layout; this will be an important skill as you move up in the challenges.

    https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/complete-guide-grid/

    Marked as helpful
  • Ivan Mercedes•270
    @Draghonite

    Your solution is near pixel-picture, nice work; unlike mine, it's response on mobile.

    I find that there's a weird jitter effect in the overlay due to the transition; my preference would be to get rid of the transition on the overlay, but keep it on the "eye"-con.

    As to how the box-shadow properties work, that's quite the read: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow.

    Marked as helpful
  • Ivan Mercedes•270
    @Draghonite

    Hi TiredQuan. Great work on your implementation. Having just completed my version, I'm glad I didn't peek at yours first. I second Alex's feedback and would also add that the organization of the SCSS is pretty solid.

    For better maintainability and reuse of styles, I do prefer a hierarchical structure that Saas provides over using long class names, but this depends highly on your and your team's standards. As for accessibility, I'd point you to the Accessibility Issues on your submission -- only 2 at the time of this writing, which isn't bad.

    Again, nice work. As soon as the design loaded on the page with the sleek CSS animations, I knew it was going to be a good one!

    Marked as helpful