Social Media Links Card

Community feedback

• 

  hitmorecode•6,680

  @hitmorecodePosted 7 days ago

  Congratulations well done. I took a look at your CSS and this is what is causing an issue with your image.

  .cardWrapper {
    padding-top: 25px; // change it to this
  /*   margin: auto; */ you don't need this
    min-height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  // remove this from your css, this is what is preventing the image from be rounded.
  /* img {
    padding-top: 30px;
  } */
  

  • It is good practice to create a separate rule for CSS reset

  // CSS reset
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html {
    margin: 0; // move this line to css reset
    padding: 0; // move this line to css reset
    font-size: 14px;
    font-family: "Inter", sans-serif;;
    font-weight: 400;
  }
  
  body {
    height: 100vh;
    background-color: rgb(20, 20, 20);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box; // move this line to css reset
  }
  

  • For a smoother hover animation add transition: background 300ms ease-in-out;
  • On hover the color of the text should change to black

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

  0
• 

  Djamel1133•880

  @Djamel1133Posted 7 days ago

  Hi, Great job and well done

  for achieving a perfect circle: you need to set the border-radius to 50%. :

  border-radius: 50%;
  

  Happy coding! and keep learning

  0