Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
10
Comments
8
Patrick Cuentas Mariano
@PatrickCuentas

All comments

  • Dmitriy Smirnov•40
    @Teor99
    Submitted about 3 years ago

    NFT preview card

    #sass/scss
    2
    Patrick Cuentas Mariano•260
    @PatrickCuentas
    Posted about 3 years ago

    Good Work, Pixel Perfect style. Keep up coding. Happy coding :)

  • Kevin Mason•280
    @mrfinesse47
    Submitted over 3 years ago

    Responsive NFT preview card component

    #sass/scss
    2
    Patrick Cuentas Mariano•260
    @PatrickCuentas
    Posted over 3 years ago

    I think it's better to use REM units that are based on the font size of the root element.

    Mainly for accessibility issues since users have different default sizes other than 16px for different reasons.

    And when using REM units, the size is based on that default size of each user, which offers a better experience.

    I am not an expert, but I hope you can use my suggestion for a broader search on the subject.

    Greetings ✨

    Marked as helpful
  • brunafields•40
    @brunafields
    Submitted over 3 years ago

    NFT preview card component

    2
    Patrick Cuentas Mariano•260
    @PatrickCuentas
    Posted over 3 years ago

    Good job @brunafields.

    Recommendation:

    • Change the color of the text so that it contrasts more with the background of the card so as not to strain the eyes as much.
  • Asher Price•60
    @Ashen5558
    Submitted over 3 years ago

    css flexbox html5

    2
    Patrick Cuentas Mariano•260
    @PatrickCuentas
    Posted over 3 years ago

    Good job, I would suggest you add javascript to give it life or better learn a framework when you feel with a good base of javascript and be able to handle the requirements that they ask for faster.

    I invite you to see my solution to the same challenge made with ReactJS.

  • Rebekah•800
    @rebekahshaw92
    Submitted over 3 years ago

    HTML, CSS, Sass, Bootstrap 5

    1
    Patrick Cuentas Mariano•260
    @PatrickCuentas
    Posted over 3 years ago

    Hi, I'll help you with a snippet so you can improve the centering of your design in tablet+ resolution.

    @media screen and (min-width:992px){
        body {
             height: 100vh; 
            display: flex;
            flex-direction: column; 
            justify-content: center;
            align-items: center;
        }
    }
    
  • Latif Essam•60
    @latif-essam
    Submitted over 3 years ago

    React, TypeScript, Sass, Flexbox

    #react#typescript#sass/scss
    1
    Patrick Cuentas Mariano•260
    @PatrickCuentas
    Posted over 3 years ago

    Seems you need to zoom fit 150% to look great, good job anyways.

  • jul_julham•210
    @zulhamsy
    Submitted over 3 years ago

    NFT Preview using TailwindCSS

    #tailwind-css
    1
    Patrick Cuentas Mariano•260
    @PatrickCuentas
    Posted over 3 years ago

    Hello, good job, I recommend that you review the accessibility problems and HTML validations.

    At my current level of knowledge I see that the problems come from the lack of an HTML5 markup tag that wraps your main content.

    Here is an official example.

    Example

    <html lang="en">
        <head>
            <title>Hello</title>
        </head>
        <body>
            <header>This is the header</header>
            <nav>This is the nav</nav>
            <main>This is the main</main>
            <footer>This is the footer</footer>
        </body>
    </html>
    

    I emphasize that in your case it would be the <main>card-content...</main> and regarding the HTML validations I see that you have problems with the prefixes of tailwindCSS and I recommend that you take a look at the official documentation.

    Marked as helpful
  • Eklemis Santo Ndun•620
    @eklemis
    Submitted over 3 years ago

    Get Country App Using JS Promises and OOP Approach

    1
    Patrick Cuentas Mariano•260
    @PatrickCuentas
    Posted over 3 years ago

    Hello, congratulations for complete the challenge.

    I have 1 suggestion that I think you can easily solve. Height does not fill the entire viewport of the desktop screen when searching for a country and displaying the results. One suggestion for the icons would be to use the heroicons ones ("https://heroicons.com/") so that they look very good to what the design requires for the rest.

    I would like a feedback in my solution too if you can. ("https://www.frontendmentor.io/solutions/reactjs-reactrouterdom-tailwindcss-grid-and-flexbox-7vym2dCNk")

    Marked as helpful

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