@jacob-stone9554
Posted
Hi! You have a pretty good start on your solution! I do think it could be improved in a few ways:
One way you could improve the structure of your HTML is through the use of semantic HTML. Semantic HTML makes your code more organized and easier for other developers to read and understand. For example, you have <div class="main-background"> on line 16 of index.html. Instead of that div, you could have used <main> which would signify that it is where the main content of your page is going to reside. If you'd like to read more about semantic HTML, here is a brief article that breaks it down pretty well.
Another way you could improve your design is by implementing the font provided. The easiest way you could do that is to get the embed link from Google Fonts, for this specific challenge they are using the Inter font, if you follow that link and click "get font" in the top right it will give you instructions on how to use it.
Your implementation of the card looks good! It is a little larger than the design, but I think if you sized down the card a little bit and sized down your buttons a little bit your solution would be a lot closer to the given design. For example, instead of having your buttons height set to 14%, you could try something a little smaller. On the note of overall design, if you set the background-color of your main-background to hsl(0, 0%, 8%); it would help get you a little closer to the given design.
Finally, I think that the inclusion of a profile picture would be a nice touch! You can specify an image with <img src="path/to/your/image" alt="a description of the image"> which will insert the image into your webpage. You can make it a circle by adding the border-radius: 100% attribute to your style rule.
I really like the hover effect you did for your buttons, it was a nice touch! I hope this helps, feel free to reach out if you have any questions. Happy coding :)
