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

SIDA

@GSida015georgia190 points

I am 16 year old front-end developer.I have learned:css, sass, javascript, typescript, angular. I'm looking forward to get a job and get experience in that type of group projects.

I’m currently learning...

currently I am learning a C#,vue,js,react.

Latest solutions

  • Qr code card featuring Responsivnes and flexbox

    #accessibility#fresh

    SIDA•190
    Submitted about 1 year ago

    3 comments

Latest comments

  • Markus Harrison•130
    @markharrison777
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    This is pretty straight-forward. Great for beginners, project.

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

    The size of the qr code and colors were a little bit of a challenge. Before realizing that I could use Figma to solve the issue.

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

    None

    HTML, CSS

    1
    SIDA•190
    @GSida015
    Posted about 1 year ago

    hello Im gonna write it fast i dont have enough time!!!

    So the card sizes are diffrent from template... width should be 320px and height should be 497px gap between img and text should be 1rem or 16px img width and height should be equal to 288px padding in card should be 16px or 1rem and make box-shadow color more light!!!

    I hope it helps you!I would appreciate if you mark this comment as helpful!!!

    Marked as helpful
  • ChukwunemeCodes•10
    @ChukwunemeCodes
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    anything you can imagine, you can achieve in frontend development

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

    font usage had to check online

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

    a more simple approach to solve this.

    QR code component solved using html div and CSS grid and media queries

    1
    SIDA•190
    @GSida015
    Posted about 1 year ago

    Hello👋🏼!!!

    I've reviewed your code and I have some advice for you!

    1.The gap between the img and text containers is too high... it should be 16px or 1rem.

    2.In the style CSS, you have padding: 0.75rem 0.75rem;. The right value includes the up and down setting, and the second value is for right and left. Instead of repeating the value 0.75rem twice, you can just write padding: 0.75rem;. It's better. If you don't understand, you can also type 4 values like (it's just an example): margin: 24px, 28px, 11px, 10px;. The first value is up, the second value is right, the third value is down, and the fourth value is left.

    3.And also make sure that the card width is equal to 320px and height to 497px.

    I hope this comment helped you! I would appreciate it if you marked this as helpful.

    GOOD LUCK!

    Marked as helpful
  • hernon07•150
    @hernon07
    Submitted about 1 year ago

    QR-Code-Component HTML // CSS

    1
    SIDA•190
    @GSida015
    Posted about 1 year ago

    Hello!!! I saw your code,theres some things to upgrade!

    1.your structure of text is messed up it may be because of high font-size or because you did it with rem anyways try to do with px's... it should be instead of 1rem 16px and instead of 1.5rem 24px wich are high as i think! try to reduce them

    2.padding from top is high reduce it!

    3.i think it will help...Make sure that width of card is 320px and height 497px I didnt saw if you had that mentioned in your code or not!

    Sorry I dont have many time i ope you'll figure things out...if not reply to comment with a thing that you need help with and I will contact you as soon as I will be free! GOOD LUCK!!

    also ill appreciate if you mark this helpful

  • A-r-g-h-a-j-i-t•20
    @A-r-g-h-a-j-i-t
    Submitted about 1 year ago

    QR-code(frontend-mentor)

    1
    SIDA•190
    @GSida015
    Posted about 1 year ago

    Hello! 👋🏻

    I've reviewed your code and I have some advice for you:

    1.The card size is larger than it is on the template... width should be 320px and height should be 497px.

    2.The image size is also larger than it is on the template... it should be both 288px in height and width.

    3.The border-radius is too low, make it 15px.

    4.The box shadow is also too dark, make it lighter... you can achieve this by changing the color to be much lighter and also reducing the distance that the box-shadow covers to 15px.

    5.The paragraph color is incorrect, make it darker (the color is provided in the project file).

    6.The padding of the card should be like this: padding: 16px 32px; or if you want to use rem, do it like this: padding: 1rem 2rem;.

    I hope my comment helped you! I would appreciate it if you marked this comment as helpful!

    Good luck in your next projects!

  • Bikram Thapa•80
    @BikramThapa0803
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I am proud of that i am able to do that. and next time i'll make it more better.

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

    background color but i make it

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

    where i wrong and what should i do about it.

    qr code component

    1
    SIDA•190
    @GSida015
    Posted about 1 year ago

    Hello👋🏻!!!

    I reviewed your code and there is A LOT to go through!!!

    I can view your code in inspect element, but I don't have time, so I'll just guide you!!!

    1.The width and height are correct in this screenshot, but when I go to the website, it's just ughh... So, I can't access your code because you didn't provide the correct link. But make sure that the width is equal to 320px and the height is 497px. You can adjust it by padding as well, with 16px or 1rem on top/bottom and 32px or 2rem if you are doing the project with rem!

    2.The image of the QR code isnt right!!! Both width and height should be 288px, and the border radius should be 15px.

    3.Text gap should be 16px. You can do it with margin-top on the paragraph or by using display flex on .headers. Also, the main text should be lighter!

    4.You should follow the template! Your colors aren't right; the background should be a different color, as well as the paragraph and main text!

    Also, next time use the repository URL for us to view your code!

    I hope this helped you! I would appreciate it if you marked this as helpful.

    Marked as helpful
  • szramkalukasz•20
    @szramkalukasz
    Submitted about 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?

    .

    QR Code

    2
    SIDA•190
    @GSida015
    Posted about 1 year ago

    Hello!👋

    Great work, but I have some comments to make!

    1. Remove the footer from the card! It disrupts your design; you can place it outside of the card.

    2. The border radius of the QR code image is too high; you should reduce it, for example, border-radius: 15px;.

    3. Make sure the width of the card is 320px and the height is 497px!

    4. As you can see, the paragraph of the card is not following the design. You can balance it by reducing its width or adjusting the padding of the card(but I think adjusting with width is right option here). Additionally, consider lowering the font size of the title of your card.

    I hope you find this comment helpful. I would appreciate it if you would mark this comment as helpful.

    Marked as helpful
View more comments
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