Hugging Face's logo

Spaces:
motoguru
/
patrascano-com
Running

App Files Community
motoguru commited on
Commit
1f37140
·
verified ·
1 Parent(s): ed1bddd

- Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +445 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Patrascano Com
3
- emoji: 💻
4
- colorFrom: green
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: patrascano-com
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,445 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>PATRASCANO | Making Music</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .album-card {
11
+ transition: all 0.3s ease;
12
+ }
13
+ .album-card:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
16
+ }
17
+ .music-player {
18
+ background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
19
+ }
20
+ .hero-section {
21
+ background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://www.patrascano.com/wp-content/uploads/2019/11/header-_web-x-1920-v2.jpg');
22
+ background-size: cover;
23
+ background-position: center;
24
+ }
25
+ .quote-text {
26
+ position: relative;
27
+ }
28
+ .quote-text::before, .quote-text::after {
29
+ content: '"';
30
+ font-size: 2rem;
31
+ color: #94a3b8;
32
+ position: absolute;
33
+ }
34
+ .quote-text::before {
35
+ top: -15px;
36
+ left: -25px;
37
+ }
38
+ .quote-text::after {
39
+ bottom: -30px;
40
+ right: -25px;
41
+ }
42
+ </style>
43
+ </head>
44
+ <body class="bg-slate-900 text-slate-100 font-sans">
45
+ <!-- Navigation -->
46
+ <nav class="bg-slate-800/90 backdrop-blur-md sticky top-0 z-50 shadow-lg">
47
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
48
+ <div class="flex items-center space-x-2">
49
+ <img src="https://www.patrascano.com/wp-content/uploads/2019/11/logo3.png" alt="PATRASCANO Logo" class="h-10">
50
+ <span class="text-xl font-bold bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text text-transparent">PATRASCANO</span>
51
+ </div>
52
+ <div class="hidden md:flex space-x-6">
53
+ <a href="#albums" class="hover:text-pink-400 transition">Albums</a>
54
+ <a href="#singles" class="hover:text-pink-400 transition">Singles</a>
55
+ <a href="#about" class="hover:text-pink-400 transition">About</a>
56
+ <a href="#contact" class="hover:text-pink-400 transition">Contact</a>
57
+ </div>
58
+ <button class="md:hidden text-2xl">
59
+ <i class="fas fa-bars"></i>
60
+ </button>
61
+ </div>
62
+ </nav>
63
+
64
+ <!-- Hero Section -->
65
+ <section class="hero-section min-h-screen flex items-center justify-center text-center px-4">
66
+ <div class="max-w-4xl mx-auto">
67
+ <h1 class="text-4xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text text-transparent">MAKING MUSIC</h1>
68
+ <div class="quote-text relative text-xl md:text-2xl italic mb-10 px-10">
69
+ You can be like the clouds<br>
70
+ The light over seas<br>
71
+ A candle in the darkest times<br>
72
+ You can be the life<br>
73
+ You can make the things alright<br>
74
+ The Queen of all everything…
75
+ </div>
76
+ <div class="flex flex-wrap justify-center gap-4">
77
+ <a href="https://open.spotify.com/artist/5qnQqLkQqqk4F8vZZDbOox?si=HntC5YLVQZWHwhlR41t3KA" class="bg-slate-800/70 hover:bg-slate-700/90 px-6 py-3 rounded-full flex items-center space-x-2 transition">
78
+ <img src="https://www.patrascano.com/wp-content/uploads/2019/11/spotify-1.png" alt="Spotify" class="h-6">
79
+ <span>Spotify</span>
80
+ </a>
81
+ <a href="https://www.youtube.com/channel/UC4kno_057HR8D5TBJCCDeow" class="bg-slate-800/70 hover:bg-slate-700/90 px-6 py-3 rounded-full flex items-center space-x-2 transition">
82
+ <img src="https://www.patrascano.com/wp-content/uploads/2019/11/Youtube.png" alt="YouTube" class="h-6">
83
+ <span>YouTube</span>
84
+ </a>
85
+ <a href="https://patrascano.bandcamp.com/" class="bg-slate-800/70 hover:bg-slate-700/90 px-6 py-3 rounded-full flex items-center space-x-2 transition">
86
+ <img src="https://www.patrascano.com/wp-content/uploads/2019/11/bandcamp-1.png" alt="Bandcamp" class="h-6">
87
+ <span>Bandcamp</span>
88
+ </a>
89
+ <a href="https://itunes.apple.com/us/artist/patrascano/301522630#see-all/top-songs" class="bg-slate-800/70 hover:bg-slate-700/90 px-6 py-3 rounded-full flex items-center space-x-2 transition">
90
+ <img src="https://www.patrascano.com/wp-content/uploads/2019/11/applemusic.png" alt="Apple Music" class="h-6">
91
+ <span>Apple Music</span>
92
+ </a>
93
+ <a href="https://www.deezer.com/en/artist/1530770" class="bg-slate-800/70 hover:bg-slate-700/90 px-6 py-3 rounded-full flex items-center space-x-2 transition">
94
+ <img src="https://www.patrascano.com/wp-content/uploads/2019/11/deezere.png" alt="Deezer" class="h-6">
95
+ <span>Deezer</span>
96
+ </a>
97
+ </div>
98
+ </div>
99
+ </section>
100
+
101
+ <!-- Featured Album -->
102
+ <section class="py-16 px-4">
103
+ <div class="container mx-auto max-w-6xl">
104
+ <h2 class="text-3xl font-bold mb-10 text-center">FEATURED RELEASE</h2>
105
+ <div class="flex flex-col md:flex-row items-center gap-8">
106
+ <div class="md:w-1/2">
107
+ <a href="https://onerpm.link/130906303689">
108
+ <img src="https://www.patrascano.com/wp-content/uploads/2023/09/Electric_Mother_FINAL_01_SQUAREx1000px-Custom.jpg"
109
+ alt="Electric Mother"
110
+ class="w-full rounded-lg shadow-xl album-card">
111
+ </a>
112
+ </div>
113
+ <div class="md:w-1/2">
114
+ <h3 class="text-2xl font-bold mb-4">Electric Mother</h3>
115
+ <p class="text-slate-300 mb-6">Latest single release available on all platforms</p>
116
+ <div class="music-player p-6 rounded-lg mb-6">
117
+ <div class="flex justify-between items-center mb-4">
118
+ <div>
119
+ <h4 class="font-medium">Electric Mother</h4>
120
+ <p class="text-sm text-slate-300">PATRASCANO</p>
121
+ </div>
122
+ <div class="text-slate-300">3:45</div>
123
+ </div>
124
+ <div class="w-full bg-slate-700 rounded-full h-2 mb-2">
125
+ <div class="bg-pink-500 h-2 rounded-full" style="width: 45%"></div>
126
+ </div>
127
+ <div class="flex justify-between text-sm text-slate-400 mb-6">
128
+ <span>1:23</span>
129
+ <span>3:45</span>
130
+ </div>
131
+ <div class="flex justify-center space-x-8">
132
+ <button class="text-2xl text-slate-300 hover:text-white"><i class="fas fa-backward"></i></button>
133
+ <button class="text-4xl text-pink-500 hover:text-pink-400"><i class="fas fa-play"></i></button>
134
+ <button class="text-2xl text-slate-300 hover:text-white"><i class="fas fa-forward"></i></button>
135
+ </div>
136
+ </div>
137
+ <div class="flex flex-wrap gap-3">
138
+ <a href="https://onerpm.link/130906303689" class="bg-pink-600 hover:bg-pink-700 text-white px-6 py-2 rounded-full transition">Listen Now</a>
139
+ <a href="#" class="border border-slate-600 hover:border-pink-500 text-slate-300 hover:text-pink-400 px-6 py-2 rounded-full transition">Add to Playlist</a>
140
+ </div>
141
+ </div>
142
+ </div>
143
+ </div>
144
+ </section>
145
+
146
+ <!-- Albums Section -->
147
+ <section id="albums" class="py-16 px-4 bg-slate-800/30">
148
+ <div class="container mx-auto max-w-6xl">
149
+ <h2 class="text-3xl font-bold mb-10 text-center">ALBUMS</h2>
150
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
151
+ <!-- Album 1 -->
152
+ <div class="album-card bg-slate-800 rounded-lg overflow-hidden shadow-lg">
153
+ <a href="https://patrascano.bandcamp.com/album/album-electric-dreams">
154
+ <img src="https://www.patrascano.com/wp-content/uploads/2019/11/Patrascano-SYNTHPOP-ALBUM-COVER-01-x-1000.jpg"
155
+ alt="Electric Dreams"
156
+ class="w-full h-64 object-cover">
157
+ </a>
158
+ <div class="p-6">
159
+ <h3 class="text-xl font-bold mb-2">ELECTRIC DREAMS</h3>
160
+ <p class="text-slate-300 text-sm mb-3">released: 2019</p>
161
+ <div class="flex flex-wrap gap-2">
162
+ <span class="bg-slate-700 text-xs px-2 py-1 rounded">synthpop</span>
163
+ <span class="bg-slate-700 text-xs px-2 py-1 rounded">pop-rock</span>
164
+ <span class="bg-slate-700 text-xs px-2 py-1 rounded">synthwave</span>
165
+ <span class="bg-slate-700 text-xs px-2 py-1 rounded">futurepop</span>
166
+ </div>
167
+ </div>
168
+ </div>
169
+
170
+ <!-- Album 2 -->
171
+ <div class="album-card bg-slate-800 rounded-lg overflow-hidden shadow-lg">
172
+ <a href="https://patrascano.bandcamp.com/album/album-music-for-movies">
173
+ <img src="https://www.patrascano.com/wp-content/uploads/2019/11/MFM-Cover-2018-x-1000.jpg"
174
+ alt="Music for Movies"
175
+ class="w-full h-64 object-cover">
176
+ </a>
177
+ <div class="p-6">
178
+ <h3 class="text-xl font-bold mb-2">Music for Movies</h3>
179
+ <p class="text-slate-300 text-sm mb-3">released: 2018</p>
180
+ <div class="flex flex-wrap gap-2">
181
+ <span class="bg-slate-700 text-xs px-2 py-1 rounded">new age</span>
182
+ <span class="bg-slate-700 text-xs px-2 py-1 rounded">guitar instrumental</span>
183
+ <span class="bg-slate-700 text-xs px-2 py-1 rounded">world</span>
184
+ <span class="bg-slate-700 text-xs px-2 py-1 rounded">chill out</span>
185
+ <span class="bg-slate-700 text-xs px-2 py-1 rounded">lounge</span>
186
+ </div>
187
+ </div>
188
+ </div>
189
+
190
+ <!-- Album 3 -->
191
+ <div class="album-card bg-slate-800 rounded-lg overflow-hidden shadow-lg">
192
+ <a href="https://patrascano.bandcamp.com/album/album-music-for-the-sun-worshiper">
193
+ <img src="https://www.patrascano.com/wp-content/uploads/2019/11/Music-for-the-sun-worshiper-Front-CMKY-_resizex1000.jpg"
194
+ alt="Music for the Sun Worshiper"
195
+ class="w-full h-64 object-cover">
196
+ </a>
197
+ <div class="p-6">
198
+ <h3 class="text-xl font-bold mb-2">Music for the Sun Worshiper</h3>
199
+ <p class="text-slate-300 text-sm mb-3">released: 2014</p>
200
+ <div class="flex flex-wrap gap-2">
201
+ <span class="bg-slate-700 text-xs px-2 py-1 rounded">new age</span>
202
+ <span class="bg-slate-700 text-xs px-2 py-1 rounded">guitar instrumental</span>
203
+ <span class="bg-slate-700 text-xs px-2 py-1 rounded">world</span>
204
+ <span class="bg-slate-700 text-xs px-2 py-1 rounded">chill out</span>
205
+ <span class="bg-slate-700 text-xs px-2 py-1 rounded">lounge</span>
206
+ </div>
207
+ </div>
208
+ </div>
209
+
210
+ <!-- Album 4 -->
211
+ <div class="album-card bg-slate-800 rounded-lg overflow-hidden shadow-lg">
212
+ <a href="https://patrascano.bandcamp.com/album/album-chillout-and-ambient-soundscapes-vol-1">
213
+ <img src="https://www.patrascano.com/wp-content/uploads/2019/11/Chill-Ambient-Sc-COVER.jpg"
214
+ alt="Chillout and Ambient Soundscapes"
215
+ class="w-full h-64 object-cover">
216
+ </a>
217
+ <div class="p-6">
218
+ <h3 class="text-xl font-bold mb-2">Chillout and Ambient Soundscapes</h3>
219
+ <p class="text-slate-300 text-sm mb-3 italic">selection of songs from various albums</p>
220
+ <p class="text-slate-300 text-sm mb-3">released: 2014</p>
221
+ <div class="flex flex-wrap gap-2">
222
+ <span class="bg-slate-700 text-xs px-2 py-1 rounded">new age</span>
223
+ <span class="bg-slate-700 text-xs px-2 py-1 rounded">guitar instrumental</span>
224
+ <span class="bg-slate-700 text-xs px-2 py-1 rounded">world</span>
225
+ <span class="bg-slate-700 text-xs px-2 py-1 rounded">chill out</span>
226
+ <span class="bg-slate-700 text-xs px-2 py-1 rounded">lounge</span>
227
+ <span class="bg-slate-700 text-xs px-2 py-1 rounded">ambiental</span>
228
+ </div>
229
+ </div>
230
+ </div>
231
+
232
+ <!-- Album 5 -->
233
+ <div class="album-card bg-slate-800 rounded-lg overflow-hidden shadow-lg">
234
+ <a href="https://open.spotify.com/album/6AnX17C5x5w9i8CtvlU3mT?si=YY2HGqGsSYmsu7kRqRzV1w">
235
+ <img src="https://www.patrascano.com/wp-content/uploads/2019/11/safe.jpg"
236
+ alt="Safe : The Album"
237
+ class="w-full h-64 object-cover">
238
+ </a>
239
+ <div class="p-6">
240
+ <h3 class="text-xl font-bold mb-2">Safe : The Album</h3>
241
+ <p class="text-slate-300 text-sm mb-3 italic">selection of songs from various albums</p>
242
+ <p class="text-slate-300 text-sm mb-3">released: 2012</p>
243
+ <div class="flex flex-wrap gap-2">
244
+ <span class="bg-slate-700 text-xs px-2 py-1 rounded">new age</span>
245
+ <span class="bg-slate-700 text-xs px-2 py-1 rounded">guitar instrumental</span>
246
+ <span class="bg-slate-700 text-xs px-2 py-1 rounded">world</span>
247
+ <span class="bg-slate-700 text-xs px-2 py-1 rounded">chill out</span>
248
+ <span class="bg-slate-700 text-xs px-2 py-1 rounded">lounge</span>
249
+ <span class="bg-slate-700 text-xs px-2 py-1 rounded">ambiental</span>
250
+ <span class="bg-slate-700 text-xs px-2 py-1 rounded">synthpop</span>
251
+ <span class="bg-slate-700 text-xs px-2 py-1 rounded">Futurepop</span>
252
+ </div>
253
+ </div>
254
+ </div>
255
+
256
+ <!-- Album 6 -->
257
+ <div class="album-card bg-slate-800 rounded-lg overflow-hidden shadow-lg">
258
+ <a href="https://patrascano.bandcamp.com/album/album-divine-amusement">
259
+ <img src="https://www.patrascano.com/wp-content/uploads/2019/11/Divine-Amusement-Cover-Extended.jpg"
260
+ alt="Divine Amusement"
261
+ class="w-full h-64 object-cover">
262
+ </a>
263
+ <div class="p-6">
264
+ <h3 class="text-xl font-bold mb-2">Divine Amusement</h3>
265
+ <p class="text-slate-300 text-sm mb-3">released: 2005</p>
266
+ <div class="flex flex-wrap gap-2">
267
+ <span class="bg-slate-700 text-xs px-2 py-1 rounded">new age</span>
268
+ <span class="bg-slate-700 text-xs px-2 py-1 rounded">guitar instrumental</span>
269
+ <span class="bg-slate-700 text-xs px-2 py-1 rounded">world</span>
270
+ <span class="bg-slate-700 text-xs px-2 py-1 rounded">chill out</span>
271
+ <span class="bg-slate-700 text-xs px-2 py-1 rounded">lounge</span>
272
+ <span class="bg-slate-700 text-xs px-2 py-1 rounded">futurepop</span>
273
+ </div>
274
+ </div>
275
+ </div>
276
+ </div>
277
+ </div>
278
+ </section>
279
+
280
+ <!-- Singles Section -->
281
+ <section id="singles" class="py-16 px-4">
282
+ <div class="container mx-auto max-w-6xl">
283
+ <h2 class="text-3xl font-bold mb-10 text-center">SINGLES</h2>
284
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6">
285
+ <!-- Single 1 -->
286
+ <a href="https://www.patrascano.com/chain-beyond-reality/" class="album-card">
287
+ <img src="https://www.patrascano.com/wp-content/uploads/2019/11/COVER-Chain-Beyond-x1000_resize_resize.jpg"
288
+ alt="Chain Beyond Reality"
289
+ class="w-full rounded-lg shadow-md hover:shadow-xl transition">
290
+ </a>
291
+
292
+ <!-- Single 2 -->
293
+ <a href="https://patrascano.bandcamp.com/track/visions-of-you" class="album-card">
294
+ <img src="https://www.patrascano.com/wp-content/uploads/2019/11/COVER-Visions-of-You-x3-1500.jpg"
295
+ alt="Visions of You"
296
+ class="w-full rounded-lg shadow-md hover:shadow-xl transition">
297
+ </a>
298
+
299
+ <!-- Single 3 -->
300
+ <a href="https://patrascano.bandcamp.com/album/galactic-radio" class="album-card">
301
+ <img src="https://www.patrascano.com/wp-content/uploads/2019/11/Galactic-Radio-4-x1500.jpg"
302
+ alt="Galactic Radio"
303
+ class="w-full rounded-lg shadow-md hover:shadow-xl transition">
304
+ </a>
305
+
306
+ <!-- Single 4 -->
307
+ <a href="https://patrascano.bandcamp.com/track/when-the-days-are-over" class="album-card">
308
+ <img src="https://www.patrascano.com/wp-content/uploads/2019/11/COVER-When-the-days-are-over-x-1500.jpg"
309
+ alt="When the Days Are Over"
310
+ class="w-full rounded-lg shadow-md hover:shadow-xl transition">
311
+ </a>
312
+
313
+ <!-- Single 5 -->
314
+ <a href="https://patrascano.bandcamp.com/track/the-day-the-monkeys-went-too-far" class="album-card">
315
+ <img src="https://www.patrascano.com/wp-content/uploads/2019/11/The-Day-the-Monkeys-x-1500.jpg"
316
+ alt="The Day the Monkeys Went Too Far"
317
+ class="w-full rounded-lg shadow-md hover:shadow-xl transition">
318
+ </a>
319
+
320
+ <!-- Single 6 -->
321
+ <a href="https://patrascano.bandcamp.com/album/dreamer-on-the-run-for-adaggio" class="album-card">
322
+ <img src="https://www.patrascano.com/wp-content/uploads/2019/11/COVER-Dreamer-x1000.jpg"
323
+ alt="Dreamer on the Run"
324
+ class="w-full rounded-lg shadow-md hover:shadow-xl transition">
325
+ </a>
326
+
327
+ <!-- Single 7 -->
328
+ <a href="https://patrascano.bandcamp.com/album/devils-paradise" class="album-card">
329
+ <img src="https://www.patrascano.com/wp-content/uploads/2019/11/DevilsparadiseCOVER-v2-x1000.jpg"
330
+ alt="Devil's Paradise"
331
+ class="w-full rounded-lg shadow-md hover:shadow-xl transition">
332
+ </a>
333
+
334
+ <!-- Single 8 -->
335
+ <a href="https://patrascano.bandcamp.com/album/blackwater" class="album-card">
336
+ <img src="https://www.patrascano.com/wp-content/uploads/2019/11/Blackwater-x1000.jpg"
337
+ alt="Blackwater"
338
+ class="w-full rounded-lg shadow-md hover:shadow-xl transition">
339
+ </a>
340
+
341
+ <!-- Single 9 -->
342
+ <a href="https://patrascano.bandcamp.com/album/electric-avenue" class="album-card">
343
+ <img src="https://www.patrascano.com/wp-content/uploads/2019/11/Electric-Avenue-COVER-SQUARE-x-1000.jpg"
344
+ alt="Electric Avenue"
345
+ class="w-full rounded-lg shadow-md hover:shadow-xl transition">
346
+ </a>
347
+
348
+ <!-- Single 10 -->
349
+ <a href="https://patrascano.bandcamp.com/track/the-last-days-of-sorrow" class="album-card">
350
+ <img src="https://www.patrascano.com/wp-content/uploads/2019/11/TheLastDaysofSorrow-1-1000-x-1000.jpg"
351
+ alt="The Last Days of Sorrow"
352
+ class="w-full rounded-lg shadow-md hover:shadow-xl transition">
353
+ </a>
354
+ </div>
355
+
356
+ <div class="text-center mt-10">
357
+ <button class="border border-slate-600 hover:border-pink-500 text-slate-300 hover:text-pink-400 px-6 py-3 rounded-full transition">
358
+ View More Singles
359
+ </button>
360
+ </div>
361
+ </div>
362
+ </section>
363
+
364
+ <!-- Footer -->
365
+ <footer class="bg-slate-800 py-12 px-4">
366
+ <div class="container mx-auto max-w-6xl">
367
+ <div class="flex flex-col md:flex-row justify-between items-center">
368
+ <div class="mb-6 md:mb-0">
369
+ <div class="flex items-center space-x-2">
370
+ <img src="https://www.patrascano.com/wp-content/uploads/2019/11/logo3.png" alt="PATRASCANO Logo" class="h-10">
371
+ <span class="text-xl font-bold bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text text-transparent">PATRASCANO</span>
372
+ </div>
373
+ <p class="text-slate-400 mt-2">Making Music Since 2003</p>
374
+ </div>
375
+
376
+ <div class="flex space-x-6 mb-6 md:mb-0">
377
+ <a href="https://open.spotify.com/artist/5qnQqLkQqqk4F8vZZDbOox?si=HntC5YLVQZWHwhlR41t3KA" class="text-slate-400 hover:text-pink-400 text-2xl">
378
+ <i class="fab fa-spotify"></i>
379
+ </a>
380
+ <a href="https://www.youtube.com/channel/UC4kno_057HR8D5TBJCCDeow" class="text-slate-400 hover:text-pink-400 text-2xl">
381
+ <i class="fab fa-youtube"></i>
382
+ </a>
383
+ <a href="https://patrascano.bandcamp.com/" class="text-slate-400 hover:text-pink-400 text-2xl">
384
+ <i class="fab fa-bandcamp"></i>
385
+ </a>
386
+ <a href="https://itunes.apple.com/us/artist/patrascano/301522630#see-all/top-songs" class="text-slate-400 hover:text-pink-400 text-2xl">
387
+ <i class="fab fa-apple"></i>
388
+ </a>
389
+ <a href="https://www.deezer.com/en/artist/1530770" class="text-slate-400 hover:text-pink-400 text-2xl">
390
+ <i class="fab fa-deezer"></i>
391
+ </a>
392
+ </div>
393
+
394
+ <div class="text-center md:text-right">
395
+ <p class="text-slate-400">© 2023 PATRASCANO. All rights reserved.</p>
396
+ <p class="text-slate-500 text-sm mt-1">Website designed with ❤️</p>
397
+ </div>
398
+ </div>
399
+ </div>
400
+ </footer>
401
+
402
+ <!-- Music Player Bar (Fixed at bottom) -->
403
+ <div class="fixed bottom-0 left-0 right-0 bg-slate-800/90 backdrop-blur-md border-t border-slate-700 z-40">
404
+ <div class="container mx-auto px-4 py-3">
405
+ <div class="flex items-center justify-between">
406
+ <div class="flex items-center space-x-4 w-1/4">
407
+ <img src="https://www.patrascano.com/wp-content/uploads/2023/09/Electric_Mother_FINAL_01_SQUAREx1000px-Custom.jpg"
408
+ alt="Now Playing"
409
+ class="h-12 w-12 rounded">
410
+ <div>
411
+ <h4 class="font-medium text-sm">Electric Mother</h4>
412
+ <p class="text-xs text-slate-400">PATRASCANO</p>
413
+ </div>
414
+ </div>
415
+
416
+ <div class="w-2/4">
417
+ <div class="flex justify-center space-x-6 mb-2">
418
+ <button class="text-slate-400 hover:text-white"><i class="fas fa-backward"></i></button>
419
+ <button class="text-xl text-pink-500 hover:text-pink-400"><i class="fas fa-play"></i></button>
420
+ <button class="text-slate-400 hover:text-white"><i class="fas fa-forward"></i></button>
421
+ </div>
422
+ <div class="flex items-center space-x-3">
423
+ <span class="text-xs text-slate-400">1:23</span>
424
+ <div class="flex-1 bg-slate-700 rounded-full h-1">
425
+ <div class="bg-pink-500 h-1 rounded-full" style="width: 45%"></div>
426
+ </div>
427
+ <span class="text-xs text-slate-400">3:45</span>
428
+ </div>
429
+ </div>
430
+
431
+ <div class="w-1/4 flex justify-end space-x-4">
432
+ <button class="text-slate-400 hover:text-white"><i class="fas fa-volume-up"></i></button>
433
+ <button class="text-slate-400 hover:text-white"><i class="fas fa-heart"></i></button>
434
+ <button class="text-slate-400 hover:text-white"><i class="fas fa-random"></i></button>
435
+ </div>
436
+ </div>
437
+ </div>
438
+ </div>
439
+
440
+ <script>
441
+ // Simple script for mobile menu toggle
442
+ document.querySelector('button.md\\:hidden').addEventListener('click', function() {
443
+ const menu = document.querySelector('.hidden.md
444
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=motoguru/patrascano-com" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
445
+ </html>