repsonsive social media links using flex , hover event

Community feedback

• 

  Aakash Verma•9,500

  @skyv26

  Posted 5 months ago

  Hi @ravaka5,

  I hope you're doing well! Here are a few suggestions to improve the structure and alignment of your code:

  1. Use ul and li for Links:
     Since these links represent a list of social media profiles, it's semantically better to wrap them in an unordered list (<ul>) and list items (<li>), instead of using <div>. This will improve accessibility and readability for both developers and screen readers.

     Example:

     <ul class="social-links">
       <li><a href="https://github.com/ravaka5">GitHub</a></li>
       <li><a href="https://www.frontendmentor.io/profile/ravaka5">Frontend Mentor</a></li>
       <li><a href="https://www.linkedin.com/in/ravaka-ramarojaona-145355249/">LinkedIn</a></li>
       <li><a href="https://x.com/RavakaRama33850">Twitter</a></li>
       <li><a href="https://www.instagram.com/ravaka_nyaina_sarobidy/">Instagram</a></li>
     </ul>
     

  2. Centering Your Card:
     To center your card vertically and horizontally on the screen, make the following tweaks to your CSS for a cleaner layout:

     • Add min-height to ensure the body takes the full height of the viewport:

       body {
         background-color: hsl(0, 0%, 8%);
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         color: white;
         min-height: 100vh; /* Ensures body takes full viewport height */
       }
       

     • Remove the position: fixed; from the footer as it's unnecessary for centering:

       footer {
         text-align: center;
         width: 100%;
       }
       

     • Finally, remove the margin-top in the main tag to prevent unnecessary spacing:

       main {
         padding: 32px 24px;
         background: hsl(0, 0%, 12%);
         border-radius: 14px;
       }
       

  These small adjustments will help enhance your layout and make your code more semantic. Keep up the great work! 👍

  Let me know if you need further help!

  00
• 

  Marzia Jalili•7,650

  @MarziaJalili

  Posted 5 months ago

  Great job!!!

  A tiny adjestment you can make:

  • For a smoother color change, add the line below to the <a> elements:

  a {
    transition: background-color .5s color .5s;
  }
  

  This ensures that the color will change after 500 milliseconds. Which makes it look better.

  Keep up the grind🫡

  00