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

Sunnyside wist scss and partials

Victor 1,035

@CodeVee

Desktop design screenshot for the Agency landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


  1. The color under learn more. Need ideas. Thanks

Community feedback

@JoseAngara

Posted

Hi, I used the after psedo-element for that purpose. This is my code:

 ​.​text-container__link​::​after​ { 
 ​  ​content​:​ ​""​; 
 ​  ​position​:​ absolute; 
 ​  ​height​:​ ​10​px​; 
 ​  ​width​:​ ​100​%​; 
 ​  ​border-radius​:​ ​5​px​; 
 ​  ​bottom​:​ ​-2​px​; 
 ​  ​left​:​ ​0​px​; 
 ​  ​z-index​:​ ​-1​; 
 ​  ​opacity​:​ ​0.25​; 
 ​  ​transition​:​ opacity ​0.25​s​ ease-in; 
 ​} 
 ​.​text-container__link​:​hover​::​after​ { 
 ​  ​opacity​:​ ​1​; 
 ​}

I put the background color in a modifier.

Marked as helpful

1

@shashreesamuel

Posted

Hey good job completing this challenge

Keep up the good work

Your solution looks great however I think that the title needs to look a big bigger

In terms of accessibility issues simply wrap all your content between main tags

I hope this helps

Cheers Happy coding 👍

1

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