Looking to hire developers?
@agnar-nomad
@agnar-nomad
Submitted
This one was fairly simple after the previous experience.
I will appreciate all critique and help. Didn't quite manage to complete the box shadow and the background to 100%, but there are more important things in life.
@agnar-nomad
Posted
EDIT: I think I did better than I expected. What wonders a night's sleep does.
@Edmond-Wu-9
Submitted
Here is my solution! Let me know if you have any feedback! I appreciate it :)
@agnar-nomad
Posted
hey Edmond.
congrats on the solution. I appreciate your class names, they are well descriptive.
A few notes:
<main> could have been the card container, no need for another level of complexity@NgbeaGloriaJames
Submitted
All feedbacks are welcomed especially on mobile responsiveness, svg and and the flex layouts generally.
@agnar-nomad
Posted
Hi,
congrats on the challenge completion.
Marked as helpful
@Nikola-Mitic
Submitted
What did I do right or wrong?
What did I write that was unecessary and what didn't I write that was necessary?
@agnar-nomad
Posted
Hey Nicola,
Good job on the solution!
As Alex mentioned, make sure to adjust the size of the card compared to the document body and adjust border radii. I believe you wanted to use margin on the main element instead of body.
Take a look at the font-size ratio between <h1> and <p> in the design. Yours does not match it. I think using <br> is the best way to distribute your lines. Rather consider setting max-widths on the proper block elements, which also helps with responsiveness later when building mobile layouts (if thats what you build in the later stages)
Marked as helpful
@im-abhijit
Submitted
my overlay color is not covering whole image , some part if left at the bottom can anyone help with this
@agnar-nomad
Posted
Hey friend, congrats on your solution.
A few notes: make sure to increase padding a little on the main card (or margin on the elements) considering spacing out elements using flexbox properties instead of manually giving margin values in pixels
To your issue, i would try: remove the right and bottom properties from .overlay give .overlay display:block consider wrapping the image in a container and placing the overlay relative to this container, not relative to the image itself
Marked as helpful
@CiMorann
Submitted
I couldn't do the overlay image part, I'd appreciate if I can get some help!
@agnar-nomad
Posted
Hey,
congrats on your solution. A few notes: make sure to revise the font that you used here and revise the padding on the main card (or margins on the components inside)
The easiest way to do a simple overlay is detailed here https://www.w3schools.com/howto/howto_css_image_overlay.asp very quick and simple.
You can check out my solution too, where I used ::before and ::after pseudoelements to solve this.
@juan26468818
Submitted
Hello! Hope everyone is doing well.
I need to say that giving the color to the image in the hover gave me a hard time, even now that I managed to give the color, I know it's not 100% the color it should be, I would love if anyone could help me through this so I know what I'm doing wrong, and how can I improve it!
@agnar-nomad
Posted
Hey, a couple notes: you should definitely increase the padding on the container (the card)
make sure to style the price ETH text exactly as in the design
Cover image on hover: use the same colour as is given for the fancy text, use cyan with opacity 0.5 I used the ::before and ::after pseudoelements to create that effect, but it might be easier to do it with another <div> inside your icon-view-container, making it position absolute and placing it above the nft image. A quick Google search should give you all needed.
Marked as helpful
@dquindara8
Submitted
Can you let me know if I formatted the @media queries correctly for the screen sizes of 375px and 1440px? I added 768px for those screens. Is there a way to make all screen sizes responsive at once using HTML and CSS instead of catering to each viewport breakpoints? Also, how to get the item/s in the center of the page using either Flexbox or CSS or by using margins and padding. Do you use margin and padding on the body and HTML elements? How do you get the item on the page to be centered on various screen sizes for responsiveness? Thanks very much.
@agnar-nomad
Posted
I can't comment on the code since the link is broken to it.
Centering is fairly easy with Flexbox, use justify-content and align-items, both centre. These properties should be used on the body element.
