All comments

P
Michael• 380
@Mlchaell
Submitted almost 2 years ago
I only have one question - How would I do the .extra-card-section without using the media queries? If I do it without the queries, the a tag gets pushed out of the section on the right

Also, if anyone else ideas/feedback on how I could do anything else better, let me know!
Order Summary Component (Vanillia CSS)
3
SD_Voyez• 110
@SD-Voyez
Posted almost 2 years ago
Hi !

First off all, good job :)

For me the mistake is to use margin-left with your tag <a>, it brokes everything when you reduce screen.

You should trie to :

Remove your margin-left in your tag <a>

Put a justify-content : space-arround in your class .extra-card-section

I tried with your code and it's much better.

Sorry for my "french" english, hope you understand me :)

Regards.
Marked as helpful
1
Prakash Natarajan• 50
@Prakash1411
Submitted almost 2 years ago
Having difficulties to have the opacity of 1, for the hover image. Will be helpful if someone could guide me how it can be done. Thanks!!
NFT Preview card
2
SD_Voyez• 110
@SD-Voyez
Posted almost 2 years ago
Hi !

Nice work.

I had the same problem, so i put opacity at 1 for the SVG "eye" when hover and play with HSLA and the "background-color transparency".

In your case it will be something like : background-color: hsla(178, 100%, 50%, 0.502);

With your code :

.top-section:hover .overlay { opacity: 1; }

.overlay { display: flex; justify-content: center; align-items: center; position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: hsla(178, 100%, 50%, 0.502); border-radius: 10px;

HSLA : https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsla

Regards :)
Marked as helpful
1

SD_Voyez

All comments

Order Summary Component (Vanillia CSS)

NFT Preview card