Skip to content

Commit caa2a6e

Browse files
solygambassolygambas
committedApr 27, 2021
add music streaming service
1 parent 8d100af commit caa2a6e

File tree

4 files changed

+417
-227
lines changed

4 files changed

+417
-227
lines changed
 

‎92-music streaming app/index.html

Lines changed: 0 additions & 226 deletions
This file was deleted.

‎92-music streaming service/index.html

Lines changed: 232 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,232 @@
1+
<!-- Based on Learn How To Build A Website In 1 Hour! by Kyle Cook - Web Dev Simplified (2019)
2+
see: https://www.youtube.com/watch?v=RZ-Oe4_Ew7g -->
3+
4+
<!DOCTYPE html>
5+
<html lang="en">
6+
<head>
7+
<meta charset="UTF-8" />
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
9+
<link rel="stylesheet" href="style.css" />
10+
<title>Soundwave</title>
11+
</head>
12+
<body>
13+
<div class="container full-height-grow">
14+
<header class="main-header">
15+
<a href="#" class="brand-logo">
16+
<img src="https://i.ibb.co/yRkkT0M/logo.png" />
17+
<h1 class="brand-logo-name">Soundwave</h1>
18+
</a>
19+
<nav class="main-nav">
20+
<ul>
21+
<li><a href="#discover">Discover</a></li>
22+
<li><a href="#join">Join</a></li>
23+
</ul>
24+
</nav>
25+
</header>
26+
<!-- hero -->
27+
<section class="hero-section">
28+
<div class="img-wrapper">
29+
<div class="lady-image"></div>
30+
</div>
31+
<div class="call-to-action">
32+
<h1 class="title">Feel The Music</h1>
33+
<span class="subtitle"
34+
>Stream over 20 thousand songs with one click</span
35+
>
36+
<a href="#join" class="btn">Join Now</a>
37+
</div>
38+
</section>
39+
<div class="hero-circle-1"></div>
40+
<div class="hero-circle-2"></div>
41+
<div class="hero-circle-3"></div>
42+
</div>
43+
<!-- discover -->
44+
<div class="alternate-background">
45+
<div class="container full-height-grow">
46+
<section class="discover-section" id="discover">
47+
<div class="call-to-action">
48+
<h1 class="title">Discover new music</h1>
49+
<div class="icon-section">
50+
<div class="icon">
51+
<svg
52+
width="54"
53+
height="54"
54+
viewBox="0 0 54 54"
55+
fill="none"
56+
xmlns="http://www.w3.org/2000/svg"
57+
>
58+
<path
59+
d="M34.9335 25.6703C32.5665 27.5648 17.0662 39.9758 13.4775 42.8513L7.40922 36.783L24.6622 15.399L34.9335 25.6703ZM46.8787 3.46952C42.255 -1.15423 34.7557 -1.15423 30.132 3.46952C27.0832 6.52052 26.8245 9.86402 26.676 11.0498L39.2985 23.6723C40.3875 23.5508 43.803 23.292 46.8787 20.2163C51.5047 15.5925 51.5047 8.09327 46.8787 3.46952ZM24.7522 43.8345C19.5952 43.8345 17.2395 47.0453 13.9162 49.1333C11.5627 50.6093 9.33522 49.86 8.26422 48.5348C7.87497 48.06 6.76347 46.35 8.65572 44.3903L8.37447 44.109L5.84097 41.6543C2.75397 44.8403 3.30072 48.6473 5.21322 51.0075C7.40697 53.7165 11.8192 55.0845 16.002 52.4588C19.5682 50.22 21.1477 47.7608 24.7522 47.7608C27.0832 47.7608 29.2072 48.8048 32.5935 54L35.8807 51.858C32.7465 47.043 29.6527 43.8345 24.7522 43.8345Z"
60+
fill="#EAEAEA"
61+
/>
62+
</svg>
63+
Charts
64+
</div>
65+
<div class="icon">
66+
<svg
67+
width="57"
68+
height="54"
69+
viewBox="0 0 57 54"
70+
fill="none"
71+
xmlns="http://www.w3.org/2000/svg"
72+
>
73+
<g clip-path="url(#clip0)">
74+
<path
75+
d="M50.8205 23.9805L56 27L28.9955 42.75L2 27L7.17725 23.9805L28.9955 36.711L50.8205 23.9805ZM28.9955 47.9588L7.17725 35.2282L2 38.25L28.9955 54L56 38.25L50.8205 35.2305L28.9955 47.9588ZM56 15.75L28.9955 0L2 15.75L28.9955 31.5L56 15.75Z"
76+
fill="#EAEAEA"
77+
/>
78+
</g>
79+
<defs>
80+
<clipPath id="clip0">
81+
<rect
82+
width="54"
83+
height="54"
84+
fill="white"
85+
transform="translate(2)"
86+
/>
87+
</clipPath>
88+
</defs>
89+
</svg>
90+
Albums
91+
</div>
92+
<div class="icon">
93+
<svg
94+
width="56"
95+
height="54"
96+
viewBox="0 0 56 54"
97+
fill="none"
98+
xmlns="http://www.w3.org/2000/svg"
99+
>
100+
<g clip-path="url(#clip0)">
101+
<g clip-path="url(#clip1)">
102+
<path
103+
d="M28.0072 4.5C40.5922 4.5 50.8309 14.5935 50.8309 27C50.8309 39.4065 40.5922 49.5 28.0072 49.5C15.4222 49.5 5.18346 39.4065 5.18346 27C5.18346 14.5935 15.4222 4.5 28.0072 4.5ZM28.0072 0C12.8819 0 0.618713 12.0893 0.618713 27C0.618713 41.9108 12.8819 54 28.0072 54C43.1325 54 55.3957 41.9108 55.3957 27C55.3957 12.0893 43.1325 0 28.0072 0ZM32.572 27L22.3013 37.125L25.7865 40.5L39.4191 27L25.7865 13.5L22.3013 16.875L32.572 27Z"
104+
fill="#EAEAEA"
105+
/>
106+
</g>
107+
</g>
108+
<defs>
109+
<clipPath id="clip0">
110+
<rect
111+
width="54.777"
112+
height="54"
113+
fill="white"
114+
transform="translate(0.618713)"
115+
/>
116+
</clipPath>
117+
<clipPath id="clip1">
118+
<rect
119+
width="54.777"
120+
height="54"
121+
fill="white"
122+
transform="translate(0.618713)"
123+
/>
124+
</clipPath>
125+
</defs>
126+
</svg>
127+
More
128+
</div>
129+
</div>
130+
By joining you can enjoy the latest albums released.
131+
</div>
132+
<img class="covers-image" src="https://i.ibb.co/Q8248V3/covers.jpg" />
133+
</section>
134+
</div>
135+
</div>
136+
137+
<!-- join -->
138+
<div class="circles">
139+
<div class="container full-height-grow">
140+
<section class="join-section" id="join">
141+
<h1 class="join-text">
142+
Join the
143+
<span class="accent-text">fun.</span>
144+
</h1>
145+
<form class="join-form">
146+
<div class="input-group">
147+
<label>Name</label>
148+
<input type="text" />
149+
</div>
150+
<div class="input-group">
151+
<label>Email</label>
152+
<input type="email" />
153+
</div>
154+
<div class="input-group">
155+
<label>Password</label>
156+
<input type="password" />
157+
</div>
158+
<div class="input-group">
159+
<button type="submit" class="btn">Join Now</button>
160+
</div>
161+
</form>
162+
</section>
163+
</div>
164+
<div class="join-circle-1"></div>
165+
<div class="join-circle-2"></div>
166+
</div>
167+
<!-- footer -->
168+
<footer class="main-footer">
169+
<div class="container">
170+
<nav class="footer-nav">
171+
<ul>
172+
<li><a href="#">About Us</a></li>
173+
<li><a href="#">Contact</a></li>
174+
</ul>
175+
</nav>
176+
<nav class="footer-nav">
177+
<ul>
178+
<li>
179+
<a href="#" class="social-link">
180+
<svg
181+
width="24"
182+
height="24"
183+
viewBox="0 0 24 24"
184+
fill="none"
185+
xmlns="http://www.w3.org/2000/svg"
186+
>
187+
<g clip-path="url(#clip0)">
188+
<path
189+
d="M24 4.55705C23.117 4.94905 22.168 5.21305 21.172 5.33205C22.189 4.72305 22.97 3.75805 23.337 2.60805C22.386 3.17205 21.332 3.58205 20.21 3.80305C19.313 2.84605 18.032 2.24805 16.616 2.24805C13.437 2.24805 11.101 5.21405 11.819 8.29305C7.728 8.08805 4.1 6.12805 1.671 3.14905C0.381 5.36205 1.002 8.25705 3.194 9.72305C2.388 9.69705 1.628 9.47605 0.965 9.10705C0.911 11.388 2.546 13.522 4.914 13.997C4.221 14.185 3.462 14.229 2.69 14.081C3.316 16.037 5.134 17.46 7.29 17.5C5.22 19.123 2.612 19.848 0 19.54C2.179 20.937 4.768 21.752 7.548 21.752C16.69 21.752 21.855 14.031 21.543 7.10605C22.505 6.41105 23.34 5.54405 24 4.55705Z"
190+
fill="white"
191+
/>
192+
</g>
193+
<defs>
194+
<clipPath id="clip0">
195+
<rect width="24" height="24" fill="white" />
196+
</clipPath>
197+
</defs>
198+
</svg>
199+
200+
Twitter
201+
</a>
202+
</li>
203+
<li>
204+
<a href="#" class="social-link">
205+
<svg
206+
width="24"
207+
height="22"
208+
viewBox="0 0 24 22"
209+
fill="none"
210+
xmlns="http://www.w3.org/2000/svg"
211+
>
212+
<g clip-path="url(#clip0)">
213+
<path
214+
d="M22.675 0H1.325C0.593 0 0 0.543583 0 1.21458V20.7863C0 21.4564 0.593 22 1.325 22H12.82V13.4805H9.692V10.1603H12.82V7.71192C12.82 4.87025 14.713 3.32292 17.479 3.32292C18.804 3.32292 19.942 3.41367 20.274 3.454V6.424L18.356 6.42492C16.852 6.42492 16.561 7.08033 16.561 8.041V10.1613H20.148L19.681 13.4814H16.561V22H22.677C23.407 22 24 21.4564 24 20.7854V1.21458C24 0.543583 23.407 0 22.675 0V0Z"
215+
fill="white"
216+
/>
217+
</g>
218+
<defs>
219+
<clipPath id="clip0">
220+
<rect width="24" height="22" fill="white" />
221+
</clipPath>
222+
</defs>
223+
</svg>
224+
Facebook
225+
</a>
226+
</li>
227+
</ul>
228+
</nav>
229+
</div>
230+
</footer>
231+
</body>
232+
</html>

‎92-music streaming app/style.css renamed to ‎92-music streaming service/style.css

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,19 @@ body {
6969
font-weight: bold;
7070
}
7171

72+
@media (max-width: 768px) {
73+
.main-header,
74+
.container {
75+
flex-direction: column;
76+
align-items: center;
77+
justify-content: center;
78+
gap: 1rem;
79+
}
80+
.main-footer {
81+
height: 140px;
82+
}
83+
}
84+
7285
.social-link svg {
7386
width: 1em;
7487
margin-right: 0.25rem;
@@ -203,3 +216,174 @@ body {
203216
background-color: rgb(52, 87, 178, 0.1);
204217
transform: translate(40%, 40%);
205218
}
219+
220+
/* discover */
221+
222+
.alternate-background {
223+
background: #423e52;
224+
background: radial-gradient(#423e52, #2f303a);
225+
}
226+
227+
.discover-section {
228+
display: flex;
229+
align-items: center;
230+
justify-content: space-between;
231+
flex-grow: 1;
232+
}
233+
234+
.discover-section .covers-image {
235+
width: 30vw;
236+
margin-left: 2rem;
237+
height: auto;
238+
max-width: 350px;
239+
}
240+
241+
.icon-section {
242+
display: flex;
243+
}
244+
245+
.icon {
246+
display: flex;
247+
flex-direction: column;
248+
justify-content: space-between;
249+
align-items: center;
250+
margin: 0.5rem 0.5rem 2rem;
251+
padding: 0.75rem;
252+
width: 100px;
253+
height: 100px;
254+
background-color: #202027;
255+
}
256+
257+
.icon img {
258+
width: 40px;
259+
}
260+
261+
@media (max-width: 800px) {
262+
.discover-section {
263+
flex-direction: column;
264+
justify-content: center;
265+
}
266+
267+
.discover-section .covers-image {
268+
margin: 2rem 0 0;
269+
height: 30vh;
270+
width: auto;
271+
}
272+
273+
.icon-section {
274+
justify-content: center;
275+
}
276+
}
277+
278+
/* join */
279+
280+
.join-section {
281+
display: flex;
282+
justify-content: space-between;
283+
align-items: center;
284+
flex-grow: 1;
285+
}
286+
287+
.join-text {
288+
font-size: 3.5em;
289+
font-weight: bold;
290+
margin: 0;
291+
}
292+
293+
.accent-text {
294+
color: #bc3a80;
295+
}
296+
297+
.join-form {
298+
background-color: #202027;
299+
width: 50vw;
300+
max-width: 50%;
301+
padding: 2rem 4rem;
302+
border-radius: 20px;
303+
}
304+
305+
.input-group {
306+
margin-bottom: 2rem;
307+
display: flex;
308+
flex-direction: column;
309+
}
310+
311+
.input-group:last-child {
312+
margin-bottom: 0;
313+
}
314+
315+
.input-group label {
316+
font-weight: bold;
317+
margin-bottom: 0.5rem;
318+
}
319+
320+
.input-group input {
321+
outline: none;
322+
background: none;
323+
border: 1px solid #2e3852;
324+
font-size: 1em;
325+
padding: 0.5em;
326+
color: inherit;
327+
border-radius: 5px;
328+
}
329+
330+
.input-group input:focus {
331+
border-color: #596da0;
332+
}
333+
334+
@media (max-width: 900px) {
335+
.join-section {
336+
flex-direction: column;
337+
justify-content: center;
338+
}
339+
340+
.join-form {
341+
width: 80vw;
342+
max-width: inherit;
343+
margin: 2rem 0;
344+
}
345+
}
346+
347+
.circles {
348+
position: relative;
349+
}
350+
351+
.join-circle-1 {
352+
position: absolute;
353+
overflow: hidden;
354+
width: 35vw;
355+
height: 35vw;
356+
bottom: 0;
357+
left: 0;
358+
z-index: -1;
359+
}
360+
361+
.join-circle-1::before {
362+
content: "";
363+
transform: translateX(-20%);
364+
position: absolute;
365+
height: 100%;
366+
width: 100%;
367+
border-radius: 50%;
368+
background-color: rgb(188, 58, 128, 0.1);
369+
}
370+
371+
.join-circle-2 {
372+
position: absolute;
373+
overflow: hidden;
374+
width: 30vw;
375+
height: 30vw;
376+
top: 0;
377+
left: 20vw;
378+
z-index: -1;
379+
}
380+
381+
.join-circle-2::before {
382+
content: "";
383+
transform: translateY(-30%);
384+
position: absolute;
385+
height: 100%;
386+
width: 100%;
387+
border-radius: 50%;
388+
background-color: rgb(52, 87, 178, 0.1);
389+
}

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@
9797
| 89 | [One Color UI](https://github.com/solygambas/html-css-fifty-projects/tree/master/89-one%20color%20UI) | [Live Demo](https://codepen.io/solygambas/full/NWdpPqx) |
9898
| 90 | [Tooltip](https://github.com/solygambas/html-css-fifty-projects/tree/master/90-tooltip) | [Live Demo](https://codepen.io/solygambas/full/YzNgzMb) |
9999
| 91 | [Chat Interface](https://github.com/solygambas/html-css-fifty-projects/tree/master/91-chat%20interface) | [Live Demo](https://codepen.io/solygambas/full/MWJxaOJ) |
100-
| 92 | [Music Streaming App](https://github.com/solygambas/html-css-fifty-projects/tree/master/92-music%20streaming%20app) | [Live Demo](https://codepen.io/solygambas/full/MWJxaOJ) |
100+
| 92 | [Music Streaming Service](https://github.com/solygambas/html-css-fifty-projects/tree/master/92-music%20streaming%20service) | [Live Demo](https://codepen.io/solygambas/full/qBRvLmg) |
101101

102102
This repository is mostly based on 2 courses by Brad Traversy (2020):
103103

0 commit comments

Comments
 (0)
Please sign in to comment.