Frontend Mentor | blahblah's profile

All comments

POTB•330

@PeteonthebeatSubmitted about 2 years ago

Hello, Frontend Mentor community. This is my challenge for the 'Fylo Landing Page With Two Columns Layout."

Since they weren't provided with the challenge I made my own social icons. However, I couldn't figure out how to do their hover effect. I also couldn't make the "check your email message" on the inputs. Lastly, I also couldn't figure out how to do hover on the green <a> tag since it's supposed also to cover the arrow icon.

I'd be happy to get so feedback and tips on getting those working properly, so I can learn and update the code.

Fylo Landing Page With Two Columns Layout Master

blahblah•240

@blahkingPosted about 2 years ago

Hello, there are some tips for you.

Hover on the green <a>: You can use pseudo-elements "::after" + position to set the line instead of using border-bottom.

a.how-it-works {
  position: relative;
}
a.how-it-works:hover::after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: green;
}

Hover on the icons: You made these icons by yourself ? Amazing, that's so cool! But you used error image name so they didn't display, you should use "Facebook.svg" in html instead of "Facebook.webp". Maybe you can try "Font Awesome" for social icons, it's easy to change icons color on hover.

Your page has horizontal scrollbar, it's not good for a web page. Delete body {width: 100vw} will work fine. Thank you, I also learned something. stackoverflow

I see many width: 100% in your code. Many of them are not needed. For a block element, for example, div's default width is 100%of it's parent element. Normal Flow

Hope it helps you.

Marked as helpful

Fabian•30

@FabianAlvSubmitted about 2 years ago

My question is regarding user experience, I added an accordion animation to show and hide the answer to the questions, I think the accordion work well in this case because the answers (sentence) have almost the same amount of lines, 2 or 3. But if there were some 2, 3 liners and other with something like 10 or more lines would the accordion behavior still be a good choice or would we need to think of a different solution in this case?

Design with Flexbox, Transitions, Animations and Image Positioning

blahblah•240

@blahkingPosted about 2 years ago

Your solution set the "card__faq__answer" same height, you can use JS to control "card__faq__answer" height dynamically. When "card__faq" is active state, set the "card__faq__answer" element's height be "card__faq__answer".scrollHeight, else "card__faq__answer" element's height will set be "0px". Hope it helps you