Close

Spotify Artist Page UI

This is a template of a Spotify user interface, designed using HTML, CSS, and JavaScript. The form displays a playlist by an artist with buttons, placeholders, drop-down menus, and a navigation bar. The Li element of lists has been used to display the details in a list whereas JavaScript functions have been used to implement sliders, collapse toggles, and tooltips. Colors, spacing, borders, and font values are defined as variables to avoid using values again and again in different places. The background images are imported with its URL added to the code. The background of the body is given the styles color as $black, and font family as 'Roboto', sans-serif. The header is given the styles background as $light-black, padding as $padding-sm, color as $grey, align-items as center, and border-bottom as 1px solid $black. Cursor is set as pointer for most of the headings, buttons, and sections. The playlist is given the styles of padding as $padding, background as $light-black, border top and bottom as 1px solid $black which then changes background color to lighten( $light-black, 10% ) in a hover event. Source: https://codepen.io/alowenthal/pen/rxboRv

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Your email address will not be published.