|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>RazorFlow - UG Rap Artist</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> |
|
|
|
|
|
.zoom-container { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
cursor: zoom-in; |
|
|
transition: transform 0.3s; |
|
|
} |
|
|
|
|
|
.zoom-container:hover { |
|
|
transform: scale(1.03); |
|
|
} |
|
|
|
|
|
.zoom-overlay { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: rgba(0,0,0,0.5); |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
color: white; |
|
|
font-weight: bold; |
|
|
font-size: 1.5rem; |
|
|
} |
|
|
|
|
|
.zoom-container:hover .zoom-overlay { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
|
|
|
.razor-nav { |
|
|
position: relative; |
|
|
width: 60px; |
|
|
height: 100px; |
|
|
background: linear-gradient(145deg, #333, #666); |
|
|
clip-path: polygon(0 20%, 50% 0, 100% 20%, 100% 80%, 50% 100%, 0 80%); |
|
|
transform: rotate(15deg); |
|
|
transition: all 0.3s; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.razor-nav:hover { |
|
|
transform: rotate(0deg) scale(1.1); |
|
|
background: linear-gradient(145deg, #666, #999); |
|
|
} |
|
|
|
|
|
|
|
|
::-webkit-scrollbar { |
|
|
width: 8px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-track { |
|
|
background: #111; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb { |
|
|
background: #666; |
|
|
border-radius: 4px; |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes pulse { |
|
|
0% { transform: scale(1); } |
|
|
50% { transform: scale(1.05); } |
|
|
100% { transform: scale(1); } |
|
|
} |
|
|
|
|
|
.pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
|
|
|
.glitch { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.glitch::before, .glitch::after { |
|
|
content: attr(data-text); |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
} |
|
|
|
|
|
.glitch::before { |
|
|
left: 2px; |
|
|
text-shadow: -2px 0 #ff00ff; |
|
|
clip: rect(44px, 450px, 56px, 0); |
|
|
animation: glitch-anim 5s infinite linear alternate-reverse; |
|
|
} |
|
|
|
|
|
.glitch::after { |
|
|
left: -2px; |
|
|
text-shadow: -2px 0 #00ffff; |
|
|
clip: rect(44px, 450px, 56px, 0); |
|
|
animation: glitch-anim2 5s infinite linear alternate-reverse; |
|
|
} |
|
|
|
|
|
@keyframes glitch-anim { |
|
|
0% { clip: rect(31px, 9999px, 94px, 0); } |
|
|
10% { clip: rect(112px, 9999px, 76px, 0); } |
|
|
20% { clip: rect(85px, 9999px, 77px, 0); } |
|
|
30% { clip: rect(27px, 9999px, 97px, 0); } |
|
|
40% { clip: rect(64px, 9999px, 98px, 0); } |
|
|
50% { clip: rect(61px, 9999px, 85px, 0); } |
|
|
60% { clip: rect(99px, 9999px, 114px, 0); } |
|
|
70% { clip: rect(34px, 9999px, 115px, 0); } |
|
|
80% { clip: rect(98px, 9999px, 129px, 0); } |
|
|
90% { clip: rect(43px, 9999px, 96px, 0); } |
|
|
100% { clip: rect(82px, 9999px, 64px, 0); } |
|
|
} |
|
|
|
|
|
@keyframes glitch-anim2 { |
|
|
0% { clip: rect(65px, 9999px, 119px, 0); } |
|
|
10% { clip: rect(79px, 9999px, 85px, 0); } |
|
|
20% { clip: rect(74px, 9999px, 14px, 0); } |
|
|
30% { clip: rect(87px, 9999px, 40px, 0); } |
|
|
40% { clip: rect(6px, 9999px, 46px, 0); } |
|
|
50% { clip: rect(23px, 9999px, 99px, 0); } |
|
|
60% { clip: rect(76px, 9999px, 53px, 0); } |
|
|
70% { clip: rect(93px, 9999px, 59px, 0); } |
|
|
80% { clip: rect(35px, 9999px, 13px, 0); } |
|
|
90% { clip: rect(87px, 9999px, 82px, 0); } |
|
|
100% { clip: rect(73px, 9999px, 98px, 0); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-black text-white font-sans overflow-x-hidden"> |
|
|
|
|
|
<nav class="fixed top-0 left-0 right-0 z-50 bg-black bg-opacity-90 backdrop-blur-md py-4 px-6 flex justify-between items-center border-b border-gray-800"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="razor-nav flex items-center justify-center"> |
|
|
<i class="fas fa-bolt text-yellow-400 text-xl"></i> |
|
|
</div> |
|
|
<h1 class="text-2xl font-bold bg-gradient-to-r from-yellow-400 to-red-600 bg-clip-text text-transparent">RAZORFLOW</h1> |
|
|
</div> |
|
|
|
|
|
<div class="hidden md:flex space-x-8"> |
|
|
<a href="#home" class="hover:text-yellow-400 transition">Home</a> |
|
|
<a href="#music" class="hover:text-yellow-400 transition">Music</a> |
|
|
<a href="#videos" class="hover:text-yellow-400 transition">Videos</a> |
|
|
<a href="#tour" class="hover:text-yellow-400 transition">Tour</a> |
|
|
<a href="#about" class="hover:text-yellow-400 transition">About</a> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center space-x-4"> |
|
|
<a href="#" class="bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded-full font-bold transition">Shop</a> |
|
|
<button class="md:hidden text-2xl focus:outline-none"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section id="home" class="min-h-screen pt-32 pb-20 px-6 flex flex-col md:flex-row items-center justify-center relative overflow-hidden"> |
|
|
<div class="absolute inset-0 bg-gradient-to-b from-black via-transparent to-black z-0"></div> |
|
|
<div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80')] bg-cover bg-center opacity-30 z-0"></div> |
|
|
|
|
|
<div class="z-10 md:w-1/2 flex flex-col items-center md:items-start text-center md:text-left"> |
|
|
<h2 class="glitch text-5xl md:text-7xl font-bold mb-6" data-text="RAZORFLOW">RAZORFLOW</h2> |
|
|
<p class="text-xl md:text-2xl mb-8 max-w-lg">Cutting through the noise with razor-sharp lyrics and unmatched flow from the heart of Uganda.</p> |
|
|
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
|
|
<a href="#music" class="bg-red-600 hover:bg-red-700 text-white px-8 py-4 rounded-full font-bold text-lg transition pulse">Latest Tracks</a> |
|
|
<a href="#tour" class="border-2 border-white hover:border-yellow-400 hover:text-yellow-400 text-white px-8 py-4 rounded-full font-bold text-lg transition">Tour Dates</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="z-10 md:w-1/2 mt-16 md:mt-0 flex justify-center"> |
|
|
<div class="zoom-container w-64 h-64 md:w-80 md:h-80 lg:w-96 lg:h-96 rounded-full overflow-hidden border-4 border-yellow-400 shadow-lg shadow-yellow-400/30"> |
|
|
<img src="https://images.unsplash.com/photo-1614680376573-df3480f0c6ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="RazorFlow" class="w-full h-full object-cover"> |
|
|
<div class="zoom-overlay" onclick="window.location.href='#about'"> |
|
|
ZOOM IN <i class="fas fa-search-plus ml-2"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="music" class="py-20 px-6 bg-gradient-to-b from-black to-gray-900"> |
|
|
<div class="max-w-6xl mx-auto"> |
|
|
<h2 class="text-4xl font-bold mb-12 text-center">Latest <span class="text-yellow-400">Releases</span></h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="zoom-container bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-yellow-400/30 transition"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1514525253161-7a46d19cd819?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Album Cover" class="w-full h-64 object-cover"> |
|
|
<div class="zoom-overlay" onclick="window.location.href='#album1'"> |
|
|
ZOOM IN <i class="fas fa-search-plus ml-2"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-2xl font-bold mb-2">Sharp Edges</h3> |
|
|
<p class="text-gray-400 mb-4">Released: June 2023</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex space-x-2"> |
|
|
<span class="bg-gray-700 px-3 py-1 rounded-full text-sm">Hip Hop</span> |
|
|
<span class="bg-gray-700 px-3 py-1 rounded-full text-sm">Afrobeat</span> |
|
|
</div> |
|
|
<button class="bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded-full font-bold transition"> |
|
|
<i class="fas fa-play mr-2"></i> Play |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="zoom-container bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-yellow-400/30 transition"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1470225620780-dba8ba36b745?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Album Cover" class="w-full h-64 object-cover"> |
|
|
<div class="zoom-overlay" onclick="window.location.href='#album2'"> |
|
|
ZOOM IN <i class="fas fa-search-plus ml-2"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-2xl font-bold mb-2">Kampala Nights</h3> |
|
|
<p class="text-gray-400 mb-4">Released: March 2023</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex space-x-2"> |
|
|
<span class="bg-gray-700 px-3 py-1 rounded-full text-sm">Afro Fusion</span> |
|
|
<span class="bg-gray-700 px-3 py-1 rounded-full text-sm">Dancehall</span> |
|
|
</div> |
|
|
<button class="bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded-full font-bold transition"> |
|
|
<i class="fas fa-play mr-2"></i> Play |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="zoom-container bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-yellow-400/30 transition"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Album Cover" class="w-full h-64 object-cover"> |
|
|
<div class="zoom-overlay" onclick="window.location.href='#album3'"> |
|
|
ZOOM IN <i class="fas fa-search-plus ml-2"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-2xl font-bold mb-2">Street Poet</h3> |
|
|
<p class="text-gray-400 mb-4">Released: November 2022</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex space-x-2"> |
|
|
<span class="bg-gray-700 px-3 py-1 rounded-full text-sm">Conscious Rap</span> |
|
|
<span class="bg-gray-700 px-3 py-1 rounded-full text-sm">Storytelling</span> |
|
|
</div> |
|
|
<button class="bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded-full font-bold transition"> |
|
|
<i class="fas fa-play mr-2"></i> Play |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-12"> |
|
|
<a href="#" class="inline-block border-2 border-yellow-400 hover:bg-yellow-400 hover:text-black text-yellow-400 px-8 py-3 rounded-full font-bold text-lg transition">View All Releases</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="videos" class="py-20 px-6 bg-gray-900"> |
|
|
<div class="max-w-6xl mx-auto"> |
|
|
<h2 class="text-4xl font-bold mb-12 text-center">Latest <span class="text-red-500">Videos</span></h2> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> |
|
|
|
|
|
<div class="zoom-container bg-black rounded-lg overflow-hidden shadow-lg"> |
|
|
<div class="relative aspect-w-16 aspect-h-9"> |
|
|
<img src="https://images.unsplash.com/photo-1470225620780-dba8ba36b745?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Video Thumbnail" class="w-full h-full object-cover"> |
|
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
|
<button class="bg-red-600 hover:bg-red-700 text-white rounded-full w-16 h-16 flex items-center justify-center transition transform hover:scale-110"> |
|
|
<i class="fas fa-play text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="zoom-overlay" onclick="window.location.href='#videodetail'"> |
|
|
ZOOM IN <i class="fas fa-search-plus ml-2"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-2xl font-bold mb-2">"Street Poet" - Official Video</h3> |
|
|
<p class="text-gray-400 mb-4">Released: 2 weeks ago • 1.2M views</p> |
|
|
<p class="text-gray-300">The official music video for "Street Poet" shot in the heart of Kampala, featuring stunning visuals of the city's vibrant street life.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="space-y-6"> |
|
|
|
|
|
<div class="zoom-container bg-gray-800 rounded-lg overflow-hidden flex"> |
|
|
<div class="w-1/3 relative"> |
|
|
<img src="https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Video Thumbnail" class="w-full h-full object-cover"> |
|
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
|
<button class="bg-red-600 hover:bg-red-700 text-white rounded-full w-10 h-10 flex items-center justify-center transition transform hover:scale-110"> |
|
|
<i class="fas fa-play text-sm"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="zoom-overlay" onclick="window.location.href='#video1'"> |
|
|
<i class="fas fa-search-plus"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="w-2/3 p-4"> |
|
|
<h4 class="font-bold">"Kampala Nights" Live Performance</h4> |
|
|
<p class="text-sm text-gray-400 mt-1">450K views • 3 months ago</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="zoom-container bg-gray-800 rounded-lg overflow-hidden flex"> |
|
|
<div class="w-1/3 relative"> |
|
|
<img src="https://images.unsplash.com/photo-1514525253161-7a46d19cd819?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Video Thumbnail" class="w-full h-full object-cover"> |
|
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
|
<button class="bg-red-600 hover:bg-red-700 text-white rounded-full w-10 h-10 flex items-center justify-center transition transform hover:scale-110"> |
|
|
<i class="fas fa-play text-sm"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="zoom-overlay" onclick="window.location.href='#video2'"> |
|
|
<i class="fas fa-search-plus"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="w-2/3 p-4"> |
|
|
<h4 class="font-bold">"Sharp Edges" Behind The Scenes</h4> |
|
|
<p class="text-sm text-gray-400 mt-1">320K views • 5 months ago</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="zoom-container bg-gray-800 rounded-lg overflow-hidden flex"> |
|
|
<div class="w-1/3 relative"> |
|
|
<img src="https://images.unsplash.com/photo-1614680376573-df3480f0c6ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Video Thumbnail" class="w-full h-full object-cover"> |
|
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
|
<button class="bg-red-600 hover:bg-red-700 text-white rounded-full w-10 h-10 flex items-center justify-center transition transform hover:scale-110"> |
|
|
<i class="fas fa-play text-sm"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="zoom-overlay" onclick="window.location.href='#video3'"> |
|
|
<i class="fas fa-search-plus"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="w-2/3 p-4"> |
|
|
<h4 class="font-bold">Interview with RazorFlow</h4> |
|
|
<p class="text-sm text-gray-400 mt-1">280K views • 7 months ago</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="zoom-container bg-gray-800 rounded-lg overflow-hidden flex"> |
|
|
<div class="w-1/3 relative"> |
|
|
<img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Video Thumbnail" class="w-full h-full object-cover"> |
|
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
|
<button class="bg-red-600 hover:bg-red-700 text-white rounded-full w-10 h-10 flex items-center justify-center transition transform hover:scale-110"> |
|
|
<i class="fas fa-play text-sm"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="zoom-overlay" onclick="window.location.href='#video4'"> |
|
|
<i class="fas fa-search-plus"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="w-2/3 p-4"> |
|
|
<h4 class="font-bold">"Nakasero Flow" Music Video</h4> |
|
|
<p class="text-sm text-gray-400 mt-1">1.8M views • 1 year ago</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-12"> |
|
|
<a href="#" class="inline-block border-2 border-red-500 hover:bg-red-500 hover:text-black text-red-500 px-8 py-3 rounded-full font-bold text-lg transition">View All Videos</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="tour" class="py-20 px-6 bg-black"> |
|
|
<div class="max-w-6xl mx-auto"> |
|
|
<h2 class="text-4xl font-bold mb-12 text-center">Tour <span class="text-yellow-400">Dates</span></h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="zoom-container bg-gray-900 rounded-lg overflow-hidden shadow-lg hover:shadow-yellow-400/30 transition"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1470229722913-7c0e2dbbafd3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Tour Location" class="w-full h-48 object-cover"> |
|
|
<div class="absolute top-4 right-4 bg-yellow-500 text-black px-3 py-1 rounded-full font-bold text-sm">SOLD OUT</div> |
|
|
<div class="zoom-overlay" onclick="window.location.href='#tour1'"> |
|
|
ZOOM IN <i class="fas fa-search-plus ml-2"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-2xl font-bold mb-2">Kampala Concert</h3> |
|
|
<p class="text-gray-400 mb-4">July 15, 2023 • Lugogo Cricket Oval</p> |
|
|
<p class="text-gray-300 mb-6">Join RazorFlow for an unforgettable night of music and energy in the heart of Kampala.</p> |
|
|
<button class="w-full bg-gray-800 hover:bg-gray-700 text-white px-6 py-3 rounded-full font-bold transition">Notify Me</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="zoom-container bg-gray-900 rounded-lg overflow-hidden shadow-lg hover:shadow-yellow-400/30 transition"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1540575467063-178a50c2df87?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Tour Location" class="w-full h-48 object-cover"> |
|
|
<div class="zoom-overlay" onclick="window.location.href='#tour2'"> |
|
|
ZOOM IN <i class="fas fa-search-plus ml-2"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-2xl font-bold mb-2">Nairobi Showcase</h3> |
|
|
<p class="text-gray-400 mb-4">August 5, 2023 • KICC Nairobi</p> |
|
|
<p class="text-gray-300 mb-6">RazorFlow makes his Kenyan debut with a special East African showcase.</p> |
|
|
<button class="w-full bg-yellow-500 hover:bg-yellow-600 text-black px-6 py-3 rounded-full font-bold transition">Get Tickets</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="zoom-container bg-gray-900 rounded-lg overflow-hidden shadow-lg hover:shadow-yellow-400/30 transition"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Tour Location" class="w-full h-48 object-cover"> |
|
|
<div class="zoom-overlay" onclick="window.location.href='#tour3'"> |
|
|
ZOOM IN <i class="fas fa-search-plus ml-2"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-2xl font-bold mb-2">European Tour Kickoff</h3> |
|
|
<p class="text-gray-400 mb-4">September 12, 2023 • Berlin, Germany</p> |
|
|
<p class="text-gray-300 mb-6">The start of RazorFlow's first European tour, bringing Ugandan hip hop to new audiences.</p> |
|
|
<button class="w-full bg-yellow-500 hover:bg-yellow-600 text-black px-6 py-3 rounded-full font-bold transition">Get Tickets</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-12"> |
|
|
<a href="#" class="inline-block border-2 border-yellow-400 hover:bg-yellow-400 hover:text-black text-yellow-400 px-8 py-3 rounded-full font-bold text-lg transition">View All Tour Dates</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="py-20 px-6 bg-gradient-to-b from-black to-gray-900"> |
|
|
<div class="max-w-6xl mx-auto"> |
|
|
<h2 class="text-4xl font-bold mb-12 text-center">About <span class="text-red-500">RazorFlow</span></h2> |
|
|
|
|
|
<div class="flex flex-col lg:flex-row items-center gap-12"> |
|
|
<div class="lg:w-1/2"> |
|
|
<div class="zoom-container rounded-lg overflow-hidden shadow-lg"> |
|
|
<img src="https://images.unsplash.com/photo-1614680376573-df3480f0c6ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="RazorFlow" class="w-full h-auto object-cover"> |
|
|
<div class="zoom-overlay" onclick="window.location.href='#biography'"> |
|
|
ZOOM IN <i class="fas fa-search-plus ml-2"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="lg:w-1/2"> |
|
|
<h3 class="text-3xl font-bold mb-6">From the Streets of Kampala to the World Stage</h3> |
|
|
<p class="text-gray-300 mb-4">Born and raised in the vibrant city of Kampala, RazorFlow (real name David Muwonge) began his musical journey as a young poet, crafting verses that reflected the realities of urban Ugandan life.</p> |
|
|
<p class="text-gray-300 mb-4">His unique blend of sharp lyricism, Afrobeat rhythms, and conscious storytelling quickly gained attention in the local hip hop scene. With each release, RazorFlow has sharpened his craft, earning him the nickname "The Razor" for his cutting-edge flow and incisive social commentary.</p> |
|
|
<p class="text-gray-300 mb-6">Today, RazorFlow stands as one of East Africa's most exciting rap talents, with a growing international following and collaborations with artists across the continent and beyond.</p> |
|
|
|
|
|
<div class="flex flex-wrap gap-4 mb-8"> |
|
|
<div class="bg-gray-800 px-6 py-4 rounded-lg text-center"> |
|
|
<div class="text-3xl font-bold text-yellow-400">50K+</div> |
|
|
<div class="text-gray-400">Monthly Listeners</div> |
|
|
</div> |
|
|
<div class="bg-gray-800 px-6 py-4 rounded-lg text-center"> |
|
|
<div class="text-3xl font-bold text-yellow-400">10M+</div> |
|
|
<div class="text-gray-400">Streams</div> |
|
|
</div> |
|
|
<div class="bg-gray-800 px-6 py-4 rounded-lg text-center"> |
|
|
<div class="text-3xl font-bold text-yellow-400">12</div> |
|
|
<div class="text-gray-400">Countries Performed</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-full font-bold transition flex items-center"> |
|
|
<i class="fab fa-facebook-f mr-2"></i> Follow |
|
|
</a> |
|
|
<a href="#" class="bg-pink-600 hover:bg-pink-700 text-white px-6 py-3 rounded-full font-bold transition flex items-center"> |
|
|
<i class="fab fa-instagram mr-2"></i> Follow |
|
|
</a> |
|
|
<a href="#" class="bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-full font-bold transition flex items-center"> |
|
|
<i class="fab fa-youtube mr-2"></i> Subscribe |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 px-6 bg-gray-900"> |
|
|
<div class="max-w-4xl mx-auto bg-gray-800 rounded-xl p-8 md:p-12 shadow-lg"> |
|
|
<div class="text-center"> |
|
|
<h2 class="text-3xl font-bold mb-4">Stay <span class="text-yellow-400">Updated</span></h2> |
|
|
<p class="text-gray-300 mb-8 max-w-2xl mx-auto">Subscribe to RazorFlow's newsletter for exclusive content, early access to tickets, and behind-the-scenes updates.</p> |
|
|
|
|
|
<form class="flex flex-col sm:flex-row gap-4 max-w-lg mx-auto"> |
|
|
<input type="email" placeholder="Your email address" class="flex-grow px-6 py-4 rounded-full bg-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-yellow-400"> |
|
|
<button type="submit" class="bg-yellow-500 hover:bg-yellow-600 text-black px-8 py-4 rounded-full font-bold transition">Subscribe</button> |
|
|
</form> |
|
|
|
|
|
<p class="text-gray-500 text-sm mt-4">We respect your privacy. Unsubscribe at any time.</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-black py-12 px-6 border-t border-gray-800"> |
|
|
<div class="max-w-6xl mx-auto"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-12"> |
|
|
<div> |
|
|
<div class="flex items-center space-x-2 mb-6"> |
|
|
<div class="razor-nav flex items-center justify-center"> |
|
|
<i class="fas fa-bolt text-yellow-400 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold bg-gradient-to-r from-yellow-400 to-red-600 bg-clip-text text-transparent">RAZORFLOW</h3> |
|
|
</div> |
|
|
<p class="text-gray-400">Cutting through the noise with razor-sharp lyrics and unmatched flow from the heart of Uganda.</p> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-bold mb-6">Quick Links</h4> |
|
|
<ul class="space-y-3"> |
|
|
<li><a href="#home" class="text-gray-400 hover:text-yellow-400 transition">Home</a></li> |
|
|
<li><a href="#music" class="text-gray-400 hover:text-yellow-400 transition">Music</a></li> |
|
|
<li><a href="#videos" class="text-gray-400 hover:text-yellow-400 transition">Videos</a></li> |
|
|
<li><a href="#tour" class="text-gray-400 hover:text-yellow-400 transition">Tour</a></li> |
|
|
<li><a href="#about" class="text-gray-400 hover:text-yellow-400 transition">About</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-bold mb-6">Connect</h4> |
|
|
<ul class="space-y-3"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-yellow-400 transition flex items-center"><i class="fab fa-instagram mr-2"></i> Instagram</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-yellow-400 transition flex items-center"><i class="fab fa-twitter mr-2"></i> Twitter</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-yellow-400 transition flex items-center"><i class="fab fa-facebook mr-2"></i> Facebook</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-yellow-400 transition flex items-center"><i class="fab fa-youtube mr-2"></i> YouTube</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-yellow-400 transition flex items-center"><i class="fab fa-spotify mr-2"></i> Spotify</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-bold mb-6">Contact</h4> |
|
|
<ul class="space-y-3"> |
|
|
<li class="text-gray-400 flex items-center"><i class="fas fa-envelope mr-2"></i> [email protected]</li> |
|
|
<li class="text-gray-400 flex items-center"><i class="fas fa-phone mr-2"></i> +256 700 123456</li> |
|
|
<li class="text-gray-400 flex items-center"><i class="fas fa-map-marker-alt mr-2"></i> Kampala, Uganda</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> |
|
|
<p class="text-gray-500 mb-4 md:mb-0">© 2023 RazorFlow. All rights reserved.</p> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-500 hover:text-yellow-400 transition">Privacy Policy</a> |
|
|
<a href="#" class="text-gray-500 hover:text-yellow-400 transition">Terms of Service</a> |
|
|
<a href="#" class="text-gray-500 hover:text-yellow-400 transition">Cookies</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.querySelectorAll('.zoom-container').forEach(container => { |
|
|
container.addEventListener('click', function(e) { |
|
|
|
|
|
if (!e.target.closest('.zoom-overlay')) { |
|
|
const overlay = this.querySelector('.zoom-overlay'); |
|
|
if (overlay && overlay.getAttribute('onclick')) { |
|
|
const onclickContent = overlay.getAttribute('onclick'); |
|
|
const href = onclickContent.match(/window\.location\.href='([^']+)'/)[1]; |
|
|
window.location.href = href; |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
</script> |
|
|
<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=Groguru/kfjgjg" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
