60 lines
10 KiB
HTML
60 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<script src="https://cdn.tailwindcss.com"></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=Nunito:wght@400;600;700;800;900&display=swap" rel="stylesheet">
|
|
<script>
|
|
tailwind.config = { theme: { extend: { fontFamily: { nunito: ['Nunito', 'sans-serif'] } } } }
|
|
</script>
|
|
<style>
|
|
.asteroid-glow { filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.3)); }
|
|
.number-shadow { text-shadow: 2px 2px 4px rgba(0,0,0,0.7), 0 0 12px rgba(99, 102, 241, 0.5); }
|
|
.number-shadow-sm { text-shadow: 1px 1px 3px rgba(0,0,0,0.8), 0 0 6px rgba(99, 102, 241, 0.4); }
|
|
.divider-construction { height: 7px; background: repeating-linear-gradient(-45deg, #f59e0b, #f59e0b 8px, #92400e 8px, #92400e 16px); border-radius: 2px; opacity: 0.7; }
|
|
.splitter-icon { width: 36mm; object-fit: contain; flex-shrink: 0; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-white font-nunito p-6">
|
|
<div class="flex flex-col gap-6" style="max-width: 700px;">
|
|
|
|
<!-- Section: N=10 -->
|
|
<div class="flex items-center gap-[8mm]">
|
|
<div class="relative shrink-0 w-[26mm] h-[26mm] flex items-center justify-center asteroid-glow">
|
|
<img src="../../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" alt="">
|
|
<span class="absolute text-[2.2rem] font-black text-white number-shadow">10</span>
|
|
</div>
|
|
<div class="flex-1 flex flex-col gap-[1.5mm] items-center">
|
|
<div class="flex items-center gap-[2mm]"><img src="../../../assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="../../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">10</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">1</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">9</span></div>
|
|
<div class="flex items-center gap-[2mm]"><img src="../../../assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="../../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">10</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">4</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">6</span></div>
|
|
<div class="flex items-center gap-[2mm]"><img src="../../../assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="../../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">10</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300"> </span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300"> </span></div>
|
|
<div class="flex items-center gap-[2mm]"><img src="../../../assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="../../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">10</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300"> </span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300"> </span></div>
|
|
<div class="flex items-center gap-[2mm]"><img src="../../../assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="../../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">10</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300"> </span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300"> </span></div>
|
|
<div class="flex items-center gap-[2mm]"><img src="../../../assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="../../../assets/icons/pack3-asteroids/asteroid1.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">10</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300"> </span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300"> </span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="divider-construction"></div>
|
|
|
|
<!-- Section: N=7 -->
|
|
<div class="flex items-center gap-[8mm]">
|
|
<div class="relative shrink-0 w-[26mm] h-[26mm] flex items-center justify-center asteroid-glow">
|
|
<img src="../../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" alt="">
|
|
<span class="absolute text-[2.2rem] font-black text-white number-shadow">7</span>
|
|
</div>
|
|
<div class="flex-1 flex flex-col gap-[1.5mm] items-center">
|
|
<div class="flex items-center gap-[2mm]"><img src="../../../assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="../../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">7</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">1</span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300"> </span></div>
|
|
<div class="flex items-center gap-[2mm]"><img src="../../../assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="../../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">7</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300"> </span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300 text-center text-[1.1rem] font-semibold text-indigo-950">4</span></div>
|
|
<div class="flex items-center gap-[2mm]"><img src="../../../assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="../../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">7</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300"> </span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300"> </span></div>
|
|
<div class="flex items-center gap-[2mm]"><img src="../../../assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="../../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">7</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300"> </span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300"> </span></div>
|
|
<div class="flex items-center gap-[2mm]"><img src="../../../assets/hero-images/splitters/splitter3.png" class="splitter-icon" alt=""><div class="relative w-[12mm] h-[12mm] shrink-0"><img src="../../../assets/icons/pack3-asteroids/asteroid2.png" class="w-full h-full object-contain" alt=""><span class="absolute inset-0 flex items-center justify-center text-[1rem] font-black text-white number-shadow-sm">7</span></div><span class="text-[1.3rem] font-bold text-indigo-950">=</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300"> </span><span class="text-[1.3rem] font-bold text-indigo-950">+</span><span class="inline-block w-[18mm] border-b-[2px] border-indigo-300"> </span></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|