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 Agency Landing Page. Tech Uses - React, CSS Grid, Flexbox

neshanth• 110

@neshanth

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


Hi Guys, Can Anyone Tell Me How to add the line under the Learn More Link ? I used text decoration to do it but in the design file it looked different and I am not able to make it look like the design file.

Community feedback

seekinfox• 560

@seekinfox

Posted

i used ::after selector

let me give you an example ->

this is my link element <a href="#">this is a link</a>

a {
 text-decoration: none;  // we don't want that default link underline.
}

a::after {
   content: " ";
   display:block;
   width: 2rem;
   height: .5rem;
   border-radius: 1rem;
// shifted it's position using margin-left/right.
   margin: nrem nrem nrem;
}

1

neshanth• 110

@neshanth

Posted

@seekinfox Thank You, I will try it out

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