Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Testimonials Grid Section (Vanilla CSS + Focus Effect + Custom Design)

Lucas 👾 104,540

@correlucas

Desktop design screenshot for the Testimonials grid section coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


👾 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:

  • 🎨 Focus effect on hover.
  • 👨‍🔬 Focus effect on card hovered.
  • 📱 New media query breakpoint for tablet screens
  • 😎 Custom Design.
  • 👾Custom button to switch between FEM UI and CORRELUCAS UI.

I'll be happy to hear any feedback and advice!

Community feedback

Adriano 34,000

@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

1

Lucas 👾 104,540

@correlucas

Posted

@AdrianoEscarabote Valeu man!

0
Azka 480

@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

1

Lucas 👾 104,540

@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 =)

1
Azka 480

@Azkanorouzi

Posted

@correlucas thank u 🤩

1
P
Luciano Lima 1,290

@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

1

Lucas 👾 104,540

@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.

2

@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

0
Lucas 👾 104,540

@correlucas

Posted

@GrzywN Thank you Karol! I'll try that for sure!

1
Paweł 1,000

@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

1

Lucas 👾 104,540

@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!

0
Paweł 1,000

@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

1
Lucas 👾 104,540

@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!

1
Elaine 11,420

@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

0

Lucas 👾 104,540

@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!

1

@krutagna10

Posted

This comment was deleted

0

Lucas 👾 104,540

@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/

0
Lucas 👾 104,540

@correlucas

Posted

@elaineleung Thank you Elaine! Today I've updated the solution with the advice you gave me about animations <3

0

Please log in to post a comment

Log in with GitHub
Discord logo

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