@ofthewildfire
Posted
Hey! First off, fantastic job, it looks amazing, I just have some small changes I think might be helpful.
1 - Your music icon image is stretched, its in a flex-container so we can solve that by adding a align-items: center to align the items vertically. This distributes the whitespace and makes it nice and centered
.plan-container {
width: 100%;
height: 20%;
display: flex;
flex-direction: row;
align-items: center;
padding: 2vh 3vw;
}
2: Within your price-plan container you used a span and a paragraph and that is fine, totally, however, a paragraph has default margin and that default margin is causing a lot of space above it and making it look way too wide from the span. This can easily be fixed by removing the top/bottom margin on the paragraph element.
.price-container > p {
color: hsl(224, 23%, 55%);
margin: 0;
}
-- and alternatively, you could also have used a ul/li to create this and it would have taken care of itself, seeing as <li> ... </li> are in-line and the flex-container would have nicely spaced all components out, but that is just personal opinion really. You did aweome whichever method you prefer. --
3: Your button and anchor tag hover states are missing the cursor: pointer to give it that micky-mouse hand on hover like your "Cancel order" element has. So adding cursor: pointer would just be it
You did a really great job and I hope these are helpful additions. :)
Happy Coding ~ Kaycee.
Marked as helpful
