Skip to content

Instantly share code, notes, and snippets.

@rohitrajiit

rohitrajiit/Dhuranndhar.html

Created December 7, 2025 07:38
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save rohitrajiit/d9ed2af53bc5a5d8ceefdf7877d7910e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save rohitrajiit/d9ed2af53bc5a5d8ceefdf7877d7910e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Dhuranndhar.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dhurandhar Movie Review Infographic</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Rajdhani:wght@400;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Rajdhani', sans-serif;
background-color: #0a0a0a;
color: #e5e5e5;
}
.movie-title {
font-family: 'Anton', sans-serif;
letter-spacing: 2px;
text-transform: uppercase;
}
.glass-panel {
background: rgba(30, 30, 30, 0.6);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
}
.accent-text {
color: #ef4444; /* Red-500 */
}
.gold-text {
color: #fbbf24; /* Amber-400 */
}
.hero-bg {
background-image: linear-gradient(to bottom, rgba(0,0,0,0.3), #0a0a0a), url('http://googleusercontent.com/generated_image_content/0');
background-size: cover;
background-position: center;
}
.stat-card:hover {
transform: translateY(-5px);
border-color: #ef4444;
transition: all 0.3s ease;
}
</style>
</head>
<body class="min-h-screen">
<!-- Hero Section -->
<div class="hero-bg w-full h-[60vh] flex flex-col items-center justify-end pb-12 relative">
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-t from-[#0a0a0a] via-transparent to-transparent"></div>
<div class="z-10 text-center px-4">
<span class="bg-red-600 text-white px-3 py-1 text-sm font-bold tracking-widest rounded mb-4 inline-block">NOW IN THEATERS</span>
<h1 class="movie-title text-6xl md:text-8xl text-white mb-2 drop-shadow-lg">DHURANDHAR</h1>
<p class="text-xl md:text-2xl text-gray-300 tracking-wide font-light">AN INFERNO WILL RISE</p>
<div class="flex items-center justify-center gap-2 mt-4 text-yellow-400 text-2xl">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star text-gray-600"></i>
<span class="text-white text-lg ml-2 font-bold">(4/5)</span>
</div>
</div>
</div>
<!-- Main Content -->
<div class="max-w-6xl mx-auto px-4 -mt-20 relative z-20 pb-20">
<!-- Quick Stats Grid -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
<div class="glass-panel p-4 rounded-lg text-center stat-card">
<i class="fas fa-clock text-3xl accent-text mb-2"></i>
<div class="text-gray-400 text-sm">RUNTIME</div>
<div class="text-xl font-bold">3h 34m</div>
<div class="text-xs text-gray-500">Longest in 17 Years</div>
</div>
<div class="glass-panel p-4 rounded-lg text-center stat-card">
<i class="fas fa-film text-3xl accent-text mb-2"></i>
<div class="text-gray-400 text-sm">GENRE</div>
<div class="text-xl font-bold">Spy Thriller</div>
<div class="text-xs text-gray-500">Espionage Drama</div>
</div>
<div class="glass-panel p-4 rounded-lg text-center stat-card">
<i class="fas fa-exclamation-triangle text-3xl accent-text mb-2"></i>
<div class="text-gray-400 text-sm">CERTIFICATE</div>
<div class="text-xl font-bold">'A' Rated</div>
<div class="text-xs text-gray-500">Strong Violence</div>
</div>
<div class="glass-panel p-4 rounded-lg text-center stat-card">
<i class="fas fa-bullhorn text-3xl accent-text mb-2"></i>
<div class="text-gray-400 text-sm">DIRECTOR</div>
<div class="text-xl font-bold">Aditya Dhar</div>
<div class="text-xs text-gray-500">Uri: Surgical Strike</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Left Column: The Review -->
<div class="md:col-span-2 space-y-6">
<!-- The Verdict Box -->
<div class="glass-panel p-6 rounded-xl border-l-4 border-red-600">
<h2 class="text-3xl font-bold mb-4 flex items-center gap-3">
<i class="fas fa-gavel accent-text"></i> THE VERDICT
</h2>
<p class="text-lg leading-relaxed text-gray-300">
<span class="text-white font-bold">Dhurandhar</span> is a visceral, high-octane espionage drama that prioritizes grit over glamour. While the 3.5-hour runtime is a test of endurance, Aditya Dhar justifies it with a complex narrative and relentless tension. It's violent, loud, and unapologetically "massy," marking a powerful theatrical comeback for Ranveer Singh.
</p>
</div>
<!-- Pros & Cons -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="glass-panel p-5 rounded-lg bg-gradient-to-br from-green-900/20 to-transparent">
<h3 class="text-xl font-bold text-green-400 mb-3"><i class="fas fa-check-circle mr-2"></i> THE HITS</h3>
<ul class="space-y-2 text-gray-300">
<li class="flex items-start"><span class="mr-2 text-green-500">›</span> Ranveer Singh's intense, brooding transformation.</li>
<li class="flex items-start"><span class="mr-2 text-green-500">›</span> Akshaye Khanna is a terrifying scene-stealer.</li>
<li class="flex items-start"><span class="mr-2 text-green-500">›</span> Raw, realistic combat action (No flying cars).</li>
<li class="flex items-start"><span class="mr-2 text-green-500">›</span> High-stakes world-building.</li>
</ul>
</div>
<div class="glass-panel p-5 rounded-lg bg-gradient-to-br from-red-900/20 to-transparent">
<h3 class="text-xl font-bold text-red-400 mb-3"><i class="fas fa-times-circle mr-2"></i> THE MISSES</h3>
<ul class="space-y-2 text-gray-300">
<li class="flex items-start"><span class="mr-2 text-red-500">›</span> Extrememly long runtime (3h 34m) may exhaust casual viewers.</li>
<li class="flex items-start"><span class="mr-2 text-red-500">›</span> Graphic violence is not family-friendly.</li>
<li class="flex items-start"><span class="mr-2 text-red-500">›</span> Pacing dips slightly in the second act.</li>
</ul>
</div>
</div>
</div>
<!-- Right Column: Performance Cards -->
<div class="space-y-4">
<h3 class="text-2xl font-bold border-b border-gray-700 pb-2">PERFORMANCE METER</h3>
<div class="glass-panel p-4 rounded-lg flex items-center gap-4">
<div class="w-12 h-12 rounded-full bg-red-600 flex items-center justify-center font-bold text-xl">RS</div>
<div>
<h4 class="font-bold text-lg">Ranveer Singh</h4>
<div class="text-xs text-gray-400 uppercase tracking-wider">The Protagonist</div>
<div class="w-full bg-gray-700 h-1 mt-2 rounded overflow-hidden">
<div class="bg-red-500 h-full" style="width: 95%"></div>
</div>
</div>
</div>
<div class="glass-panel p-4 rounded-lg flex items-center gap-4">
<div class="w-12 h-12 rounded-full bg-yellow-600 flex items-center justify-center font-bold text-xl text-black">AK</div>
<div>
<h4 class="font-bold text-lg">Akshaye Khanna</h4>
<div class="text-xs text-gray-400 uppercase tracking-wider">The Villain</div>
<div class="w-full bg-gray-700 h-1 mt-2 rounded overflow-hidden">
<div class="bg-yellow-500 h-full" style="width: 98%"></div>
</div>
<span class="text-xs text-yellow-400 mt-1 block">★ Scene Stealer</span>
</div>
</div>
<div class="glass-panel p-4 rounded-lg flex items-center gap-4">
<div class="w-12 h-12 rounded-full bg-gray-600 flex items-center justify-center font-bold text-xl">SD</div>
<div>
<h4 class="font-bold text-lg">Sanjay Dutt</h4>
<div class="text-xs text-gray-400 uppercase tracking-wider">The Veteran</div>
<div class="w-full bg-gray-700 h-1 mt-2 rounded overflow-hidden">
<div class="bg-gray-400 h-full" style="width: 85%"></div>
</div>
</div>
</div>
<div class="mt-8 p-4 bg-red-900/30 border border-red-800 rounded text-center">
<h4 class="text-red-400 font-bold uppercase tracking-widest text-sm mb-2">Audience Consensus</h4>
<p class="text-2xl font-bold text-white">"BLOCKBUSTER"</p>
<p class="text-xs text-gray-400 mt-1">Based on early social media trends</p>
</div>
</div>
</div>
<!-- Footer -->
<div class="mt-12 text-center text-gray-600 text-sm">
<p>Generated by Gemini • Data based on early reviews (Dec 5, 2025)</p>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment