Skip to content
OverviewSolutions
11
Comments
34
Ana Luz Cervantes
@analuzcervantes

All comments

  • Tushar Mehra•470
    @tushar416Submitted over 3 years ago

    It was a nice and easy project. Front-end mentor improved my coding skills, I can build faster than before and thanks for the kind community here. We all can grow together. Just keep learning!😎

    Intro component with signup form

    1
    Ana Luz Cervantes•1,705
    @analuzcervantesPosted over 3 years ago

    Hi! 👋

    It looks great, congratulations!

    Just add aria-label to your inputs to fix accessibility issues

    Be well! 💻👾

    1
  • Nicholas•235
    @fytrwSubmitted over 3 years ago

    Hi! 👋 It's my first project here and one of my first projects at all. I didn't know how to correctly display svgs in this project. I tried as a background-image but it didn't work so I pasted svg tag. Also, I had difficulty with placing svgs with top, left, right, and bottom and I used media for mobile. It'll be great to hear some feedback from you.

    Thanks in advance! 😀

    First project - Profile card - HTML & CSS

    1
    Ana Luz Cervantes•1,705
    @analuzcervantesPosted over 3 years ago

    Hi! 👋

    Welcome to the frontendmentor community! 🎉

    Why don't you try to put your svg in the body in your style file, it would be something like this: background-image: url(/images/bg-pattern-top), url(images/bg-pattern-bott);

    For the position you can use vw and vh background-position: right 50vw bottom 50vh, left 50vw top 50vh; Here I leave you more information about vw and vh

    Be well! 💻👾

    2
  • Ana Luz Cervantes•1,705
    @analuzcervantesPosted over 3 years ago

    Hi! 👋

    Welcome to the frontendmentor community!

    I would just like to give you some tips:

    • For the background images bg-pattern-top and bg-pattern-bottom, I recommend placing it in the body on stylesheet file background-image: url (), url (); For the position you can use vw and vh background-position: right 50vw bottom 50vh, left 50vw top 50vh; Here I leave you more information about vw and vh
    • For your user profile class you can use display: flex; justify-content: space-evenly; I leave you a Flexbox guide
    • Check the Accessibility issues and HTML issues report and try to fix them

    Be well! 💻👾

    0
  • Ana Luz Cervantes•1,705
    @analuzcervantesPosted over 3 years ago

    Hi! 👋

    I like it a lot, especially the label effect. Congratulations!

    It also adapts very well to all devices!

    Be well, keep coding!

    1
  • mbarons•10
    @mbaronsSubmitted over 3 years ago

    I think I'm using too much of relative positions, I'm not sure that is a good practice. Can someone take a look please?

    CSS Grid, Flexbox

    2
    Ana Luz Cervantes•1,705
    @analuzcervantesPosted over 3 years ago

    Hi! 🖖

    Welcome to the frontendmentor community! 🎉

    I would just like to give you some tips:

    • For the background images bg-pattern-top and bg-pattern-bottom, I recommend placing it in the body on style file background-image: url (), url ();
    • For the position you can use vw and vh background-position: right 50vw bottom 50vh, left 50vw top 50vh; Here I leave you more information about vw and vh
    • Check the Accessibility issues and HTML issues report and try to fix them

    Be well, keep coding! 💻👾

    2
  • Ana Luz Cervantes•1,705
    @analuzcervantesPosted over 3 years ago

    Hi! 👋

    Your solution is amazing!

    Just a tip, did you see that white border in the background? To fix it change your background-color in the body

    Also try to fix the HTML accessibility report

    Be well, keep coding! 💻👾

    2
  • Ana Luz Cervantes•1,705
    @analuzcervantesPosted over 3 years ago

    Hi! 🖖

    Welcome to the frontendmentor community! 🎉

    I would just like to give you some tips:

    • For the background images bg-pattern-top and bg-pattern-bottom, I recommend placing it in the body on style file background-image: url (), url ();
    • For the position you can use vw and vh background-position: right 50vw bottom 50vh, left 50vw top 50vh; Here I leave you more information about vw and vh

    Be well! 💻👾

    1
  • Ana Luz Cervantes•1,705
    @analuzcervantesPosted over 3 years ago

    Hi! 👋

    It looks great!

    Just a little tip, leave a margin top for mobile versions, so the image doesn't get cut off. And leave a margin top for attribution class that way it doesn't cover the questions and answers.

    Be well! 💻👾

    3
  • Ana Luz Cervantes•1,705
    @analuzcervantesPosted over 3 years ago

    Hi! 🖖

    Incredible, your design is very responsive and the validation works perfectly!

    Congratulations!

    Be well, keep coding! 💻👾

    3
  • Ana Luz Cervantes•1,705
    @analuzcervantesPosted over 3 years ago

    Hi! 🖖

    Welcome to the frontendmentor community! 🎉

    For your first challenge, it's pretty cool. But it is not responsive, flexbox or grid could make it easier.

    I'm going to leave you two articles that can help you to carry out this and future challenges:

    • [Flexbox] (https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
    • [Grid] (https://css-tricks.com/snippets/css/complete-guide-grid/)

    Be well, keep coding! 💻👾

    4
  • Ana Luz Cervantes•1,705
    @analuzcervantesPosted over 3 years ago

    Hi! 🖖

    I quite like your design and it is very responsive. Congratulations!

    Be well, keep coding !💻👾

    4
  • Ana Luz Cervantes•1,705
    @analuzcervantesPosted over 3 years ago

    Hi! 🖖

    Add to the class .icons i a width of 50px and height of 50px

    Also add a hover class for your register button, for when the user hovers the button color changes to hsl (300, 69%, 71%)

    Lastly, check your HTML issues report and try to fix them

    Be well, keep coding! 💻👾

    3