QR-component
Solution retrospective
give me feed back
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@aemrobe
@yemiserrach-assefa well done, good work as your first challenge and I have given you some feedback. I hope it will be helpful.
1, you have to uncomment the .attrubtion class write your name on the place which says "your name here" because it helps to know who is the author.
2, after u uncomment .attrubution class in your html file. you should use flex-direction of column inside your body element to make .attrubtion class below the .container element
3, you should remove the width of 100% in the body element because it is 100% of the size of your screen by default.
4, you should remove paddign left from you img element
5, you shouldn't repeat the propertie which you already wrote again inside your media querie.the properties which you should write inside your media queries should be the properties which are different from the one which you wrote first. so I comment the properties which are repeated inside your code.
6, you should remove the align-items propertie inside your img element because the align-items propertie only written inside the parent flex container or on the element which you write the "display: flex;" property.
7,you should import the font family and use it in the body element which is given in the style-guide.md file.
8, you should remove the text transform property which is used in the .white class.
9, you should remove the <br> property and use margin property inside the h1 element.
10, you should remove the width property, margin property from the img element because it won't make the image responsive instead use the margin property inside it's parent qr element and use the max-width of 100% inside the img element.
11, you should use the font-size of the 15px inside the body element because all the elements inside the body element will use it so the h1 element won't look bigger.
12.you should use the max-width inside the .container element to avoid bigger sizes of the .container element.
13, you should increase the width of .container element inside the media querie to make it look good at ,mobile devices.
14, use the background color of light gray inside the body element
15, use the color of Grayish blue inside your paragraph element.
16, you can decrease the font-size of the h1 element to make a look the same as given inside the design folder.
17, it is recommended to use px value for border-radius property.
18, you can increase the padding left and padding right for your paragraph element inside your the media queriy.
Marked as helpful - @IrfanAshraf-pro
Hi @yemisrach-assefa, Great work done building the card, The image has no border on the left hand side. The paragraph is really hard to read and the colors scheme is a little off too. Believe this will help improve the card.
Marked as helpful
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord