diff --git a/README.md b/README.md index d3ea170bc..fe89b0209 100644 --- a/README.md +++ b/README.md @@ -1,92 +1,14 @@ -![logo_ironhack_blue 7](https://user-images.githubusercontent.com/23629340/40541063-a07a0a8a-601a-11e8-91b5-2f13e4e6b441.png) +# Spotify Landing Page Clone Project -# LAB | HTML & CSS - Spotify Clone +Hello! -
- -

Learning Goals

- +I used my new learned CSS skills on the project assigned by Ironhack, on Week 1, day 2. - This exercise allows you to practice and apply the concepts and techniques taught in class. +I pushed myself to don't use any AI tool for this project. I just searched Google and checked my notes when I stucked. After this little journey, I'm glad to say this, I finished it successfuly. - Upon completion of this exercise, you will be able to: +This is my first of writing README.md, I'm trying to improve my English and the ability of literal explanation without help. I hope it is clear to understand. - - 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. +Here is the screenshot of the clone project: -
-
+![spotify-clone-png-naim](image.png) -
- -## 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/index.html b/index.html index 0697f92fe..7052a941c 100644 --- a/index.html +++ b/index.html @@ -1,18 +1,88 @@ - - - - - Spotify Clone - - - - Premium Discover Help Download Music for everyone. Spotify is now free on mobile, tablet and computer. Listen to the - right music, wherever you are. What’s on Spotify? Millions of Songs There are millions of songs on Spotify HD Music - Listen to music as if you were listening live Stream Everywhere Stream music on your smartphone, tablet or computer - 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 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?

+
+
+
+ +

Millions of Songs

+

There are millions of songs on Spotify

+
+
+ +

HD Music

+

Listen to music as if you were listening live

+
+
+ +

Stream Everywhere

+

Stream music on your smartphone, tablet or computer

+
+
+
+ + + + + \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index 55efb32c6..05eec0eef 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,8 +1,176 @@ -/* -Colors: +* { + margin: 0; + padding: 0; + font-family: "Poppins", sans-serif; + font-weight: 400; + font-style: normal; +} -Text: 1A1A1A -Green: #00B172 -White: #FFF +/* header */ -*/ +header { + background-color: rgb(255, 255, 255); + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.75rem 1rem; +} + +header a img { + height: 2rem; +} + +header nav ul { + display: flex; + +} + +header nav ul li { + list-style: none; + margin: 0 0.4rem; +} + + +header nav ul li a { + text-decoration: none; +} + +header nav ul li a:visited { + text-decoration: none; + color: black; +} + +/* hero banner landing */ + +#hero-banner { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + background-image: url(/images/landing.jpg); + background-size: cover; + background-position: center; + height: 32rem; + color: white; +} + +#hero-banner h1 { + font-size: 2.8rem; + font-weight: 400; + margin-bottom: 1rem; +} + +#hero-banner p { + padding: 0 9.8rem; + font-weight: 200; + margin-bottom: 4rem; +} + +/* #features */ +#features { + padding: 2rem; +} + +#features h1 { + text-align: center; + font-weight: 500; +} + +#features .line { + border: solid 2px; + color: #00B172; + width: 16rem; + margin: 0 auto; +} + +#features .container { + display: flex; + justify-content: space-around; + text-align: center; + align-items: center; +} + +#features .container .feature-cards { + height: 16rem; + width: 18rem; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 1rem; + +} + +#features .container .feature-cards img { + height: 3rem; +} + +#features .container .feature-cards h4 { + font-size: large; + font-weight: bold; + color: #00B172; +} + +#features .container .feature-cards p { + min-height: 5rem; + font-weight: 200; + max-width: 70%; +} + +/* #advertise */ + +#advertise { + background-color: #00B172; + background-image: url(/images/spotify-icon-white.png); + background-position: center; + background-repeat: no-repeat; + background-size: 10%; + height: auto; + color: #fff; + padding: 2rem 6rem; +} +#advertise .container{ + display: flex; + justify-content: space-between; +} + +#advertise .container .ads-container { + height: auto; + width: 20rem; + display: flex; + flex-direction: column; + align-items: start; + justify-content: space-around; +} + +#advertise .container .ads-container h3 { + font-weight: 600; + font-size: larger; +} + +#advertise .container .ads-container .line { + border: solid 2px; + color: #ffffff; + width: 16rem; +} + +#advertise .container .ads-container .ads-card { + margin-top: 2rem; +} +#advertise .container .ads-container .ads-card h4 { + font-weight: 800; +} +#advertise .container .ads-container .ads-card p { + width: 80%; + margin-top: 1rem; + font-weight: 200; +} + +#advertise .container .img-container { + display: flex; + align-items: center; +} +#advertise .container img { + height: 28rem; +}