Quadri Shittu• 210
@quadri101
Submitted
Benjamin
@Benjoow
All comments
- Benjamin• 130
@Benjoow
Posted
Hello quadri!
I saw that you had a problem with the border-radius of your cards. I advise you to change the size of the border-radius of your bottom card by setting it to a smaller value. That should solve your problem !
Congratulations for your project !
0 - 11arshaan• 20
@11arshaan
Submitted
Hello.
I was thinking about using bootstrap for this, but decided to try coding the entire thing. The responsiveness is not how I planned for it to be; I think the bootstrap columns would solve the issue. Or maybe if I used a media query, but what would the settings for the elements be in each query?
Also, what is the recommended method for creating the hover state for the image?
Thank you!
Benjamin• 130@Benjoow
Posted
Hello Arshaan !
That's a good start :-). You need to focus on css not on bootstrap if you want to be a developper. Take your time and practice your html structure. It's important and your css will be easier to write.
I use mobile first approche and combinaison of width and max-width property, like this : width: 80% and max-width: (the value of your card component). The idea is to start with mobile resolution and expense your window until deskop resolution. For this exercice you don't need media queries.
I recommend you to train your responsive with this website : https://courses.kevinpowell.co/conquering-responsive-layouts. It's will more simpler after that :-)
Marked as helpful
1 - Pablo Barrios• 60
@BarriosPabloOk
Submitted
Hi!!!
I am implementing relative units to all the challenges that I have already done. Let me know your opinion on this one.
Benjamin• 130@Benjoow
Posted
Hi pablo !
I doesn't know inset property, that's pretty cool ! I have a question for you. Why do you use a container for your card ?
Little trick i learned while ago : You can use rgb and hsl for transparency exactly like rgba or hsla.
Have a good day :-)
0 - Crizalid• 30
@crizalid12
Submitted
Difficulties:
- I couldn't find a proper way to hover on both image and icon view.
Benjamin• 130@Benjoow
Posted
Hello crizalid !
For your hover, you can set your after pseudo element with opacity to 0 and add your icon view with "content: url()". I personnaly recommand to set display of your pseudo element in flex and align your icon view with this. It's more simpler than your solution. For your hover element, you set the opacity to 1 AND your background with another system color like rgba or hsla, like this : background: rgba(color num, color num, color num, transparency)
0
