Заглавная страница: различия между версиями

Текущая версия от 10:36, 6 сентября 2026

Добро пожаловать на сюжетную Вики «Зари»!

       <a href="/wiki/Основной_сюжет" class="zarya-card">
           <img src="/images/сюжет.jpg" class="zarya-card-img" alt="Основной сюжет">

Основной сюжет

       </a>

       <a href="/wiki/Места" class="zarya-card">

?

Места

       </a>

       <a href="/wiki/Персонажи" class="zarya-card">
           <img src="/images/персонажи.jpg" class="zarya-card-img" alt="Персонажи">

Персонажи

       </a>

       <a href="/wiki/Предметы" class="zarya-card">

?

Предметы

       </a>

@@ Строка 1: / Строка 1: @@
-<!-- А это вставьте на саму Заглавную страницу в режиме вики-текста -->
 <div class="zarya-header">
 Добро пожаловать на сюжетную Вики «Зари»!
 </div>
-<div class="zarya-cards-grid">
+<div class="zarya-grid">
+     <div class="zarya-card-wrap">
-     <!-- Секция 1: Основной сюжет -->
+        <a href="/wiki/Основной_сюжет" class="zarya-card">
-    <a href="/wiki/Основной_сюжет" class="zarya-card" data-tilt>
+             <img src="/images/сюжет.jpg" class="zarya-card-img" alt="Основной сюжет">
-        <div class="zarya-card-media">
+            <div class="zarya-card-title">Основной сюжет</div>
-            <!-- Замените src на ссылку вашей картинки или удалите тег img, если картинки нет -->
+         </a>
-             <img src="/images/ сюжет.jpg" alt="Основной сюжет">
+     </div>
-        </div>
-        <div class="zarya-card-title">Основной сюжет</div>
-    </a>
-    <!-- Секция 2: Места (пример без картинки — сработает знак вопроса) -->
-    <a href="/wiki/Места" class="zarya-card" data-tilt>
-        <div class="zarya-card-media is-empty"></div>
-         <div class="zarya-card-title">Места</div>
-     </a>
-     <!-- Секция 3: Персонажи -->
+     <div class="zarya-card-wrap">
-    <a href="/wiki/Персонажи" class="zarya-card" data-tilt>
+        <a href="/wiki/Места" class="zarya-card">
-        <div class="zarya-card-media">
+            <div class="zarya-card-empty">?</div>
-            <img src="/images/ персонажи.jpg" alt="Персонажи">
+            <div class="zarya-card-title">Места</div>
-        </div>
+        </a>
-        <div class="zarya-card-title">Персонажи</div>
+     </div>
-     </a>
-     <!-- Секция 4: Предметы -->
+     <div class="zarya-card-wrap">
-    <a href="/wiki/Предметы" class="zarya-card" data-tilt>
+        <a href="/wiki/Персонажи" class="zarya-card">
-        <div class="zarya-card-media is-empty"></div>
+            <img src="/images/персонажи.jpg" class="zarya-card-img" alt="Персонажи">
-        <div class="zarya-card-title">Предметы</div>
+            <div class="zarya-card-title">Персонажи</div>
-     </a>
+        </a>
+     </div>
+    <div class="zarya-card-wrap">
+        <a href="/wiki/Предметы" class="zarya-card">
+            <div class="zarya-card-empty">?</div>
+            <div class="zarya-card-title">Предметы</div>
+        </a>
+    </div>
 </div>
-<!-- Скрипт для создания эффекта наклона карточки за курсором (как в Steam) -->
-<script>
-document.addEventListener("DOMContentLoaded", () => {
-    const cards = document.querySelectorAll('.zarya-card');
-    cards.forEach(card => {
-        card.addEventListener('mousemove', (e) => {
-            const rect = card.getBoundingClientRect();
-            const x = e.clientX - rect.left;
-            const y = e.clientY - rect.top;
-            const centerX = rect.width / 2;
-            const centerY = rect.height / 2;
-            const rotateX = ((y - centerY) / centerY) * -10;
-            const rotateY = ((x - centerX) / centerX) * 10;
-            card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-5px)`;
-        });
-        card.addEventListener('mouseleave', () => {
-            card.style.transform = 'perspective(1000px) rotateX(0deg) rotateY(0deg) translateY(0px)';
-        });
-    });
-});
-</script>