4 Card Feature Section (Vanilla CSS + Custom Design + Glassmorphism)

@felipejesus-front Nada irmão! Essa solução aí é minha terceira tentativa pra esse desafio, eu tentei duas vezes só pra acertar o design, só na ultima que eu mudei as cores hahahahha Vou olhar sua e te dou um feedback ok?

@ExploryKod You're right! Thanks for the time writting this feedback Amaaury

@elaineleung The first challenge I've found these kind of background was the one Profile Card Component with the two circles. I was so annoyed that by the first I was unable to give them the proper position that I've exported the background with the circles as a single SVG(someone even accused me to cheat because I used Figma to create the bg)😂😂😂. Is good to know to position this kind of background, but I think in a real life project I'll just export the background as a single svg.

This is the project that I took the shortcut exporting the background: https://www.frontendmentor.io/solutions/freshprince-profile-card-component-custom-design-and-hover-states-NKHxJ_Asug

Thank you Elaine!

@correlucas I've actually heard someone else mention that they did the same thing; I'm just not sure whether it's for that challenge, but in any case, positioning stuff is super hard, even a lot harder than Javascript 😅!

I agree with you in saying that it's good to know how to write the code for it, because there might be designs in a real world project that asks for that kind of design. In the real world though, I might try to convince the designers to change the design first before trying to position it 😆

Btw I solved that challenge using two pseudo elements for the SVGs with the card container in position: relative, so if you ever want to redo that challenge again, you can try that out!

@elaineleung The funny thing is that I did my challenge with an SVG. But then I learned how to position them to help person with this same challenge. Using background-image and background-position with both bottom and top images inside the property separated by the comma. Then I was too lazy to fix my solution so I let the way it was.

@emadbakry I've a background with graphic design so this help me to customize my solution, but coding seriously about 5 months, I'm really new to the frontend world yet, don't have much knowledge more than html and css 😂 all I learn was doing the challenges and redoing it, this solution was the third attempt for this challenge. Keep it up 👏

@correlucas omg, i was expecting you have been a frontend developer for 4 or 5 years😂 how?

if you are new then you must have spent many hours on it, how much? tell me please.

@emadbakry no brother, I dont even know Javascript yet hahaha it's only thst with the experience I get seeing the others solution and giving feedback help me when I go back and fix all my challenges, but I'm just normal. In the past I was doing 2 or 3 challenges week (but I have done only the simple challenges I dont have complex landing pages for example) and in every challenge I tried to add a feature to improve it, doing ever more than what the challenge required, ro that and you'll see your improvement and comeback here in 2 months to say me how much you get better.

@correlucas oh good technique i will try using it and see how good i am getting, thanks

@AdrianoEscarabote Aprendi com vc mestre

@chukwudobe-Micah I follow a lot of pages about UI/UX so I took the idea for the Glassmorphis, I cannot point you a single source, but you check dribble/pinterest to get inspirations. For the Glassmorphism you can use this tool https://css.glass/

@chukwudobe-Micah all done by myself since are simple animations yet

@devnnga the Github repository is open, check it

@shaswatsingh19 You can use the regular stuff for the challenge, like the hover effects, but the circles background not because is something special I did. You can create your own custom background in Figma and export like I did this way you'll have another different result. =)

@correlucas yeah sure.

@johnnysedh3lllo Thank you Johnny!