4 Card Feature Section (Vanilla CSS + Custom Design + Glassmorphism)
Design comparison
Solution retrospective
👾 Hello, Frontend Mentor coding community. This is my solution to the Four Card Feature Section.
😎 I had a lots of fun doing the challenge and doing some custom design improvements.
This is a solution that I've finished before but I decided to update it, when I saw a solution of guy Yefry Sanchez where he applied an hover effect on the card where the icon flips while hovered, so I tried to apply something similar to mine inspired on what he did. Here's is his profile @y25sanchez . Nice solution bro!
👻 I added some features 💀
- 🎨 Text Gradient on main heading.
- 🥃 Glassmorphism on card hover.
- 🎨 Custom background.
Feel free to leave any feedback.
Community feedback
- @felipejesus-frontPosted about 2 years ago
@correlucas
Sempre que eu termino um desafio eu venho ver a sua solução e SEMPRE acho q fiz algo errado kkkk vc sempre deixa 500% melhor que o original, muito fera, inspira muito!
Marked as helpful1@correlucasPosted about 2 years ago@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?
0 - @ExploryKodPosted over 2 years ago
Great job, I love it: it improve the interaction with the user, the initial design was a little too static whereas these cards are there to call us into action, make us paying attention to them. Glassmorphism is a very good technique, I will remember it. Thanks for sharing this inspiration.
To improve it even better, why do the pointer stay identical ? May be I am wrong but if these cards contains links to another part of the website, it would be good to create a cursor pointer on the right element. However, I might be wrong and these cards may not be links. 👏🏾👏🏾
Marked as helpful1@correlucasPosted about 2 years ago@ExploryKod You're right! Thanks for the time writting this feedback Amaaury
0 - @elaineleungPosted over 2 years ago
So glad you updated it, love the spinning icons, which I definitely will borrow later (thank you also to Yefry!)
In this work I just love how you made slight changes to the existing design instead of doing something completely different. In a sense it's improving the original design also. I'm really not a fan of the SVG backgrounds in so many of these designs because firstly, positioning them takes a lot of time to get right and is no fun, but more importantly, they usually are super poor in contrast against the background, and it's so hard to even see where they are, let alone trying to position them. I think the circles you added in the background actually makes everything pop a bit more; I'm usually complaining about those SVGs and wish they're not there, and yet in this design (which is one of the very few that doesn't have a background) I think the SVGs you added make it look better, especially with the opacity on the card.
Well done once again! 👏
Marked as helpful1@correlucasPosted over 2 years ago@elaineleung The first challenge I've found these kind of background was the one
Profile Card Componentwith 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_AsugThank you Elaine!
1@elaineleungPosted over 2 years ago@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!0@correlucasPosted over 2 years ago@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-imageandbackground-positionwith bothbottomandtopimages inside the property separated by the comma. Then I was too lazy to fix my solution so I let the way it was.1 - @emadbakryPosted over 2 years ago
omg i see it is even better than the normal one, i hope i am not bothering if i asked about the time you spent to be at this level, am i?
and i have a small idea that might make the design more modern it is about using @keyframe to Animate those little icon (like infinit up and down animation using transformY) do not use margin for animating things, if you like the idea i would be happy to see the changes, thanks.
Marked as helpful0@correlucasPosted over 2 years ago@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 👏
0@emadbakryPosted over 2 years ago@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.
1@correlucasPosted over 2 years ago@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.
0@emadbakryPosted over 2 years ago@correlucas oh good technique i will try using it and see how good i am getting, thanks
1 - @AdrianoEscarabotePosted over 2 years ago
Fiquei dois dias fora, e você já lança dois projetos top.
Gostei muito das imagens de fundo, deu uma preenchida bem legal na página. As Animações que você colou nas imagens, a opacidade do card diminuindo com o efeito hover… tudo fantástico.
Não tem muito o que falar hauhauaha
Parabéns, evoluindo como sempre não tem jeito!
Marked as helpful0 - @chukwudobe-MicahPosted about 2 years ago
Okay then, I'll try to tail you with these animation effects and your feedbacks will be very helpful and appreciated. <3 And also, I feel you must have had somewhere where you learnt these different effects and got the ideas from, can you share? And also, if you make a container card flip, does the whole content in the container flip?
1@correlucasPosted about 2 years ago@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/
0 - @chukwudobe-MicahPosted about 2 years ago
Wow, this is just too much. Really great work. And also, do you write all your animations yourself? Or you use animate.css sometimes.
1@correlucasPosted about 2 years ago@chukwudobe-Micah all done by myself since are simple animations yet
0 - @shaswatsingh19Posted over 2 years ago
Another one of your great art I would say. Can I use your design to build the project if you don't mind?
1@correlucasPosted over 2 years ago@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. =)
0 - @Raja-JunaidPosted about 2 years ago
Hi Lucas! Congratulation on completing this beautiful and unexpected challenge. I clap for you 🙌. You put so much hard work and time as seen in your design section. I really like this solution.
There is 0 ACCESSIBILITY ISSUES and 0 HTML ISSUE. It opened my eye's when I see your solution. And your code is also neat and clean.
VERY APPRECIATED!
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord