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

Ryan Cahela

@RyanCahela220 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

  • Perfume Card

    #bem

    P
    Ryan Cahela•220
    Submitted about 3 years ago

    0 comments
  • Landing Page with Animated Dropdown (Next.js, TailwindCSS)

    #next#tailwind-css#react

    P
    Ryan Cahela•220
    Submitted about 3 years ago

    1 comment
  • Expenses Bar Chart (React.js, TailwindCSS)

    #react#tailwind-css

    P
    Ryan Cahela•220
    Submitted about 3 years ago

    0 comments
  • Entertainment Web App with Backend API for Image and Data Loading

    #react#styled-components#express

    P
    Ryan Cahela•220
    Submitted about 3 years ago

    0 comments
  • QR Code Component using SMACSS with utility classes


    P
    Ryan Cahela•220
    Submitted over 3 years ago

    0 comments
  • Equalizer Landing Page Practice (Vanilla HTML, CSS)


    P
    Ryan Cahela•220
    Submitted almost 4 years ago

    0 comments
View more solutions

Latest comments

  • Hari Kishan•10
    @KishanHK
    Submitted over 3 years ago

    qr-code-component using HTML and CSS.

    3
    P
    Ryan Cahela•220
    @RyanCahela
    Posted over 3 years ago

    Hello Hari, This is a good first try.

    With most things in web development, there aren't 100% correct or 100% wrong solutions, there are some things I would have done differently.

    1. Move the CSS in the head of the HTML to the external stylesheet you created.

    2. I would remove the padding from the qr-code image and put it on the .middle-container class. that way anything inside the .middle-container will be pushed away from the edge instead of just the image.

    3. change the .middle-container class name to something more specific like "qr-card" or "qr-container" or something like that.

    4. It works for this small project but usually you want to stay away from using element selectors to target a single element on the page (the h3 and p rules). it can get confusing once you have more than one <p> or <h3> on the page. unless you want them to look exactly the same, which in some cases you might.

    like I said, these are just suggestions. There are 1000 different ways to do the same thing.

    Marked as helpful
  • Igu•95
    @igor-mit
    Submitted over 4 years ago

    Responsive Stats Preview card using HTML and CSS

    3
    P
    Ryan Cahela•220
    @RyanCahela
    Posted over 4 years ago

    I colored the image by adding a css pseudo element and positioning it absolutely over the image, then I added a HSLA background color to the pseudo element.

    A quick example.(not complete code) .hero-image { position: relative background-image: url(“path to image file”) }

    .hero-image:before { position: absolute height: 100% width: 100% background-color: hsla(“insert hsla values here”) }

  • Thomas Simonet•50
    @thomas-simonet
    Submitted over 4 years ago

    Pod Request Access Landing Page

    1
    P
    Ryan Cahela•220
    @RyanCahela
    Posted over 4 years ago

    This is really good! I'm using it as a reference to improve my version. Thanks!

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