Design comparison
Solution retrospective
The way how it turned out
What challenges did you encounter, and how did you overcome them?I could not use and centre the flex box, so I tried the grid as an alternative.
What specific areas of your project would you like help with?Any other alternative ways to create the same component? I can't figure out why the image shows broken in GitHub live page link.
Community feedback
- Account deleted
Hey, @nco0305! I noticed a few errors in your code that you can improve:
-
Make sure to add
<img src="./Images/image-qr-code.png" ...>
. This tells GitHub to look for a folder named "Images" in the root directory and pull out the image named "image-qr-code.png" (the period(dot) is important). -
The
box-shadow: 15px;
declaration is invalid. Try something likebox-shadow: 15px 15px 0 0 blue;
. Thebox-shadow
property requires values for offset, blur radius, spread radius, and color; you haven’t set values for all of them. -
padding: 0, 40px, 40px, 40px;
is invalid due to the commas. Replace the commas with spaces, like this:padding: 0 40px 40px 40px;
. Remember, padding values follow the order: top, right, bottom, left. -
When using
margin: 0%;
, you can simply writemargin: 0;
. The browser will understand, and this helps save some time.
Everything else looks perfectly structured. Great job!
I hope you find this helpful.
Marked as helpful0 -
- @JLizcano10Posted 3 months ago
Hello, the QR image is not displaying because web servers are usually case sensitive. Currently, you are using a lowercase “i” in the image font:
<img src=“images/image-qr-code.png” />
However, the repository folder is named Images with an uppercase “I”. To fix the problem, you can either rename the folder to images or update the image source path in your code to:
<img src=“Images/image-qr-code.png” />
This should solve the problem.
Marked as helpful0 - @Cristal32Posted 3 months ago
It seems the issue with the image not showing up is the the path:
In index.html:
<img src="images/image-qr-code.png" alt="QR Code" width="280" height="280">
It should be :
<img src="Images/image-qr-code.png" alt="QR Code" width="280" height="280">
since the name of the correspondant folder is 'Images' with a capital I
Marked as helpful0 - @antimatterhutPosted 3 months ago
When I preview your site, the qr picture does not show up.
0
Please log in to post a comment
Log in with GitHubJoin 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