Huddle with curved sections

Community feedback

• 

  Adarsh Pratap•5,515

  @adarshcodesPosted about 5 years ago

  Hi! @c-healey, You did great work on this challenge, my last challenge was the same and it took longer to figure me out how it works. I did it using ::after and ::before pseudo-elements. What works for me is:

  I added common styling to all three cards(only two cards have the curved image)

  at line 275 .middle-cards::before, .middle-cards::after { content: ""; position: absolute; left: 0; bottom: 100%; width: 100%; }

  then added images to the first and last card

  at line 322

  ` .grow-card::before { background: url('images/bg-section-top-desktop-1.svg') no-repeat top center; background-size: cover; height: 160px; }

  .grow-card::after { background: url('images/bg-section-bottom-desktop-1.svg') no-repeat bottom center; height: 140px; top: 100%; background-size: cover; } `

  you can see my CSS code here- https://github.com/adarshcodes/huddle-landing-page-with-curved-sections-master/blob/master/styles.css

  you'll get an idea about it after seeing.

  Now about your solution-

  • It looks great, few things you can modify is the first illustration is quite large you can make it small.
  • The hover effect over the buttons is looking amazing(I love this kind of stuff)
  • Your responsive code is working flawlessly but I saw one small thing around the breakpoint 525px the top button comes below the huddle logo, you can fix it.
  • And lastly, you can try to fix the HTML and Accessibility issues.

  Great work! :)

  2
• 

  catherine f healey•515

  @c-healeyPosted about 5 years ago

  Thank you so much for the feedback. I will take a look at your code.

  What are the HTML and accessibility issues?

  BTW, Your animation is amazing.

  1

  ---

  

  Adarsh Pratap•5,515

  @adarshcodesPosted about 5 years ago

  @c-healey You can find the Issues in the report section of your solution page, and Thanks

  0
• 

  catherine f healey•515

  @c-healeyPosted about 5 years ago

  I found that and made updates last night. Thanks again!

  0