<!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>© <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>