Im used ID and variables

Your layout looks good! The space between elements isn't exactly like the design, but I have the same issue with mine. I never considered making the links buttons, I just put the text within a div since I wasn't including real links. Your choices on how you did the project are interesting, and opened my eyes up to different ways I can try in the future.

I don't exactly remember, but I think it's either freecodecamp or sololearn that has projects that include buttons if you want more practice.

"Your solution Looks Great!"

As you mentioned that you encountered a problem while creating buttons, I have Given my way of approach to that button below

code: Html: <div class="socialmedia"> <div><a href="#">GitHub</a></div> <div><a href="#">Frontend Mentor</a></div> <div><a href="#"> LinkedIn</a></div> <div><a href="#">Twitter</a></div> <div><a href="#">Instagram</a></div> </div>

CSS: .socialmedia{ display:flex; flex-direction:column; margin-top:2px; gap:20px; } .socialmedia div{ background-color:hsl(0, 0%, 20%); height:43px; width:350px; border-radius:5px;; text-align:center; } .socialmedia div a{ text-decoration:none; color:white; margin:10px; font-size:14px; font-weight:600; } .socialmedia div:hover{ background-color:hsl(75, 94%, 57%); cursor:pointer; caret-color:black; color:black; }

I hope these suggestions are helpful to you. Let me know if you have any other questions or concerns.