Recently, I decided to challenge myself by recreating the Spotify homepage using only pure Javascript and SCSS as a way to test my front-end development skills. You can view my progress so far at this link, although please note that it's still a work in progress. One noticeable difference between my version and the real one is the big background image. In my code snippet below, you can see how I attempted to create a similar effect:
<div class="bg-main">
<sceiotn class="can-see-the-background-image-1"></section>
<sceiotn class="can-see-the-background-image-2"></section>
</div>
In trying to achieve the same level of transparency and brightness for the background images in the sections, I used rgba(rgb,0.7) for the section backgrounds. However, upon comparison with the actual Spotify page, I noticed that their background allowed for a clearer view of the back albums. Despite diving into their source code, I couldn't quite decipher their technique.