@yuri-polessky
Posted
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 addwidth: 100%;
to img. - To center wrapper div (added above) which contains QR-code and
.box
you can apply this code tobody
:{ 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 20
-
- line 22
border-style: none;
changes nothing, because default value for border-style is none.
- line 22
-
- 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 30
-
- line 31
display: block
changes nothing, because default value for display for div is already block.
- line 31
-
- 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.
- line 37
I hope you find it useful! Overall you did a great job though. Happy coding!
Marked as helpful
@NeonCodes
Posted
@yuri-polessky Hello,
Thank you for the detailed feedback!
I took notes to try those. That CSS article sounds interesting too. CSS has been a bit tricky to learn.
Happy coding!