Initially I made a mistake using PX instead REM and EM. I later realized after hosting it on vercel so I corrected it.
What challenges did you encounter, and how did you overcome them?I had to adapt to not using px because I was so used to it. I learnts to use rem and em.
What specific areas of your project would you like help with?Naming convention, and units please
Congratulations on completing this project. Here's a tip to you can add to your CSS:
You can add a "min-height: 100vh" to your "body" so that it can take up height of the window. In that way, your card will be truly centered.
Hello, congratulations on completing the project but it displays a "Hello World" text instead of showing the QR code card.
Hello @BharathKumaras2001, congratulations on completing this challenge. Your solution looks amazing. Here is a tip I have for you to center your content on the body; body{ display: flex; align-items: center; justify-content: center; min-height: 100vh; }
You can put the above code in the body to center the content.
Hello @Okemwa-mokaya, congrats on completing this project. It looks amazing.
I just think if the cards had box-shadows they would really be easy to see.
My major difficulty while creating this was getting the whole of the QR code to appear in one page on a desktop screen as shown in the desktop preview screenshot, probably I'm the one trying to over do it and in reality there's no way to achieve that but I would really want to know if there's a way I could do away with the scrollbar and make the QR code sit right in the center of the screen?
Hello @lavender713, to address your issue, try adding the code below to center the objects in your body;
body { height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; } So you can replace the width and height in your body css with the above code.
Hope my suggestion was helpful.
Can anyone tell me how to add the purple effect in image and how to change the images according to screen view-port. thanks
Hello @00YellowLemon, To create a color overlay over the image, you can follow the steps below.
Also, the image should be on the right side. If you put it on the right side and you want the image to come on top of the text during the media query, you can use: ****flex-direction: column-reverse; Hope my suggestion was helpful.
Replace the <h5> with <h1> to make the page/content accessible. Every html must have <h1> to make it accessible. Also, never skip a level of heading. The heading must always begin with <h1> tag. Wrap the sub-heading of <h1> in <h2> tag and that of the <h2> tag in <h3> tag. This continues until <h6>.
HOPE AM HELPFUL.
