Skip to content
Submitted over 3 years ago

Huddle Landing Page HTML, CSS, Bootstrap 5

Kristine•310
@sn-tin
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with a single introductory section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi! It took me hours to figure out how to put a circle border around each link. I used the updated version of fontawesome for the icons but when I tried to put a border around it, the icons don't go to the center of the border. So I ended up using fa-stack of fontawesome that's why the borders are thick. Is there any way to change the thickness of the circle from fontawesome? Or, I would appreciate it if you could give me tips on how I can adjust the icons to the center of the borders in CSS instead. Thank you.

Community feedback

  • Anjor Rao•115
    @anjorraoPosted over 3 years ago

    Hey @kristine, great job! I would suggest creating a square structure using height and width and applying a line-height property of equal value. Try this CSS to fa-circle class: border: 1px solid; height: 35px; width: 35px; border-radius: 50%; line-height: 35px;

    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