diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..4798424 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/index.html b/index.html index 4a81684..b0c5bac 100644 --- a/index.html +++ b/index.html @@ -6,13 +6,65 @@ 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. +
+ +
+

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

+
+
+ +

HD Music

+

Listen to music as if you were listening live

+
+
+ devices-icon +

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 68b1e59..5c11427 100644 --- a/styles/style.css +++ b/styles/style.css @@ -3,4 +3,130 @@ Colors: Text: 1A1A1A Green: #00B172 White: #FFF -*/ \ No newline at end of file +*/ +* h1, h2,h3, h4, div, nav, ul, li, img, body, hr { + margin: 0; + --text: #1A1A1A; + --green: #00B172; + --white: #fff; + font-size: 18px; + font-family: sans-serif; +} + +nav { + height: 6vh; + width: 100vw; + display: flex; + justify-content: space-around; + padding: 10px 0; +} + +nav img { + height: inherit; +} + +nav ul { + display: flex; + align-items: center; +} + +nav li { + list-style: none; +} + +nav a { + padding-left: 20px; + text-decoration: none; +} + +header article { + height: calc(94vh - 20px); + width: 100vw; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-image: url('./../images/landing.jpg'); + background-size: cover; + color: var(--white); +} + +header h1 { + font-size: 3em; + font-weight: normal; + text-align: center; +} + +header p{ + font-weight: 100; + text-align: center; +} + +section { + display: flex; + flex-direction: column; + align-items: center; + height: 65vh; + justify-content: space-around; +} + +.article { + width: 100vw; + height: 50vh; + display: flex; + justify-content: space-evenly; + align-items: center; +} + +.title { + width: fit-content; +} + +.title hr { + border: 2px solid var(--green); + border-radius: 0.5px; +} + +.features { + width: 25vw; +} + +.features img { + width: 20vw; +} + +footer { + height: 80vh; + width: 100vw; + display: flex; + justify-content: center; + align-items: center; +} + +.verde { + width: 90vw; + height: 70vh; + background-color: var(--green); + display: flex; + flex-direction: row; + justify-content: space-evenly; + background-image: url('./../images/spotify-icon-white.png'); + background-size: 10vh auto; + background-repeat: no-repeat; + background-position: center center; +} + +.verde article { + width: 35vw; + height: fit-content; + display: flex; + flex-direction: column; + font-size: 0.9em; +} +.verde aside { + width: 35vw; + height: 60vh; +} +footer img { + max-width: 20vw; +} \ No newline at end of file