Hugging Face's logo

Spaces:
motoguru
/
patrascano-com
Running

App Files Community
patrascano-com / index.html
motoguru's picture
motoguru
- Initial Deployment
1f37140 verified
raw
history blame contribute delete
27.4 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PATRASCANO | Making Music</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.album-card {
transition: all 0.3s ease;
}
.album-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.music-player {
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}
.hero-section {
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');
background-size: cover;
background-position: center;
}
.quote-text {
position: relative;
}
.quote-text::before, .quote-text::after {
content: '"';
font-size: 2rem;
color: #94a3b8;
position: absolute;
}
.quote-text::before {
top: -15px;
left: -25px;
}
.quote-text::after {
bottom: -30px;
right: -25px;
}
</style>
</head>
<body class="bg-slate-900 text-slate-100 font-sans">
<!-- Navigation -->
<nav class="bg-slate-800/90 backdrop-blur-md sticky top-0 z-50 shadow-lg">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center space-x-2">
<img src="https://www.patrascano.com/wp-content/uploads/2019/11/logo3.png" alt="PATRASCANO Logo" class="h-10">
<span class="text-xl font-bold bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text text-transparent">PATRASCANO</span>
</div>
<div class="hidden md:flex space-x-6">
<a href="#albums" class="hover:text-pink-400 transition">Albums</a>
<a href="#singles" class="hover:text-pink-400 transition">Singles</a>
<a href="#about" class="hover:text-pink-400 transition">About</a>
<a href="#contact" class="hover:text-pink-400 transition">Contact</a>
</div>
<button class="md:hidden text-2xl">
<i class="fas fa-bars"></i>
</button>
</div>
</nav>
<!-- Hero Section -->
<section class="hero-section min-h-screen flex items-center justify-center text-center px-4">
<div class="max-w-4xl mx-auto">
<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>
<div class="quote-text relative text-xl md:text-2xl italic mb-10 px-10">
You can be like the clouds<br>
The light over seas<br>
A candle in the darkest times<br>
You can be the life<br>
You can make the things alright<br>
The Queen of all everything…
</div>
<div class="flex flex-wrap justify-center gap-4">
<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">
<img src="https://www.patrascano.com/wp-content/uploads/2019/11/spotify-1.png" alt="Spotify" class="h-6">
<span>Spotify</span>
</a>
<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">
<img src="https://www.patrascano.com/wp-content/uploads/2019/11/Youtube.png" alt="YouTube" class="h-6">
<span>YouTube</span>
</a>
<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">
<img src="https://www.patrascano.com/wp-content/uploads/2019/11/bandcamp-1.png" alt="Bandcamp" class="h-6">
<span>Bandcamp</span>
</a>
<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">
<img src="https://www.patrascano.com/wp-content/uploads/2019/11/applemusic.png" alt="Apple Music" class="h-6">
<span>Apple Music</span>
</a>
<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">
<img src="https://www.patrascano.com/wp-content/uploads/2019/11/deezere.png" alt="Deezer" class="h-6">
<span>Deezer</span>
</a>
</div>
</div>
</section>
<!-- Featured Album -->
<section class="py-16 px-4">
<div class="container mx-auto max-w-6xl">
<h2 class="text-3xl font-bold mb-10 text-center">FEATURED RELEASE</h2>
<div class="flex flex-col md:flex-row items-center gap-8">
<div class="md:w-1/2">
<a href="https://onerpm.link/130906303689">
<img src="https://www.patrascano.com/wp-content/uploads/2023/09/Electric_Mother_FINAL_01_SQUAREx1000px-Custom.jpg"
alt="Electric Mother"
class="w-full rounded-lg shadow-xl album-card">
</a>
</div>
<div class="md:w-1/2">
<h3 class="text-2xl font-bold mb-4">Electric Mother</h3>
<p class="text-slate-300 mb-6">Latest single release available on all platforms</p>
<div class="music-player p-6 rounded-lg mb-6">
<div class="flex justify-between items-center mb-4">
<div>
<h4 class="font-medium">Electric Mother</h4>
<p class="text-sm text-slate-300">PATRASCANO</p>
</div>
<div class="text-slate-300">3:45</div>
</div>
<div class="w-full bg-slate-700 rounded-full h-2 mb-2">
<div class="bg-pink-500 h-2 rounded-full" style="width: 45%"></div>
</div>
<div class="flex justify-between text-sm text-slate-400 mb-6">
<span>1:23</span>
<span>3:45</span>
</div>
<div class="flex justify-center space-x-8">
<button class="text-2xl text-slate-300 hover:text-white"><i class="fas fa-backward"></i></button>
<button class="text-4xl text-pink-500 hover:text-pink-400"><i class="fas fa-play"></i></button>
<button class="text-2xl text-slate-300 hover:text-white"><i class="fas fa-forward"></i></button>
</div>
</div>
<div class="flex flex-wrap gap-3">
<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>
<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>
</div>
</div>
</div>
</div>
</section>
<!-- Albums Section -->
<section id="albums" class="py-16 px-4 bg-slate-800/30">
<div class="container mx-auto max-w-6xl">
<h2 class="text-3xl font-bold mb-10 text-center">ALBUMS</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Album 1 -->
<div class="album-card bg-slate-800 rounded-lg overflow-hidden shadow-lg">
<a href="https://patrascano.bandcamp.com/album/album-electric-dreams">
<img src="https://www.patrascano.com/wp-content/uploads/2019/11/Patrascano-SYNTHPOP-ALBUM-COVER-01-x-1000.jpg"
alt="Electric Dreams"
class="w-full h-64 object-cover">
</a>
<div class="p-6">
<h3 class="text-xl font-bold mb-2">ELECTRIC DREAMS</h3>
<p class="text-slate-300 text-sm mb-3">released: 2019</p>
<div class="flex flex-wrap gap-2">
<span class="bg-slate-700 text-xs px-2 py-1 rounded">synthpop</span>
<span class="bg-slate-700 text-xs px-2 py-1 rounded">pop-rock</span>
<span class="bg-slate-700 text-xs px-2 py-1 rounded">synthwave</span>
<span class="bg-slate-700 text-xs px-2 py-1 rounded">futurepop</span>
</div>
</div>
</div>
<!-- Album 2 -->
<div class="album-card bg-slate-800 rounded-lg overflow-hidden shadow-lg">
<a href="https://patrascano.bandcamp.com/album/album-music-for-movies">
<img src="https://www.patrascano.com/wp-content/uploads/2019/11/MFM-Cover-2018-x-1000.jpg"
alt="Music for Movies"
class="w-full h-64 object-cover">
</a>
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Music for Movies</h3>
<p class="text-slate-300 text-sm mb-3">released: 2018</p>
<div class="flex flex-wrap gap-2">
<span class="bg-slate-700 text-xs px-2 py-1 rounded">new age</span>
<span class="bg-slate-700 text-xs px-2 py-1 rounded">guitar instrumental</span>
<span class="bg-slate-700 text-xs px-2 py-1 rounded">world</span>
<span class="bg-slate-700 text-xs px-2 py-1 rounded">chill out</span>
<span class="bg-slate-700 text-xs px-2 py-1 rounded">lounge</span>
</div>
</div>
</div>
<!-- Album 3 -->
<div class="album-card bg-slate-800 rounded-lg overflow-hidden shadow-lg">
<a href="https://patrascano.bandcamp.com/album/album-music-for-the-sun-worshiper">
<img src="https://www.patrascano.com/wp-content/uploads/2019/11/Music-for-the-sun-worshiper-Front-CMKY-_resizex1000.jpg"
alt="Music for the Sun Worshiper"
class="w-full h-64 object-cover">
</a>
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Music for the Sun Worshiper</h3>
<p class="text-slate-300 text-sm mb-3">released: 2014</p>
<div class="flex flex-wrap gap-2">
<span class="bg-slate-700 text-xs px-2 py-1 rounded">new age</span>
<span class="bg-slate-700 text-xs px-2 py-1 rounded">guitar instrumental</span>
<span class="bg-slate-700 text-xs px-2 py-1 rounded">world</span>
<span class="bg-slate-700 text-xs px-2 py-1 rounded">chill out</span>
<span class="bg-slate-700 text-xs px-2 py-1 rounded">lounge</span>
</div>
</div>
</div>
<!-- Album 4 -->
<div class="album-card bg-slate-800 rounded-lg overflow-hidden shadow-lg">
<a href="https://patrascano.bandcamp.com/album/album-chillout-and-ambient-soundscapes-vol-1">
<img src="https://www.patrascano.com/wp-content/uploads/2019/11/Chill-Ambient-Sc-COVER.jpg"
alt="Chillout and Ambient Soundscapes"
class="w-full h-64 object-cover">
</a>
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Chillout and Ambient Soundscapes</h3>
<p class="text-slate-300 text-sm mb-3 italic">selection of songs from various albums</p>
<p class="text-slate-300 text-sm mb-3">released: 2014</p>
<div class="flex flex-wrap gap-2">
<span class="bg-slate-700 text-xs px-2 py-1 rounded">new age</span>
<span class="bg-slate-700 text-xs px-2 py-1 rounded">guitar instrumental</span>
<span class="bg-slate-700 text-xs px-2 py-1 rounded">world</span>
<span class="bg-slate-700 text-xs px-2 py-1 rounded">chill out</span>
<span class="bg-slate-700 text-xs px-2 py-1 rounded">lounge</span>
<span class="bg-slate-700 text-xs px-2 py-1 rounded">ambiental</span>
</div>
</div>
</div>
<!-- Album 5 -->
<div class="album-card bg-slate-800 rounded-lg overflow-hidden shadow-lg">
<a href="https://open.spotify.com/album/6AnX17C5x5w9i8CtvlU3mT?si=YY2HGqGsSYmsu7kRqRzV1w">
<img src="https://www.patrascano.com/wp-content/uploads/2019/11/safe.jpg"
alt="Safe : The Album"
class="w-full h-64 object-cover">
</a>
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Safe : The Album</h3>
<p class="text-slate-300 text-sm mb-3 italic">selection of songs from various albums</p>
<p class="text-slate-300 text-sm mb-3">released: 2012</p>
<div class="flex flex-wrap gap-2">
<span class="bg-slate-700 text-xs px-2 py-1 rounded">new age</span>
<span class="bg-slate-700 text-xs px-2 py-1 rounded">guitar instrumental</span>
<span class="bg-slate-700 text-xs px-2 py-1 rounded">world</span>
<span class="bg-slate-700 text-xs px-2 py-1 rounded">chill out</span>
<span class="bg-slate-700 text-xs px-2 py-1 rounded">lounge</span>
<span class="bg-slate-700 text-xs px-2 py-1 rounded">ambiental</span>
<span class="bg-slate-700 text-xs px-2 py-1 rounded">synthpop</span>
<span class="bg-slate-700 text-xs px-2 py-1 rounded">Futurepop</span>
</div>
</div>
</div>
<!-- Album 6 -->
<div class="album-card bg-slate-800 rounded-lg overflow-hidden shadow-lg">
<a href="https://patrascano.bandcamp.com/album/album-divine-amusement">
<img src="https://www.patrascano.com/wp-content/uploads/2019/11/Divine-Amusement-Cover-Extended.jpg"
alt="Divine Amusement"
class="w-full h-64 object-cover">
</a>
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Divine Amusement</h3>
<p class="text-slate-300 text-sm mb-3">released: 2005</p>
<div class="flex flex-wrap gap-2">
<span class="bg-slate-700 text-xs px-2 py-1 rounded">new age</span>
<span class="bg-slate-700 text-xs px-2 py-1 rounded">guitar instrumental</span>
<span class="bg-slate-700 text-xs px-2 py-1 rounded">world</span>
<span class="bg-slate-700 text-xs px-2 py-1 rounded">chill out</span>
<span class="bg-slate-700 text-xs px-2 py-1 rounded">lounge</span>
<span class="bg-slate-700 text-xs px-2 py-1 rounded">futurepop</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Singles Section -->
<section id="singles" class="py-16 px-4">
<div class="container mx-auto max-w-6xl">
<h2 class="text-3xl font-bold mb-10 text-center">SINGLES</h2>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6">
<!-- Single 1 -->
<a href="https://www.patrascano.com/chain-beyond-reality/" class="album-card">
<img src="https://www.patrascano.com/wp-content/uploads/2019/11/COVER-Chain-Beyond-x1000_resize_resize.jpg"
alt="Chain Beyond Reality"
class="w-full rounded-lg shadow-md hover:shadow-xl transition">
</a>
<!-- Single 2 -->
<a href="https://patrascano.bandcamp.com/track/visions-of-you" class="album-card">
<img src="https://www.patrascano.com/wp-content/uploads/2019/11/COVER-Visions-of-You-x3-1500.jpg"
alt="Visions of You"
class="w-full rounded-lg shadow-md hover:shadow-xl transition">
</a>
<!-- Single 3 -->
<a href="https://patrascano.bandcamp.com/album/galactic-radio" class="album-card">
<img src="https://www.patrascano.com/wp-content/uploads/2019/11/Galactic-Radio-4-x1500.jpg"
alt="Galactic Radio"
class="w-full rounded-lg shadow-md hover:shadow-xl transition">
</a>
<!-- Single 4 -->
<a href="https://patrascano.bandcamp.com/track/when-the-days-are-over" class="album-card">
<img src="https://www.patrascano.com/wp-content/uploads/2019/11/COVER-When-the-days-are-over-x-1500.jpg"
alt="When the Days Are Over"
class="w-full rounded-lg shadow-md hover:shadow-xl transition">
</a>
<!-- Single 5 -->
<a href="https://patrascano.bandcamp.com/track/the-day-the-monkeys-went-too-far" class="album-card">
<img src="https://www.patrascano.com/wp-content/uploads/2019/11/The-Day-the-Monkeys-x-1500.jpg"
alt="The Day the Monkeys Went Too Far"
class="w-full rounded-lg shadow-md hover:shadow-xl transition">
</a>
<!-- Single 6 -->
<a href="https://patrascano.bandcamp.com/album/dreamer-on-the-run-for-adaggio" class="album-card">
<img src="https://www.patrascano.com/wp-content/uploads/2019/11/COVER-Dreamer-x1000.jpg"
alt="Dreamer on the Run"
class="w-full rounded-lg shadow-md hover:shadow-xl transition">
</a>
<!-- Single 7 -->
<a href="https://patrascano.bandcamp.com/album/devils-paradise" class="album-card">
<img src="https://www.patrascano.com/wp-content/uploads/2019/11/DevilsparadiseCOVER-v2-x1000.jpg"
alt="Devil's Paradise"
class="w-full rounded-lg shadow-md hover:shadow-xl transition">
</a>
<!-- Single 8 -->
<a href="https://patrascano.bandcamp.com/album/blackwater" class="album-card">
<img src="https://www.patrascano.com/wp-content/uploads/2019/11/Blackwater-x1000.jpg"
alt="Blackwater"
class="w-full rounded-lg shadow-md hover:shadow-xl transition">
</a>
<!-- Single 9 -->
<a href="https://patrascano.bandcamp.com/album/electric-avenue" class="album-card">
<img src="https://www.patrascano.com/wp-content/uploads/2019/11/Electric-Avenue-COVER-SQUARE-x-1000.jpg"
alt="Electric Avenue"
class="w-full rounded-lg shadow-md hover:shadow-xl transition">
</a>
<!-- Single 10 -->
<a href="https://patrascano.bandcamp.com/track/the-last-days-of-sorrow" class="album-card">
<img src="https://www.patrascano.com/wp-content/uploads/2019/11/TheLastDaysofSorrow-1-1000-x-1000.jpg"
alt="The Last Days of Sorrow"
class="w-full rounded-lg shadow-md hover:shadow-xl transition">
</a>
</div>
<div class="text-center mt-10">
<button class="border border-slate-600 hover:border-pink-500 text-slate-300 hover:text-pink-400 px-6 py-3 rounded-full transition">
View More Singles
</button>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-slate-800 py-12 px-4">
<div class="container mx-auto max-w-6xl">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-6 md:mb-0">
<div class="flex items-center space-x-2">
<img src="https://www.patrascano.com/wp-content/uploads/2019/11/logo3.png" alt="PATRASCANO Logo" class="h-10">
<span class="text-xl font-bold bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text text-transparent">PATRASCANO</span>
</div>
<p class="text-slate-400 mt-2">Making Music Since 2003</p>
</div>
<div class="flex space-x-6 mb-6 md:mb-0">
<a href="https://open.spotify.com/artist/5qnQqLkQqqk4F8vZZDbOox?si=HntC5YLVQZWHwhlR41t3KA" class="text-slate-400 hover:text-pink-400 text-2xl">
<i class="fab fa-spotify"></i>
</a>
<a href="https://www.youtube.com/channel/UC4kno_057HR8D5TBJCCDeow" class="text-slate-400 hover:text-pink-400 text-2xl">
<i class="fab fa-youtube"></i>
</a>
<a href="https://patrascano.bandcamp.com/" class="text-slate-400 hover:text-pink-400 text-2xl">
<i class="fab fa-bandcamp"></i>
</a>
<a href="https://itunes.apple.com/us/artist/patrascano/301522630#see-all/top-songs" class="text-slate-400 hover:text-pink-400 text-2xl">
<i class="fab fa-apple"></i>
</a>
<a href="https://www.deezer.com/en/artist/1530770" class="text-slate-400 hover:text-pink-400 text-2xl">
<i class="fab fa-deezer"></i>
</a>
</div>
<div class="text-center md:text-right">
<p class="text-slate-400">© 2023 PATRASCANO. All rights reserved.</p>
<p class="text-slate-500 text-sm mt-1">Website designed with ❤️</p>
</div>
</div>
</div>
</footer>
<!-- Music Player Bar (Fixed at bottom) -->
<div class="fixed bottom-0 left-0 right-0 bg-slate-800/90 backdrop-blur-md border-t border-slate-700 z-40">
<div class="container mx-auto px-4 py-3">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-4 w-1/4">
<img src="https://www.patrascano.com/wp-content/uploads/2023/09/Electric_Mother_FINAL_01_SQUAREx1000px-Custom.jpg"
alt="Now Playing"
class="h-12 w-12 rounded">
<div>
<h4 class="font-medium text-sm">Electric Mother</h4>
<p class="text-xs text-slate-400">PATRASCANO</p>
</div>
</div>
<div class="w-2/4">
<div class="flex justify-center space-x-6 mb-2">
<button class="text-slate-400 hover:text-white"><i class="fas fa-backward"></i></button>
<button class="text-xl text-pink-500 hover:text-pink-400"><i class="fas fa-play"></i></button>
<button class="text-slate-400 hover:text-white"><i class="fas fa-forward"></i></button>
</div>
<div class="flex items-center space-x-3">
<span class="text-xs text-slate-400">1:23</span>
<div class="flex-1 bg-slate-700 rounded-full h-1">
<div class="bg-pink-500 h-1 rounded-full" style="width: 45%"></div>
</div>
<span class="text-xs text-slate-400">3:45</span>
</div>
</div>
<div class="w-1/4 flex justify-end space-x-4">
<button class="text-slate-400 hover:text-white"><i class="fas fa-volume-up"></i></button>
<button class="text-slate-400 hover:text-white"><i class="fas fa-heart"></i></button>
<button class="text-slate-400 hover:text-white"><i class="fas fa-random"></i></button>
</div>
</div>
</div>
</div>
<script>
// Simple script for mobile menu toggle
document.querySelector('button.md\\:hidden').addEventListener('click', function() {
const menu = document.querySelector('.hidden.md
<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>
</html>