Social Links Profile (Responsive)

Community feedback

• 

  hitmorecode•6,660

  @hitmorecodePosted 2 days ago

  Congratulations well done. I have a few pointers

  • The paint tool is the worst tool you can use for this. There are much better tools (for free). You should take a look at Penpot and Figma.
  • You should add transition on the links to make the hover animation smoother.

  I took a look at your CSS and there are somethings that you can fix.

  body {
    width: 100%; // you don't need this on the body, by default the body width is already 100%.
    height: 100vh; // change to min-height
    background-color: var(--color-grey-900);
    font-family: var(--font-family-base);
    color: var(--color-white);
    position: relative; // why are you using position relative on the body?
    display: flex;
    flex-direction: column;
  }
  

  If you want to place the card in the center of the page, just use flexbox or grid to do it. In this case you don't need to use position.

  .card {
    width: 370px;
    position: absolute; // why using position?
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--color-grey-800);
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 24px;
    padding: 40px 36px 36px 36px;
    border-radius: 12px;
  }
  

  When you have classes or ids you can target that specific class or id directly. You don't have to go through the parent element.

  // you can remove .personal-info and only use .location
  .personal-info .location {
    color: var(--color-green);
    font-size: 12px;
  }
  .social-links .caption{
    font-size: 12px;
    
  }
  

  As you can see above font-size: 12px is being used in two different places. You can combine this into one.

  .location,
  .caption {
     font-size: 12px;
  }
  

  I hope you find this helpful. Keep it up 👌👍

  0
• 

  @philgabby•440

  @CHEGEBBPosted 2 days ago

  This was nice keep up the spirit 👏

  0