diff --git a/index.html b/index.html index 0697f92..7e9f500 100644 --- a/index.html +++ b/index.html @@ -5,14 +5,95 @@ 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?

+
+ +
+
+ +
+
+

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. +

    +
    • +
+
+ +
+ +
+
+
+
diff --git a/styles/style.css b/styles/style.css index 55efb32..b64a511 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,8 +1,202 @@ -/* -Colors: - -Text: 1A1A1A -Green: #00B172 -White: #FFF - -*/ +* { + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: PP Neue Montreal; + scrollbar-width: none; + text-underline-offset: 20px; + } + + a { + all:unset; + } + + #nav-bar { + padding: 1rem 3rem 1rem 3rem; + width: 100vw; + height: max-content; + display: flex; + justify-content: space-between; + background-color: #fff; + } + + .nav-logo img { + height: 72px; + } + + .nav-elements ul { + display: flex; + height: 100%; + list-style-type: none; + justify-content: space-evenly; + align-items: center; + gap: 4rem; + } + + .nav-elements ul li { + font-size: 24px; + } + + a:hover { + cursor: pointer; + color: #00B172; + text-decoration: 3px solid underline black; + transition: ease-in-out; + } + + + + #hero-landing { + position: relative; + display: flex; + width: 100vw; + height: 96vh; + justify-content: center; + align-items: center; + } + + #hero-landing img { + position: absolute; + height: 100%; + width: 100%; + object-fit: cover; + z-index: -1; + } + + #hero-text-container{ + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: absolute; + color: white; + } + + #hero-text-container h1{ + font-size: 7rem; + font-weight: 500; + text-align: center; + padding: 0 3rem; + } + + #hero-text-container p{ + font-size: 2.5rem; + text-align: center; + padding: 2rem 3rem; + } + + + #key-features { + height: auto; + margin: 3rem 3rem 5rem 3rem; + color: black; + } + + #key-features h1 { + text-decoration: underline #00B172; + padding: 1rem 3rem 5rem 3rem; + font-size: 3rem; + font-weight: 500; + text-align: center; + } + + #key-features-content img{ + height: 120px; + object-fit: cover; + } + + #key-features-content ul { + padding: 3rem 3rem; + display:grid; + grid-template-columns: repeat(3, 1fr); + text-align: center; + list-style-type: none; + } + + #key-features-content ul li h5 { + padding: 1rem 1rem 2rem 1rem; + font-size: 2.5rem; + font-weight: 500; + color: #00B172; + } + + #key-features-content ul li p { + padding: 0rem 3rem; + font-size: 2.1rem; + font-weight: 300; + } + + + #third { + height: auto; + margin: 5rem 3rem 5rem 3rem; + justify-content: center; + } + + #third-container { + background-color: #00B172; + position: relative; + width: 100%; + padding: 0 5rem 0 5rem; + } + + #third-container h3 { + text-decoration: underline #FFF; + color: white; + font-size: 3rem; + font-weight: 500; + padding: 5rem 5rem 1rem 5rem; + } + + #third-content-main-container { + display: flex; + padding: 0 5rem 0 5rem; + justify-content: space-between; + } + + #third-left-content { + width: 50%; + } + + #third-left-content ul { + list-style: none; + padding: 5rem 0 0 0; + color: white; + } + + #third-left-content ul li { + text-align: left; + line-height: 40px; + } + + #third-left-content ul li h5 { + font-size: 2.5rem; + font-weight: 500; + padding-bottom: 2rem; + } + + #third-left-content ul li p { + font-size: 1.7rem; + font-weight: 400; + padding: 0 15rem 3rem 0; + } + + + #spotify-white-logo { + position: absolute; + height: auto; + max-height: 150px; + top: 50%; + left: 50%; + translate: -50% -50%; + float: left; + } + + #spotify-app-image { + margin-bottom: 5rem; + width: 100%; + height: auto; + max-height: 700px; + object-fit: contain; + }