Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
8
Comments
3

Rai

@RaiIsNotYourGuy100 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!

I’m currently learning...

HTML, CSS, Javascript

Latest solutions

  • Social Proof Section Vanilla HTML/CSS


    Rai•100
    Submitted over 3 years ago

    0 comments
  • FAQ Accordion Card Vanilla HTML/CSS with Animations


    Rai•100
    Submitted over 3 years ago

    2 comments
  • Profile Card Component Vanilla HTML/CSS


    Rai•100
    Submitted over 3 years ago

    2 comments
  • 3-Column Preview Card Vanilla HTML/CSS


    Rai•100
    Submitted over 3 years ago

    1 comment
  • Stats Preview Card Component Vanilla HTML/CSS


    Rai•100
    Submitted over 3 years ago

    1 comment
  • Order Summary Card w/ Vanilla HTML & CSS


    Rai•100
    Submitted over 3 years ago

    3 comments
View more solutions

Latest comments

  • Emanuel Marques•240
    @emanuelmarques45
    Submitted over 3 years ago

    Responsive preview card component made with HTML and CSS using flexbox

    4
    Rai•100
    @RaiIsNotYourGuy
    Posted over 3 years ago

    Howdy,

    If you are looking for some more examples for this challenge, you are more than welcome to check out my solution. I had trouble with the image with the filter on top. I had went with a mobile-first approach and then used a media query to create the desktop version. As for the image, I gave it a max-width and max-height to help it stay within the filter and also gave the card itself a max-width. I hope this helped answer your question. Let me know if you any questions.

    -Rai

    Marked as helpful
  • Rony Lee•40
    @ronylee11
    Submitted over 3 years ago

    QR code component using basic HTML, CSS and Flexbox

    4
    Rai•100
    @RaiIsNotYourGuy
    Posted over 3 years ago

    What I have been doing has been starting out on the mobile width that is stated in the style guide and then just eyeballing and using the design images to get it as accurate as possible. I don't believe we're suppose to know the exact width.

  • De'Andre Barnett•60
    @Babray03
    Submitted over 3 years ago

    Mobile landing page using CSS flexbox

    3
    Rai•100
    @RaiIsNotYourGuy
    Posted over 3 years ago

    Overall, very good. The border for the image and hover-image are rounded in the sketch-up. Only thing I can see.

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub