From 7f96939465b655934630a112bb52f44102d41c3e Mon Sep 17 00:00:00 2001 From: Richard Nixon Date: Tue, 21 Jan 2025 20:18:20 +0000 Subject: [PATCH] add style and html tags formating --- .vscode/settings.json | 3 ++ index.html | 46 +++++++++++++++++---- styles/style.css | 94 +++++++++++++++++++++++++++++++++++++++---- 3 files changed, 129 insertions(+), 14 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..6f3a2913e --- /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 0697f92fe..9a3a7efec 100644 --- a/index.html +++ b/index.html @@ -5,14 +5,46 @@ 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. +
+
+ +
    +
  • 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?

+
+
+ Music Icon +

Millions of Songs

+

There are millions of songs on Spotify

+
+
+ High-Quality Music Icon +

HD Music

+

Listen to music as if you were listening live

+
+
+ Devices Icon +

Stream Everywhere

+

Stream music on your smartphone, tablet or computer

+
+
+
diff --git a/styles/style.css b/styles/style.css index 55efb32c6..bf6449677 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,8 +1,88 @@ -/* -Colors: +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + background-color: #f5f5f5; + } + + header { + background-image: url(../images/landing.jpg); + background-position: bottom; + background-size: cover; + height: 850px; + color: white; + padding: 20px; + text-align: center; + } + + #spotifylogo { + height: 50px; + } + + .navigation-bar { + background-color: white; + padding: 15px 30px; + display: flex; + justify-content: space-between; + align-items: center; + font-family: "Helvetica", sans-serif; + font-size: 1.5em; + color: lightslategray; + } + + .items-menu { + list-style-type: none; + display: flex; + margin: 0; + padding: 0; + } + + .items-menu li { + margin-right: 20px; + } + + .container { + text-align: center; + background: #fff; + padding: 20px; + margin: 20px auto; + width: 90%; + max-width: 1200px; -Text: 1A1A1A -Green: #00B172 -White: #FFF - -*/ + } + + .container h1 { + font-size: 24px; + margin-bottom: 20px; + text-decoration: underline #0f9d58; + } + + .features { + display: flex; + justify-content: space-around; + gap: 20px; + flex-wrap: wrap; + } + + .feature { + max-width: 200px; + text-align: center; + } + + .feature .icon { + width: 60px; + height: 60px; + margin-bottom: 10px; + } + + .feature h2 { + font-size: 18px; + margin: 10px 0; + color: #0f9d58; + } + + .feature p { + font-size: 14px; + color: #666; + } + \ No newline at end of file