Skip to content
Submitted 8 months ago

Social Links Profile Solution

Matt Cope•350
@MatthewPCope
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social links profile
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Proud of completing my third challenge.

What challenges did you encounter, and how did you overcome them?

It took some time to figure out how to style each link once instead of styling each one individually. I ended up putting each one in an tag and styling the tag so the styling applied to all of them at once.

What specific areas of your project would you like help with?

I ended up figuring out what I needed help with, but I'm always open to feedback.

Community feedback

  • Joseph Reyes•440
    @JreyIVPosted 8 months ago

    Hi Matt, you did a great job with this challenge.

    I really like the hover effect that you did, I forgot to add it in mine and I think it goes a long way, makes it look more complete for sure. Yours looks very similar to the design so you did a good job with that

    I would suggest creating a root in your css which would look something like this:

    :root {
  --ff-sans: "Inter", sans-serif;

  --fw-light: 400;
  --fw-normal: 600;
  --fw-bold: 700;

  --clr-primary: hsl(75, 94%, 57%);

  --clr-white: hsl(0, 0%, 100%);
  --clr-grey: hsl(0, 0%, 20%);
  --clr-dark-grey: hsl(0, 0%, 12%);
  --off-black: hsl(0, 0%, 8%);
}

    I found that it makes it a lot easier because you can call it with this: background-color: var(--off-black); rather then having to do that hsl() stuff which takes longer.

    nice work, I wish you good luck with your future endeavors

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

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