Skip to content
Submitted about 1 month ago

Social links profile. Semantic HTML5 markup, Font-size using clamp()

#accessibility
Fady•50
@fadymas
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?
  • I learned a great deal about image editing.
img {
  width: 230px;
  clip-path: circle(26%);
  object-fit: cover;
  object-position: top;
  height: 100px;
}
What challenges did you encounter, and how did you overcome them?

"I use CSS properties like clip-path: circle(26%), object-fit: cover, and object-position: top to create and style circular profile photos, controlling the shape, image scaling, and cropping."

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

I don't have anything in particular I need help with right now, but I'd welcome any useful comments or suggestions. Thanks!

Community feedback

  • P
    Gabe•300
    @gabeiPosted about 1 month ago

    Nice - it looks great and responsive! I'll try to nit pick something since you've covered most of it.

    1. I always mention to people how their site looks when viewed in landscape mode on a mobile device. I used to struggle with this a lot when I used 100vh. How can we accommodate this?

    2. Maybe this is a matter of personal preference, or maybe somebody smarter than me can correct me: I tend to look at projects like this as a list of links. Stylistically it looks the same, but the way it is read by a screen reader is a little different.

    Nice job and happy coding!

    Marked as helpful
    0

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