Latest solutions
Latest comments
- @ZioSenkai@Mitko90
Hi, nice solution
It looks great.
To your issue:
The background of the circle needs to be a colour to transparent gradient. I looked at your code and you have
.result-container{ background: linear-gradient(var(--clr-primary-500), var(--clr-secondary-hsl-500)); }
You need to switch your
var(--clr-secondary-hsl-500)
with a transparent colour, in your case that'svar(--persian-blue)
So your gradient should look like this:.result-container{ background: linear-gradient(var(--clr-primary-500), var(--persian-blue)); }
Honestly any colour with 0% opacity will work, I just looked at your custom properties and found this one. This should fix it.
Hope I was helpful
Marked as helpful - @uniquejoycee85@Mitko90
Hello, there
I suggest you take a look at this video
He explains everything in such a way that everybody can understand.
Happy coding
- @MelvinAguilar@Mitko90
I just wanted to drop in and say:
You are a master at perfection. 🙌️🙌️🙌️
- P@amakura-411@Mitko90
Hi, nice solution.
It looks great. Pixel perfect
Maybe you can check some suggestions I have for you:
- You used three times the
<h1>
heading. This heading should only be used once. Maybe change it to<h2>
as it can be reused. Of course every page should have anh1
heading so I suggest adding avisually-hidden
one to the page, so it doesn't generate an accessibility report. - Your buttons should direct the user to a different part or page of the site. So maybe switch the
<button>
with the<a>
tag.
I had the exact same mistakes when I did this challenge so I redid it with the changes. You can, if you want, check both of my submissions here and here.
Above all the solution you submitted looks great.
Happy coding.
Marked as helpful - You used three times the
- @CODA29@Mitko90
Hi, nice solution. It looks very similar to the design.
I have only one little thing to note:
You have
display: flex
on the body, which is great, but then on your.card
you havejustify-self: center
The
justify-self
does not have any effect here as the parent is set toflex
.justify-self
is used on items which parents havedisplay: grid
. You can delete it and nothing will change.Keep up the good work and Happy New Year 🎉️🎉️🎉️
Marked as helpful - @vikas0304@Mitko90
Your image is not loading because the path to it is incorrect. You need to rplace
images/image-qr-code.png
in your HTML withimage-qr-code.png
because your image is not located in images folder