Looking to hire developers?
Submitted
@correlucas
👾 Hello, Frontend Mentor coding community. This is my solution for the Testimonials Grid Section.
Feel free to leave any feedback and help me improve my solution or make the code clean!
🤩 I had a lots of fun building this challenge! Mainly because I understood how to apply a focus effect on the card hovered with only CSS and I've also created my own design changes and personal improvements to the challenge elements.
SPECIAL THANKS to @elaineleung that show me how to add different animation stats for the cards in the intro.
I added some features:
I'll be happy to hear any feedback and advice!
@AdrianoEscarabote
Posted
Fala lucas! Tudo bom?
Gostei muito do resultado do seu projeto, todos os detalhes extras que você colocou ficou muitoo bom! eu não faço ideia de como você fez esse efeito de hover em cima dos cards, mas ficou sensacional.
Só tem uma coisa que eu faria, usar um minfy nesse css, pra deixar ele piquininim do jeito que nois gosta!!
O resto está insanoooooooo!
tamo junto!
Marked as helpful
@correlucas
Posted
@AdrianoEscarabote Valeu man!
@Azkanorouzi
Posted
Hello Lucas, I hope you are doing great 😃. focus effect is absolutely gorgeous👀, would you give me a hint on how to do this by myself if you don't mind?
Marked as helpful
@correlucas
Posted
@Azkanorouzi this article will explain all you need to know https://medium.com/free-code-camp/how-to-make-the-impossible-possible-in-css-with-a-little-creativity-bd96bb42b29d then for the hover you apply filter: blur (1.5); but the hardest part is only to know how to hover and apply the effects for the non hovered elements, you ca check it out in the article, then if you have some doubts write me here and I'll help u =)
@Azkanorouzi
Posted
@correlucas thank u 🤩
@LucianoDLima
Posted
Gratz on completing this challenge.
I like that you chose to go a different route over the original design, it looks pretty good and it inpired me to try and add things of my own in my next projects as well.
As a piece of advice you could make so the Click here to see Frontend Mentor UI would change the appearance of the page instantly with JavaScript the same way as a Dark Mode feature works instead of making two separate websites and linking them together. But if you only focusing on learning CSS for now, then that's not a problem at all and your creativity was great nonetheless. Well done!
Marked as helpful
@correlucas
Posted
@LucianoDLima Hello Luciano, thank you for the tips! I didn't try this dark/light mode thing because unfortunately I don't know Javascript yet! hahahaha But its on my list! I want to become good at first with html/css and only them jump to JS.
My goal is finish all the css/html only challenges and them start to study Javascript, but since I'm struggling a lots to do some challenges I'll give time an work on my CSS Skills before.
@GrzywN
Posted
@correlucas I think it can be done with plain HTML and CSS using anchor tags with href="#something" atrribute and :target pseudoselector. Sibling selector might become handy. Depending on what the target is, you can change colors in the CSS. It's also possible to change the order of elements and than change it once again with flex for example. To go back for the first look, you can try hiding current button and displaying the other button which has other href attribute. (depending on :target pseudoclass). Generally it's a workaround and it's almost always better to use simple JavaScript, but it's a lot of fun when you try using it.
You can use this approach for a lot of different things like modals, nav menus, accordions etc.
More about it here
You can also check my QR code solution, where I've used this approach to show a modal without any JavaScript. I've used it in my FAQ accordion solution as well.
Have a nice day! Your work is amazing!
Marked as helpful
@correlucas
Posted
@GrzywN Thank you Karol! I'll try that for sure!
@Pawel-Gnat
Posted
I'm still learning how to use semantic html5 tags, so I would like to ask about your html structure.
Why did you use section to code each of your cards? I would rather think that all components here are embedded inside a one section, but cards are just a divs. Also, you have used h1 for each of your cards (I think, thats because you have used many sections here), but don't you think they should be simply paragraphs? I find them only as components, not fully website.
Edit: Forgot to add - I love your designs and eastereggs. :D really inspiring!
Marked as helpful
@correlucas
Posted
@Pawel-Gnat Hello Pawell, thank you for the advice. Indeed I didn't paid attention to the heading issue, I'll fix that! Thank you dude!
@Pawel-Gnat
Posted
@correlucas Just to be sure, I didn't mean that I'm obviously sure how to code it correctly, but I just suggested my approach to cards coding. I'm fully open to receive any advices and pointings to my own mistakes. :) Best regards
@correlucas
Posted
@Pawel-Gnat But you we're right. I used the h1 in each section I think wasn't correct the h1 placed so many times. Anyway I've fixed it. And the live site is on. Thanks!
@elaineleung
Posted
Really awesome Lucas, as usual! I love how you have both the original design and also your own customized one for comparison. It's funny, usually I find the original FEM designs to be really lacking in contrast, especially at times when light colored elements are put with even lighter eyes and my eyes feel so strained afterwards 😅 I like the high contrast elements in your design; there are some things though that you can dial back on the brightness or hue, like the green for instances, which is a bit too bright for my eyes. The background also is not as contrastive with the other dark blue dark and even with the FEM button at the button, so maybe making that a bit lighter could help. Really love all the effects, especially how the cards go in different directions when hovered. Well done Lucas, looking forward to the next one!
Marked as helpful
@correlucas
Posted
@elaineleung Hello Elaine, thanks for the kind words! I've applied some color changes to the button design using the tips you've gave me. Thank you!
@krutagna10
Posted
This comment was deleted
@correlucas
Posted
@krutagna10 I changed only the gradient you can use Figma to customize or use this tool to create beautiful colors https://cssgradient.io/
@correlucas
Posted
@elaineleung Thank you Elaine! Today I've updated the solution with the advice you gave me about animations <3
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
