From 7f90078bca66c0f9b28bef62200073e5815d14a8 Mon Sep 17 00:00:00 2001 From: "github-classroom[bot]" <66690702+github-classroom[bot]@users.noreply.github.com> Date: Mon, 24 Jan 2022 18:38:44 +0000 Subject: [PATCH 1/3] Setting up GitHub Classroom Feedback From 8042deab103cdfb1becb5037b2543c66336e516b Mon Sep 17 00:00:00 2001 From: AnaHerr Date: Wed, 2 Feb 2022 17:45:56 +0100 Subject: [PATCH 2/3] commit Spoti --- .vscode/settings.json | 3 + index.html | 123 ++++++++++++- styles/style.css | 396 +++++++++++++++++++++++++++++++++++++++++- 3 files changed, 511 insertions(+), 11 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /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 0697f92..81cf1e8 100644 --- a/index.html +++ b/index.html @@ -4,15 +4,120 @@ - Spotify Clone - + + Spotify - 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. +
+
+
+ +
+ + +
+
+ +
+ landing picture +
+ 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 icon +

HD Music

+

+ Listen to music as if you
+ were listening live +

+
+ +
+ devices icon +

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 icon white +
+ +
+ spotify app +
+
+
- + \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index 55efb32..d8df98f 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,8 +1,400 @@ /* Colors: - Text: 1A1A1A Green: #00B172 White: #FFF - */ + +@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&display=swap'); + +body { + font-family: 'Roboto', sans-serif; + padding: 0; + margin: 0; + color: #1a1a1a; +} + +/* Header */ +header > div { + position: fixed; + z-index: 9999; + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + background-color: white; + box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.1); +} + +nav { + width: 400px; +} + +nav label, +#hamburger { + display: none; +} + +nav ul { + list-style: none; + display: flex; + justify-content: space-around; + align-items: center; +} + +nav a { + text-decoration: none; + color: black; +} + +.spotify-logo { + width: 160px; + padding: 20px; +} + +.img-container { + position: relative; + text-align: center; + color: white; +} + +#img-back { + object-fit: cover; + width: 100%; + height: 650px; + padding-top: 5vh; +} + +.centered-text { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 90%; +} + +.centered-title { + text-align: center; + font-size: 5.5em; + font-weight: 700; + opacity: 0; + animation: fadein 2s forwards; + animation-delay: 1s; +} + +.centered-subtitle { + text-align: center; + font-size: 2em; + font-weight: 400; + opacity: 0; + animation: fadein 2s forwards; + animation-delay: 2s; +} + +/* Section 1*/ +#advantages { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + align-content: center; + height: auto; + text-align: center; +} + +#advantages h1 { + padding: 5px; + width: 26%; + margin-bottom: 5rem; + letter-spacing: 2px; + font-weight: bolder; + font-size: 2.3em; + text-align: center; +} + +#advantages h1 > span { + border-bottom: 4px solid #00b172; +} + +#advantages h2 { + color: #00b172; +} + +#advantages p { + font-weight: 100; + font-size: 1.5em; + text-align: center; +} + +#advantages img { + width: 120px; + margin-bottom: 1rem; +} + +#advantages .external-div { + display: flex; + flex-direction: row; + justify-content: space-evenly; + flex-wrap: nowrap; + align-items: baseline; + width: 90%; +} + +#advantages .internal-div { + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: center; + align-items: center; + align-content: center; + width: 30%; +} + +/* Section 2*/ +#green-section { + background-color: #00b172; + display: flex; + position: relative; + justify-content: center; + align-items: center; + align-content: center; + color: white; + margin: 3%; + padding: 3%; + height: auto; + text-align: center; +} + +#green-section h1 { + width: 90%; + font-weight: bolder; + font-size: 2em; + text-align: left; +} + +#green-section h1 > span { + border-bottom: 4px solid white; +} + +#green-section h2 { + font-weight: bolder; +} + +#green-section p { + font-weight: 100; + font-size: 1.5em; + text-align: left; +} + +#green-section .app-img { + width: 55%; +} + +#green-section .white-spotify { + width: 9vw; +} + +#green-section .external-div { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-around; + align-items: center; + align-content: center; + width: 100%; +} + +#green-section .internal-div { + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: center; + align-items: flex-start; + align-content: center; + width: 45%; +} + +#green-section .internal-div2 { + width: 10%; +} + +#green-section .internal-div3 { + width: 45%; +} + +#green-section .centered-logo { + display: flex; + flex-wrap: wrap; + height: 50px; + width: 50px; +} + +@keyframes fadein { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +/* ****************************************** */ +/* ****************************************** */ +/* ************ Media Queries *************** */ +/* ********** for responsiveness ************ */ +/* ****************************************** */ +/* ****************************************** */ + +@media (max-width: 1024px) { + /* Section 2*/ + + #green-section .app-img { + width: 80%; + } +} + +@media (max-width: 750px) { + header > div { + flex-flow: column wrap; + } + + nav { + width: 100%; + padding: 0; + margin: 0; + } + + nav ul { + padding: 0; + } + + nav a { + color: #1a1a1a; + font-weight: 500; + cursor: pointer; + } + + /* Show Hamburger */ + nav label { + display: inline-block; + color: rgb(25, 25, 25); + font-style: normal; + font-size: 2em; + padding: 10px; + position: absolute; + top: 15px; + right: 20px; + } + + /* Break down menu items into vertical */ + + nav ul li { + font-size: 2em; + text-align: center; + border-top: 1px solid rgba(0, 0, 0, 0.1); + display: block; + } + + /* Toggle show/hide menu on checkbox click */ + #page-nav ul { + display: none; + } + + #page-nav input[type='checkbox']:checked ~ ul { + animation: fadein 1s forwards; + display: block; + } + + /* Section 1*/ + + #advantages .external-div { + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + } + + #advantages .internal-div { + width: 90%; + } + + #advantages h1 { + width: 90%; + font-size: 5em; + } + + #advantages h2 { + color: #00b172; + font-size: 3em; + } + + #advantages p { + font-size: 2.5em; + } + + /* Section 2*/ + + #green-section { + padding: 5%; + height: auto; + } + + #green-section .external-div { + flex-direction: column; + } + + #green-section .internal-div { + align-items: center; + width: 100%; + } + + #green-section .internal-div2 { + margin-top: 6vh; + height: 35vh; + display: flex; + justify-content: center; + align-items: center; + align-content: center; + } + + #green-section .internal-div3 { + margin-top: 6vh; + display: flex; + justify-content: center; + align-items: center; + align-content: center; + } + + #green-section h1 { + font-size: 4em; + text-align: center; + } + + #green-section h2 { + font-size: 3em; + } + + #green-section p { + font-size: 2em; + text-align: center; + } + + #green-section .white-spotify { + width: 45vw; + } + + #green-section .app-img { + width: 65vw; + } +} + +@media (max-width: 570px) { + .centered-title { + font-size: 3.5em; + } + + .centered-subtitle { + font-size: 2em; + } +} From 698d50c134ee8440bd2857088aa8f89de8357205 Mon Sep 17 00:00:00 2001 From: AnaHerr Date: Mon, 14 Mar 2022 15:54:33 +0100 Subject: [PATCH 3/3] lab done