diff --git a/index.html b/index.html index 0697f92fe..2e78c291f 100644 --- a/index.html +++ b/index.html @@ -1,18 +1,90 @@ - - - - - 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?

+ +
+
+ speaker +

Millions of Songs

+

There are millions of songs on Spotify

+
+ +
+ audio waves +

HD Music

+

Listen to music as if you were listening live

+
+ +
+ different devices +

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

+
+
+ +
+ app screen +
+ +
+ +
+
+ diff --git a/styles/reset.css b/styles/reset.css new file mode 100644 index 000000000..864724352 --- /dev/null +++ b/styles/reset.css @@ -0,0 +1,135 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin : 0; + padding : 0; + border : 0; + font-size : 100%; + font : inherit; + vertical-align: baseline; +} + +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} + +body { + line-height: 1; +} + +ol, +ul { + list-style: none; +} + +blockquote, +q { + quotes: none; +} + +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ''; + content: none; +} + +table { + border-collapse: collapse; + border-spacing : 0; +} \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index 55efb32c6..e29df7921 100644 --- a/styles/style.css +++ b/styles/style.css @@ -6,3 +6,196 @@ Green: #00B172 White: #FFF */ + +:root { + --spotify-green: #00B172; + --text-color : #1A1A1A; +} + +body { + font-family: Verdana, Geneva, Tahoma, sans-serif; + color : var(--text-color); + + padding-bottom: 10rem; +} + +h2 { + font-size : 1.2rem; + font-weight: bold; + + text-decoration : underline; + text-underline-offset: .5rem; +} + +/* Navigation */ +nav { + position : fixed; + top : 0; + width : 100%; + display : flex; + justify-content: space-between; + + background-color: white; + z-index : 1000; +} + +img#nav-logo { + width : 10rem; + padding : .5rem; + padding-left: 1rem; +} + +nav ul { + display : flex; + align-items : stretch; + padding-right: 1rem; +} + +nav li { + display : flex; + justify-content: center; + align-items : center; + flex-direction : column; +} + +nav ul li a { + padding : 0 .5rem; + line-height: 3rem; + + text-decoration: none; + color : var(--text-color); +} + +/* Hero */ +section.hero { + margin-top: 3rem; + + background-image : url("/images/landing.jpg"); + background-size : cover; + background-position: center; + width : 100%; + aspect-ratio : 16/9; + + color : white; + display : flex; + flex-direction : column; + justify-content: center; + align-items : center; +} + +section.hero h1 { + font-size: 2.5rem; + padding : 1.5rem 0; +} + +section.hero p { + text-align : center; + line-height: 1rem; + font-size : .75rem; +} + +/* What's on Spotify */ +section.what-is-on-spotify { + padding: 2rem; +} + +section.what-is-on-spotify h2 { + text-align : center; + text-decoration-color: var(--spotify-green); +} + +section.what-is-on-spotify .card-container { + display : grid; + grid-template-columns: repeat(3, 1fr); + gap : 2rem; + + padding: 3rem 0; +} + +section.what-is-on-spotify .card { + display : flex; + flex-direction : column; + justify-content: center; + align-items : center; + gap : 1rem; + + text-align: center; +} + +section.what-is-on-spotify .card img { + width: 6rem; +} + +section.what-is-on-spotify .card h3 { + color : var(--spotify-green); + font-weight: bolder; +} + +section.what-is-on-spotify .card p {} + +/* It's as yeezy as Kanye West */ +.green { + background-color: var(--spotify-green); + margin : 0 2rem; + position : relative; + + display : grid; + grid-template-columns: 5fr 3fr; + gap : 2rem; + + z-index: 110; +} + +section.green-text { + color : white; + z-index: 120; + padding: 3rem; +} + +section.green-text h2 { + margin-bottom: 3rem; +} + +section.green-text section { + margin : 1rem 0; + max-width: 15rem; +} + +section.green-text section h4 { + margin : 1rem 0; + font-weight: bold; +} + +section.green-text section p { + margin : 1rem 0; + font-size: small; +} + +section.green-screen { + padding: 3rem; + z-index: 120; + + display : grid; + justify-content: center; + align-items : center; +} + +section.green-screen img { + width : 100%; + justify-self: center; +} + +.background-logo-wrapper { + position: absolute; + width : 100%; + height : 100%; + + display : grid; + justify-content: center; + align-items : center; +} + +img.background-logo { + width : 5rem; + z-index: 100; +} \ No newline at end of file