Day 34: Building A Piano

Yesterday we spent time styling the keys. Today, we continue in styling.

1. Gave the piano a logo.

1. Let’s the styling of the logo begin.

1. The img element needs its parent element to be positioned so we set the position of the #piano.

1. To sharpen the edges of the piano we use the border-radius property.

1. Same border-property is appropriated to the class key.

1. Let’s not forget the black keys too. The border-property is added to the element .key.black--key::after.

1. Time to make it responsive.

1. #piano was added to the media query and given a new width.

1. .keys was also added to the media query and gave it a new width.

1. Of course, we didn’t forget the logo. The logo is also added before the .keys

Thanks for reading. I look forward to reading your comments.