DEV Community: Mr Abdullah WebDev

Build a TikTok App Clone Using Only HTML and CSS 🎵

Mr Abdullah WebDev — Sat, 26 Apr 2025 11:12:58 +0000

Title:
Build a TikTok App Clone Using Only HTML and CSS 🎵

Description:
Curious about how TikTok’s mobile layout looks behind the scenes?

In this project, I recreated a simple TikTok app interface using only HTML and CSS — absolutely no JavaScript!
It's a perfect exercise for beginners who want to practice building mobile-first designs, navigation bars, video sections, and UI layouts.

🎵 Live Demo: Check out the full project here!

Feel free to customize it, add your own videos or styles, and make it even better!

Full source code and live demo are available at the link above.

Tags:

html #css #webdev #frontend #beginners #tiktokclone #uidesign

Call to Action:
If you found this project fun or helpful, please leave a ❤️ and drop a comment below!
I'd love to see your creative versions of this TikTok clone!

Instagram App Clone with Pure HTML and CSS 📸

Mr Abdullah WebDev — Sat, 26 Apr 2025 11:07:07 +0000

Title:
Create an Instagram App Clone with Pure HTML and CSS 📸

Description:
Ever wanted to build a mini version of the Instagram app?

In this project, I recreated a simple Instagram App UI using only HTML and CSS — no JavaScript required!
It's a great project for beginners who want to practice creating layouts, navigation bars, story sections, and post feeds using basic frontend skills.

📸 Live Demo: View the project here!

Feel free to explore the code, customize it, and even add your own creativity to the design!

Complete source code and live demo available at the link above.

Tags:

html #css #webdev #frontend #beginners #instagramclone #uidesign

Call to Action:
If you found this project inspiring or helpful, don't forget to ❤️ it and share your thoughts in the comments!
I'd love to see what creative changes you would make to this Instagram clone!

Build a Google Homepage Clone Using Only HTML and CSS 🚀

Mr Abdullah WebDev — Sat, 26 Apr 2025 11:01:16 +0000

Title:
Build a Google Homepage Clone Using Only HTML and CSS 🚀

Description:
Have you ever wondered how the iconic Google homepage is made?

In this project, I recreated Google's homepage using just HTML and CSS, without any JavaScript!
It's a perfect project for beginners to practice layout building, form handling, and responsive design basics.

🚀 Live Demo: Check it out here!

Try it yourself, modify it, and see how much you can customize!

Full code and live preview are available at the link above.

Tags:

html #css #webdev #frontend #beginners #tutorial #project

Call to Action:
If you enjoyed this project or found it helpful, don't forget to leave a ❤️ and comment below!
I'd love to see your own versions of this project!

ChatGPT Homepage Clone Using HTML & CSS – Clean & Fully Responsive🔥

Mr Abdullah WebDev — Sat, 26 Apr 2025 10:53:00 +0000

modern UI of one of the most popular AI platforms today. A great project for improving layout structure, button styling, and typography.

🛠 Built using:

HTML for structure

CSS Flexbox for layout

Responsive design that works on all devices

Perfect for beginners looking to improve front-end skills by cloning real-world websites!

Let me know your thoughts and follow for more cool projects like this 🔥

ChatGPTClone #HTMLCSS #LandingPageClone #FrontendDevelopment #WebDesign #MinimalUI #ResponsiveWebDesign #CodingProjects #LearnToCode #WebDevelopment

Code https://codepen.io/Abdullah-Web/pen/NPKwXod

🚀 ChatGPT Clone – Your Own AI Chat Assistant

Mr Abdullah WebDev — Sat, 26 Apr 2025 10:48:34 +0000

I created a ChatGPT Clone with a clean UI and smooth chat experience! 🌟 Built using HTML, CSS, and JavaScript. Check out the live demo here 👉 https://codepen.io/Abdullah-Web/pen/qEEjeXJ Would love your feedback! 💬

🤖 New Chatbot — Lightweight and Interactive

Mr Abdullah WebDev — Sat, 26 Apr 2025 10:44:39 +0000

I built a lightweight chatbot that anyone can use and customize for free! 🎯 You can turn it into your personal assistant, customer support bot, or add it to your own projects. Made with pure HTML, CSS, and JavaScript. Live Demo & Code 👉 https://codepen.io/Abdullah-Web/pen/JooJgWB Feel free to use, modify, and create your own version! 🚀

🖥️ WordPress Dashboard Clone — Clean & Responsive

Mr Abdullah WebDev — Sat, 26 Apr 2025 10:43:21 +0000

I recreated a WordPress-style dashboard using pure HTML, CSS, and a bit of JavaScript! 🎨 Perfect for admin panels, CMS systems, or personal projects. Fully customizable and mobile-responsive design. Live Demo & Code 👉 https://codepen.io/Abdullah-Web/pen/oggwKza Feel free to use it, modify it, and build your own admin systems! 🚀

YouTube Clone Built with HTML & CSS – Add It to Your Own Website!

Mr Abdullah WebDev — Sat, 26 Apr 2025 10:40:54 +0000

I created a fully functional YouTube homepage clone using just HTML and CSS! This project helped me improve my front-end development skills and understand how layout, responsiveness, and design come together. If you’re learning web development or want to use a cool template for your own site, check it out!

👉 Coded from scratch 👉 Fully responsive design 👉 Perfect for practice or portfolio use

Let me know what you think in the comments and don’t forget to like & follow for more projects like this!

YouTubeClone #HTMLCSS #WebDevelopment #FrontendProject #CodingJourney #WebDesign #DeveloperLife #ResponsiveDesign #CloneProject #CodeNewbie #100DaysOfCode #LearnToCode

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube</title>
<script src="https://cdn.tailwindcss.com/3.4.16"></script>
<script>tailwind.config={theme:{extend:{colors:{primary:'#ff0000',secondary:'#606060'},borderRadius:{'none':'0px','sm':'4px',DEFAULT:'8px','md':'12px','lg':'16px','xl':'20px','2xl':'24px','3xl':'32px','full':'9999px','button':'8px'}}}}</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css" rel="stylesheet">
<style>
:where([class^="ri-"])::before { content: "\f3c2"; }
body {
font-family: 'Roboto', sans-serif;
}
.video-duration {
right: 8px;
bottom: 8px;
}
.sidebar-scrollbar::-webkit-scrollbar {
width: 8px;
}
.sidebar-scrollbar::-webkit-scrollbar-thumb {
background-color: #cccccc;
border-radius: 4px;
}
.sidebar-scrollbar::-webkit-scrollbar-track {
background-color: transparent;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.category-scrollbar::-webkit-scrollbar {
height: 0;
display: none;
}
</style>
</head>
<body class="bg-white">
<!-- Fixed Top Navigation Bar -->
<header class="fixed top-0 left-0 w-full h-14 bg-white border-b border-gray-200 flex items-center justify-between px-4 z-50">
<!-- Left Section - Logo -->
<div class="flex items-center">
<button class="w-10 h-10 flex items-center justify-center mr-4">
<i class="ri-menu-line ri-lg"></i>
</button>
<a href="#" class="flex items-center">
<img src="https://static.readdy.ai/image/3fe41b039d52eef3362db9f06e9e1e40/208c4e1273eb879fb258c45906a37c01.jpeg" alt="YouTube Logo" class="h-6">
</a>
</div>
<!-- Center Section - Search Bar -->
<div class="flex-1 max-w-xl mx-4">
<div class="flex">
<div class="relative flex-1">
<input type="text" placeholder="Search" class="w-full h-10 pl-4 pr-10 border border-gray-300 rounded-l-button focus:outline-none focus:border-blue-500">
<div class="absolute right-2 top-1/2 transform -translate-y-1/2 w-8 h-8 flex items-center justify-center text-gray-500">
<i class="ri-search-line ri-lg"></i>
</div>
</div>
<button class="w-14 h-10 bg-gray-100 border border-l-0 border-gray-300 rounded-r-button flex items-center justify-center !rounded-button">
<i class="ri-search-line ri-lg"></i>
</button>
<button class="w-10 h-10 ml-2 bg-gray-100 rounded-full flex items-center justify-center">
<i class="ri-mic-line ri-lg"></i>
</button>
</div>
</div>
<!-- Right Section - Actions -->
<div class="flex items-center">
<button class="w-10 h-10 mx-2 flex items-center justify-center">
<i class="ri-video-add-line ri-lg"></i>
</button>
<button class="w-10 h-10 mx-2 flex items-center justify-center relative">
<i class="ri-notification-line ri-lg"></i>
<span class="absolute top-1 right-1 bg-primary text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">3</span>
</button>
<button class="w-8 h-8 mx-2 overflow-hidden rounded-full">
<img src="https://public.readdy.ai/ai/img_res/967231341ca3cba6e0a7b835976f402b.jpg" alt="User Profile" class="w-full h-full object-cover">
</button>
</div>
</header>
<!-- Sidebar Navigation -->
<aside class="fixed top-14 left-0 w-60 h-[calc(100vh-56px)] bg-white overflow-y-auto sidebar-scrollbar z-40">
<div class="py-3">
<!-- Main Navigation -->
<div class="border-b border-gray-200 pb-3">
<a href="#" class="flex items-center px-6 py-2 bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-home-fill ri-lg text-primary"></i>
</div>
<span class="text-sm font-medium">Home</span>
</a>
<a href="https://readdy.ai/home/baeed544-39b8-49fe-bd91-1dfc375a95f3/08439bab-59c1-4cb2-8755-13a2b4c111e8" data-readdy="true" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-play-circle-line ri-lg"></i>
</div>
<span class="text-sm">Shorts</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-subscription-line ri-lg"></i>
</div>
<span class="text-sm">Subscriptions</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-folder-video-line ri-lg"></i>
</div>
<span class="text-sm">Library</span>
</a>
</div>
<!-- Subscriptions -->
<div class="py-3 border-b border-gray-200">
<h3 class="px-6 py-1 text-sm font-medium">Subscriptions</h3>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/40d0452ed529ed25f4ffb22f7c75bc2b.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Tech Insider</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/07a23356187550fcc1e1eb0a04847e76.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Music Vibes</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/741bb530ab86b390a39017dd0d960d00.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">GamersHub</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/2c2d9a83e03f1fe1fa921ea2b2dd63df.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Cooking Masters</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/202034341bb7bd86eb31be539ad9083d.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Science Now</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/3baa2eba167a5a3091ed6ccf75db05de.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Fitness Pro</span>
</a>
</div>
<!-- Explore -->
<div class="py-3 border-b border-gray-200">
<h3 class="px-6 py-1 text-sm font-medium">Explore</h3>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-fire-line ri-lg"></i>
</div>
<span class="text-sm">Trending</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-music-line ri-lg"></i>
</div>
<span class="text-sm">Music</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-gamepad-line ri-lg"></i>
</div>
<span class="text-sm">Gaming</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-newspaper-line ri-lg"></i>
</div>
<span class="text-sm">News</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-trophy-line ri-lg"></i>
</div>
<span class="text-sm">Sports</span>
</a>
</div>
<!-- More from YouTube -->
<div class="py-3">
<h3 class="px-6 py-1 text-sm font-medium">More from YouTube</h3>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-youtube-fill ri-lg text-primary"></i>
</div>
<span class="text-sm">YouTube Premium</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-film-line ri-lg"></i>
</div>
<span class="text-sm">YouTube Movies</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-live-line ri-lg"></i>
</div>
<span class="text-sm">Live</span>
</a>
</div>
</div>
</aside>
<!-- Main Content Area -->
<main class="pt-14 pl-60">
<!-- Video Categories -->
<div class="sticky top-14 bg-white z-30 border-b border-gray-200">
<div class="overflow-x-auto category-scrollbar whitespace-nowrap py-3 px-6">
<button class="px-3 py-1.5 mr-3 bg-black text-white text-sm rounded-full !rounded-button whitespace-nowrap">All</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Music</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Gaming</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">News</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Live</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Podcasts</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Technology</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Comedy</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Sports</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Education</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Travel</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Cooking</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Fitness</button>
</div>
</div>
<!-- Video Grid -->
<div class="grid grid-cols-3 gap-4 p-6">
<!-- Video 1 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/caa91af20639d03e17ea6b53df6d0d13.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">12:34</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/cbe1aabef20ff5dacb7e29ca851b7d78.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Ultimate Review: The New iPhone 15 Pro - Everything You Need to Know!</h3>
<p class="text-xs text-gray-600 mt-1">TechReviewPro</p>
<p class="text-xs text-gray-600">1.2M views • 3 days ago</p>
</div>
</div>
</div>
<!-- Video 2 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/9a8b878a3d47c2ced4a5a28fe6878881.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">18:42</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/0d8a5d3837ead8ade97086a15104dbb2.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">How to Make the Perfect Homemade Pasta - Simple Italian Recipes</h3>
<p class="text-xs text-gray-600 mt-1">Cooking With Julia</p>
<p class="text-xs text-gray-600">845K views • 1 week ago</p>
</div>
</div>
</div>
<!-- Video 3 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/665fed089fe5447f3fdb7779ca3b3eeb.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">2:05:18</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/2fa8335fe08764995f6a22ea738ae501.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">LIVE: Epic Fortnite Tournament - Road to Champion Division!</h3>
<p class="text-xs text-gray-600 mt-1">GameMaster Pro</p>
<p class="text-xs text-gray-600">325K views • Streamed 2 days ago</p>
</div>
</div>
</div>
<!-- Video 4 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/e54a11aa3c8cc57a2e04e86245cee9a5.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">4:26</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/4e50f27126fb6b0b065e326680cf7a37.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Midnight Dreams - Official Music Video (New Release 2025)</h3>
<p class="text-xs text-gray-600 mt-1">Horizon Band</p>
<p class="text-xs text-gray-600">2.8M views • 5 days ago</p>
</div>
</div>
</div>
<!-- Video 5 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/d2f9c0ce7acc81de9cda0274bb8fb267.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">28:15</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/694b82b0d4580a7ea853db75d77fc6e5.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">30-Minute Full Body HIIT Workout - No Equipment Needed!</h3>
<p class="text-xs text-gray-600 mt-1">FitLife with Sarah</p>
<p class="text-xs text-gray-600">1.5M views • 2 weeks ago</p>
</div>
</div>
</div>
<!-- Video 6 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/3af3baaffd7f8abd834738f706ebec7c.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">22:47</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/64d91d3579d178a1e65cda9072568e95.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Exploring Hidden Gems in Bali - Ultimate Travel Guide 2025</h3>
<p class="text-xs text-gray-600 mt-1">Wanderlust Adventures</p>
<p class="text-xs text-gray-600">687K views • 3 weeks ago</p>
</div>
</div>
</div>
<!-- Video 7 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/418779e83c6175b6f60a8416c5ca6c88.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">15:32</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/df5d6526aeeffd1645e5c5b122527f54.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">10 Mind-Blowing Science Experiments You Can Do At Home</h3>
<p class="text-xs text-gray-600 mt-1">Science Explained</p>
<p class="text-xs text-gray-600">4.2M views • 1 month ago</p>
</div>
</div>
</div>
<!-- Video 8 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/1fb43319676bca2995f7ff9e17641672.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">8:53</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/762fe699ca8f15deb9ee6c864d8c0bf4.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">When Your Boss Catches You Sleeping at Work - Comedy Sketch</h3>
<p class="text-xs text-gray-600 mt-1">Laugh Factory</p>
<p class="text-xs text-gray-600">7.5M views • 2 months ago</p>
</div>
</div>
</div>
<!-- Video 9 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/d7b54fea197dab55b435b7efb5d782bb.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">10:05</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/f40a2809746bd770744c44f64699237c.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Breaking: Major Technology Breakthrough Announced - What This Means For The Future</h3>
<p class="text-xs text-gray-600 mt-1">Global News Network</p>
<p class="text-xs text-gray-600">1.1M views • 12 hours ago</p>
</div>
</div>
</div>
<!-- Video 10 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/904411de890501bd9af69d849561abfc.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">14:22</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/9d4ed7a29bd08af9350052bf0db777f4.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Unboxing the PlayStation 6 - First Look and Impressions!</h3>
<p class="text-xs text-gray-600 mt-1">Tech Unboxed</p>
<p class="text-xs text-gray-600">3.4M views • 1 day ago</p>
</div>
</div>
</div>
<!-- Video 11 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/4ee95e1d7da4131afea84038a8c6ca69.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">42:18</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/8d1688e15e9c0dc980543360027a8e18.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">The Secret Life of Arctic Wolves - Full Documentary 2025</h3>
<p class="text-xs text-gray-600 mt-1">Nature Discoveries</p>
<p class="text-xs text-gray-600">2.3M views • 2 weeks ago</p>
</div>
</div>
</div>
<!-- Video 12 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/e5431f695bdd55077cf6c73f181bdbe6.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">1:12:45</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/538a38ef4e7d67607e1d752002a534fb.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Interview with World-Famous Entrepreneur: Secrets to Success and Future Plans</h3>
<p class="text-xs text-gray-600 mt-1">The Deep Dive Podcast</p>
<p class="text-xs text-gray-600">895K views • 4 days ago</p>
</div>
</div>
</div>
</div>
</main>
<script>
// Infinite scroll simulation
window.addEventListener('scroll', function() {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 500) {
// Would load more content in a real implementation
console.log("Load more content");
}
});
// Tooltip functionality
const buttons = document.querySelectorAll('button');
buttons.forEach(button => {
button.addEventListener('mouseenter', function(e) {
// Would show tooltip in a real implementation
});
button.addEventListener('mouseleave', function(e) {
// Would hide tooltip in a real implementation
});
});
</script>
</body>
</html>
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube</title>
<script src="https://cdn.tailwindcss.com/3.4.16"></script>
<script>tailwind.config={theme:{extend:{colors:{primary:'#ff0000',secondary:'#606060'},borderRadius:{'none':'0px','sm':'4px',DEFAULT:'8px','md':'12px','lg':'16px','xl':'20px','2xl':'24px','3xl':'32px','full':'9999px','button':'8px'}}}}</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css" rel="stylesheet">
<style>
:where([class^="ri-"])::before { content: "\f3c2"; }
body {
font-family: 'Roboto', sans-serif;
}
.video-duration {
right: 8px;
bottom: 8px;
}
.sidebar-scrollbar::-webkit-scrollbar {
width: 8px;
}
.sidebar-scrollbar::-webkit-scrollbar-thumb {
background-color: #cccccc;
border-radius: 4px;
}
.sidebar-scrollbar::-webkit-scrollbar-track {
background-color: transparent;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.category-scrollbar::-webkit-scrollbar {
height: 0;
display: none;
}
</style>
</head>
<body class="bg-white">
<!-- Fixed Top Navigation Bar -->
<header class="fixed top-0 left-0 w-full h-14 bg-white border-b border-gray-200 flex items-center justify-between px-4 z-50">
<!-- Left Section - Logo -->
<div class="flex items-center">
<button class="w-10 h-10 flex items-center justify-center mr-4">
<i class="ri-menu-line ri-lg"></i>
</button>
<a href="#" class="flex items-center">
<img src="https://static.readdy.ai/image/3fe41b039d52eef3362db9f06e9e1e40/208c4e1273eb879fb258c45906a37c01.jpeg" alt="YouTube Logo" class="h-6">
</a>
</div>
<!-- Center Section - Search Bar -->
<div class="flex-1 max-w-xl mx-4">
<div class="flex">
<div class="relative flex-1">
<input type="text" placeholder="Search" class="w-full h-10 pl-4 pr-10 border border-gray-300 rounded-l-button focus:outline-none focus:border-blue-500">
<div class="absolute right-2 top-1/2 transform -translate-y-1/2 w-8 h-8 flex items-center justify-center text-gray-500">
<i class="ri-search-line ri-lg"></i>
</div>
</div>
<button class="w-14 h-10 bg-gray-100 border border-l-0 border-gray-300 rounded-r-button flex items-center justify-center !rounded-button">
<i class="ri-search-line ri-lg"></i>
</button>
<button class="w-10 h-10 ml-2 bg-gray-100 rounded-full flex items-center justify-center">
<i class="ri-mic-line ri-lg"></i>
</button>
</div>
</div>
<!-- Right Section - Actions -->
<div class="flex items-center">
<button class="w-10 h-10 mx-2 flex items-center justify-center">
<i class="ri-video-add-line ri-lg"></i>
</button>
<button class="w-10 h-10 mx-2 flex items-center justify-center relative">
<i class="ri-notification-line ri-lg"></i>
<span class="absolute top-1 right-1 bg-primary text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">3</span>
</button>
<button class="w-8 h-8 mx-2 overflow-hidden rounded-full">
<img src="https://public.readdy.ai/ai/img_res/967231341ca3cba6e0a7b835976f402b.jpg" alt="User Profile" class="w-full h-full object-cover">
</button>
</div>
</header>
<!-- Sidebar Navigation -->
<aside class="fixed top-14 left-0 w-60 h-[calc(100vh-56px)] bg-white overflow-y-auto sidebar-scrollbar z-40">
<div class="py-3">
<!-- Main Navigation -->
<div class="border-b border-gray-200 pb-3">
<a href="#" class="flex items-center px-6 py-2 bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-home-fill ri-lg text-primary"></i>
</div>
<span class="text-sm font-medium">Home</span>
</a>
<a href="https://readdy.ai/home/baeed544-39b8-49fe-bd91-1dfc375a95f3/08439bab-59c1-4cb2-8755-13a2b4c111e8" data-readdy="true" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-play-circle-line ri-lg"></i>
</div>
<span class="text-sm">Shorts</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-subscription-line ri-lg"></i>
</div>
<span class="text-sm">Subscriptions</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-folder-video-line ri-lg"></i>
</div>
<span class="text-sm">Library</span>
</a>
</div>
<!-- Subscriptions -->
<div class="py-3 border-b border-gray-200">
<h3 class="px-6 py-1 text-sm font-medium">Subscriptions</h3>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/40d0452ed529ed25f4ffb22f7c75bc2b.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Tech Insider</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/07a23356187550fcc1e1eb0a04847e76.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Music Vibes</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/741bb530ab86b390a39017dd0d960d00.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">GamersHub</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/2c2d9a83e03f1fe1fa921ea2b2dd63df.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Cooking Masters</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/202034341bb7bd86eb31be539ad9083d.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Science Now</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/3baa2eba167a5a3091ed6ccf75db05de.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Fitness Pro</span>
</a>
</div>
<!-- Explore -->
<div class="py-3 border-b border-gray-200">
<h3 class="px-6 py-1 text-sm font-medium">Explore</h3>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-fire-line ri-lg"></i>
</div>
<span class="text-sm">Trending</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-music-line ri-lg"></i>
</div>
<span class="text-sm">Music</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-gamepad-line ri-lg"></i>
</div>
<span class="text-sm">Gaming</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-newspaper-line ri-lg"></i>
</div>
<span class="text-sm">News</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-trophy-line ri-lg"></i>
</div>
<span class="text-sm">Sports</span>
</a>
</div>
<!-- More from YouTube -->
<div class="py-3">
<h3 class="px-6 py-1 text-sm font-medium">More from YouTube</h3>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-youtube-fill ri-lg text-primary"></i>
</div>
<span class="text-sm">YouTube Premium</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-film-line ri-lg"></i>
</div>
<span class="text-sm">YouTube Movies</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-live-line ri-lg"></i>
</div>
<span class="text-sm">Live</span>
</a>
</div>
</div>
</aside>
<!-- Main Content Area -->
<main class="pt-14 pl-60">
<!-- Video Categories -->
<div class="sticky top-14 bg-white z-30 border-b border-gray-200">
<div class="overflow-x-auto category-scrollbar whitespace-nowrap py-3 px-6">
<button class="px-3 py-1.5 mr-3 bg-black text-white text-sm rounded-full !rounded-button whitespace-nowrap">All</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Music</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Gaming</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">News</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Live</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Podcasts</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Technology</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Comedy</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Sports</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Education</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Travel</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Cooking</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Fitness</button>
</div>
</div>
<!-- Video Grid -->
<div class="grid grid-cols-3 gap-4 p-6">
<!-- Video 1 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/caa91af20639d03e17ea6b53df6d0d13.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">12:34</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/cbe1aabef20ff5dacb7e29ca851b7d78.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Ultimate Review: The New iPhone 15 Pro - Everything You Need to Know!</h3>
<p class="text-xs text-gray-600 mt-1">TechReviewPro</p>
<p class="text-xs text-gray-600">1.2M views • 3 days ago</p>
</div>
</div>
</div>
<!-- Video 2 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/9a8b878a3d47c2ced4a5a28fe6878881.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">18:42</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/0d8a5d3837ead8ade97086a15104dbb2.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">How to Make the Perfect Homemade Pasta - Simple Italian Recipes</h3>
<p class="text-xs text-gray-600 mt-1">Cooking With Julia</p>
<p class="text-xs text-gray-600">845K views • 1 week ago</p>
</div>
</div>
</div>
<!-- Video 3 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/665fed089fe5447f3fdb7779ca3b3eeb.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">2:05:18</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/2fa8335fe08764995f6a22ea738ae501.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">LIVE: Epic Fortnite Tournament - Road to Champion Division!</h3>
<p class="text-xs text-gray-600 mt-1">GameMaster Pro</p>
<p class="text-xs text-gray-600">325K views • Streamed 2 days ago</p>
</div>
</div>
</div>
<!-- Video 4 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/e54a11aa3c8cc57a2e04e86245cee9a5.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">4:26</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/4e50f27126fb6b0b065e326680cf7a37.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Midnight Dreams - Official Music Video (New Release 2025)</h3>
<p class="text-xs text-gray-600 mt-1">Horizon Band</p>
<p class="text-xs text-gray-600">2.8M views • 5 days ago</p>
</div>
</div>
</div>
<!-- Video 5 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/d2f9c0ce7acc81de9cda0274bb8fb267.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">28:15</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/694b82b0d4580a7ea853db75d77fc6e5.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">30-Minute Full Body HIIT Workout - No Equipment Needed!</h3>
<p class="text-xs text-gray-600 mt-1">FitLife with Sarah</p>
<p class="text-xs text-gray-600">1.5M views • 2 weeks ago</p>
</div>
</div>
</div>
<!-- Video 6 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/3af3baaffd7f8abd834738f706ebec7c.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">22:47</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/64d91d3579d178a1e65cda9072568e95.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Exploring Hidden Gems in Bali - Ultimate Travel Guide 2025</h3>
<p class="text-xs text-gray-600 mt-1">Wanderlust Adventures</p>
<p class="text-xs text-gray-600">687K views • 3 weeks ago</p>
</div>
</div>
</div>
<!-- Video 7 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/418779e83c6175b6f60a8416c5ca6c88.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">15:32</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/df5d6526aeeffd1645e5c5b122527f54.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">10 Mind-Blowing Science Experiments You Can Do At Home</h3>
<p class="text-xs text-gray-600 mt-1">Science Explained</p>
<p class="text-xs text-gray-600">4.2M views • 1 month ago</p>
</div>
</div>
</div>
<!-- Video 8 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/1fb43319676bca2995f7ff9e17641672.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">8:53</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/762fe699ca8f15deb9ee6c864d8c0bf4.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">When Your Boss Catches You Sleeping at Work - Comedy Sketch</h3>
<p class="text-xs text-gray-600 mt-1">Laugh Factory</p>
<p class="text-xs text-gray-600">7.5M views • 2 months ago</p>
</div>
</div>
</div>
<!-- Video 9 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/d7b54fea197dab55b435b7efb5d782bb.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">10:05</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/f40a2809746bd770744c44f64699237c.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Breaking: Major Technology Breakthrough Announced - What This Means For The Future</h3>
<p class="text-xs text-gray-600 mt-1">Global News Network</p>
<p class="text-xs text-gray-600">1.1M views • 12 hours ago</p>
</div>
</div>
</div>
<!-- Video 10 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/904411de890501bd9af69d849561abfc.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">14:22</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/9d4ed7a29bd08af9350052bf0db777f4.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Unboxing the PlayStation 6 - First Look and Impressions!</h3>
<p class="text-xs text-gray-600 mt-1">Tech Unboxed</p>
<p class="text-xs text-gray-600">3.4M views • 1 day ago</p>
</div>
</div>
</div>
<!-- Video 11 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/4ee95e1d7da4131afea84038a8c6ca69.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">42:18</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/8d1688e15e9c0dc980543360027a8e18.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">The Secret Life of Arctic Wolves - Full Documentary 2025</h3>
<p class="text-xs text-gray-600 mt-1">Nature Discoveries</p>
<p class="text-xs text-gray-600">2.3M views • 2 weeks ago</p>
</div>
</div>
</div>
<!-- Video 12 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/e5431f695bdd55077cf6c73f181bdbe6.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">1:12:45</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/538a38ef4e7d67607e1d752002a534fb.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Interview with World-Famous Entrepreneur: Secrets to Success and Future Plans</h3>
<p class="text-xs text-gray-600 mt-1">The Deep Dive Podcast</p>
<p class="text-xs text-gray-600">895K views • 4 days ago</p>
</div>
</div>
</div>
</div>
</main>
<script>
// Infinite scroll simulation
window.addEventListener('scroll', function() {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 500) {
// Would load more content in a real implementation
console.log("Load more content");
}
});
// Tooltip functionality
const buttons = document.querySelectorAll('button');
buttons.forEach(button => {
button.addEventListener('mouseenter', function(e) {
// Would show tooltip in a real implementation
});
button.addEventListener('mouseleave', function(e) {
// Would hide tooltip in a real implementation
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube</title>
<script src="https://cdn.tailwindcss.com/3.4.16"></script>
<script>tailwind.config={theme:{extend:{colors:{primary:'#ff0000',secondary:'#606060'},borderRadius:{'none':'0px','sm':'4px',DEFAULT:'8px','md':'12px','lg':'16px','xl':'20px','2xl':'24px','3xl':'32px','full':'9999px','button':'8px'}}}}</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css" rel="stylesheet">
<style>
:where([class^="ri-"])::before { content: "\f3c2"; }
body {
font-family: 'Roboto', sans-serif;
}
.video-duration {
right: 8px;
bottom: 8px;
}
.sidebar-scrollbar::-webkit-scrollbar {
width: 8px;
}
.sidebar-scrollbar::-webkit-scrollbar-thumb {
background-color: #cccccc;
border-radius: 4px;
}
.sidebar-scrollbar::-webkit-scrollbar-track {
background-color: transparent;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.category-scrollbar::-webkit-scrollbar {
height: 0;
display: none;
}
</style>
</head>
<body class="bg-white">
<!-- Fixed Top Navigation Bar -->
<header class="fixed top-0 left-0 w-full h-14 bg-white border-b border-gray-200 flex items-center justify-between px-4 z-50">
<!-- Left Section - Logo -->
<div class="flex items-center">
<button class="w-10 h-10 flex items-center justify-center mr-4">
<i class="ri-menu-line ri-lg"></i>
</button>
<a href="#" class="flex items-center">
<img src="https://static.readdy.ai/image/3fe41b039d52eef3362db9f06e9e1e40/208c4e1273eb879fb258c45906a37c01.jpeg" alt="YouTube Logo" class="h-6">
</a>
</div>
<!-- Center Section - Search Bar -->
<div class="flex-1 max-w-xl mx-4">
<div class="flex">
<div class="relative flex-1">
<input type="text" placeholder="Search" class="w-full h-10 pl-4 pr-10 border border-gray-300 rounded-l-button focus:outline-none focus:border-blue-500">
<div class="absolute right-2 top-1/2 transform -translate-y-1/2 w-8 h-8 flex items-center justify-center text-gray-500">
<i class="ri-search-line ri-lg"></i>
</div>
</div>
<button class="w-14 h-10 bg-gray-100 border border-l-0 border-gray-300 rounded-r-button flex items-center justify-center !rounded-button">
<i class="ri-search-line ri-lg"></i>
</button>
<button class="w-10 h-10 ml-2 bg-gray-100 rounded-full flex items-center justify-center">
<i class="ri-mic-line ri-lg"></i>
</button>
</div>
</div>
<!-- Right Section - Actions -->
<div class="flex items-center">
<button class="w-10 h-10 mx-2 flex items-center justify-center">
<i class="ri-video-add-line ri-lg"></i>
</button>
<button class="w-10 h-10 mx-2 flex items-center justify-center relative">
<i class="ri-notification-line ri-lg"></i>
<span class="absolute top-1 right-1 bg-primary text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">3</span>
</button>
<button class="w-8 h-8 mx-2 overflow-hidden rounded-full">
<img src="https://public.readdy.ai/ai/img_res/967231341ca3cba6e0a7b835976f402b.jpg" alt="User Profile" class="w-full h-full object-cover">
</button>
</div>
</header>
<!-- Sidebar Navigation -->
<aside class="fixed top-14 left-0 w-60 h-[calc(100vh-56px)] bg-white overflow-y-auto sidebar-scrollbar z-40">
<div class="py-3">
<!-- Main Navigation -->
<div class="border-b border-gray-200 pb-3">
<a href="#" class="flex items-center px-6 py-2 bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-home-fill ri-lg text-primary"></i>
</div>
<span class="text-sm font-medium">Home</span>
</a>
<a href="https://readdy.ai/home/baeed544-39b8-49fe-bd91-1dfc375a95f3/08439bab-59c1-4cb2-8755-13a2b4c111e8" data-readdy="true" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-play-circle-line ri-lg"></i>
</div>
<span class="text-sm">Shorts</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-subscription-line ri-lg"></i>
</div>
<span class="text-sm">Subscriptions</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-folder-video-line ri-lg"></i>
</div>
<span class="text-sm">Library</span>
</a>
</div>
<!-- Subscriptions -->
<div class="py-3 border-b border-gray-200">
<h3 class="px-6 py-1 text-sm font-medium">Subscriptions</h3>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/40d0452ed529ed25f4ffb22f7c75bc2b.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Tech Insider</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/07a23356187550fcc1e1eb0a04847e76.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Music Vibes</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/741bb530ab86b390a39017dd0d960d00.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">GamersHub</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/2c2d9a83e03f1fe1fa921ea2b2dd63df.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Cooking Masters</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/202034341bb7bd86eb31be539ad9083d.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Science Now</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/3baa2eba167a5a3091ed6ccf75db05de.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Fitness Pro</span>
</a>
</div>
<!-- Explore -->
<div class="py-3 border-b border-gray-200">
<h3 class="px-6 py-1 text-sm font-medium">Explore</h3>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-fire-line ri-lg"></i>
</div>
<span class="text-sm">Trending</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-music-line ri-lg"></i>
</div>
<span class="text-sm">Music</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-gamepad-line ri-lg"></i>
</div>
<span class="text-sm">Gaming</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-newspaper-line ri-lg"></i>
</div>
<span class="text-sm">News</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-trophy-line ri-lg"></i>
</div>
<span class="text-sm">Sports</span>
</a>
</div>
<!-- More from YouTube -->
<div class="py-3">
<h3 class="px-6 py-1 text-sm font-medium">More from YouTube</h3>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-youtube-fill ri-lg text-primary"></i>
</div>
<span class="text-sm">YouTube Premium</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-film-line ri-lg"></i>
</div>
<span class="text-sm">YouTube Movies</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-live-line ri-lg"></i>
</div>
<span class="text-sm">Live</span>
</a>
</div>
</div>
</aside>
<!-- Main Content Area -->
<main class="pt-14 pl-60">
<!-- Video Categories -->
<div class="sticky top-14 bg-white z-30 border-b border-gray-200">
<div class="overflow-x-auto category-scrollbar whitespace-nowrap py-3 px-6">
<button class="px-3 py-1.5 mr-3 bg-black text-white text-sm rounded-full !rounded-button whitespace-nowrap">All</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Music</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Gaming</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">News</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Live</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Podcasts</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Technology</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Comedy</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Sports</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Education</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Travel</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Cooking</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Fitness</button>
</div>
</div>
<!-- Video Grid -->
<div class="grid grid-cols-3 gap-4 p-6">
<!-- Video 1 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/caa91af20639d03e17ea6b53df6d0d13.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">12:34</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/cbe1aabef20ff5dacb7e29ca851b7d78.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Ultimate Review: The New iPhone 15 Pro - Everything You Need to Know!</h3>
<p class="text-xs text-gray-600 mt-1">TechReviewPro</p>
<p class="text-xs text-gray-600">1.2M views • 3 days ago</p>
</div>
</div>
</div>
<!-- Video 2 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/9a8b878a3d47c2ced4a5a28fe6878881.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">18:42</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/0d8a5d3837ead8ade97086a15104dbb2.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">How to Make the Perfect Homemade Pasta - Simple Italian Recipes</h3>
<p class="text-xs text-gray-600 mt-1">Cooking With Julia</p>
<p class="text-xs text-gray-600">845K views • 1 week ago</p>
</div>
</div>
</div>
<!-- Video 3 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/665fed089fe5447f3fdb7779ca3b3eeb.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">2:05:18</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/2fa8335fe08764995f6a22ea738ae501.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">LIVE: Epic Fortnite Tournament - Road to Champion Division!</h3>
<p class="text-xs text-gray-600 mt-1">GameMaster Pro</p>
<p class="text-xs text-gray-600">325K views • Streamed 2 days ago</p>
</div>
</div>
</div>
<!-- Video 4 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/e54a11aa3c8cc57a2e04e86245cee9a5.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">4:26</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/4e50f27126fb6b0b065e326680cf7a37.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Midnight Dreams - Official Music Video (New Release 2025)</h3>
<p class="text-xs text-gray-600 mt-1">Horizon Band</p>
<p class="text-xs text-gray-600">2.8M views • 5 days ago</p>
</div>
</div>
</div>
<!-- Video 5 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/d2f9c0ce7acc81de9cda0274bb8fb267.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">28:15</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/694b82b0d4580a7ea853db75d77fc6e5.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">30-Minute Full Body HIIT Workout - No Equipment Needed!</h3>
<p class="text-xs text-gray-600 mt-1">FitLife with Sarah</p>
<p class="text-xs text-gray-600">1.5M views • 2 weeks ago</p>
</div>
</div>
</div>
<!-- Video 6 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/3af3baaffd7f8abd834738f706ebec7c.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">22:47</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/64d91d3579d178a1e65cda9072568e95.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Exploring Hidden Gems in Bali - Ultimate Travel Guide 2025</h3>
<p class="text-xs text-gray-600 mt-1">Wanderlust Adventures</p>
<p class="text-xs text-gray-600">687K views • 3 weeks ago</p>
</div>
</div>
</div>
<!-- Video 7 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/418779e83c6175b6f60a8416c5ca6c88.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">15:32</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/df5d6526aeeffd1645e5c5b122527f54.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">10 Mind-Blowing Science Experiments You Can Do At Home</h3>
<p class="text-xs text-gray-600 mt-1">Science Explained</p>
<p class="text-xs text-gray-600">4.2M views • 1 month ago</p>
</div>
</div>
</div>
<!-- Video 8 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/1fb43319676bca2995f7ff9e17641672.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">8:53</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/762fe699ca8f15deb9ee6c864d8c0bf4.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">When Your Boss Catches You Sleeping at Work - Comedy Sketch</h3>
<p class="text-xs text-gray-600 mt-1">Laugh Factory</p>
<p class="text-xs text-gray-600">7.5M views • 2 months ago</p>
</div>
</div>
</div>
<!-- Video 9 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/d7b54fea197dab55b435b7efb5d782bb.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">10:05</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/f40a2809746bd770744c44f64699237c.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Breaking: Major Technology Breakthrough Announced - What This Means For The Future</h3>
<p class="text-xs text-gray-600 mt-1">Global News Network</p>
<p class="text-xs text-gray-600">1.1M views • 12 hours ago</p>
</div>
</div>
</div>
<!-- Video 10 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/904411de890501bd9af69d849561abfc.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">14:22</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/9d4ed7a29bd08af9350052bf0db777f4.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Unboxing the PlayStation 6 - First Look and Impressions!</h3>
<p class="text-xs text-gray-600 mt-1">Tech Unboxed</p>
<p class="text-xs text-gray-600">3.4M views • 1 day ago</p>
</div>
</div>
</div>
<!-- Video 11 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/4ee95e1d7da4131afea84038a8c6ca69.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">42:18</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/8d1688e15e9c0dc980543360027a8e18.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">The Secret Life of Arctic Wolves - Full Documentary 2025</h3>
<p class="text-xs text-gray-600 mt-1">Nature Discoveries</p>
<p class="text-xs text-gray-600">2.3M views • 2 weeks ago</p>
</div>
</div>
</div>
<!-- Video 12 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/e5431f695bdd55077cf6c73f181bdbe6.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">1:12:45</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/538a38ef4e7d67607e1d752002a534fb.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Interview with World-Famous Entrepreneur: Secrets to Success and Future Plans</h3>
<p class="text-xs text-gray-600 mt-1">The Deep Dive Podcast</p>
<p class="text-xs text-gray-600">895K views • 4 days ago</p>
</div>
</div>
</div>
</div>
</main>
<script>
// Infinite scroll simulation
window.addEventListener('scroll', function() {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 500) {
// Would load more content in a real implementation
console.log("Load more content");
}
});
// Tooltip functionality
const buttons = document.querySelectorAll('button');
buttons.forEach(button => {
button.addEventListener('mouseenter', function(e) {
// Would show tooltip in a real implementation
});
button.addEventListener('mouseleave', function(e) {
// Would hide tooltip in a real implementation
});
});
</script>
</body>
</html>
`

code link | 👉 |https://codepen.io/Abdullah-Web/pen/raaeNEL

YouTube Clone Built with HTML & CSS Add It to Your Own Website

Mr Abdullah WebDev — Wed, 23 Apr 2025 20:24:57 +0000

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube</title>
<script src="https://cdn.tailwindcss.com/3.4.16"></script>
<script>tailwind.config={theme:{extend:{colors:{primary:'#ff0000',secondary:'#606060'},borderRadius:{'none':'0px','sm':'4px',DEFAULT:'8px','md':'12px','lg':'16px','xl':'20px','2xl':'24px','3xl':'32px','full':'9999px','button':'8px'}}}}</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css" rel="stylesheet">
<style>
:where([class^="ri-"])::before { content: "\f3c2"; }
body {
font-family: 'Roboto', sans-serif;
}
.video-duration {
right: 8px;
bottom: 8px;
}
.sidebar-scrollbar::-webkit-scrollbar {
width: 8px;
}
.sidebar-scrollbar::-webkit-scrollbar-thumb {
background-color: #cccccc;
border-radius: 4px;
}
.sidebar-scrollbar::-webkit-scrollbar-track {
background-color: transparent;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.category-scrollbar::-webkit-scrollbar {
height: 0;
display: none;
}
</style>
</head>
<body class="bg-white">
<!-- Fixed Top Navigation Bar -->
<header class="fixed top-0 left-0 w-full h-14 bg-white border-b border-gray-200 flex items-center justify-between px-4 z-50">
<!-- Left Section - Logo -->
<div class="flex items-center">
<button class="w-10 h-10 flex items-center justify-center mr-4">
<i class="ri-menu-line ri-lg"></i>
</button>
<a href="#" class="flex items-center">
<img src="https://static.readdy.ai/image/3fe41b039d52eef3362db9f06e9e1e40/208c4e1273eb879fb258c45906a37c01.jpeg" alt="YouTube Logo" class="h-6">
</a>
</div>
<!-- Center Section - Search Bar -->
<div class="flex-1 max-w-xl mx-4">
<div class="flex">
<div class="relative flex-1">
<input type="text" placeholder="Search" class="w-full h-10 pl-4 pr-10 border border-gray-300 rounded-l-button focus:outline-none focus:border-blue-500">
<div class="absolute right-2 top-1/2 transform -translate-y-1/2 w-8 h-8 flex items-center justify-center text-gray-500">
<i class="ri-search-line ri-lg"></i>
</div>
</div>
<button class="w-14 h-10 bg-gray-100 border border-l-0 border-gray-300 rounded-r-button flex items-center justify-center !rounded-button">
<i class="ri-search-line ri-lg"></i>
</button>
<button class="w-10 h-10 ml-2 bg-gray-100 rounded-full flex items-center justify-center">
<i class="ri-mic-line ri-lg"></i>
</button>
</div>
</div>
<!-- Right Section - Actions -->
<div class="flex items-center">
<button class="w-10 h-10 mx-2 flex items-center justify-center">
<i class="ri-video-add-line ri-lg"></i>
</button>
<button class="w-10 h-10 mx-2 flex items-center justify-center relative">
<i class="ri-notification-line ri-lg"></i>
<span class="absolute top-1 right-1 bg-primary text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">3</span>
</button>
<button class="w-8 h-8 mx-2 overflow-hidden rounded-full">
<img src="https://public.readdy.ai/ai/img_res/967231341ca3cba6e0a7b835976f402b.jpg" alt="User Profile" class="w-full h-full object-cover">
</button>
</div>
</header>
<!-- Sidebar Navigation -->
<aside class="fixed top-14 left-0 w-60 h-[calc(100vh-56px)] bg-white overflow-y-auto sidebar-scrollbar z-40">
<div class="py-3">
<!-- Main Navigation -->
<div class="border-b border-gray-200 pb-3">
<a href="#" class="flex items-center px-6 py-2 bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-home-fill ri-lg text-primary"></i>
</div>
<span class="text-sm font-medium">Home</span>
</a>
<a href="https://readdy.ai/home/baeed544-39b8-49fe-bd91-1dfc375a95f3/08439bab-59c1-4cb2-8755-13a2b4c111e8" data-readdy="true" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-play-circle-line ri-lg"></i>
</div>
<span class="text-sm">Shorts</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-subscription-line ri-lg"></i>
</div>
<span class="text-sm">Subscriptions</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-folder-video-line ri-lg"></i>
</div>
<span class="text-sm">Library</span>
</a>
</div>
<!-- Subscriptions -->
<div class="py-3 border-b border-gray-200">
<h3 class="px-6 py-1 text-sm font-medium">Subscriptions</h3>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/40d0452ed529ed25f4ffb22f7c75bc2b.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Tech Insider</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/07a23356187550fcc1e1eb0a04847e76.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Music Vibes</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/741bb530ab86b390a39017dd0d960d00.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">GamersHub</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/2c2d9a83e03f1fe1fa921ea2b2dd63df.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Cooking Masters</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/202034341bb7bd86eb31be539ad9083d.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Science Now</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/3baa2eba167a5a3091ed6ccf75db05de.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Fitness Pro</span>
</a>
</div>
<!-- Explore -->
<div class="py-3 border-b border-gray-200">
<h3 class="px-6 py-1 text-sm font-medium">Explore</h3>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-fire-line ri-lg"></i>
</div>
<span class="text-sm">Trending</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-music-line ri-lg"></i>
</div>
<span class="text-sm">Music</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-gamepad-line ri-lg"></i>
</div>
<span class="text-sm">Gaming</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-newspaper-line ri-lg"></i>
</div>
<span class="text-sm">News</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-trophy-line ri-lg"></i>
</div>
<span class="text-sm">Sports</span>
</a>
</div>
<!-- More from YouTube -->
<div class="py-3">
<h3 class="px-6 py-1 text-sm font-medium">More from YouTube</h3>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-youtube-fill ri-lg text-primary"></i>
</div>
<span class="text-sm">YouTube Premium</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-film-line ri-lg"></i>
</div>
<span class="text-sm">YouTube Movies</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-live-line ri-lg"></i>
</div>
<span class="text-sm">Live</span>
</a>
</div>
</div>
</aside>
<!-- Main Content Area -->
<main class="pt-14 pl-60">
<!-- Video Categories -->
<div class="sticky top-14 bg-white z-30 border-b border-gray-200">
<div class="overflow-x-auto category-scrollbar whitespace-nowrap py-3 px-6">
<button class="px-3 py-1.5 mr-3 bg-black text-white text-sm rounded-full !rounded-button whitespace-nowrap">All</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Music</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Gaming</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">News</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Live</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Podcasts</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Technology</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Comedy</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Sports</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Education</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Travel</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Cooking</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Fitness</button>
</div>
</div>
<!-- Video Grid -->
<div class="grid grid-cols-3 gap-4 p-6">
<!-- Video 1 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/caa91af20639d03e17ea6b53df6d0d13.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">12:34</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/cbe1aabef20ff5dacb7e29ca851b7d78.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Ultimate Review: The New iPhone 15 Pro - Everything You Need to Know!</h3>
<p class="text-xs text-gray-600 mt-1">TechReviewPro</p>
<p class="text-xs text-gray-600">1.2M views • 3 days ago</p>
</div>
</div>
</div>
<!-- Video 2 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/9a8b878a3d47c2ced4a5a28fe6878881.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">18:42</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/0d8a5d3837ead8ade97086a15104dbb2.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">How to Make the Perfect Homemade Pasta - Simple Italian Recipes</h3>
<p class="text-xs text-gray-600 mt-1">Cooking With Julia</p>
<p class="text-xs text-gray-600">845K views • 1 week ago</p>
</div>
</div>
</div>
<!-- Video 3 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/665fed089fe5447f3fdb7779ca3b3eeb.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">2:05:18</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/2fa8335fe08764995f6a22ea738ae501.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">LIVE: Epic Fortnite Tournament - Road to Champion Division!</h3>
<p class="text-xs text-gray-600 mt-1">GameMaster Pro</p>
<p class="text-xs text-gray-600">325K views • Streamed 2 days ago</p>
</div>
</div>
</div>
<!-- Video 4 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/e54a11aa3c8cc57a2e04e86245cee9a5.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">4:26</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/4e50f27126fb6b0b065e326680cf7a37.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Midnight Dreams - Official Music Video (New Release 2025)</h3>
<p class="text-xs text-gray-600 mt-1">Horizon Band</p>
<p class="text-xs text-gray-600">2.8M views • 5 days ago</p>
</div>
</div>
</div>
<!-- Video 5 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/d2f9c0ce7acc81de9cda0274bb8fb267.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">28:15</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/694b82b0d4580a7ea853db75d77fc6e5.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">30-Minute Full Body HIIT Workout - No Equipment Needed!</h3>
<p class="text-xs text-gray-600 mt-1">FitLife with Sarah</p>
<p class="text-xs text-gray-600">1.5M views • 2 weeks ago</p>
</div>
</div>
</div>
<!-- Video 6 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/3af3baaffd7f8abd834738f706ebec7c.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">22:47</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/64d91d3579d178a1e65cda9072568e95.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Exploring Hidden Gems in Bali - Ultimate Travel Guide 2025</h3>
<p class="text-xs text-gray-600 mt-1">Wanderlust Adventures</p>
<p class="text-xs text-gray-600">687K views • 3 weeks ago</p>
</div>
</div>
</div>
<!-- Video 7 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/418779e83c6175b6f60a8416c5ca6c88.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">15:32</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/df5d6526aeeffd1645e5c5b122527f54.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">10 Mind-Blowing Science Experiments You Can Do At Home</h3>
<p class="text-xs text-gray-600 mt-1">Science Explained</p>
<p class="text-xs text-gray-600">4.2M views • 1 month ago</p>
</div>
</div>
</div>
<!-- Video 8 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/1fb43319676bca2995f7ff9e17641672.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">8:53</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/762fe699ca8f15deb9ee6c864d8c0bf4.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">When Your Boss Catches You Sleeping at Work - Comedy Sketch</h3>
<p class="text-xs text-gray-600 mt-1">Laugh Factory</p>
<p class="text-xs text-gray-600">7.5M views • 2 months ago</p>
</div>
</div>
</div>
<!-- Video 9 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/d7b54fea197dab55b435b7efb5d782bb.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">10:05</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/f40a2809746bd770744c44f64699237c.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Breaking: Major Technology Breakthrough Announced - What This Means For The Future</h3>
<p class="text-xs text-gray-600 mt-1">Global News Network</p>
<p class="text-xs text-gray-600">1.1M views • 12 hours ago</p>
</div>
</div>
</div>
<!-- Video 10 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/904411de890501bd9af69d849561abfc.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">14:22</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/9d4ed7a29bd08af9350052bf0db777f4.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Unboxing the PlayStation 6 - First Look and Impressions!</h3>
<p class="text-xs text-gray-600 mt-1">Tech Unboxed</p>
<p class="text-xs text-gray-600">3.4M views • 1 day ago</p>
</div>
</div>
</div>
<!-- Video 11 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/4ee95e1d7da4131afea84038a8c6ca69.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">42:18</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/8d1688e15e9c0dc980543360027a8e18.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">The Secret Life of Arctic Wolves - Full Documentary 2025</h3>
<p class="text-xs text-gray-600 mt-1">Nature Discoveries</p>
<p class="text-xs text-gray-600">2.3M views • 2 weeks ago</p>
</div>
</div>
</div>
<!-- Video 12 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/e5431f695bdd55077cf6c73f181bdbe6.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">1:12:45</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/538a38ef4e7d67607e1d752002a534fb.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Interview with World-Famous Entrepreneur: Secrets to Success and Future Plans</h3>
<p class="text-xs text-gray-600 mt-1">The Deep Dive Podcast</p>
<p class="text-xs text-gray-600">895K views • 4 days ago</p>
</div>
</div>
</div>
</div>
</main>
<script>
// Infinite scroll simulation
window.addEventListener('scroll', function() {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 500) {
// Would load more content in a real implementation
console.log("Load more content");
}
});
// Tooltip functionality
const buttons = document.querySelectorAll('button');
buttons.forEach(button => {
button.addEventListener('mouseenter', function(e) {
// Would show tooltip in a real implementation
});
button.addEventListener('mouseleave', function(e) {
// Would hide tooltip in a real implementation
});
});
</script>
</body>
</html>

👉 Coded from scratch 👉 Fully responsive design 👉 Perfect for practice or portfolio use

Let me know what you think in the comments and don’t forget to like & follow for more projects like this!

YouTubeClone #HTMLCSS #WebDevelopment #FrontendProject #CodingJourney #WebDesign #DeveloperLife #ResponsiveDesign #CloneProject #CodeNewbie #100DaysOfCode #LearnToCode

code link | 👉 |https://codepen.io/Abdullah-Web/pen/raaeNEL

YouTube Clone Built with HTML & CSS – Add It to Your Own Website!

Mr Abdullah WebDev — Wed, 23 Apr 2025 20:20:14 +0000

👉 Coded from scratch 👉 Fully responsive design 👉 Perfect for practice or portfolio use

Let me know what you think in the comments and don’t forget to like & follow for more projects like this!

YouTubeClone #HTMLCSS #WebDevelopment #FrontendProject #CodingJourney #WebDesign #DeveloperLife #ResponsiveDesign #CloneProject #CodeNewbie #100DaysOfCode #LearnToCode

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube</title>
<script src="https://cdn.tailwindcss.com/3.4.16"></script>
<script>tailwind.config={theme:{extend:{colors:{primary:'#ff0000',secondary:'#606060'},borderRadius:{'none':'0px','sm':'4px',DEFAULT:'8px','md':'12px','lg':'16px','xl':'20px','2xl':'24px','3xl':'32px','full':'9999px','button':'8px'}}}}</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css" rel="stylesheet">
<style>
:where([class^="ri-"])::before { content: "\f3c2"; }
body {
font-family: 'Roboto', sans-serif;
}
.video-duration {
right: 8px;
bottom: 8px;
}
.sidebar-scrollbar::-webkit-scrollbar {
width: 8px;
}
.sidebar-scrollbar::-webkit-scrollbar-thumb {
background-color: #cccccc;
border-radius: 4px;
}
.sidebar-scrollbar::-webkit-scrollbar-track {
background-color: transparent;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.category-scrollbar::-webkit-scrollbar {
height: 0;
display: none;
}
</style>
</head>
<body class="bg-white">
<!-- Fixed Top Navigation Bar -->
<header class="fixed top-0 left-0 w-full h-14 bg-white border-b border-gray-200 flex items-center justify-between px-4 z-50">
<!-- Left Section - Logo -->
<div class="flex items-center">
<button class="w-10 h-10 flex items-center justify-center mr-4">
<i class="ri-menu-line ri-lg"></i>
</button>
<a href="#" class="flex items-center">
<img src="https://static.readdy.ai/image/3fe41b039d52eef3362db9f06e9e1e40/208c4e1273eb879fb258c45906a37c01.jpeg" alt="YouTube Logo" class="h-6">
</a>
</div>
<!-- Center Section - Search Bar -->
<div class="flex-1 max-w-xl mx-4">
<div class="flex">
<div class="relative flex-1">
<input type="text" placeholder="Search" class="w-full h-10 pl-4 pr-10 border border-gray-300 rounded-l-button focus:outline-none focus:border-blue-500">
<div class="absolute right-2 top-1/2 transform -translate-y-1/2 w-8 h-8 flex items-center justify-center text-gray-500">
<i class="ri-search-line ri-lg"></i>
</div>
</div>
<button class="w-14 h-10 bg-gray-100 border border-l-0 border-gray-300 rounded-r-button flex items-center justify-center !rounded-button">
<i class="ri-search-line ri-lg"></i>
</button>
<button class="w-10 h-10 ml-2 bg-gray-100 rounded-full flex items-center justify-center">
<i class="ri-mic-line ri-lg"></i>
</button>
</div>
</div>
<!-- Right Section - Actions -->
<div class="flex items-center">
<button class="w-10 h-10 mx-2 flex items-center justify-center">
<i class="ri-video-add-line ri-lg"></i>
</button>
<button class="w-10 h-10 mx-2 flex items-center justify-center relative">
<i class="ri-notification-line ri-lg"></i>
<span class="absolute top-1 right-1 bg-primary text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">3</span>
</button>
<button class="w-8 h-8 mx-2 overflow-hidden rounded-full">
<img src="https://public.readdy.ai/ai/img_res/967231341ca3cba6e0a7b835976f402b.jpg" alt="User Profile" class="w-full h-full object-cover">
</button>
</div>
</header>
<!-- Sidebar Navigation -->
<aside class="fixed top-14 left-0 w-60 h-[calc(100vh-56px)] bg-white overflow-y-auto sidebar-scrollbar z-40">
<div class="py-3">
<!-- Main Navigation -->
<div class="border-b border-gray-200 pb-3">
<a href="#" class="flex items-center px-6 py-2 bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-home-fill ri-lg text-primary"></i>
</div>
<span class="text-sm font-medium">Home</span>
</a>
<a href="https://readdy.ai/home/baeed544-39b8-49fe-bd91-1dfc375a95f3/08439bab-59c1-4cb2-8755-13a2b4c111e8" data-readdy="true" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-play-circle-line ri-lg"></i>
</div>
<span class="text-sm">Shorts</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-subscription-line ri-lg"></i>
</div>
<span class="text-sm">Subscriptions</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-folder-video-line ri-lg"></i>
</div>
<span class="text-sm">Library</span>
</a>
</div>
<!-- Subscriptions -->
<div class="py-3 border-b border-gray-200">
<h3 class="px-6 py-1 text-sm font-medium">Subscriptions</h3>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/40d0452ed529ed25f4ffb22f7c75bc2b.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Tech Insider</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/07a23356187550fcc1e1eb0a04847e76.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Music Vibes</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/741bb530ab86b390a39017dd0d960d00.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">GamersHub</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/2c2d9a83e03f1fe1fa921ea2b2dd63df.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Cooking Masters</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/202034341bb7bd86eb31be539ad9083d.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Science Now</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/3baa2eba167a5a3091ed6ccf75db05de.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Fitness Pro</span>
</a>
</div>
<!-- Explore -->
<div class="py-3 border-b border-gray-200">
<h3 class="px-6 py-1 text-sm font-medium">Explore</h3>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-fire-line ri-lg"></i>
</div>
<span class="text-sm">Trending</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-music-line ri-lg"></i>
</div>
<span class="text-sm">Music</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-gamepad-line ri-lg"></i>
</div>
<span class="text-sm">Gaming</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-newspaper-line ri-lg"></i>
</div>
<span class="text-sm">News</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-trophy-line ri-lg"></i>
</div>
<span class="text-sm">Sports</span>
</a>
</div>
<!-- More from YouTube -->
<div class="py-3">
<h3 class="px-6 py-1 text-sm font-medium">More from YouTube</h3>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-youtube-fill ri-lg text-primary"></i>
</div>
<span class="text-sm">YouTube Premium</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-film-line ri-lg"></i>
</div>
<span class="text-sm">YouTube Movies</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-live-line ri-lg"></i>
</div>
<span class="text-sm">Live</span>
</a>
</div>
</div>
</aside>
<!-- Main Content Area -->
<main class="pt-14 pl-60">
<!-- Video Categories -->
<div class="sticky top-14 bg-white z-30 border-b border-gray-200">
<div class="overflow-x-auto category-scrollbar whitespace-nowrap py-3 px-6">
<button class="px-3 py-1.5 mr-3 bg-black text-white text-sm rounded-full !rounded-button whitespace-nowrap">All</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Music</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Gaming</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">News</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Live</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Podcasts</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Technology</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Comedy</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Sports</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Education</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Travel</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Cooking</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Fitness</button>
</div>
</div>
<!-- Video Grid -->
<div class="grid grid-cols-3 gap-4 p-6">
<!-- Video 1 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/caa91af20639d03e17ea6b53df6d0d13.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">12:34</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/cbe1aabef20ff5dacb7e29ca851b7d78.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Ultimate Review: The New iPhone 15 Pro - Everything You Need to Know!</h3>
<p class="text-xs text-gray-600 mt-1">TechReviewPro</p>
<p class="text-xs text-gray-600">1.2M views • 3 days ago</p>
</div>
</div>
</div>
<!-- Video 2 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/9a8b878a3d47c2ced4a5a28fe6878881.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">18:42</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/0d8a5d3837ead8ade97086a15104dbb2.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">How to Make the Perfect Homemade Pasta - Simple Italian Recipes</h3>
<p class="text-xs text-gray-600 mt-1">Cooking With Julia</p>
<p class="text-xs text-gray-600">845K views • 1 week ago</p>
</div>
</div>
</div>
<!-- Video 3 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/665fed089fe5447f3fdb7779ca3b3eeb.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">2:05:18</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/2fa8335fe08764995f6a22ea738ae501.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">LIVE: Epic Fortnite Tournament - Road to Champion Division!</h3>
<p class="text-xs text-gray-600 mt-1">GameMaster Pro</p>
<p class="text-xs text-gray-600">325K views • Streamed 2 days ago</p>
</div>
</div>
</div>
<!-- Video 4 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/e54a11aa3c8cc57a2e04e86245cee9a5.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">4:26</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/4e50f27126fb6b0b065e326680cf7a37.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Midnight Dreams - Official Music Video (New Release 2025)</h3>
<p class="text-xs text-gray-600 mt-1">Horizon Band</p>
<p class="text-xs text-gray-600">2.8M views • 5 days ago</p>
</div>
</div>
</div>
<!-- Video 5 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/d2f9c0ce7acc81de9cda0274bb8fb267.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">28:15</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/694b82b0d4580a7ea853db75d77fc6e5.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">30-Minute Full Body HIIT Workout - No Equipment Needed!</h3>
<p class="text-xs text-gray-600 mt-1">FitLife with Sarah</p>
<p class="text-xs text-gray-600">1.5M views • 2 weeks ago</p>
</div>
</div>
</div>
<!-- Video 6 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/3af3baaffd7f8abd834738f706ebec7c.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">22:47</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/64d91d3579d178a1e65cda9072568e95.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Exploring Hidden Gems in Bali - Ultimate Travel Guide 2025</h3>
<p class="text-xs text-gray-600 mt-1">Wanderlust Adventures</p>
<p class="text-xs text-gray-600">687K views • 3 weeks ago</p>
</div>
</div>
</div>
<!-- Video 7 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/418779e83c6175b6f60a8416c5ca6c88.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">15:32</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/df5d6526aeeffd1645e5c5b122527f54.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">10 Mind-Blowing Science Experiments You Can Do At Home</h3>
<p class="text-xs text-gray-600 mt-1">Science Explained</p>
<p class="text-xs text-gray-600">4.2M views • 1 month ago</p>
</div>
</div>
</div>
<!-- Video 8 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/1fb43319676bca2995f7ff9e17641672.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">8:53</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/762fe699ca8f15deb9ee6c864d8c0bf4.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">When Your Boss Catches You Sleeping at Work - Comedy Sketch</h3>
<p class="text-xs text-gray-600 mt-1">Laugh Factory</p>
<p class="text-xs text-gray-600">7.5M views • 2 months ago</p>
</div>
</div>
</div>
<!-- Video 9 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/d7b54fea197dab55b435b7efb5d782bb.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">10:05</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/f40a2809746bd770744c44f64699237c.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Breaking: Major Technology Breakthrough Announced - What This Means For The Future</h3>
<p class="text-xs text-gray-600 mt-1">Global News Network</p>
<p class="text-xs text-gray-600">1.1M views • 12 hours ago</p>
</div>
</div>
</div>
<!-- Video 10 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/904411de890501bd9af69d849561abfc.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">14:22</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/9d4ed7a29bd08af9350052bf0db777f4.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Unboxing the PlayStation 6 - First Look and Impressions!</h3>
<p class="text-xs text-gray-600 mt-1">Tech Unboxed</p>
<p class="text-xs text-gray-600">3.4M views • 1 day ago</p>
</div>
</div>
</div>
<!-- Video 11 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/4ee95e1d7da4131afea84038a8c6ca69.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">42:18</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/8d1688e15e9c0dc980543360027a8e18.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">The Secret Life of Arctic Wolves - Full Documentary 2025</h3>
<p class="text-xs text-gray-600 mt-1">Nature Discoveries</p>
<p class="text-xs text-gray-600">2.3M views • 2 weeks ago</p>
</div>
</div>
</div>
<!-- Video 12 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/e5431f695bdd55077cf6c73f181bdbe6.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">1:12:45</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/538a38ef4e7d67607e1d752002a534fb.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Interview with World-Famous Entrepreneur: Secrets to Success and Future Plans</h3>
<p class="text-xs text-gray-600 mt-1">The Deep Dive Podcast</p>
<p class="text-xs text-gray-600">895K views • 4 days ago</p>
</div>
</div>
</div>
</div>
</main>
<script>
// Infinite scroll simulation
window.addEventListener('scroll', function() {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 500) {
// Would load more content in a real implementation
console.log("Load more content");
}
});
// Tooltip functionality
const buttons = document.querySelectorAll('button');
buttons.forEach(button => {
button.addEventListener('mouseenter', function(e) {
// Would show tooltip in a real implementation
});
button.addEventListener('mouseleave', function(e) {
// Would hide tooltip in a real implementation
});
});
</script>
</body>
</html>
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube</title>
<script src="https://cdn.tailwindcss.com/3.4.16"></script>
<script>tailwind.config={theme:{extend:{colors:{primary:'#ff0000',secondary:'#606060'},borderRadius:{'none':'0px','sm':'4px',DEFAULT:'8px','md':'12px','lg':'16px','xl':'20px','2xl':'24px','3xl':'32px','full':'9999px','button':'8px'}}}}</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css" rel="stylesheet">
<style>
:where([class^="ri-"])::before { content: "\f3c2"; }
body {
font-family: 'Roboto', sans-serif;
}
.video-duration {
right: 8px;
bottom: 8px;
}
.sidebar-scrollbar::-webkit-scrollbar {
width: 8px;
}
.sidebar-scrollbar::-webkit-scrollbar-thumb {
background-color: #cccccc;
border-radius: 4px;
}
.sidebar-scrollbar::-webkit-scrollbar-track {
background-color: transparent;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.category-scrollbar::-webkit-scrollbar {
height: 0;
display: none;
}
</style>
</head>
<body class="bg-white">
<!-- Fixed Top Navigation Bar -->
<header class="fixed top-0 left-0 w-full h-14 bg-white border-b border-gray-200 flex items-center justify-between px-4 z-50">
<!-- Left Section - Logo -->
<div class="flex items-center">
<button class="w-10 h-10 flex items-center justify-center mr-4">
<i class="ri-menu-line ri-lg"></i>
</button>
<a href="#" class="flex items-center">
<img src="https://static.readdy.ai/image/3fe41b039d52eef3362db9f06e9e1e40/208c4e1273eb879fb258c45906a37c01.jpeg" alt="YouTube Logo" class="h-6">
</a>
</div>
<!-- Center Section - Search Bar -->
<div class="flex-1 max-w-xl mx-4">
<div class="flex">
<div class="relative flex-1">
<input type="text" placeholder="Search" class="w-full h-10 pl-4 pr-10 border border-gray-300 rounded-l-button focus:outline-none focus:border-blue-500">
<div class="absolute right-2 top-1/2 transform -translate-y-1/2 w-8 h-8 flex items-center justify-center text-gray-500">
<i class="ri-search-line ri-lg"></i>
</div>
</div>
<button class="w-14 h-10 bg-gray-100 border border-l-0 border-gray-300 rounded-r-button flex items-center justify-center !rounded-button">
<i class="ri-search-line ri-lg"></i>
</button>
<button class="w-10 h-10 ml-2 bg-gray-100 rounded-full flex items-center justify-center">
<i class="ri-mic-line ri-lg"></i>
</button>
</div>
</div>
<!-- Right Section - Actions -->
<div class="flex items-center">
<button class="w-10 h-10 mx-2 flex items-center justify-center">
<i class="ri-video-add-line ri-lg"></i>
</button>
<button class="w-10 h-10 mx-2 flex items-center justify-center relative">
<i class="ri-notification-line ri-lg"></i>
<span class="absolute top-1 right-1 bg-primary text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">3</span>
</button>
<button class="w-8 h-8 mx-2 overflow-hidden rounded-full">
<img src="https://public.readdy.ai/ai/img_res/967231341ca3cba6e0a7b835976f402b.jpg" alt="User Profile" class="w-full h-full object-cover">
</button>
</div>
</header>
<!-- Sidebar Navigation -->
<aside class="fixed top-14 left-0 w-60 h-[calc(100vh-56px)] bg-white overflow-y-auto sidebar-scrollbar z-40">
<div class="py-3">
<!-- Main Navigation -->
<div class="border-b border-gray-200 pb-3">
<a href="#" class="flex items-center px-6 py-2 bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-home-fill ri-lg text-primary"></i>
</div>
<span class="text-sm font-medium">Home</span>
</a>
<a href="https://readdy.ai/home/baeed544-39b8-49fe-bd91-1dfc375a95f3/08439bab-59c1-4cb2-8755-13a2b4c111e8" data-readdy="true" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-play-circle-line ri-lg"></i>
</div>
<span class="text-sm">Shorts</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-subscription-line ri-lg"></i>
</div>
<span class="text-sm">Subscriptions</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-folder-video-line ri-lg"></i>
</div>
<span class="text-sm">Library</span>
</a>
</div>
<!-- Subscriptions -->
<div class="py-3 border-b border-gray-200">
<h3 class="px-6 py-1 text-sm font-medium">Subscriptions</h3>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/40d0452ed529ed25f4ffb22f7c75bc2b.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Tech Insider</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/07a23356187550fcc1e1eb0a04847e76.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Music Vibes</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/741bb530ab86b390a39017dd0d960d00.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">GamersHub</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/2c2d9a83e03f1fe1fa921ea2b2dd63df.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Cooking Masters</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/202034341bb7bd86eb31be539ad9083d.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Science Now</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/3baa2eba167a5a3091ed6ccf75db05de.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Fitness Pro</span>
</a>
</div>
<!-- Explore -->
<div class="py-3 border-b border-gray-200">
<h3 class="px-6 py-1 text-sm font-medium">Explore</h3>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-fire-line ri-lg"></i>
</div>
<span class="text-sm">Trending</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-music-line ri-lg"></i>
</div>
<span class="text-sm">Music</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-gamepad-line ri-lg"></i>
</div>
<span class="text-sm">Gaming</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-newspaper-line ri-lg"></i>
</div>
<span class="text-sm">News</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-trophy-line ri-lg"></i>
</div>
<span class="text-sm">Sports</span>
</a>
</div>
<!-- More from YouTube -->
<div class="py-3">
<h3 class="px-6 py-1 text-sm font-medium">More from YouTube</h3>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-youtube-fill ri-lg text-primary"></i>
</div>
<span class="text-sm">YouTube Premium</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-film-line ri-lg"></i>
</div>
<span class="text-sm">YouTube Movies</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-live-line ri-lg"></i>
</div>
<span class="text-sm">Live</span>
</a>
</div>
</div>
</aside>
<!-- Main Content Area -->
<main class="pt-14 pl-60">
<!-- Video Categories -->
<div class="sticky top-14 bg-white z-30 border-b border-gray-200">
<div class="overflow-x-auto category-scrollbar whitespace-nowrap py-3 px-6">
<button class="px-3 py-1.5 mr-3 bg-black text-white text-sm rounded-full !rounded-button whitespace-nowrap">All</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Music</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Gaming</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">News</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Live</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Podcasts</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Technology</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Comedy</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Sports</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Education</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Travel</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Cooking</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Fitness</button>
</div>
</div>
<!-- Video Grid -->
<div class="grid grid-cols-3 gap-4 p-6">
<!-- Video 1 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/caa91af20639d03e17ea6b53df6d0d13.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">12:34</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/cbe1aabef20ff5dacb7e29ca851b7d78.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Ultimate Review: The New iPhone 15 Pro - Everything You Need to Know!</h3>
<p class="text-xs text-gray-600 mt-1">TechReviewPro</p>
<p class="text-xs text-gray-600">1.2M views • 3 days ago</p>
</div>
</div>
</div>
<!-- Video 2 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/9a8b878a3d47c2ced4a5a28fe6878881.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">18:42</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/0d8a5d3837ead8ade97086a15104dbb2.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">How to Make the Perfect Homemade Pasta - Simple Italian Recipes</h3>
<p class="text-xs text-gray-600 mt-1">Cooking With Julia</p>
<p class="text-xs text-gray-600">845K views • 1 week ago</p>
</div>
</div>
</div>
<!-- Video 3 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/665fed089fe5447f3fdb7779ca3b3eeb.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">2:05:18</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/2fa8335fe08764995f6a22ea738ae501.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">LIVE: Epic Fortnite Tournament - Road to Champion Division!</h3>
<p class="text-xs text-gray-600 mt-1">GameMaster Pro</p>
<p class="text-xs text-gray-600">325K views • Streamed 2 days ago</p>
</div>
</div>
</div>
<!-- Video 4 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/e54a11aa3c8cc57a2e04e86245cee9a5.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">4:26</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/4e50f27126fb6b0b065e326680cf7a37.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Midnight Dreams - Official Music Video (New Release 2025)</h3>
<p class="text-xs text-gray-600 mt-1">Horizon Band</p>
<p class="text-xs text-gray-600">2.8M views • 5 days ago</p>
</div>
</div>
</div>
<!-- Video 5 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/d2f9c0ce7acc81de9cda0274bb8fb267.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">28:15</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/694b82b0d4580a7ea853db75d77fc6e5.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">30-Minute Full Body HIIT Workout - No Equipment Needed!</h3>
<p class="text-xs text-gray-600 mt-1">FitLife with Sarah</p>
<p class="text-xs text-gray-600">1.5M views • 2 weeks ago</p>
</div>
</div>
</div>
<!-- Video 6 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/3af3baaffd7f8abd834738f706ebec7c.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">22:47</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/64d91d3579d178a1e65cda9072568e95.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Exploring Hidden Gems in Bali - Ultimate Travel Guide 2025</h3>
<p class="text-xs text-gray-600 mt-1">Wanderlust Adventures</p>
<p class="text-xs text-gray-600">687K views • 3 weeks ago</p>
</div>
</div>
</div>
<!-- Video 7 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/418779e83c6175b6f60a8416c5ca6c88.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">15:32</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/df5d6526aeeffd1645e5c5b122527f54.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">10 Mind-Blowing Science Experiments You Can Do At Home</h3>
<p class="text-xs text-gray-600 mt-1">Science Explained</p>
<p class="text-xs text-gray-600">4.2M views • 1 month ago</p>
</div>
</div>
</div>
<!-- Video 8 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/1fb43319676bca2995f7ff9e17641672.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">8:53</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/762fe699ca8f15deb9ee6c864d8c0bf4.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">When Your Boss Catches You Sleeping at Work - Comedy Sketch</h3>
<p class="text-xs text-gray-600 mt-1">Laugh Factory</p>
<p class="text-xs text-gray-600">7.5M views • 2 months ago</p>
</div>
</div>
</div>
<!-- Video 9 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/d7b54fea197dab55b435b7efb5d782bb.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">10:05</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/f40a2809746bd770744c44f64699237c.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Breaking: Major Technology Breakthrough Announced - What This Means For The Future</h3>
<p class="text-xs text-gray-600 mt-1">Global News Network</p>
<p class="text-xs text-gray-600">1.1M views • 12 hours ago</p>
</div>
</div>
</div>
<!-- Video 10 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/904411de890501bd9af69d849561abfc.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">14:22</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/9d4ed7a29bd08af9350052bf0db777f4.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Unboxing the PlayStation 6 - First Look and Impressions!</h3>
<p class="text-xs text-gray-600 mt-1">Tech Unboxed</p>
<p class="text-xs text-gray-600">3.4M views • 1 day ago</p>
</div>
</div>
</div>
<!-- Video 11 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/4ee95e1d7da4131afea84038a8c6ca69.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">42:18</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/8d1688e15e9c0dc980543360027a8e18.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">The Secret Life of Arctic Wolves - Full Documentary 2025</h3>
<p class="text-xs text-gray-600 mt-1">Nature Discoveries</p>
<p class="text-xs text-gray-600">2.3M views • 2 weeks ago</p>
</div>
</div>
</div>
<!-- Video 12 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/e5431f695bdd55077cf6c73f181bdbe6.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">1:12:45</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/538a38ef4e7d67607e1d752002a534fb.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Interview with World-Famous Entrepreneur: Secrets to Success and Future Plans</h3>
<p class="text-xs text-gray-600 mt-1">The Deep Dive Podcast</p>
<p class="text-xs text-gray-600">895K views • 4 days ago</p>
</div>
</div>
</div>
</div>
</main>
<script>
// Infinite scroll simulation
window.addEventListener('scroll', function() {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 500) {
// Would load more content in a real implementation
console.log("Load more content");
}
});
// Tooltip functionality
const buttons = document.querySelectorAll('button');
buttons.forEach(button => {
button.addEventListener('mouseenter', function(e) {
// Would show tooltip in a real implementation
});
button.addEventListener('mouseleave', function(e) {
// Would hide tooltip in a real implementation
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube</title>
<script src="https://cdn.tailwindcss.com/3.4.16"></script>
<script>tailwind.config={theme:{extend:{colors:{primary:'#ff0000',secondary:'#606060'},borderRadius:{'none':'0px','sm':'4px',DEFAULT:'8px','md':'12px','lg':'16px','xl':'20px','2xl':'24px','3xl':'32px','full':'9999px','button':'8px'}}}}</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css" rel="stylesheet">
<style>
:where([class^="ri-"])::before { content: "\f3c2"; }
body {
font-family: 'Roboto', sans-serif;
}
.video-duration {
right: 8px;
bottom: 8px;
}
.sidebar-scrollbar::-webkit-scrollbar {
width: 8px;
}
.sidebar-scrollbar::-webkit-scrollbar-thumb {
background-color: #cccccc;
border-radius: 4px;
}
.sidebar-scrollbar::-webkit-scrollbar-track {
background-color: transparent;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.category-scrollbar::-webkit-scrollbar {
height: 0;
display: none;
}
</style>
</head>
<body class="bg-white">
<!-- Fixed Top Navigation Bar -->
<header class="fixed top-0 left-0 w-full h-14 bg-white border-b border-gray-200 flex items-center justify-between px-4 z-50">
<!-- Left Section - Logo -->
<div class="flex items-center">
<button class="w-10 h-10 flex items-center justify-center mr-4">
<i class="ri-menu-line ri-lg"></i>
</button>
<a href="#" class="flex items-center">
<img src="https://static.readdy.ai/image/3fe41b039d52eef3362db9f06e9e1e40/208c4e1273eb879fb258c45906a37c01.jpeg" alt="YouTube Logo" class="h-6">
</a>
</div>
<!-- Center Section - Search Bar -->
<div class="flex-1 max-w-xl mx-4">
<div class="flex">
<div class="relative flex-1">
<input type="text" placeholder="Search" class="w-full h-10 pl-4 pr-10 border border-gray-300 rounded-l-button focus:outline-none focus:border-blue-500">
<div class="absolute right-2 top-1/2 transform -translate-y-1/2 w-8 h-8 flex items-center justify-center text-gray-500">
<i class="ri-search-line ri-lg"></i>
</div>
</div>
<button class="w-14 h-10 bg-gray-100 border border-l-0 border-gray-300 rounded-r-button flex items-center justify-center !rounded-button">
<i class="ri-search-line ri-lg"></i>
</button>
<button class="w-10 h-10 ml-2 bg-gray-100 rounded-full flex items-center justify-center">
<i class="ri-mic-line ri-lg"></i>
</button>
</div>
</div>
<!-- Right Section - Actions -->
<div class="flex items-center">
<button class="w-10 h-10 mx-2 flex items-center justify-center">
<i class="ri-video-add-line ri-lg"></i>
</button>
<button class="w-10 h-10 mx-2 flex items-center justify-center relative">
<i class="ri-notification-line ri-lg"></i>
<span class="absolute top-1 right-1 bg-primary text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">3</span>
</button>
<button class="w-8 h-8 mx-2 overflow-hidden rounded-full">
<img src="https://public.readdy.ai/ai/img_res/967231341ca3cba6e0a7b835976f402b.jpg" alt="User Profile" class="w-full h-full object-cover">
</button>
</div>
</header>
<!-- Sidebar Navigation -->
<aside class="fixed top-14 left-0 w-60 h-[calc(100vh-56px)] bg-white overflow-y-auto sidebar-scrollbar z-40">
<div class="py-3">
<!-- Main Navigation -->
<div class="border-b border-gray-200 pb-3">
<a href="#" class="flex items-center px-6 py-2 bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-home-fill ri-lg text-primary"></i>
</div>
<span class="text-sm font-medium">Home</span>
</a>
<a href="https://readdy.ai/home/baeed544-39b8-49fe-bd91-1dfc375a95f3/08439bab-59c1-4cb2-8755-13a2b4c111e8" data-readdy="true" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-play-circle-line ri-lg"></i>
</div>
<span class="text-sm">Shorts</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-subscription-line ri-lg"></i>
</div>
<span class="text-sm">Subscriptions</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-folder-video-line ri-lg"></i>
</div>
<span class="text-sm">Library</span>
</a>
</div>
<!-- Subscriptions -->
<div class="py-3 border-b border-gray-200">
<h3 class="px-6 py-1 text-sm font-medium">Subscriptions</h3>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/40d0452ed529ed25f4ffb22f7c75bc2b.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Tech Insider</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/07a23356187550fcc1e1eb0a04847e76.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Music Vibes</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/741bb530ab86b390a39017dd0d960d00.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">GamersHub</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/2c2d9a83e03f1fe1fa921ea2b2dd63df.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Cooking Masters</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/202034341bb7bd86eb31be539ad9083d.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Science Now</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 rounded-full overflow-hidden mr-6">
<img src="https://public.readdy.ai/ai/img_res/3baa2eba167a5a3091ed6ccf75db05de.jpg" alt="Channel" class="w-full h-full object-cover">
</div>
<span class="text-sm">Fitness Pro</span>
</a>
</div>
<!-- Explore -->
<div class="py-3 border-b border-gray-200">
<h3 class="px-6 py-1 text-sm font-medium">Explore</h3>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-fire-line ri-lg"></i>
</div>
<span class="text-sm">Trending</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-music-line ri-lg"></i>
</div>
<span class="text-sm">Music</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-gamepad-line ri-lg"></i>
</div>
<span class="text-sm">Gaming</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-newspaper-line ri-lg"></i>
</div>
<span class="text-sm">News</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-trophy-line ri-lg"></i>
</div>
<span class="text-sm">Sports</span>
</a>
</div>
<!-- More from YouTube -->
<div class="py-3">
<h3 class="px-6 py-1 text-sm font-medium">More from YouTube</h3>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-youtube-fill ri-lg text-primary"></i>
</div>
<span class="text-sm">YouTube Premium</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-film-line ri-lg"></i>
</div>
<span class="text-sm">YouTube Movies</span>
</a>
<a href="#" class="flex items-center px-6 py-2 hover:bg-gray-100">
<div class="w-6 h-6 flex items-center justify-center mr-6">
<i class="ri-live-line ri-lg"></i>
</div>
<span class="text-sm">Live</span>
</a>
</div>
</div>
</aside>
<!-- Main Content Area -->
<main class="pt-14 pl-60">
<!-- Video Categories -->
<div class="sticky top-14 bg-white z-30 border-b border-gray-200">
<div class="overflow-x-auto category-scrollbar whitespace-nowrap py-3 px-6">
<button class="px-3 py-1.5 mr-3 bg-black text-white text-sm rounded-full !rounded-button whitespace-nowrap">All</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Music</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Gaming</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">News</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Live</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Podcasts</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Technology</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Comedy</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Sports</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Education</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Travel</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Cooking</button>
<button class="px-3 py-1.5 mr-3 bg-gray-100 text-sm rounded-full !rounded-button hover:bg-gray-200 whitespace-nowrap">Fitness</button>
</div>
</div>
<!-- Video Grid -->
<div class="grid grid-cols-3 gap-4 p-6">
<!-- Video 1 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/caa91af20639d03e17ea6b53df6d0d13.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">12:34</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/cbe1aabef20ff5dacb7e29ca851b7d78.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Ultimate Review: The New iPhone 15 Pro - Everything You Need to Know!</h3>
<p class="text-xs text-gray-600 mt-1">TechReviewPro</p>
<p class="text-xs text-gray-600">1.2M views • 3 days ago</p>
</div>
</div>
</div>
<!-- Video 2 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/9a8b878a3d47c2ced4a5a28fe6878881.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">18:42</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/0d8a5d3837ead8ade97086a15104dbb2.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">How to Make the Perfect Homemade Pasta - Simple Italian Recipes</h3>
<p class="text-xs text-gray-600 mt-1">Cooking With Julia</p>
<p class="text-xs text-gray-600">845K views • 1 week ago</p>
</div>
</div>
</div>
<!-- Video 3 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/665fed089fe5447f3fdb7779ca3b3eeb.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">2:05:18</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/2fa8335fe08764995f6a22ea738ae501.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">LIVE: Epic Fortnite Tournament - Road to Champion Division!</h3>
<p class="text-xs text-gray-600 mt-1">GameMaster Pro</p>
<p class="text-xs text-gray-600">325K views • Streamed 2 days ago</p>
</div>
</div>
</div>
<!-- Video 4 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/e54a11aa3c8cc57a2e04e86245cee9a5.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">4:26</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/4e50f27126fb6b0b065e326680cf7a37.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Midnight Dreams - Official Music Video (New Release 2025)</h3>
<p class="text-xs text-gray-600 mt-1">Horizon Band</p>
<p class="text-xs text-gray-600">2.8M views • 5 days ago</p>
</div>
</div>
</div>
<!-- Video 5 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/d2f9c0ce7acc81de9cda0274bb8fb267.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">28:15</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/694b82b0d4580a7ea853db75d77fc6e5.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">30-Minute Full Body HIIT Workout - No Equipment Needed!</h3>
<p class="text-xs text-gray-600 mt-1">FitLife with Sarah</p>
<p class="text-xs text-gray-600">1.5M views • 2 weeks ago</p>
</div>
</div>
</div>
<!-- Video 6 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/3af3baaffd7f8abd834738f706ebec7c.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">22:47</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/64d91d3579d178a1e65cda9072568e95.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Exploring Hidden Gems in Bali - Ultimate Travel Guide 2025</h3>
<p class="text-xs text-gray-600 mt-1">Wanderlust Adventures</p>
<p class="text-xs text-gray-600">687K views • 3 weeks ago</p>
</div>
</div>
</div>
<!-- Video 7 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/418779e83c6175b6f60a8416c5ca6c88.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">15:32</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/df5d6526aeeffd1645e5c5b122527f54.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">10 Mind-Blowing Science Experiments You Can Do At Home</h3>
<p class="text-xs text-gray-600 mt-1">Science Explained</p>
<p class="text-xs text-gray-600">4.2M views • 1 month ago</p>
</div>
</div>
</div>
<!-- Video 8 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/1fb43319676bca2995f7ff9e17641672.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">8:53</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/762fe699ca8f15deb9ee6c864d8c0bf4.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">When Your Boss Catches You Sleeping at Work - Comedy Sketch</h3>
<p class="text-xs text-gray-600 mt-1">Laugh Factory</p>
<p class="text-xs text-gray-600">7.5M views • 2 months ago</p>
</div>
</div>
</div>
<!-- Video 9 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/d7b54fea197dab55b435b7efb5d782bb.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">10:05</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/f40a2809746bd770744c44f64699237c.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Breaking: Major Technology Breakthrough Announced - What This Means For The Future</h3>
<p class="text-xs text-gray-600 mt-1">Global News Network</p>
<p class="text-xs text-gray-600">1.1M views • 12 hours ago</p>
</div>
</div>
</div>
<!-- Video 10 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/904411de890501bd9af69d849561abfc.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">14:22</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/9d4ed7a29bd08af9350052bf0db777f4.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Unboxing the PlayStation 6 - First Look and Impressions!</h3>
<p class="text-xs text-gray-600 mt-1">Tech Unboxed</p>
<p class="text-xs text-gray-600">3.4M views • 1 day ago</p>
</div>
</div>
</div>
<!-- Video 11 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/4ee95e1d7da4131afea84038a8c6ca69.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">42:18</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/8d1688e15e9c0dc980543360027a8e18.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">The Secret Life of Arctic Wolves - Full Documentary 2025</h3>
<p class="text-xs text-gray-600 mt-1">Nature Discoveries</p>
<p class="text-xs text-gray-600">2.3M views • 2 weeks ago</p>
</div>
</div>
</div>
<!-- Video 12 -->
<div class="video-card">
<div class="relative">
<img src="https://public.readdy.ai/ai/img_res/e5431f695bdd55077cf6c73f181bdbe6.jpg" alt="Video Thumbnail" class="w-full h-48 object-cover rounded">
<span class="video-duration absolute bg-black bg-opacity-80 text-white text-xs px-1 py-0.5 rounded">1:12:45</span>
</div>
<div class="flex mt-3">
<div class="w-9 h-9 rounded-full overflow-hidden mr-3">
<img src="https://public.readdy.ai/ai/img_res/538a38ef4e7d67607e1d752002a534fb.jpg" alt="Channel Avatar" class="w-full h-full object-cover">
</div>
<div>
<h3 class="text-sm font-medium line-clamp-2">Interview with World-Famous Entrepreneur: Secrets to Success and Future Plans</h3>
<p class="text-xs text-gray-600 mt-1">The Deep Dive Podcast</p>
<p class="text-xs text-gray-600">895K views • 4 days ago</p>
</div>
</div>
</div>
</div>
</main>
<script>
// Infinite scroll simulation
window.addEventListener('scroll', function() {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 500) {
// Would load more content in a real implementation
console.log("Load more content");
}
});
// Tooltip functionality
const buttons = document.querySelectorAll('button');
buttons.forEach(button => {
button.addEventListener('mouseenter', function(e) {
// Would show tooltip in a real implementation
});
button.addEventListener('mouseleave', function(e) {
// Would hide tooltip in a real implementation
});
});
</script>
</body>
</html>
`

code link | 👉 |

AI not only makes tasks easier but also opens doors new ways.

Mr Abdullah WebDev — Thu, 06 Mar 2025 20:05:30 +0000

Blog Posts
LINK https://chat.qwen.ai/
✅ Articles
✅ Social Media Captions
✅ Ad Copies
✅ Email Newsletters

2️⃣ Creative Writing aur Storytelling
Agar aapko stories, scripts ya poetry likhni hai, toh Qwen AI creativity se bhara content likhne mein madad karega. Yeh aapke input ke basis par naya aur innovative likhne ka tareeka suggest karta hai.

3️⃣ AI-Powered Editing aur Proofreading
Qwen AI sirf content likhta nahi, balki usko grammatically correct aur error-free bhi banata hai. Yeh:
🔹 Grammar aur Spelling mistakes detect karta hai
🔹 Sentences ko aur zyada impactful banata hai
🔹 Readability improve karta hai

4️⃣ Multilingual Support 🌍
Agar aap apne content ko alag-alag languages mein likhna chahte hain, toh Qwen AI aapko multiple languages mein likhne ki facility deta hai. Yeh translation aur localisation mein bhi madad karta hai.

5️⃣ Research aur Fact-Checking
Qwen AI sirf likhta nahi, balki aapko reliable aur relevant information bhi provide karta hai. Yeh real-time research karke accurate aur updated knowledge deta hai, jisse aapke articles informative aur authentic bante hain.

6️⃣ Tone aur Style Customisation
Agar aapko formal, casual, persuasive, ya friendly tone mein likhna hai, toh Qwen AI usko adjust kar sakta hai. Yeh brand voice aur audience ke hisaab se content modify karne ki flexibility deta hai.

7️⃣ Idea Generation aur Brainstorming 💭
Agar aap kisi naye content ke idea mein phase hain, toh Qwen AI naye aur unique topic suggestions de sakta hai. Yeh:
✔ Trending Topics suggest karta hai
✔ Blog aur Article ke outlines banata hai
✔ Engaging Headlines aur Titles create karta hai

8️⃣ Social Media Content Creation 📱
Social media ke liye engaging aur viral-worthy content banane mein bhi yeh madad karta hai. Yeh:
🔹 Instagram, Facebook, aur Twitter ke liye catchy captions likhta hai
🔹 LinkedIn aur business posts ke liye professional tone maintain karta hai
🔹 Hashtags aur call-to-action (CTA) bhi recommend karta hai

9️⃣ SEO Optimised Content 🔍
Qwen AI ke SEO-friendly content feature ke zariye aap apni website ya blog ki ranking improve kar sakte hain. Yeh:
Keyword optimisation karta hai
Readability score improve karta hai
Meta descriptions aur title tags likhne mein madad karta hai

AI-Assisted Script Writing 🎬
Agar aap YouTube videos, podcasts ya presentations ke liye scripts likhna chahte hain, toh Qwen AI perfectly structured aur engaging scripts generate kar sakta hai.

🔥 Qwen AI Kyu Use Karein?
✔ Time-Saving & Efficient
✔ Creative aur Unique Content Generation
✔ Error-Free aur Well-Researched Writing
✔ Professional aur Customisable Tone
✔ SEO-Optimised aur User-Friendly Content

[Boost]

Mr Abdullah WebDev — Thu, 06 Mar 2025 19:07:56 +0000