diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..1e364e10f --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,11 @@ +{ + "github.copilot.enable": { + "*": false, + "plaintext": false, + "markdown": false, + "scminput": false, + "jsonc": false, + "css": false, + "html": false + } +} \ No newline at end of file diff --git a/index.html b/index.html index 0697f92fe..365a2d2d4 100644 --- a/index.html +++ b/index.html @@ -1,18 +1,77 @@ - - - - - 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

+
+
+
+
+
+

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/styles/style.css b/styles/style.css index 55efb32c6..8cc8be779 100644 --- a/styles/style.css +++ b/styles/style.css @@ -6,3 +6,161 @@ Green: #00B172 White: #FFF */ +html, +body { + font-family: Arial, sans-serif; + font-size: 16px; + color: #1a1a1a; + margin: 0; + padding: 0; +} +ul { + display: block; + list-style-type: disc; + margin-block-start: 0; + margin-block-end: 0; + padding-inline-start: 0; + unicode-bidi: isolate; +} +.navbar { + position: fixed; + top: 0; + display: flex; + background-color: #fff; + align-items: center; + gap: 4vw; + list-style: none; + width: calc(100vw - 2vw); + padding: 1vh 1vw; +} +.navbar img { + width: 15vw; +} +.navbar li:first-child { + flex-grow: 1; +} + +.first img { + width: 100%; + height: 90vh; + object-fit: cover; + overflow: hidden; +} +.first .text { + position: absolute; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + top: 40vh; + left: 20vw; + width: 60vw; + color: #fff; +} +.first .text h1 { + font-size: 5rem; + margin: 0; +} +.first .text p { + text-align: center; + font-size: 1.5rem; + text-wrap: balance; +} +.second .phrase { + text-align: center; + font-size: 3rem; + margin: 2vh 0 0.5vh; +} +#one { + text-align: center; + border: none; + height: 0.5vh; + background-color: #00b172; + margin: 0 35vw; + width: 30vw; +} +.container { + display: flex; + justify-content: space-around; + align-items: center; + margin: 5vh 10vw; + gap: 5vw; +} +.container img { + width: 15vw; + height: 15vw; + object-fit: cover; +} +.container .icons { + display: flex; + flex-direction: column; + align-items: center; +} +.container h2 { + color: #00b172; +} +.container p { + text-wrap: balance; + text-align: center; + font-size: 1.5rem; +} +.third { + height: 90vh; + display: flex; + background-color: #00b172; + padding: 2vh 2vw; + position: relative; + gap: 15vw; +} +.third .yezzy { + color: #fff; + width: 40vw; + display: flex; + flex-direction: column; + justify-content: flex-start; +} + +.third .yezzy h2 { + font-size: 2rem; + margin: 1vh 2vw 1vw 3vh; +} +.third .yezzy p { + font-size: 1.5rem; + margin: 1vh 2vw 3vh; +} +.spotify-app { + width: 40vw; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.third img { + width: 35vw; + height: auto; + margin: 1vh 2vw 3vh; +} + +.third h3 { + font-size: 2rem; + margin: 1vh 2vw 3vh; +} +#two { + text-align: center; + border: none; + height: 0.5vh; + background-color: #fff; + margin: 0 2vw 1vh; + width: 33vw; +} +.third .logo { + width: 10vw; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +.third p { + font-size: 1.5rem; + margin: 1vh 2vw 3vh; +}