diff --git a/lab-css-spotify-clone-master - 1/lab-css-spotify-clone-master/README.md b/lab-css-spotify-clone-master - 1/lab-css-spotify-clone-master/README.md new file mode 100644 index 000000000..d3ea170bc --- /dev/null +++ b/lab-css-spotify-clone-master - 1/lab-css-spotify-clone-master/README.md @@ -0,0 +1,92 @@ +![logo_ironhack_blue 7](https://user-images.githubusercontent.com/23629340/40541063-a07a0a8a-601a-11e8-91b5-2f13e4e6b441.png) + +# 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: + +![Spotify image](https://i.imgur.com/xVD0bm6.jpg) + +
+ +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](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/spotify-prototype.pdf)** as a reference. + +## Requirements + +- Fork this repo +- Clone this repo + +## Submission + +Upon completion, run the following commands: + +```shell +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**_ :smile: + +:muscle: :muscle: :muscle: +
+![](https://res.cloudinary.com/ihwebdeb/image/upload/v1571085836/Ironhack/spotify-prototype_1x_ahk8ep.jpg) + +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](https://css-tricks.com/centering-css-complete-guide/) on centering things. + +### Iteration 3: What is on Spotify section + +- It looks like the `div`s 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!** :heart: \ No newline at end of file diff --git a/lab-css-spotify-clone-master - 1/lab-css-spotify-clone-master/images/devices-icon.png b/lab-css-spotify-clone-master - 1/lab-css-spotify-clone-master/images/devices-icon.png new file mode 100644 index 000000000..4ca91e5a0 Binary files /dev/null and b/lab-css-spotify-clone-master - 1/lab-css-spotify-clone-master/images/devices-icon.png differ diff --git a/lab-css-spotify-clone-master - 1/lab-css-spotify-clone-master/images/high-quality-icon.png b/lab-css-spotify-clone-master - 1/lab-css-spotify-clone-master/images/high-quality-icon.png new file mode 100644 index 000000000..409a55f4e Binary files /dev/null and b/lab-css-spotify-clone-master - 1/lab-css-spotify-clone-master/images/high-quality-icon.png differ diff --git a/lab-css-spotify-clone-master - 1/lab-css-spotify-clone-master/images/landing.jpg b/lab-css-spotify-clone-master - 1/lab-css-spotify-clone-master/images/landing.jpg new file mode 100644 index 000000000..e2ba9fe63 Binary files /dev/null and b/lab-css-spotify-clone-master - 1/lab-css-spotify-clone-master/images/landing.jpg differ diff --git a/lab-css-spotify-clone-master - 1/lab-css-spotify-clone-master/images/music-icon.png b/lab-css-spotify-clone-master - 1/lab-css-spotify-clone-master/images/music-icon.png new file mode 100644 index 000000000..84ea7d8cc Binary files /dev/null and b/lab-css-spotify-clone-master - 1/lab-css-spotify-clone-master/images/music-icon.png differ diff --git a/lab-css-spotify-clone-master - 1/lab-css-spotify-clone-master/images/spotify-app.jpg b/lab-css-spotify-clone-master - 1/lab-css-spotify-clone-master/images/spotify-app.jpg new file mode 100644 index 000000000..be0116a82 Binary files /dev/null and b/lab-css-spotify-clone-master - 1/lab-css-spotify-clone-master/images/spotify-app.jpg differ diff --git a/lab-css-spotify-clone-master - 1/lab-css-spotify-clone-master/images/spotify-icon-white.png b/lab-css-spotify-clone-master - 1/lab-css-spotify-clone-master/images/spotify-icon-white.png new file mode 100644 index 000000000..2ff95dee6 Binary files /dev/null and b/lab-css-spotify-clone-master - 1/lab-css-spotify-clone-master/images/spotify-icon-white.png differ diff --git a/lab-css-spotify-clone-master - 1/lab-css-spotify-clone-master/images/spotify-logo.png b/lab-css-spotify-clone-master - 1/lab-css-spotify-clone-master/images/spotify-logo.png new file mode 100644 index 000000000..1a0d4518e Binary files /dev/null and b/lab-css-spotify-clone-master - 1/lab-css-spotify-clone-master/images/spotify-logo.png differ diff --git a/lab-css-spotify-clone-master - 1/lab-css-spotify-clone-master/index.html b/lab-css-spotify-clone-master - 1/lab-css-spotify-clone-master/index.html new file mode 100644 index 000000000..d6807baf9 --- /dev/null +++ b/lab-css-spotify-clone-master - 1/lab-css-spotify-clone-master/index.html @@ -0,0 +1,112 @@ + + + + + + + Spotify Clone + + + + + + +
+ +
+ +
+

Music for everyone.

+ +

Spotify is now free on mobile, tablet and computer. Listen to the + right music, wherever you are.

+
+ + + + +
+
+

+ What's on Spotify? +

+
+
+ music icon +

Millions of Songs

+

+There are millions of songs on Spotify +

+
+ +
+ high quality icon +

+HD Music +

+

+ Listen to music as if you were listening live +

+
+ +
+ devices icon +

+Stream Everywhere +

+

+ Stream music on your smartphone, tablet or computer +

+
+
+
+ +
+ +
+
+
+ spotify-icon-white +

It's as yeezy as Kanye West.

+
+
+

Search

+

Know what you want to listen to? Just search and hit play.

+
+
+

+ Browse +

+

+Check out the + latest charts, brand new releases and great playlists for right now. +

+
+
+

+ Discover +

+

+ Enjoy new music every Monday with your + own personal playlist. Or sit back and enjoy Radio. +

+
+
+
+ spotify-app +
+
+
+ + diff --git a/lab-css-spotify-clone-master - 1/lab-css-spotify-clone-master/styles/style.css b/lab-css-spotify-clone-master - 1/lab-css-spotify-clone-master/styles/style.css new file mode 100644 index 000000000..e91dd3087 --- /dev/null +++ b/lab-css-spotify-clone-master - 1/lab-css-spotify-clone-master/styles/style.css @@ -0,0 +1,125 @@ +/* +Colors: + +Text: 1A1A1A +Green: #00B172 +White: #FFF + +*/ +/* ----------- NAVBAR---------*/ + +* { + color: 1A1A1A; + font-family: Arial, Helvetica, sans-serif; +} + +.navdiv{ + display: flex; + align-items: center; + justify-content: space-between; +} + +img{ + height: 45px; + padding: 10px; +} + +ul{ + list-style-type: none; + display: flex; +} +li{ + padding: 10px; +} + +/*MAIN MAIN*/ +.main-image{ + background-image: url(../images/landing.jpg); + background-size: cover; + background-position: center; + height: 600px; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + justify-content: center; + position: relative; + +} + +.main-text{ + text-align: center; + color: white; + font-size: 60px; + margin: 0; + padding: 0; + +} + +.main-paragraph{ + font-size: 25px; + color: white; + text-align: center; + font-weight: lighter; +} + +/* Whats on Spotify */ + +h2 { + text-decoration: underline #00B172 3px; + text-underline-offset: 7px;; +} + + +.articles { + display: flex; + justify-content: space-around; + +} +article { + width: 20vw; + display: flex; + flex-direction: column; + align-items: center; +} + +.spotify-title { + text-align: center; +} + +.green-bkg { + background-color: #00B172; + margin: 0 15px; + height: 500px; + display: flex; + justify-content: space-around; + align-items: center; +} + +.yeezy { + margin-left: -1%; +} + +.spotify-icon { + position: absolute; + left: 50%; + top: 132%; + height: 60px; + +} +.kanye { + width: 35vw; + color: white; + +} + +.west { + color: white; + text-decoration: underline white 3px; + text-underline-offset: 7px; +} + +.album-cover-div, .album-cover { + width: 250px; + height: 430px; +} diff --git a/lab-css-spotify-clone-master/lab-css-spotify-clone-master/README.md b/lab-css-spotify-clone-master/lab-css-spotify-clone-master/README.md new file mode 100644 index 000000000..d3ea170bc --- /dev/null +++ b/lab-css-spotify-clone-master/lab-css-spotify-clone-master/README.md @@ -0,0 +1,92 @@ +![logo_ironhack_blue 7](https://user-images.githubusercontent.com/23629340/40541063-a07a0a8a-601a-11e8-91b5-2f13e4e6b441.png) + +# 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: + +![Spotify image](https://i.imgur.com/xVD0bm6.jpg) + +
+ +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](https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/spotify-prototype.pdf)** as a reference. + +## Requirements + +- Fork this repo +- Clone this repo + +## Submission + +Upon completion, run the following commands: + +```shell +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**_ :smile: + +:muscle: :muscle: :muscle: +
+![](https://res.cloudinary.com/ihwebdeb/image/upload/v1571085836/Ironhack/spotify-prototype_1x_ahk8ep.jpg) + +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](https://css-tricks.com/centering-css-complete-guide/) on centering things. + +### Iteration 3: What is on Spotify section + +- It looks like the `div`s 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!** :heart: \ No newline at end of file diff --git a/lab-css-spotify-clone-master/lab-css-spotify-clone-master/images/devices-icon.png b/lab-css-spotify-clone-master/lab-css-spotify-clone-master/images/devices-icon.png new file mode 100644 index 000000000..4ca91e5a0 Binary files /dev/null and b/lab-css-spotify-clone-master/lab-css-spotify-clone-master/images/devices-icon.png differ diff --git a/lab-css-spotify-clone-master/lab-css-spotify-clone-master/images/high-quality-icon.png b/lab-css-spotify-clone-master/lab-css-spotify-clone-master/images/high-quality-icon.png new file mode 100644 index 000000000..409a55f4e Binary files /dev/null and b/lab-css-spotify-clone-master/lab-css-spotify-clone-master/images/high-quality-icon.png differ diff --git a/lab-css-spotify-clone-master/lab-css-spotify-clone-master/images/landing.jpg b/lab-css-spotify-clone-master/lab-css-spotify-clone-master/images/landing.jpg new file mode 100644 index 000000000..e2ba9fe63 Binary files /dev/null and b/lab-css-spotify-clone-master/lab-css-spotify-clone-master/images/landing.jpg differ diff --git a/lab-css-spotify-clone-master/lab-css-spotify-clone-master/images/music-icon.png b/lab-css-spotify-clone-master/lab-css-spotify-clone-master/images/music-icon.png new file mode 100644 index 000000000..84ea7d8cc Binary files /dev/null and b/lab-css-spotify-clone-master/lab-css-spotify-clone-master/images/music-icon.png differ diff --git a/lab-css-spotify-clone-master/lab-css-spotify-clone-master/images/spotify-app.jpg b/lab-css-spotify-clone-master/lab-css-spotify-clone-master/images/spotify-app.jpg new file mode 100644 index 000000000..be0116a82 Binary files /dev/null and b/lab-css-spotify-clone-master/lab-css-spotify-clone-master/images/spotify-app.jpg differ diff --git a/lab-css-spotify-clone-master/lab-css-spotify-clone-master/images/spotify-icon-white.png b/lab-css-spotify-clone-master/lab-css-spotify-clone-master/images/spotify-icon-white.png new file mode 100644 index 000000000..2ff95dee6 Binary files /dev/null and b/lab-css-spotify-clone-master/lab-css-spotify-clone-master/images/spotify-icon-white.png differ diff --git a/lab-css-spotify-clone-master/lab-css-spotify-clone-master/images/spotify-logo.png b/lab-css-spotify-clone-master/lab-css-spotify-clone-master/images/spotify-logo.png new file mode 100644 index 000000000..1a0d4518e Binary files /dev/null and b/lab-css-spotify-clone-master/lab-css-spotify-clone-master/images/spotify-logo.png differ diff --git a/lab-css-spotify-clone-master/lab-css-spotify-clone-master/index.html b/lab-css-spotify-clone-master/lab-css-spotify-clone-master/index.html new file mode 100644 index 000000000..a3b562dae --- /dev/null +++ b/lab-css-spotify-clone-master/lab-css-spotify-clone-master/index.html @@ -0,0 +1,50 @@ + + + + + + + Spotify Clone + + + + + +
+ +
+ +
+

Music for everyone.

+ +

Spotify is now free on mobile, tablet and computer. Listen to the + right music, wherever you are.

+ +
+ + + + + +