Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
10
Comments
5

Edson Ruiz

@xedsonruizxviña del mar160 points

Hi I am Edson, frontend developer form Chile Front end developer with 1 year of experience, I build websites and apps. I have strong understanding of the building blocks of the web - HTML, CSS & JavaScript - so my projects are responsive. My English level is b2 grade C, certificate by Cambridge

I’m currently learning...

Im leraning about html, css, js, wordpress, react js, node js and php laravel. including the function of axios.

Latest solutions

  • single price grid


    Edson Ruiz•160
    Submitted over 2 years ago

    0 comments
  • css + font awesome icon


    Edson Ruiz•160
    Submitted over 2 years ago

    0 comments
  • html + css


    Edson Ruiz•160
    Submitted over 2 years ago

    0 comments
  • css double background


    Edson Ruiz•160
    Submitted over 2 years ago

    1 comment
  • grid + overlay Css


    Edson Ruiz•160
    Submitted over 2 years ago

    1 comment
  • html + css card


    Edson Ruiz•160
    Submitted over 2 years ago

    0 comments
View more solutions

Latest comments

  • Jenky Tajibana•30
    @namnueng32371
    Submitted over 2 years ago

    This So easy for newbie, “If I can do it, You can do it too.”

    2
    Edson Ruiz•160
    @xedsonruizx
    Posted over 2 years ago

    Hi. Have do you try Git-Fork before as a tool to manage your proyect? It is easy to use.

    Marked as helpful
  • Gabriel Ivan Carrillo•150
    @GabrielCarrillo93
    Submitted over 2 years ago

    NFT card component using HTML and CSS

    1
    Edson Ruiz•160
    @xedsonruizx
    Posted over 2 years ago

    Hi

    you could change the 100% width of the "col-" with an especific width that does not change with the size of the page.

    also for a better responsive way the grid class replace the 30% with a 50%

    send the "eth" text to the left

    and send the "clock" text to the right

    .grid {
        display: grid;
        grid-template-columns: 50% 50%;
        justify-content: space-between;
    }
    
    .eth {
        text-align: start;
    }
    
    .clock{
        text-align: end;
    }
    
    I hope it helps you
    
    
    Marked as helpful
  • GiwaHalim•140
    @GiwaHalim
    Submitted over 2 years ago

    stats preview card using html and css

    1
    Edson Ruiz•160
    @xedsonruizx
    Posted over 2 years ago

    Hi, actually you have to use, someone told before.

    • mix-blend-mode: multiply It is to combine the background 'purple' with the image above it.
  • nattyrice•20
    @nattyrice
    Submitted over 2 years ago

    QR Component using vanilla html/css w/ flex

    2
    Edson Ruiz•160
    @xedsonruizx
    Posted over 2 years ago

    Hi i have some corrections for you, I am not an English speaker so If you dont understand something send me an email to edsonruizsalinas@gmail.com, I will try to help you.

    • body size 100 just add to your css code

    body { height: 100%; }

    How to make body and html 100 heght

    • Center vertical card

    there is some ways to center a card in the middle of the page this is what I used code example and playground

    with this you can delete the top margin top from media query. I hope this will help you.

    Marked as helpful
  • Destany•50
    @destanyr
    Submitted over 2 years ago

    QR Code Component Solution

    2
    Edson Ruiz•160
    @xedsonruizx
    Posted over 2 years ago

    Hi i have some corrections for you, I am not an English speaker so If you dont understand something send me an email to edsonruizsalinas@gmail.com, I will try to help you.

    • body size 100 just add to your css code

    body { height: 100%; }

    How to make body and html 100 heght

    • Center vertical card

    there is some ways to center a card in the middle of the page this is what I used code example and playground

    • Add Img from your folders

    when you call an image from your folder, you dont have to write all your pc path in this case you have to write src="./images/image-qr-code.png" to get you image.

    I hope this will help you.

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

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