Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
14
Comments
10
Yínx
@Yinkajay

All comments

  • Angélica Viana•50
    @angelica-viana
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    Cada desafio estou fixando mais o conhecimento e conseguindo fazer com mais facilidade.

    What challenges did you encounter, and how did you overcome them?

    Colocar a foto dentro do circulo. Através de pesquisas.

    What specific areas of your project would you like help with?

    No momento nenhuma.

    Perfil de links sociais

    1
    Yínx•320
    @Yinkajay
    Posted about 1 year ago

    Nice design overall! Kudos I noticed you did not implement the hover state on the links though!

  • Bookie•30
    @bookiethelion
    Submitted about 1 year ago
    What specific areas of your project would you like help with?

    I need help with BEM methodology.

    Tarjeta simple con HTML y CSS

    1
    Yínx•320
    @Yinkajay
    Posted about 1 year ago

    Nicee work, but there are a few things I noticed!

    Your image doesn't match the one provided in the illustration, which could throw off the design consistency a bit.

    To make your solution look more like the design, try using the fonts provided. It'll help keep everything in line with the original concept.

    Also, make sure the title heading has a hover state and double-check that the paragraph text matches what's shown in the design.

  • Nephilimist•50
    @Nephilimist
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    .

    What challenges did you encounter, and how did you overcome them?

    ,

    What specific areas of your project would you like help with?

    .

    Flex

    1
    Yínx•320
    @Yinkajay
    Posted over 1 year ago

    Your solution looks a bit bigger than the original design, especially on smaller devices below 350px width where it doesn't scale well.

    Also, the QR image doesn't have alt text, which can make it harder for some users to access.

    But overall, great job!

  • fadikbbb•50
    @fadikbbb
    Submitted over 1 year ago

    qr-code-component-main

    1
    Yínx•320
    @Yinkajay
    Posted over 1 year ago

    Nice solution you got there!

    Here are the few things I noticed!

    The vertical margin of 200px used for aligning the card container is causing excessive page height, leading to unnecessary scrolling. Consider using CSS Flexbox, CSS Grid, or a mix of relative/absolute positioning with transformations to position the element. This adjustment will contain the content within the viewport height, eliminating the need for scrolling.

    Additionally, update the placeholder 'your name here' in the attribution text with your actual name to personalize it properly.

    Marked as helpful
  • Manjunath•180
    @Manju299
    Submitted over 1 year ago

    Interactive Rating Component

    1
    Yínx•320
    @Yinkajay
    Posted over 1 year ago

    The attribution text, excluding the links, suffers from low readability due to insufficient contrast between the text color and the body background. Enhancing this contrast will improve readability.

    Replace the placeholder 'your name here' in the attribution text with the intended name to personalize the attribution properly.

    Modify the cursor behavior upon hovering over the submit and rating buttons to change it to a pointer. This adjustment can be implemented using cursor: pointer in the CSS for better user interaction feedback.

    Very nice solution regardless, I like your card background linear gradient!

    Marked as helpful
  • is3hhhhh•70
    @is3hhhhh
    Submitted over 1 year ago

    responsive qr code page using css tools

    1
    Yínx•320
    @Yinkajay
    Posted over 1 year ago

    The heading's text color should match the dark blue hsl(218, 44%, 22%) from the design images instead of the current black color.

    Furthermore, consider center-aligning all text elements (heading and paragraph) using text-align: center in the CSS to maintain consistent alignment throughout.

    Additionally, the QR card appears slightly narrower than the design's specifications, suggesting a need for adjustment in its width.

    Apart from these minor issues, your solution rocks!

    Marked as helpful
  • Ananyab3100•20
    @Ananyab3100
    Submitted over 1 year ago

    Pricing landing page using CSS grids

    #tailwind-css
    1
    Yínx•320
    @Yinkajay
    Posted over 1 year ago

    The Google font import tag contains a visible "/>", which should be addressed to ensure proper functionality without displaying text on the page.

    The background colors of the "Monthly Subscription" and "Why Us" sections differ in the design, but both sections have the same background color in the implemented solution. Adjusting these colors according to the design specifications is necessary.

    The attribution should be positioned separately from the main solution, possibly at the bottom of the page using absolute positioning.

    Apart from these, your solution is spot on and your responsivness is cool!

    Marked as helpful
  • Sivakumar•10
    @SivakumarAmsa
    Submitted over 1 year ago

    QR-Code-Component

    3
    Yínx•320
    @Yinkajay
    Posted over 1 year ago

    The main heading color should match the one specified in the design file. Referring to the style guide markdown file provided can help identify all the document colors accurately.

    Additionally, the body background color needs adjustment to align with the design file. Setting it to the lighter gray color hsl(212, 45%, 89%) will ensure consistency with the design standards.

    For mobile screens (375px), consider resizing the QR card to enhance responsiveness. Shrinking its dimensions will facilitate better adaptation to the mobile layout.

    Beyond these observations, the overall solution is strong and meets the project requirements effectively.

    Marked as helpful
  • Akshidhan•60
    @Akshidhan
    Submitted over 1 year ago

    QR code component

    2
    Yínx•320
    @Yinkajay
    Posted over 1 year ago

    Hello Akshidhan, to answer your question, there a variety of ways to center an element vertically, you can use the CSS Flexbox or CSS grid, and also the positioning method you said you used works as well. Looking at your code, I only notice fixed and absolute positioning though.

  • Faisal Omar•50
    @faom002
    Submitted about 2 years ago

    css

    #accessibility
    2
    Yínx•320
    @Yinkajay
    Posted about 2 years ago

    Calculation works fine with some minor testing. Only a few style changes might help, like the submit button arrow, it''s included in the images folder of the starter pack and the padding on the input fields.

    Marked as helpful
Frontend Mentor logo

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

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