Spotify Wireframe

// First time using Jade :-) // ------------------------- .spotify-app .spotify-top .close-btn .min-btn .full-btn .search .profile span span .wrapper .sidebar .main span span.active span span .your-music span span span span .playlists span span span .current-song div span span div span span span .content .title .menu span span span.active span .genres .type .type .type .type .type .type .social-stuff .more-friends .friend span span .friend span span .friend span span.long-name .friend span span .friend span span.long-name .friend span span .friend span span .player .last .play span span .next .progress-bar .options span span span .volume

SCSS

html, body { width: 100%; height: 100%; margin: 0; background-color: #00AAA0; } .spotify-app { margin: 150px auto; width: 750px; border-radius: 10px; background-color: #131313; box-shadow: 14px -10px 0px 0px #176f69; } .spotify-top { display: flex; box-sizing: border-box; height: 42px; padding: 0 15px 0; border-bottom: 1px solid #444; border-top-left-radius: 10px; border-top-right-radius: 10px; background-color: #333; align-items: center; .close-btn { display: inline-block; width: 15px; height: 15px; border-radius: 50%; background-color: #EC6D6B; } .min-btn { display: inline-block; width: 15px; height: 15px; margin: 0 5px; border-radius: 50%; background-color: #E7B846; } .full-btn { display: inline-block; width: 15px; height: 15px; border-radius: 50%; background-color: #57BD82; } } .player { display: flex; box-sizing: border-box; width: 100%; height: 55px; padding: 0 20px; border-top: 1px solid #444; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; background-color: #333; align-items: center; .last { position: relative; width: 0; height: 0; border-top: 8px solid transparent; border-right: 8px solid #868080; border-bottom: 8px solid transparent; border-left: 8px solid transparent; background: transparent; &::before { position: absolute; top: -7px; right: 0; width: 3px; height: 14px; content: ''; border-radius: 20px; background-color: #868080; } } .next { position: relative; width: 0; height: 0; margin-right: 25px; border-top: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 8px solid #868080; background: transparent; &::after { position: absolute; top: -7px; width: 3px; height: 14px; content: ''; border-radius: 20px; background-color: #868080; } } .play { position: relative; display: flex; width: 35px; height: 35px; margin: 0 15px; border: 3px solid #868080; border-radius: 50%; justify-content: center; align-items: center; span { width: 4px; height: 18px; border-radius: 20px; background-color: #868080; &:first-child { margin-right: 4px; } } } } .progress-bar { width: 420px; height: 4px; margin-right: 30px; border-radius: 10px; background-color: #868080; } .options { span { display: inline-block; width: 10px; height: 10px; background-color: #868080; &:nth-child(2) { margin: 0 6px; } } .volume { display: inline-block; width: 68px; height: 4px; margin-bottom: 3px; margin-left: 10px; border-radius: 10px; background-color: #868080; } } .sidebar { position: relative; box-sizing: border-box; width: 95px; height: 100%; padding-top: 15px; background-color: #333; .main, .your-music, .playlists { margin-bottom: 25px; padding-left: 15px; } span { display: inline-block; width: 65px; height: 8px; margin-bottom: 16px; background-color: #868080; &:first-child { width: 50px; height: 10px; margin-bottom: 12px; } &.active { background-color: #fff; &::before { position: absolute; top: 32px; left: 0; width: 5px; height: 25px; content: ''; background-color: #7DC24B; } } } .current-song { position: absolute; bottom: 0; width: 100%; div { &:first-child { box-sizing: border-box; height: 40px; padding: 7px 10px 0; border-top: 1px solid #444; border-bottom: 1px solid #444; span { &:first-child { display: inline-block; width: 25px; height: 25px; margin: 0; border-radius: 50%; background-color: #868080; } &:last-child { width: 38px; height: 8px; margin-bottom: 7px; margin-left: 6px; background-color: #868080; } } } &:last-child { height: 40px; span { &:first-child { float: left; width: 40px; height: 100%; margin-right: 10px; margin-bottom: 0; background-color: #868080; } &:nth-child(2) { width: 30px; margin-top: 7px; margin-bottom: 0; background-color: #868080; } &:nth-child(3) { width: 40px; margin-top: 2px; margin-bottom: 0; background-color: #868080; } } } } } } .long-name { width: 75px !important; } .title { width: 150px; height: 25px; margin-bottom: 20px; background-color: #fff; } .content .menu { width: 100%; margin-bottom: 25px; padding-bottom: 12px; border-bottom: 1px solid #868080; } .menu span { position: relative; display: inline-block; width: 95px; height: 8px; margin-right: 18px; background-color: #868080; &.active { background-color: #fff; &::after { position: absolute; bottom: -16px; width: 95px; height: 4px; content: ''; background-color: #7DC24B; } } } .wrapper { display: flex; height: 450px; } .content { padding: 25px 20px 0; flex: 1; } .type { width: 150px; height: 150px; margin-bottom: 8px; background-color: #333; } .social-stuff { box-sizing: border-box; width: 150px; height: 100%; padding: 20px; padding-left: 20px; background-color: #1e1e1e; .more-friends { width: 100px; height: 20px; margin-bottom: 30px; background: #fff; } .friend { margin-bottom: 20px; span { &:first-child { display: inline-block; width: 25px; height: 25px; margin: 0; border-radius: 50%; background-color: #868080; } &:last-child { display: inline-block; width: 60px; height: 8px; margin-bottom: 9px; margin-left: 6px; background-color: #868080; } } } } .genres { display: flex; flex-wrap: wrap; justify-content: space-between; align-content: flex-end; }