1 year ago by: arifularnabposted in: World comments: 0 Ariful Arnab – Personal Portfolio<p> /* Custom styles to apply the fonts */ body { font-family: ‘Inter’, sans-serif; background-color: #111827; /* Dark gray background */ color: #d1d5db; /* Light gray text */ } h1, h2, h3, h4, h5, h6 { font-family: ‘Poppins’, sans-serif; } .accent-color { color: #3b82f6; /* Deep Blue */ } .bg-accent { background-color: #3b82f6; } .border-accent { border-color: #3b82f6; } .section-title { @apply text-3xl md:text-4xl font-bold text-center mb-12 text-white; } .card-hover { @apply transition-transform duration-300 ease-in-out hover:scale-105; } <!-- Header --> <header id="header" class="bg-gray-900/80 backdrop-blur-sm fixed top-0 left-0 right-0 z-50 transition-shadow duration-300"> <div class="container mx-auto px-6 py-4 flex justify-between items-center"> <a href="#" class="text-2xl font-bold text-white tracking-wider">AA</a> <nav class="hidden md:flex space-x-8"> <a href="#home" class="hover:text-blue-400 transition-colors">Home</a> <a href="#about" class="hover:text-blue-400 transition-colors">About</a> <a href="#portfolio" class="hover:text-blue-400 transition-colors">Portfolio</a> <a href="#music" class="hover:text-blue-400 transition-colors">Music</a> <a href="#videos" class="hover:text-blue-400 transition-colors">Videos</a> <a href="#contact" class="hover:text-blue-400 transition-colors">Contact</a> </nav> <button id="mobile-menu-button" class="md:hidden text-white text-2xl"> <i class="fas fa-bars"></i> </button> </div> <!-- Mobile Menu --> <div id="mobile-menu" class="hidden md:hidden px-6 pb-4 flex flex-col space-y-4"> <a href="#home" class="hover:text-blue-400 transition-colors">Home</a> <a href="#about" class="hover:text-blue-400 transition-colors">About</a> <a href="#portfolio" class="hover:text-blue-400 transition-colors">Portfolio</a> <a href="#music" class="hover:text-blue-400 transition-colors">Music</a> <a href="#videos" class="hover:text-blue-400 transition-colors">Videos</a> <a href="#contact" class="hover:text-blue-400 transition-colors">Contact</a> </div> </header> <!-- Hero Section --> <section data-bg="https://placehold.co/1920x1080/111827/d1d5db?text=Creative+Background" id="home" class="min-h-screen flex items-center relative bg-cover bg-center bg-no-repeat rocket-lazyload" style=""> <div class="absolute inset-0 bg-black/60"></div> <div class="container mx-auto px-6 text-center relative z-10"> <h1 class="text-4xl md:text-6xl font-bold text-white leading-tight">Hi, I’m Ariful Arnab</h1> <p class="text-lg md:text-2xl mt-4 uppercase tracking-widest">Musician • Web Designer • Content Creator • Entrepreneur</p> <a href="#portfolio" class="mt-8 inline-block bg-accent hover:bg-blue-500 text-white font-bold py-3 px-8 rounded-lg transition-transform duration-300 hover:scale-105"> Explore My Work </a> </div> <!-- Floating Social Media Icons --> <div class="hidden md:flex flex-col space-y-4 absolute left-6 top-1/2 -translate-y-1/2 z-10"> <a href="#" class="text-white hover:text-blue-400 text-2xl"><i class="fab fa-facebook-f"></i></a> <a href="#" class="text-white hover:text-blue-400 text-2xl"><i class="fab fa-youtube"></i></a> <a href="#" class="text-white hover:text-blue-400 text-2xl"><i class="fab fa-instagram"></i></a> <a href="#" class="text-white hover:text-blue-400 text-2xl"><i class="fab fa-twitter"></i></a> </div> </section> <!-- About Me Section --> <section id="about" class="py-20 bg-gray-800"> <div class="container mx-auto px-6"> <h2 class="section-title">About Me</h2> <div class="flex flex-col md:flex-row items-center gap-12"> <div class="md:w-1/3"> <img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Ariful Arnab" class="rounded-lg shadow-lg w-full" data-lazy-src="https://placehold.co/400x400/374151/d1d5db?text=Ariful+Arnab"><noscript><img decoding="async" src="https://placehold.co/400x400/374151/d1d5db?text=Ariful+Arnab" alt="Ariful Arnab" class="rounded-lg shadow-lg w-full"></noscript> </div> <div class="md:w-2/3"> <p class="mb-4">Born in Khulna, Bangladesh, Ariful Arnab is a multi-talented creative working across music, business, and web development.</p> <p class="mb-6">Known for soulful music and smart tech solutions, he’s the designer behind RADTL.com and a growing voice in the Bangladeshi creative scene.</p> <div class="grid grid-cols-2 gap-4 text-sm"> <div class="flex items-center"><i class="fas fa-birthday-cake mr-3 accent-color"></i> Age: 28</div> <div class="flex items-center"><i class="fas fa-map-marker-alt mr-3 accent-color"></i> Origin: Khulna, BD</div> <div class="flex items-center"><i class="fas fa-language mr-3 accent-color"></i> Languages: Bangla, English</div> <div class="flex items-center"><i class="fas fa-cogs mr-3 accent-color"></i> Skills: Web Design, Music, Video</div> </div> </div> </div> </div> </section> <!-- Portfolio Section --> <section id="portfolio" class="py-20"> <div class="container mx-auto px-6"> <h2 class="section-title">My Works</h2> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Featured Card --> <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg card-hover md:col-span-2 lg:col-span-1"> <img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="RADTL Website" class="w-full h-48 object-cover" data-lazy-src="https://placehold.co/600x400/1f2937/d1d5db?text=RADTL.com+Mockup"><noscript><img decoding="async" src="https://placehold.co/600x400/1f2937/d1d5db?text=RADTL.com+Mockup" alt="RADTL Website" class="w-full h-48 object-cover"></noscript> <div class="p-6"> <h3 class="font-bold text-xl mb-2 text-white">RADTL Website</h3> <p class="text-sm mb-4">Role: Full-site design & dev</p> <div class="flex flex-wrap gap-2 mb-4"> <span class="bg-gray-700 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">Sitejet</span> <span class="bg-gray-700 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">Real Estate</span> <span class="bg-gray-700 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">Responsive</span> </div> <a href="http://radtl.com" target="_blank" class="text-blue-400 hover:underline" rel="sponsored">View Project <i class="fas fa-arrow-right ml-1"></i></a> </div> </div> <!-- Other portfolio items can be added here --> <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg card-hover"> <img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Project Two" class="w-full h-48 object-cover" data-lazy-src="https://placehold.co/600x400/1f2937/d1d5db?text=Project+Two"><noscript><img decoding="async" src="https://placehold.co/600x400/1f2937/d1d5db?text=Project+Two" alt="Project Two" class="w-full h-48 object-cover"></noscript> <div class="p-6"> <h3 class="font-bold text-xl mb-2 text-white">Music Production</h3> <p class="text-sm mb-4">Role: Composer, Producer</p> <a href="#" class="text-blue-400 hover:underline">View Details <i class="fas fa-arrow-right ml-1"></i></a> </div> </div> <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg card-hover"> <img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Project Three" class="w-full h-48 object-cover" data-lazy-src="https://placehold.co/600x400/1f2937/d1d5db?text=Project+Three"><noscript><img decoding="async" src="https://placehold.co/600x400/1f2937/d1d5db?text=Project+Three" alt="Project Three" class="w-full h-48 object-cover"></noscript> <div class="p-6"> <h3 class="font-bold text-xl mb-2 text-white">YouTube Content</h3> <p class="text-sm mb-4">Role: Creator, Editor</p> <a href="#" class="text-blue-400 hover:underline">View Channel <i class="fas fa-arrow-right ml-1"></i></a> </div> </div> </div> </div> </section> <!-- Music Section --> <section id="music" class="py-20 bg-gray-800"> <div class="container mx-auto px-6"> <h2 class="section-title">Latest Releases</h2> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"> <div class="text-center card-hover"> <img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Khamoshi Album Art" class="rounded-lg shadow-lg w-full" data-lazy-src="https://placehold.co/300x300/1f2937/d1d5db?text=Khamoshi"><noscript><img decoding="async" src="https://placehold.co/300x300/1f2937/d1d5db?text=Khamoshi" alt="Khamoshi Album Art" class="rounded-lg shadow-lg w-full"></noscript> <h3 class="mt-4 text-lg font-semibold text-white">Khamoshi</h3> </div> <div class="text-center card-hover"> <img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Dil Ke Dastan Album Art" class="rounded-lg shadow-lg w-full" data-lazy-src="https://placehold.co/300x300/1f2937/d1d5db?text=Dil+Ke+Dastan"><noscript><img decoding="async" src="https://placehold.co/300x300/1f2937/d1d5db?text=Dil+Ke+Dastan" alt="Dil Ke Dastan Album Art" class="rounded-lg shadow-lg w-full"></noscript> <h3 class="mt-4 text-lg font-semibold text-white">Dil Ke Dastan</h3> </div> <div class="text-center card-hover"> <img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Yaadon Ki Barsaat Album Art" class="rounded-lg shadow-lg w-full" data-lazy-src="https://placehold.co/300x300/1f2937/d1d5db?text=Yaadon+Ki+Barsaat"><noscript><img decoding="async" src="https://placehold.co/300x300/1f2937/d1d5db?text=Yaadon+Ki+Barsaat" alt="Yaadon Ki Barsaat Album Art" class="rounded-lg shadow-lg w-full"></noscript> <h3 class="mt-4 text-lg font-semibold text-white">Yaadon Ki Barsaat</h3> </div> </div> <div class="text-center mt-12"> <a href="#" class="inline-block bg-accent hover:bg-blue-500 text-white font-bold py-3 px-8 rounded-lg transition-transform duration-300 hover:scale-105"> Listen on Spotify </a> </div> </div> </section> <!-- YouTube / Video Section --> <section id="videos" class="py-20"> <div class="container mx-auto px-6"> <h2 class="section-title">Videos</h2> <p class="text-center text-lg -mt-8 mb-12">Lyrical videos, music edits & more</p> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <div class="relative rounded-lg overflow-hidden card-hover"> <img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Video Thumbnail 1" class="w-full" data-lazy-src="https://placehold.co/600x338/1f2937/d1d5db?text=Video+1"><noscript><img decoding="async" src="https://placehold.co/600x338/1f2937/d1d5db?text=Video+1" alt="Video Thumbnail 1" class="w-full"></noscript> <div class="absolute inset-0 bg-black/40 flex items-center justify-center"> <i class="fas fa-play text-white text-5xl"></i> </div> </div> <div class="relative rounded-lg overflow-hidden card-hover"> <img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Video Thumbnail 2" class="w-full" data-lazy-src="https://placehold.co/600x338/1f2937/d1d5db?text=Video+2"><noscript><img decoding="async" src="https://placehold.co/600x338/1f2937/d1d5db?text=Video+2" alt="Video Thumbnail 2" class="w-full"></noscript> <div class="absolute inset-0 bg-black/40 flex items-center justify-center"> <i class="fas fa-play text-white text-5xl"></i> </div> </div> <div class="relative rounded-lg overflow-hidden card-hover"> <img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Video Thumbnail 3" class="w-full" data-lazy-src="https://placehold.co/600x338/1f2937/d1d5db?text=Video+3"><noscript><img decoding="async" src="https://placehold.co/600x338/1f2937/d1d5db?text=Video+3" alt="Video Thumbnail 3" class="w-full"></noscript> <div class="absolute inset-0 bg-black/40 flex items-center justify-center"> <i class="fas fa-play text-white text-5xl"></i> </div> </div> </div> </div> </section> <!-- Business Section --> <section id="business" class="py-20 bg-gray-800"> <div class="container mx-auto px-6 text-center"> <h2 class="section-title">Entrepreneurship</h2> <div class="max-w-md mx-auto bg-gray-900 p-8 rounded-lg shadow-lg"> <img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Anwar Poultry Farm Logo" class="mx-auto mb-4 rounded-full" data-lazy-src="https://placehold.co/150x150/111827/d1d5db?text=Logo"><noscript><img decoding="async" src="https://placehold.co/150x150/111827/d1d5db?text=Logo" alt="Anwar Poultry Farm Logo" class="mx-auto mb-4 rounded-full"></noscript> <h3 class="text-2xl font-bold text-white">Anwar Poultry Farm – Barisal</h3> <p class="mt-2">Owner & Manager</p> <p class="mt-4 text-sm">Highlighting achievements in business and agricultural management.</p> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="py-20"> <div class="container mx-auto px-6"> <h2 class="section-title">Contact Me</h2> <div class="flex flex-col md:flex-row gap-12"> <!-- Contact Form --> <div class="w-full md:w-1/2"> <textarea rows="5" class="w-full p-3 rounded-lg bg-gray-800 border border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea> <button type="submit" class="w-full bg-accent hover:bg-blue-500 text-white font-bold py-3 px-8 rounded-lg transition-transform duration-300 hover:scale-105"> Send Message </button> </div> <!-- Contact Info --> <div class="w-full md:w-1/2"> <p class="mb-6">Feel free to reach out to me for collaborations, projects, or just to say hello!</p> <div class="space-y-4"> <p><i class="fas fa-envelope mr-3 accent-color"></i> contact@radtl.com</p> <p><i class="fas fa-map-marker-alt mr-3 accent-color"></i> Uttara & Mirpur, Dhaka</p> </div> <div class="mt-6 flex space-x-4"> <a href="#" class="text-gray-400 hover:text-blue-400 text-2xl"><i class="fab fa-facebook-f"></i></a> <a href="#" class="text-gray-400 hover:text-blue-400 text-2xl"><i class="fab fa-youtube"></i></a> <a href="#" class="text-gray-400 hover:text-blue-400 text-2xl"><i class="fab fa-instagram"></i></a> <a href="#" class="text-gray-400 hover:text-blue-400 text-2xl"><i class="fab fa-twitter"></i></a> </div> <div class="mt-6 rounded-lg overflow-hidden"> <img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Map Location" class="w-full" data-lazy-src="https://placehold.co/600x300/1f2937/d1d5db?text=Google+Map+Location"><noscript><img decoding="async" src="https://placehold.co/600x300/1f2937/d1d5db?text=Google+Map+Location" alt="Map Location" class="w-full"></noscript> </div> </div> </div> </div> </section> <!-- Footer --> <footer class="bg-gray-800 py-6"> <div class="container mx-auto px-6 text-center text-gray-500"> <p>© 2025 Website Designed & Developed by Ariful Arnab</p> </div> </footer> <!-- Floating WhatsApp Button --> <a href="https://wa.me/your-whatsapp-number" target="_blank" class="fixed bottom-6 right-6 bg-green-500 hover:bg-green-600 text-white w-14 h-14 rounded-full flex items-center justify-center shadow-lg transition-transform duration-300 hover:scale-110" rel="sponsored"> <i class="fab fa-whatsapp text-3xl"></i> </a> <!-- JavaScript for Header Shadow and Mobile Menu --> document.addEventListener(‘DOMContentLoaded’, function() { const header = document.getElementById(‘header’); const mobileMenuButton = document.getElementById(‘mobile-menu-button’); const mobileMenu = document.getElementById(‘mobile-menu’); // Header shadow on scroll window.addEventListener(‘scroll’, () => { if (window.scrollY > 10) { header.classList.add(‘shadow-lg’, ‘shadow-blue-500/10’); } else { header.classList.remove(‘shadow-lg’, ‘shadow-blue-500/10’); } }); // Mobile menu toggle mobileMenuButton.addEventListener(‘click’, () => { mobileMenu.classList.toggle(‘hidden’); }); }); </p> JS Bin
