HTML and CSS

Community feedback

• 

  Michaeldremy•40

  @MichaeldremyPosted 3 days ago

  There are few things that look to be incorrect.

  • The size of the profile is too large, I would recommend between 50 to 80 px.
  • The spacing of the name and address and the quote are not matching the preview that Frontend Mentor gives, look more closely at the spacing of those elements
  • The text that reads "GitHub, Frontend Mentor" etc... Are not considered input fields but rather appear as clickable buttons. You can do the following to appear as buttons.

  <ul>
    <li>GitHub</li>
    <li>Frontend Mentor</li>
    <li>LinkedIn</li>
    <li>Twitter</li>
    <li>Instagram</li>
  </ul>
  

  Now the CSS

  .card ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }
  
  .card ul li {
    list-style: none;
    font-weight: 600;
    background-color: hsl(0, 0%, 20%);
    width: 100%;
    text-align: center;
    padding: 15px 0;
    border-radius: 10px;
    font-size: 14px;
  }
  

  I would recommend reading up on Semantic HTML, I know it helped me out a lot.

  1

  ---

  

  KapteynUniverse•2,340

  @KapteynUniversePosted 3 days ago

  @Michaeldremy They are also hyperlinks

  <ul>
   <li><a href="#">GitHub</a></li>
   <li><a href="#">Frontend Mentor</a></li>
   <li><a href="#">Linkedin</a></li>
   <li><a href="#">Twitter</a></li>
   <li><a href="#">Instagram</a></li>
  </ul>
  

  1