What are you most proud of, and what would you do differently next time?
I am proud of the final result for the h1 title. Next time, I need to review some of the basics (line breaks in HTML, Box model in CSS for instance)
What challenges did you encounter, and how did you overcome them?
I spent a significant amount of time wondering:
1- How to move the second half of the text to the bottom: I though I had to use some complex CSS code or something. After first googling it, I used a tag.
2- Later, after looking at the picture of the final result, I realised there was too much space between the two lines in the title. Again, went thinking it was CSS related. I ended googling it again and found the tag--which, for some mysterious reason, I forgot existed--, and that ended up fixing it.
I also googled how to make the image's corners round.
What specific areas of your project would you like help with?
I need help with the paragraph in grey: It still doesn't look like the image preview, despite having the font-size indicated in the style-guide.
Hi there. Good job on completing the challenge!
You have some problems in your code that you can solve with these fixes:
On line 1 in styles.css right way to import font is @import url("https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap"); After that imported font will be available and you can apply it to you elements. If you apply font to body or html then all elements inherit this font: body {font-family: "Outfit", sans-serif;}
Your solution missing right background color. You can fix it with this line: body { background-color: hsl(212, 45%, 89%); By the way on line 7 in styles.css in color rule you assign three color values to color property, but you may assign only one color value.
You wrote that you need help with paragraph. Your font size for paragraph is right, but your h1 and QR-code are too big. For h1 you can try font-size: 22px; You can place these elements inside div with fixed width. This solution as well will fix missing border around image and .box. Style for this div: { width: 320px; border-radius: 15px; padding: 15px; background-color: white; }. To prevent image to overflow container you can add width: 100%; to img.
To center wrapper div (added above) which contains QR-code and .box you can apply this code to body: { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh;
If you need help with flexbox, you can read article on CSS Tricks CSS flexbox Layout guide.
Also you styles.css contains extra rules that do nothing:
line 20 background-color: hsl(0%, 0%, 100%); on img element. You don't need background-color on image.
line 22 border-style: none; changes nothing, because default value for border-style is none.
line 30 border: 1px;. You forgot to assign a border-style, which means that the default value of none will be used, and thus .box will not have border at all.
line 31 display: block changes nothing, because default value for display for div is already block.
line 37 text-align: center; is unnecessary because in h1 ruleset and .paragraph ruleset you define same rule. Other elements don't need this rule.
I hope you find it useful! Overall you did a great job though.Happy coding!
