<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Instagram Feed 📱</title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />

</head>

<body>
    <div class="min-h-screen bg-[#0f0f0f] text-white font-sans flex flex-col">
    <header class="flex justify-between items-center p-4 bg-[#1a1a1a] shadow-lg">
        <div class="flex items-center">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/Instagram_logo.svg/1200px-Instagram_logo.svg.png" alt="Instagram Logo" class="h-8 mr-4">
            <div class="relative">
                <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">search</span>
                <input type="text" placeholder="Username, hashtag and story search" class="bg-[#262626] text-white py-2 px-4 pl-10 rounded-full focus:outline-none focus:ring-2 focus:ring-purple-500">
            </div>
        </div>
        <div class="flex items-center space-x-4">
            <span class="material-symbols-outlined text-gray-400 hover:text-white cursor-pointer">settings</span>
            <span class="material-symbols-outlined text-gray-400 hover:text-white cursor-pointer">photo_camera</span>
            <span class="material-symbols-outlined text-gray-400 hover:text-white cursor-pointer">send</span>
            <button class="flex items-center bg-gradient-to-r from-[#667eea] to-[#764ba2] text-white py-2 px-4 rounded-full shadow-md hover:shadow-xl transition duration-300">
                <span class="material-symbols-outlined mr-1">add</span> New Post
            </button>
        </div>
    </header>

    <main class="flex flex-1">
        <aside class="w-64 bg-[#1a1a1a] p-6 flex flex-col justify-between shadow-inner">
            <div>
                <div class="flex flex-col items-center mb-8">
                    <div class="w-24 h-24 rounded-full overflow-hidden border-4 border-transparent bg-gradient-to-r from-[#f093fb] to-[#f5576c] p-1">
                        <img src="https://avatar.iran.liara.run/public/5" alt="User Avatar" class="w-full h-full rounded-full object-cover">
                    </div>
                    <h2 class="text-xl font-semibold mt-3">UÄŸur Mercan</h2>
                    <p class="text-gray-400">@ugur_mercan0</p>
                    <div class="flex mt-3 space-x-4">
                        <div class="flex items-center">
                            <span class="material-symbols-outlined text-gray-400 mr-1">person</span>
                            <span class="font-medium">121K</span>
                        </div>
                        <div class="flex items-center">
                            <span class="material-symbols-outlined text-gray-400 mr-1">favorite</span>
                            <span class="font-medium">900K</span>
                        </div>
                    </div>
                </div>

                <nav>
                    <ul>
                        <li class="flex items-center p-3 rounded-lg bg-purple-600 text-white cursor-pointer transition duration-300 hover:bg-purple-700">
                            <span class="material-symbols-outlined mr-3">home</span> Home
                        </li>
                        <li class="flex items-center p-3 rounded-lg text-gray-400 cursor-pointer transition duration-300 hover:bg-[#2a2a2a] hover:text-white">
                            <span class="material-symbols-outlined mr-3">explore</span> Explore
                        </li>
                        <li class="flex items-center p-3 rounded-lg text-gray-400 cursor-pointer transition duration-300 hover:bg-[#2a2a2a] hover:text-white">
                            <span class="material-symbols-outlined mr-3">movie</span> Reels
                        </li>
                        <li class="flex items-center p-3 rounded-lg text-gray-400 cursor-pointer transition duration-300 hover:bg-[#2a2a2a] hover:text-white">
                            <span class="material-symbols-outlined mr-3">tv</span> IGTV
                        </li>
                        <li class="flex items-center p-3 rounded-lg text-gray-400 cursor-pointer transition duration-300 hover:bg-[#2a2a2a] hover:text-white">
                            <span class="material-symbols-outlined mr-3">notifications</span> Notification
                        </li>
                    </ul>
                </nav>
            </div>
            <footer class="text-center text-gray-500 text-sm">
                <p>&copy; <span class="copyright-year"></span> Instagram Clone</p>
            </footer>
        </aside>

        <section class="flex-1 p-8 overflow-y-auto">
            <h2 class="text-2xl font-bold mb-6">STORIES</h2>
            <div class="flex space-x-4 overflow-x-auto pb-4 scrollbar-hide">
                <div class="flex flex-col items-center">
                    <div class="w-20 h-20 rounded-full overflow-hidden border-4 border-transparent bg-gradient-to-r from-[#f093fb] to-[#f5576c] p-1 cursor-pointer">
                        <img src="https://image.pollinations.ai/prompt/cake?width=80&height=80&quality=70" alt="Story 1" class="w-full h-full rounded-full object-cover">
                    </div>
                    <p class="text-sm text-gray-400 mt-1">@user_name</p>
                </div>
                <div class="flex flex-col items-center">
                    <div class="w-20 h-20 rounded-full overflow-hidden border-4 border-transparent bg-gradient-to-r from-[#667eea] to-[#764ba2] p-1 cursor-pointer">
                        <img src="https://image.pollinations.ai/prompt/cityscape?width=80&height=80&quality=70" alt="Story 2" class="w-full h-full rounded-full object-cover">
                    </div>
                    <p class="text-sm text-gray-400 mt-1">@user_name</p>
                </div>
                <div class="flex flex-col items-center">
                    <div class="w-20 h-20 rounded-full overflow-hidden border-4 border-transparent bg-gradient-to-r from-[#10b981] to-[#6ee7b7] p-1 cursor-pointer">
                        <img src="https://image.pollinations.ai/prompt/camel?width=80&height=80&quality=70" alt="Story 3" class="w-full h-full rounded-full object-cover">
                    </div>
                    <p class="text-sm text-gray-400 mt-1">@user_name</p>
                </div>
                <div class="flex flex-col items-center">
                    <div class="w-20 h-20 rounded-full overflow-hidden border-4 border-transparent bg-gradient-to-r from-[#f093fb] to-[#f5576c] p-1 cursor-pointer">
                        <img src="https://image.pollinations.ai/prompt/abstract_art?width=80&height=80&quality=70" alt="Story 4" class="w-full h-full rounded-full object-cover">
                    </div>
                    <p class="text-sm text-gray-400 mt-1">@user_name</p>
                </div>
                <div class="flex flex-col items-center">
                    <div class="w-20 h-20 rounded-full overflow-hidden border-4 border-transparent bg-gradient-to-r from-[#667eea] to-[#764ba2] p-1 cursor-pointer">
                        <img src="https://image.pollinations.ai/prompt/silhouette_dancer?width=80&height=80&quality=70" alt="Story 5" class="w-full h-full rounded-full object-cover">
                    </div>
                    <p class="text-sm text-gray-400 mt-1">@user_name</p>
                </div>
                <div class="flex flex-col items-center">
                    <div class="w-20 h-20 rounded-full overflow-hidden border-4 border-transparent bg-gradient-to-r from-[#10b981] to-[#6ee7b7] p-1 cursor-pointer">
                        <img src="https://image.pollinations.ai/prompt/woman_looking_at_sunset?width=80&height=80&quality=70" alt="Story 6" class="w-full h-full rounded-full object-cover">
                    </div>
                    <p class="text-sm text-gray-400 mt-1">@user_name</p>
                </div>
                <div class="flex flex-col items-center">
                    <div class="w-20 h-20 rounded-full overflow-hidden border-4 border-transparent bg-gradient-to-r from-[#f093fb] to-[#f5576c] p-1 cursor-pointer">
                        <img src="https://image.pollinations.ai/prompt/person_on_cliff?width=80&height=80&quality=70" alt="Story 7" class="w-full h-full rounded-full object-cover">
                    </div>
                    <p class="text-sm text-gray-400 mt-1">@user_name</p>
                </div>
                <button class="flex items-center justify-center w-20 h-20 rounded-full bg-[#2a2a2a] text-white cursor-pointer transition duration-300 hover:bg-[#3a3a3a]">
                    <span class="material-symbols-outlined">arrow_forward_ios</span>
                </button>
            </div>

            <h2 class="text-2xl font-bold mt-12 mb-6">TRENDING</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div class="bg-[#1a1a1a] rounded-lg shadow-lg overflow-hidden">
                    <img src="https://image.pollinations.ai/prompt/dog_on_rocks_by_the_sea?width=400&height=400&quality=70" alt="Trending Post 1" class="w-full h-64 object-cover" loading="lazy">
                    <div class="p-4">
                        <div class="flex items-center mb-3">
                            <div class="w-10 h-10 rounded-full overflow-hidden mr-3">
                                <img src="https://avatar.iran.liara.run/public/1" alt="User Avatar" class="w-full h-full object-cover">
                            </div>
                            <div>
                                <p class="font-semibold">@user_name</p>
                                <p class="text-gray-400 text-sm">Location</p>
                            </div>
                        </div>
                        <div class="flex justify-between items-center text-gray-400">
                            <div class="flex space-x-2">
                                <span class="material-symbols-outlined cursor-pointer hover:text-red-500">favorite</span>
                                <span class="material-symbols-outlined cursor-pointer">chat_bubble</span>
                            </div>
                            <span class="material-symbols-outlined cursor-pointer">send</span>
                        </div>
                    </div>
                </div>
                <div class="bg-[#1a1a1a] rounded-lg shadow-lg overflow-hidden">
                    <img src="https://image.pollinations.ai/prompt/tennis_player_serving_a_ball?width=400&height=400&quality=70" alt="Trending Post 2" class="w-full h-64 object-cover" loading="lazy">
                    <div class="p-4">
                        <div class="flex items-center mb-3">
                            <div class="w-10 h-10 rounded-full overflow-hidden mr-3">
                                <img src="https://avatar.iran.liara.run/public/2" alt="User Avatar" class="w-full h-full object-cover">
                            </div>
                            <div>
                                <p class="font-semibold">@user_name</p>
                                <p class="text-gray-400 text-sm">Location</p>
                            </div>
                        </div>
                        <div class="flex justify-between items-center text-gray-400">
                            <div class="flex space-x-2">
                                <span class="material-symbols-outlined cursor-pointer hover:text-red-500">favorite</span>
                                <span class="material-symbols-outlined cursor-pointer">chat_bubble</span>
                            </div>
                            <span class="material-symbols-outlined cursor-pointer">send</span>
                        </div>
                    </div>
                </div>
                <div class="bg-[#1a1a1a] rounded-lg shadow-lg overflow-hidden">
                    <img src="https://image.pollinations.ai/prompt/norwegian_fjord_landscape?width=400&height=400&quality=70" alt="Trending Post 3" class="w-full h-64 object-cover" loading="lazy">
                    <div class="p-4">
                        <div class="flex items-center mb-3">
                            <div class="w-10 h-10 rounded-full overflow-hidden mr-3">
                                <img src="https://avatar.iran.liara.run/public/3" alt="User Avatar" class="w-full h-full object-cover">
                            </div>
                            <div>
                                <p class="font-semibold">@user_name</p>
                                <p class="text-gray-400 text-sm">Location</p>
                            </div>
                        </div>
                        <div class="flex justify-between items-center text-gray-400">
                            <div class="flex space-x-2">
                                <span class="material-symbols-outlined cursor-pointer hover:text-red-500">favorite</span>
                                <span class="material-symbols-outlined cursor-pointer">chat_bubble</span>
                            </div>
                            <span class="material-symbols-outlined cursor-pointer">send</span>
                        </div>
                    </div>
                </div>
                <div class="bg-[#1a1a1a] rounded-lg shadow-lg overflow-hidden">
                    <img src="https://image.pollinations.ai/prompt/woman_watching_sunset_at_beach?width=400&height=400&quality=70" alt="Trending Post 4" class="w-full h-64 object-cover" loading="lazy">
                    <div class="p-4">
                        <div class="flex items-center mb-3">
                            <div class="w-10 h-10 rounded-full overflow-hidden mr-3">
                                <img src="https://avatar.iran.liara.run/public/4" alt="User Avatar" class="w-full h-full object-cover">
                            </div>
                            <div>
                                <p class="font-semibold">@user_name</p>
                                <p class="text-gray-400 text-sm">Location</p>
                            </div>
                        </div>
                        <div class="flex justify-between items-center text-gray-400">
                            <div class="flex space-x-2">
                                <span class="material-symbols-outlined cursor-pointer hover:text-red-500">favorite</span>
                                <span class="material-symbols-outlined cursor-pointer">chat_bubble</span>
                            </div>
                            <span class="material-symbols-outlined cursor-pointer">send</span>
                        </div>
                    </div>
                </div>
                <div class="bg-[#1a1a1a] rounded-lg shadow-lg overflow-hidden">
                    <img src="https://image.pollinations.ai/prompt/dramatic_cloudy_sky?width=400&height=400&quality=70" alt="Trending Post 5" class="w-full h-64 object-cover" loading="lazy">
                    <div class="p-4">
                        <div class="flex items-center mb-3">
                            <div class="w-10 h-10 rounded-full overflow-hidden mr-3">
                                <img src="https://avatar.iran.liara.run/public/5" alt="User Avatar" class="w-full h-full object-cover">
                            </div>
                            <div>
                                <p class="font-semibold">@user_name</p>
                                <p class="text-gray-400 text-sm">Location</p>
                            </div>
                        </div>
                        <div class="flex justify-between items-center text-gray-400">
                            <div class="flex space-x-2">
                                <span class="material-symbols-outlined cursor-pointer hover:text-red-500">favorite</span>
                                <span class="material-symbols-outlined cursor-pointer">chat_bubble</span>
                            </div>
                            <span class="material-symbols-outlined cursor-pointer">send</span>
                        </div>
                    </div>
                </div>
                <div class="bg-[#1a1a1a] rounded-lg shadow-lg overflow-hidden">
                    <img src="https://image.pollinations.ai/prompt/woman_in_traditional_indian_dress?width=400&height=400&quality=70" alt="Trending Post 6" class="w-full h-64 object-cover" loading="lazy">
                    <div class="p-4">
                        <div class="flex items-center mb-3">
                            <div class="w-10 h-10 rounded-full overflow-hidden mr-3">
                                <img src="https://avatar.iran.liara.run/public/6" alt="User Avatar" class="w-full h-full object-cover">
                            </div>
                            <div>
                                <p class="font-semibold">@user_name</p>
                                <p class="text-gray-400 text-sm">Location</p>
                            </div>
                        </div>
                        <div class="flex justify-between items-center text-gray-400">
                            <div class="flex space-x-2">
                                <span class="material-symbols-outlined cursor-pointer hover:text-red-500">favorite</span>
                                <span class="material-symbols-outlined cursor-pointer">chat_bubble</span>
                            </div>
                            <span class="material-symbols-outlined cursor-pointer">send</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
</div>

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<style>
    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }
    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
</style>

</body>

     <script>
        document.querySelector('.copyright-year').textContent = new Date().getFullYear();
     </script>
</html>