-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
202 lines (201 loc) · 9.69 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
<!DOCTYPE html>
<html lang="it" dir="ltr">
<head>
<link rel="shortcut icon" href="img/favicon.ico">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">
<link rel="stylesheet" href="wurztrap.css">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta charset="utf-8">
<title>Spotify</title>
</head>
<body>
<div class="container">
<!-- Inizio Parte alta -->
<div class="row">
<!-- Inizio nav left -->
<div id="navleft" class="col2 flexrow">
<!-- Parte alta -->
<div class="navup">
<div class="logo t-white">
<i class="fab fa-spotify"></i>
<span>Spotify</span>
</div>
<ul>
<li class="mt20 pud8 howhite"><i class="fas fa-search"></i> <span>Cerca</span></li>
<li class="pud8 howhite"><i class="fas fa-home"></i> <span>Home</span></li>
<li class="pud8 howhite"><i class="fas fa-book-reader"></i> <span>La tua libreria</span></li>
</ul>
<div class="mostplayed">
<h5 class="pud16">ASCOLTATI DI RECENTE</h5>
<ul>
<div class="pud8">
<li class="howhite">Top 50 - Globale</li>
<span>playlist</span>
</div>
<div class="pud8">
<li class="howhite">Top 50 - Italia</li>
<span>playlist</span>
</div>
<div class="pud8">
<li class="howhite">Top Hits Italy</li>
<span>playlist</span>
</div>
</ul>
</div>
</div>
<!-- Parte bassa -->
<div class="navdown pud16">
<i class="far fa-user"></i>
<span>P. Wurzburger</span>
</div>
</div>
<!-- Fine nav left -->
<div class="col10 col-2">
<div class="row">
<div id="contentarea" class="col12">
<nav id="menu" class="pud16">
<ul class="flexrow">
<li class="howhite plr5">in evidenza</li>
<li class="howhite plr5">podcast</li>
<li class="howhite plr5">classifiche</li>
<li class="howhite plr5">generi e mood</li>
<li class="howhite plr5">nuove uscite</li>
<li class="howhite plr5">scopri</li>
</ul>
</nav>
<main class="track t-white">
<!-- Inizio Podcast -->
<h1>Podcast migliori</h1>
<div class="flexrow mt20">
<div class="flexcol2 flextablet flexphone">
<img class="playtrack" src="https://i.scdn.co/image/d3568ed74b142ea33024ba20311212cc3d7f6f9b" alt="">
<span>Marco Montemagno</span>
</div>
<div class="flexcol2 flextablet flexphone">
<img class="playtrack" src="https://i.scdn.co/image/6a1624e21ca7b8c5aa6af827643164164fb1b115" alt="">
<span>La Zanzara</span>
</div>
<div class="flexcol2 flextablet flexphone">
<img class="playtrack" src="https://i.scdn.co/image/90517537229dbd9661696a76471e9895a7f5e508" alt="">
<span>Daily Cogito</span>
</div>
<div class="flexcol2 flextablet flexphone">
<img class="playtrack" src="https://i.scdn.co/image/6bb9362697ce529d2f8251b20001b53fab3de851" alt="">
<span>Zoo 105 - Repliche</span>
</div>
<div class="flexcol2 flextablet flexphone">
<img class="playtrack" src="https://i.scdn.co/image/a3682a96328320628771bfd15024d6738faa2052" alt="">
<span>Parliamo di Cose</span>
</div>
<div class="flexcol2 flextablet flexphone">
<img class="playtrack" src="https://i.scdn.co/image/8caa6927e2f57249295eb6ee89325e0b6799f29b" alt="">
<span>Speak English Now</span>
</div>
<div class="flexcol2 flextablet flexphone">
<img class="playtrack" src="https://i.scdn.co/image/8a29cb96b3cfe1141b814c9c9090f82260f9c198" alt="">
<span>Dario Vignali</span>
</div>
<div class="flexcol2 flextablet flexphone">
<img class="playtrack" src="https://i.scdn.co/image/a11516ff2d4d3593617e73efc998aba971fdbb81" alt="">
<span>Il Mordente</span>
</div>
<div class="flexcol2 flextablet flexphone">
<img class="playtrack" src="https://i.scdn.co/image/c123bf7ae78c6f98c014496c3d5a25bcb3fd59ae" alt="">
<span>Morgana</span>
</div>
<div class="flexcol2 flextablet flexphone">
<img class="playtrack" src="https://i.scdn.co/image/e048b26a93dc026381ab0107e6c01e4e3417b14a" alt="">
<span>Ted Talks</span>
</div>
<div class="flexcol2 flextablet flexphone">
<img class="playtrack" src="https://i.scdn.co/image/c762a5042eb749ecd5ca0111657c9928b9e73db8" alt="">
<span>SeconDario</span>
</div>
<div class="flexcol2 flextablet flexphone">
<img class="playtrack" src="https://i.scdn.co/image/64ae7b2bcf11a9fc15370642951574eec4de4775" alt="">
<span>Radio Fear</span>
</div>
</div>
<!-- Fine Podcast -->
<!-- Inizio Categorie -->
<h1 id="title-cat">Categorie</h1>
<div class="flexrow mt20">
<div class="flexcol2 flextablet flexphone">
<img class="playtrack" src="https://t.scdn.co/images/7262179db37c498480ef06bfacb60310.jpeg" alt="">
<span>Podcast Migliori</span>
</div>
<div class="flexcol2 flextablet flexphone">
<img class="playtrack" src="https://t.scdn.co/images/d951a2d590194722bbfffe2a99ab0e45.jpeg" alt="">
<span>Storia</span>
</div>
<div class="flexcol2 flextablet flexphone">
<img class="playtrack" src="https://t.scdn.co/images/09839c84349e40fe8466c757d461cf27.jpeg" alt="">
<span>Formazione</span>
</div>
<div class="flexcol2 flextablet flexphone">
<img class="playtrack" src="https://t.scdn.co/images/f36e726900fd435b80c4a6d65d9ea6fd.jpeg" alt="">
<span>Musica</span>
</div>
<div class="flexcol2 flextablet flexphone">
<img class="playtrack" src="https://t.scdn.co/images/6c2a1f33b5d445498171e9ef03fe1a48.jpeg" alt="">
<span>Lifestyle e salute</span>
</div>
<div class="flexcol2 flextablet flexphone">
<img class="playtrack" src="https://t.scdn.co/images/eb4aa5a527b740788ef1dad4c63f80c1.jpeg" alt="">
<span>Giochi</span>
</div>
<div class="flexcol2 flextablet flexphone">
<img class="playtrack" src="https://t.scdn.co/images/e0211fd701204470aba503e63b799d48.jpeg" alt="">
<span>Business</span>
</div>
<div class="flexcol2 flextablet flexphone">
<img class="playtrack" src="https://t.scdn.co/images/dd8f81d067624d6ba9ca79e2a74642c6.jpeg" alt="">
<span>Arte e intrattenimento</span>
</div>
<div class="flexcol2 flextablet flexphone">
<img class="playtrack" src="https://t.scdn.co/images/a5c53e7ac70245f683a27a4e13dff90a.jpeg" alt="">
<span>Sport e divertimento</span>
</div>
</div>
<!-- Fine categorie -->
</main>
</div>
</div>
</div>
</div>
<!-- Fine parte alta -->
<!-- Inizio Navbar player fissa -->
<nav id="player" class="flexrow">
<div class="leftside flexcol2 flexrow">
<div class="currentrack"></div>
<div class="titletrack">
<span class="t-white">The Other Side</span><br>
<span class="t-small">Hugh Jackman</span>
</div>
<i class="far fa-heart playtrack howhite"></i>
</div>
<div class="middle flexcol8 flexrow">
<i class="fas fa-random howhite"></i>
<i class="fas fa-step-backward howhite"></i>
<i class="far fa-play-circle howhite"></i>
<i class="fas fa-step-forward howhite"></i>
<i class="fas fa-redo howhite"></i>
<div class="timeline flexrow flexcol12">
<span>0:00</span>
<div class="timelinebar"></div>
<span>3:27</span>
</div>
</div>
<div class="rightside flexcol2 flexrow">
<i class="fas fa-list-ul howhite"></i>
<i class="fas fa-desktop howhite"></i>
<i class="fas fa-volume-up howhite"></i>
<div class="timelineaudio"></div>
</div>
</nav>
<!-- Fine Navabar player fissa -->
</div>
</body>
</html>