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

Responsive Sunnyside landing page

@Dhei-vid

Desktop design screenshot for the Sunnyside agency landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


  • I could not figure out how to reposition the border-bottom property. So I would love some help with some tricks on how to insert border-bottom.

Community feedback

P

@delianZidarov

Posted

Based on your question I think you are talking about the sections where the underline is below part of the text. I'm not sure you can do that with the boarder property but you can do it using ::before and :: after pseudo elements. This will have a span with the words in it underlined and the bottom of the words over the underline. You can also position the underline however you like in respect to the span. Hope this helps HTML <span class="underline-me">HELLO</span> CSS .underline-me { position: relative; } .underline-me::after { position: absolute; content: ""; width: 100%; height: 4px; bottom: 2px; left: 0; background-color: pink; z-index: -1; }

Marked as helpful

0

@Dhei-vid

Posted

@delianZidarov Thank you so much for the help.

0

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