I find difficulties on controlling the left and the right gap of the QR code image and the white space. That resulted in me not being able to make a more similar looking website compared to the design, as I feel that aforementioned gaps in the design are smaller than the one I made. Instead of minimizing those gaps, I used paddings to push the image lower, to match the left and right gaps which I couldn't control. Feedbacks are very appreciated on how to solve it
First of all, you did a great job!
I looked at your code and found why it was difficult for you to control the spacing.
You used % for nearly everything. I prefer using rem instead. It gives you better control and for smaller devices you can use media queries. You can give the card a max-width so that the card can not get bigger at some point but can always get smaller. Let the content inside of the card decide how big your card gets. When you use px, em or rem for the padding it will be much easier to control.
I tried to make it looking as close to the design sample as possible. Its actually very easy to make up the QR code card by using bootstrap card class. But I felt that I have too much classes for trying to place it in the center of the screen as well as trying to put a frame behind it. Hope you can share your solution to this one๏ผTHANKS!
You don't need to comment every end-tag. I make empty lines or commented lines before i start new sections or elements.
Your img needs an alt text to show if the image can't be shown.
It works with only one or two media queries as-well. Set a fixed max width in rem or px and a fixed margin left and right. On smaller devices I would recommend to shrink down the text a bit.
You can adjust the line-height on your heading and text, so that is gets more readable.
Use landmarks to mark where your content is. Landmarks are tags like <main>, <content> or <footer>. They basically tell the user where which section is located.
Hi everyone
its been long without submitting but am back.
so here I managed to do the design of the challenge but I would like to ask for help on:
1.How to do the hover on the image
2.how to design the box-shadows that look exactly the same as the ones in the challenge.
The hover effect on the image was a tricky one, but here is how I made it.
I basically made a position relative container, which contains the image and the button. The button is position absolute and contains the view icon. The ::before element on the button creates the color effect. The z-index makes sure that the icon is above the color overlay so that the icon is fully white.
