All comments

• 

  POTB• 330

  @Peteonthebeat

  Submitted 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

  1

  30

  

  blahblah• 240

  @blahking

  Posted 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

  0

  This comment has received 2 repliesShow
• 

  Fabian• 30

  @FabianAlv

  Submitted 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

  1

  31

  

  blahblah• 240

  @blahking

  Posted 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

  0