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

Community feedback

• 

  Adriano•38,040

  @AdrianoEscarabotePosted about 2 years ago

  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,400

  @correlucasPosted about 2 years ago

  @AdrianoEscarabote Valeu man!

  0
• 

  Azka•480

  @AzkanorouziPosted about 2 years ago

  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,400

  @correlucasPosted about 2 years ago

  @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

  @AzkanorouziPosted about 2 years ago

  @correlucas thank u 🤩

  1
• 

  P

  Luciano Lima•1,290

  @LucianoDLimaPosted over 2 years ago

  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,400

  @correlucasPosted over 2 years ago

  @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

  

  Karol Binkowski•1,640

  @GrzywNPosted over 2 years ago

  @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,400

  @correlucasPosted over 2 years ago

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

  1
• 

  Paweł•1,030

  @Pawel-GnatPosted over 2 years ago

  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,400

  @correlucasPosted over 2 years ago

  @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,030

  @Pawel-GnatPosted over 2 years ago

  @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,400

  @correlucasPosted over 2 years ago

  @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,400

  @elaineleungPosted over 2 years ago

  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,400

  @correlucasPosted over 2 years ago

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

  Krutagna Patel•390

  @krutagna10Posted about 2 years ago

  This comment was deleted about 2 years ago

  0

  ---

  

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  @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,400

  @correlucasPosted about 2 years ago

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

  0