ironhack-labs / lab-css-spotify-clone Goto Github PK

View Code? Open in Web Editor NEW

93.0 9.0 5.1K 2.02 MB

A CSS exercise to practice positioning and layout

CSS 5.37% HTML 94.63%

lab-css-spotify-clone's Introduction

LAB | HTML & CSS - Spotify Clone

Learning Goals

This exercise allows you to practice and apply the concepts and techniques taught in class.

Upon completion of this exercise, you will be able to:

Create a webpage based on provided design and assets.
Create and link an external CSS stylesheet with an HTML document.
Display images in a webpage using HTML image tags and CSS background property.
Use the CSS position property to position elements on a webpage.
Use Flexbox to layout and position elements on a webpage.
Center content on a webpage, including images and text.
Submit completed work using Git and GitHub by creating a Pull Request.

Introduction

Everybody likes music, right? So the odds are that you have heard of Spotify.

In this lab, we will be building a simplified version of the Spotify landing page:

All of the necessary assets and images are already provided. You might also find it useful to resort to the full-length PDF version of the website as a reference.

Requirements

Fork this repo
Clone this repo

Submission

Upon completion, run the following commands:

git add .
git commit -m "done"
git push origin master

Create Pull Request so your TAs can check up your work.

Instructions

You are provided with some assets - in the images folder, you will find the necessary images, and the text is ready for you in the index.html file. Write your HTML and CSS code in the index.html and styles/style.css files, respectively. Again, remember to follow the best practices.

The page is split into 4 sections, and we have generously cut it down into pieces!

In general, website designs don't just come out of the wild, so you will likely have mockups/sketches that you will have to integrate. Therefore, it is a good practice to help you cut the website into pieces before coding to help you structuring your HTML.

The last section isn't as detailed as the others ones, good luck 😄

💪 💪 💪

Let's do this!

Iteration 1: Navbar

The navbar should be position: fixed.
Align the logo to the left and the ul with the links to the right, either using float or flex.

Iteration 2: Large image background with text

Check out this guide on centering things.

Iteration 3: What is on Spotify section

It looks like the divs take up about a third of the container each. How can you represent this in code?

Iteration 4: The green section

It looks like we have 2 main sections, a containing element with the text flowing from top to bottom and the image of the Spotify player on the right.
Position the Spotify logo absolutely according to the green div.

Happy coding! ❤️

lab-css-spotify-clone's People

Contributors

Stargazers

Watchers

Forkers

alhuar papuarza manulintz petervittorio borjadrr carlosolives livilian enrikegonzalolegarra juliapolbach gonzaloorio jorgejoseabad savianco adifox shveinik bruscantini vickycodes amandahonkanen smf27v palacioc agvg rogorri alexola buraburaite mjmartinez13 rifenburgh jeremybeagle wmonecke kehv1n oleh-kolinko ironhkristy dsoraluz itsoscarg doyen06 bfito ironhack-miami-jan-2017 ivan-jorge001 nickborbe iengineer andreamartins guajefran m8a98 edtrias alxdiaz nolegendhere gfrr f1xum ryan-jones akarpas michellebro jcrodz pauilargia juampi58 imrebartis isaklafleur scorpionxii joanamram edsonjmv fernandolarranaga ipabloparra tuckerds caa1982 pierre-piot joseiru zochasz cayetanap emiliomiguel wolfkay verdyguer santiagoaldanondo mglprzlrnz alemanote visergra jordipiella oxid94 rodrenny paulagonzalez soyjimmy gottschalkironhack polgasull javalba jvdm1988 gabrielaparra anonymous1905 davalarcon lolomain jsrj deokjj valzzie alidagc jessicaacove hollywood017 crystalcodes01 ihorbond josh35767 danikassin97 leyline onlinemethod nik-e tmaslove lauravallhonrat

lab-css-spotify-clone's Issues

T

2020-03-18 07:56:48.8462|WARN|Winleafs.Wpf.Api.Events.SpotifyEventTrigger|Retrieving the Spotify current playlist failed.
System.ArgumentException: An item with the same key has already been added. Key: System.Net.Http.Headers.HeaderDescriptor
   at System.Collections.Generic.Dictionary`2.TryInsert(TKey key, TValue value, InsertionBehavior behavior)
   at System.Collections.Generic.Dictionary`2.Add(TKey key, TValue value)
   at System.Net.Http.Headers.HttpHeaders.GetOrCreateHeaderInfo(HeaderDescriptor descriptor, Boolean parseRawValues)
   at SpotifyAPI.Web.SpotifyWebClient.AddHeaders(Dictionary`2 headers)
   at SpotifyAPI.Web.SpotifyWebClient.DownloadRawAsync(String url, Dictionary`2 headers)
   at SpotifyAPI.Web.SpotifyWebClient.DownloadAsync(String url, Dictionary`2 headers)
   at SpotifyAPI.Web.SpotifyWebClient.DownloadJsonAsync[T](String url, Dictionary`2 headers)
   at SpotifyAPI.Web.SpotifyWebAPI.DownloadDataAsync[T](String url)
   at Winleafs.Wpf.Helpers.Spotify.GetCurrentPlayingPlaylist() in Winleafs\Winleafs.Wpf\Helpers\Spotify.cs:line 63
   at Winleafs.Wpf.Api.Events.SpotifyEventTrigger.CheckPlaylistAsync() in Winleafs\Winleafs.Wpf\Api\Events\SpotifyEventTrigger.cs:line 54

Originally posted by @StijnOostdam in winleafs/Winleafs#119 (comment)

Hello-world

Idk was ich hierbei ein paar schöne Tage in Berlin oder morgen Abend und bis bald liebe

made spotify clone

Hacer

![image](https://user-images.githubusercontent.com/11806849/77115425-950e3e80-6a2e-11ea-85b2-c73756f8d841.png)

Have a dropdown that contains the playlists that the user has instead of putting in the name.

Originally posted by @bartdebever in winleafs/Winleafs#119 (comment)

````jjj

2020-03-18 07:56:48.8462|WARN|Winleafs.Wpf.Api.Events.SpotifyEventTrigger|Retrieving the Spotify current playlist failed.
System.ArgumentException: An item with the same key has already been added. Key: System.Net.Http.Headers.HeaderDescriptor
   at System.Collections.Generic.Dictionary`2.TryInsert(TKey key, TValue value, InsertionBehavior behavior)
   at System.Collections.Generic.Dictionary`2.Add(TKey key, TValue value)
   at System.Net.Http.Headers.HttpHeaders.GetOrCreateHeaderInfo(HeaderDescriptor descriptor, Boolean parseRawValues)
   at SpotifyAPI.Web.SpotifyWebClient.AddHeaders(Dictionary`2 headers)
   at SpotifyAPI.Web.SpotifyWebClient.DownloadRawAsync(String url, Dictionary`2 headers)
   at SpotifyAPI.Web.SpotifyWebClient.DownloadAsync(String url, Dictionary`2 headers)
   at SpotifyAPI.Web.SpotifyWebClient.DownloadJsonAsync[T](String url, Dictionary`2 headers)
   at SpotifyAPI.Web.SpotifyWebAPI.DownloadDataAsync[T](String url)
   at Winleafs.Wpf.Helpers.Spotify.GetCurrentPlayingPlaylist() in Winleafs\Winleafs.Wpf\Helpers\Spotify.cs:line 63
   at Winleafs.Wpf.Api.Events.SpotifyEventTrigger.CheckPlaylistAsync() in Winleafs\Winleafs.Wpf\Api\Events\SpotifyEventTrigger.cs:line 54