@beowulf1958
Posted
Congratulations on completing the challenge. It is responsive, the hover effect works, and your code is well documented. I do have two suggestions.
First, move the attribution styles out of the head. They belong in the styles.css with the rest of the styles. Having styles in more than one place can make the page harder to maintain.
Second, although your position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); works, there is another way using flex. Try this:
body {
background-color: hsl(47, 88%, 63%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
}
Hope this helps.
Marked as helpful
@Ryan-OHanlon
Posted
@beowulf1958 Thank you for the feedback. I really appreciate it as I am still trying to figure out how to place elements in certain places on a webpage and being bombarded with so many different solutions makes it confusing which is the actual best practice and which attributes should I learn.
EDIT: I left the attribution style alone since the project code in the index.html file came that way. I'll be sure to adjust it in future projects.
