Tushar Mehra• 470
@tushar416
Submitted
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!😎
Ana Luz Cervantes
@analuzcervantes
All comments
- Ana Luz Cervantes• 1,705
@analuzcervantes
Posted
Hi! 👋
It looks great, congratulations!
Just add
aria-labelto your inputs to fix accessibility issuesBe well! 💻👾
1 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! 😀
Ana Luz Cervantes• 1,705@analuzcervantes
Posted
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
vwandvhbackground-position: right 50vw bottom 50vh, left 50vw top 50vh;Here I leave you more information about vw and vhBe well! 💻👾
2- Nadya Mumtazah• 245
@NadyaMumtazah
Submitted
Love to hear your feedback!
Ana Luz Cervantes• 1,705@analuzcervantes
Posted
Hi! 👋
Welcome to the frontendmentor community!
I would just like to give you some tips:
- For the background images
bg-pattern-topandbg-pattern-bottom, I recommend placing it in the body on stylesheet filebackground-image: url (), url ();For the position you can usevwandvhbackground-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 - For the background images
- Barabazs• 80
@Barabazs
Submitted
Any constructive feedback is appreciated. Don't hesitate to get in touch.
Ana Luz Cervantes• 1,705@analuzcervantes
Posted
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
@mbarons
Submitted
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?
Ana Luz Cervantes• 1,705@analuzcervantes
Posted
Hi! 🖖
Welcome to the frontendmentor community! 🎉
I would just like to give you some tips:
- For the background images
bg-pattern-topandbg-pattern-bottom, I recommend placing it in the body on style filebackground-image: url (), url (); - For the position you can use
vwandvhbackground-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 - For the background images
- Dcatnis• 220
@Dcatnis
Submitted
HI, here I use some JS any comment are wealcome!
Ana Luz Cervantes• 1,705@analuzcervantes
Posted
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 - Nainpreet Singh• 20
@nainpreet-05
Submitted
Ana Luz Cervantes• 1,705@analuzcervantes
Posted
Hi! 🖖
Welcome to the frontendmentor community! 🎉
I would just like to give you some tips:
- For the background images
bg-pattern-topandbg-pattern-bottom, I recommend placing it in the body on style filebackground-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 - For the background images
- Esteban Ardila• 45
@esardila
Submitted
Ana Luz Cervantes• 1,705@analuzcervantes
Posted
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 - TofuSupreme• 20
@TofuSupreme
Submitted
Ana Luz Cervantes• 1,705@analuzcervantes
Posted
Hi! 🖖
Incredible, your design is very responsive and the validation works perfectly!
Congratulations!
Be well, keep coding! 💻👾
3 @Harold-kun
Submitted
Any feedback is appreciated.
Ana Luz Cervantes• 1,705@analuzcervantes
Posted
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- Remerson Monteiro• 175
@kairemerson
Submitted
Ana Luz Cervantes• 1,705@analuzcervantes
Posted
Hi! 🖖
I quite like your design and it is very responsive. Congratulations!
Be well, keep coding !💻👾
4 - Faizzy• 165
@Faizzy
Submitted
The icons are not in perfect circle in mobile view, Need a fix
Ana Luz Cervantes• 1,705@analuzcervantes
Posted
Hi! 🖖
Add to the class
.icons iawidthof50pxandheightof50pxAlso 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 - Dave• 80
@DawidBal
Submitted
I appreciate any feedback.
Happy Coding!
Ana Luz Cervantes• 1,705@analuzcervantes
Posted
Hi! 🖖
It looks pretty good, and your design is very responsive, congratulations!
Just a little tip, leave a margin top for mobile versions, so the image doesn't get cut off.
Also check the HTML issues report and try to fix them
Be well, keep coding! 💻👾
3 - Henrique• 100
@UnaspHenrique
Submitted
Any feedback is welcome!
by Henrique.
I did it with the width 1440px.
Ana Luz Cervantes• 1,705@analuzcervantes
Posted
Hi! 🖖
It looks pretty good!
I would just like to give you some tips:
- For the background images
bg-pattern-topandbg-pattern-bottom, I recommend placing it in the body on style filebackground-image: url (), url ();For the position you can use vw and vhbackground-position: right 50vw bottom 50vh, left 50vw top 50vh;Here I leave you more information about vw and vh - Try to center the footer and give it a margin top for mobile versions
Be well, keep coding! 💻👾
6 - For the background images
- drallas• 375
@Drallas
Submitted
This was my 2nd project on Frontend Mentor and it was easier than the first 'Ping' Project. I also like the design the purple isn't boring and keeps me motivated! :)
Some feedback would be helpful on : How is the responsive layout / what can I improve? Social Icons on Safari / iPhone XS are not centred in Firefox on the XS it looks good, why is this?
I enjoyed this challenge, but still only using basic HTML / CSS and no SASS or Frameworks yet.
Ana Luz Cervantes• 1,705@analuzcervantes
Posted
Hello! 🖖
What @tomito26 is referring to is that you need to add in your class container__text__button
outline:none;In this way, the border is removed when the user clicks the Register button. I leave you more information about outline hereBe well, keep coding! 💻👾
3 - Ellie• 60
@ellieroy
Submitted
This is the first solution I've submitted! I'm new to web design so any feedback would be appreciated ☺️
Ana Luz Cervantes• 1,705@analuzcervantes
Posted
Hi! 🖖
Welcome to the frontendmentor community! 🎉
Your design is very good, congratulations!
Be well, keep coding! 💻👾
3 - Anjali M• 50
@aj-menon
Submitted
Any feedback is welcome.
Ana Luz Cervantes• 1,705@analuzcervantes
Posted
Hi! 🖖
Your desktop version looks good
To make your site responsive, I'll leave you here an article that I hope will help you
Be well, keep coding! 💻👾
4 - Karim• 590
@Galielo-App
Submitted
in this challenge I tried to use functional javascript, so using pure and only functions, no event listeners and global variables. I used gsap as well for very cool animations. Feedbacks would be appreciated.
Ana Luz Cervantes• 1,705@analuzcervantes
Posted
Hi! 🖖
Your design is amazing!
I like the animation you gave it. I would just like to recommend you to change the labels from small to label, so you would prevent the error text from invading the input in mobile version. Also, check the HTML issues report and try to fix them.
Be well, keep coding! 💻👾
4 - Abdullah• 25
@lolworld0077
Submitted
I love to get feedback from everyone.
Ana Luz Cervantes• 1,705@analuzcervantes
Posted
Hi! 🖖
Why don't you try putting the circles on the body in your style file? It would be something like this:
background-image: url(), url(); background-position: right 50vw bottom 50vh, left 50vw top 50vh;I hope it helps you.
Be well, keep coding! 🖖💻
4 - Xuan-Tam• 40
@xuantam-h
Submitted
Simple profile card challenge using Flexbox and Grid to design the card. Any feedback would be greatly appreciated ! I want to improve.
Ana Luz Cervantes• 1,705@analuzcervantes
Posted
Hi! 🖖
Your design looks pretty good.
I would only recommend you to change the background-position by
right 50vw bottom 50vh, left 50vw top 50vhThat way the background will adaptHere is more information about vw and vh
Be well, keep coding! 💻👾
4 - christopher• 105
@tw1zt
Submitted
I'm not sure how to get the background circles to move while the screen size changes. I did the positioning for the two sizes only. All help is welcome. Thank you.
Ana Luz Cervantes• 1,705@analuzcervantes
Posted
Hi! 🖖
Your design looks pretty good.
For your doubt with the background position, you can do it with vh and vw. It would be something like this
right 50vw bottom 50vh, left 50vw top 50vh[Here I leave you more information] (https://css-tricks.com/fun-viewport-units/)
Be well, keep coding! 💻👾
3 - Carlos Equiz• 60
@Equiz98
Submitted
Any feedback is welcome
Ana Luz Cervantes• 1,705@analuzcervantes
Posted
Welcome to the frontendmentor community! 🖖
It looks pretty good to me, you did a good job!
Be well, keep coding! 💻👾
4 - Julia• 110
@partum
Submitted
Should I have used media queries to make the background images move correctly when in mobile view or is there some other way to position background images?
Ana Luz Cervantes• 1,705@analuzcervantes
Posted
Hi! 🖖
For the question of the background, you don't need media queries, just modify the background-position for this ʼright 50vw bottom 50vh, left 50vw top 50vhʼ
Here you will find more information about vw and vh measurements
And lastly, just a little tip. Instead of using codepen.io you can use:
- [Vercel] (https://vercel.com/)
- [Netlify] (https://netlify.com)
Be well, keep coding! 💻👾
3 - Go Ushiyama• 135
@Enoah35
Submitted
I have started learning HTML and CSS, and for practice purpose I have challenged this project. I think I managed to get as close as it can be on the design. But if there are any pointers, suggestions on what I should correct, what not to do, anything I am all ears since I wish to improve myself. Took me roughly 6 hours to complete.
Ana Luz Cervantes• 1,705@analuzcervantes
Posted
Welcome to the frontendmentor community! 🎉
Your design is very good, but if you allow me I would recommend the following:
- Notice that your background is in a div tag with the card-layer class, to avoid the white borders, move everything related to the background to the body. So it would cover the whole page.
- In the card-layer, note that your height has a value of 700px, it would be a better practice to use values 100vh for heights and 100vw for widths, [I leave you more information here](https://css-tricks.com/fun- viewport-units/)
I will leave you some articles that will serve you for this and future challenges:
Be well, keep coding! 💻👾
5
