@Lolex3366
Jordan Martin
@JordanMartinWebDevAll comments
- @JordanMartinWebDev
Hey Lukas,
There are a few things I noticed about your design.
First, for some reason "Great" is no longer capitalized. Small fix I know...but it's the first thing I noticed.
Next, there is no spacing between the word "Summary" and the results section. I suggest adding a bit of margin-bottom. 15px or so should do it.
Next, the words in the right results pane aren't against the icons. Some weird spacing is happening there. The way I did this in my project was by adding the <img> inside of the <p> so they stayed together.
Lastly, you're missing the bold on the results pane for the actual scores. The 80s should be bolded.
Marked as helpful - @gireisalim@JordanMartinWebDev
Hey gireisalim, Looks like you did a bit of a palette swap with your design. Looks good in my opinion except on the right side in the original design the score received was bold. I like that aspect of the original design a lot. I think it adds more clarity to the image. Just my opinion though.
- @amine-boukhris@JordanMartinWebDev
Hey amine,
2 things I noticed when looking at your design.
First, the alignment of "Summary" and "Your Results." In the original design they were lined up horizontally. In your design, there is a clear drop in the height of the word Summary on the right side.
Second, the right side results area you didn't use the colors provided in the ReadMe for the background. This may have been an aesthetic choice on your part, I don't know. But if you set the background colors to the same as the text colors, then lower the opacity, you'll get the same effect as what's in the design.
- @AryanSoni4119@JordanMartinWebDev
Hey Aryan,
So it looks like the area on the right where your results are, you're missing the background colors. They were provided in the ReadMe...however you do have to change the opacity of them to make this look correct.
Also, I see you're missing the gradients for the left side of the card. You do a gradient in CSS like this "background: linear-gradient(hsl(252, 100%, 67%), hsl(241, 81%, 54%));" that's one from this project (for the button hover and the main gradient of the left pane), however there is another in the project I'll leave you to figure out which goes on the circle that is behind the overall result.
- @taylor003@JordanMartinWebDev
Hey joshua, So it looks like the area where your results are, the padding is all off. Looks like it's doing a stair step rather than being in line with consistent padding for all the results. Also, I see you're missing the gradients for the left side of the card. You do a gradient in CSS like this "background: linear-gradient(hsl(252, 100%, 67%), hsl(241, 81%, 54%));" that's one from this project (for the button hover and the main gradient of the left pane), however there is another in the project I'll leave you to figure out which goes on the circle that is behind the overall result.
Marked as helpful - @Grancan91@JordanMartinWebDev
Looks like you're missing the font that was provided. Did you have issues getting it working or anything? Or is that for a v2?
- @perterHUAN@JordanMartinWebDev
The bottom text has a color that is mentioned in the file download. Looks like you missed that. Also, the bottom text doesn't quite look like the example in your solution. In mine I used the width css attribute to make both the <h2> and <p> slight smaller than the QR code image. That kept the card text from looking so boxy and fixed the text alignment to meet the example.
- @Hanitah@JordanMartinWebDev
I think you got the card down pretty well, but you could move the attribution information at the bottom outside of the card since it wasn't a part of the challenge itself. Just take it out of your card div and put it right above your </body> tag. The original html doc included some CSS in it for the attribution section, so you should just have to move the html, assuming you didn't delete it.
Marked as helpful - @pferrarip@JordanMartinWebDev
Your solution looks to be stretched...you have too much padding or margin at the bottom of the card, and the QR code image looks taller for some reason? Did you add a width css selector? That's what I used and it doesn't have this weird stretching I'm seeing on this solution.
- @sheharyarabid@JordanMartinWebDev
The spacing is a little weird on your bottom text. Try adding inside of your card, the bottom text needs some margin/padding-bottom. Also, the text for both the header and <p> text should be slightly smaller than the QR Code Image size. Try adding a css width to that section and make it slightly smaller than the width of the image above. I think I did like 10px smaller and it looks good.
- @StevetheRebel@JordanMartinWebDev
In general, yes. There are a couple of reasons for this. First, mobile development has the most constraints for viewing due to the limited space. Second, mobile UI/UX tends to be more streamlined. By focusing on it first, you also have determined what information is crucial and what information is useful, but not 100% necessary. There are other reasons as well, but in general...mobile is a massive market, so making sure things work there first is extremely important.
Now...to give a bit of the inverse perspective from working in the industry. Some applications have literally NO mobile presence. I've worked on applications that the smallest screen it's used on is a surface tablet. So in some cases, at least in industry work, you may not have to make something for mobile at all. But this isn't the standard, and thus why mobile first is taught very heavily.
Marked as helpful - @FG-ABC@JordanMartinWebDev
So, it looks to me like your font-weight may be correct, but the font size is off? But honestly, I think you nailed the design replication otherwise. Just saw your question and figured I'd take a stab at helping. LOL
- @b1tj@JordanMartinWebDev
I think you got the card down pretty well, but you could move the attribution information at the bottom outside of the card since it wasn't a part of the challenge itself. Just take it out of your card div and put it right above your </body> tag. The original html doc included some CSS in it for the attribution section, so you should just have to move the html, assuming you didn't delete it.
Marked as helpful - @georgebuc1@JordanMartinWebDev
Looks good to me, however I do like the word spacing on the original design a bit better I think. See how the title sits slightly in from the edges of the QR code in the original? Also how the additional text is 3 lines long in the original? The way I resolved this was I set a width that was slightly smaller than the width of the QR image. Not sure it's the most appropriate solution, but it's what I did to get the same effect.
Marked as helpful - @HusseinMawla@JordanMartinWebDev
From a quick look, it looks like the QR code image is not centered. You have extra white space in your card on the right side.
Marked as helpful
