Песочница: различия между версиями

← Предыдущая правка

ВизуальныйВики-текст

@@ Строка 1: / Строка 1: @@
-<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
+<div class="character-row">
-  Link with href
+{{Персонаж
-</a>
+ | имя = Джейн До
-<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
+ | изображение = [[Файл:Хельги.jpg|300px|центр|class=noclick]]
-  Button with data-bs-target
+ | происхождение = Новый Иерусалим
-</button>
+ | роль = Учёный
+}}
-<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
-  <div class="offcanvas-header">
+<div class="character-card-list">
-     <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
-     <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
-  </div>
+<div class="mobile-hide">
-  <div class="offcanvas-body">
+<div class="card-group">
-    <div>
+<div class="card">
-      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
+<h5 class="card-title"> <center>[[Хельги Поток]]</center></h5>
+    [[Файл:Хельги.jpg|300px|мини|центр|class=noclick]]
+     <div class="card-hover-info">
+        <div class="label">Раса:</div>
+        <div class="value">Человек: Маланиец</div>
+        <div class="label">Отличие:</div>
+        <div class="value">Получил каменную руку и имперца-недоумка.</div>
+     </div>
+</div>
+<div class="card">
+<h5 class="card-title"> <center>[[Хельги Поток]]</center></h5>
+    [[Файл:Хельги.jpg|300px|мини|центр|class=noclick]]
+    <div class="card-hover-info">
+        <div class="label">Раса:</div>
+        <div class="value">Человек: маланиец</div>
+        <div class="label">Отличие:</div>
+        <div class="value">Получил каменную руку и имперца-дебила.</div>
      </div>
-    <div class="dropdown mt-3">
+</div>
-      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
+<div class="card">
-        Dropdown button
+<h5 class="card-title"> <center>[[Хельги Поток]]</center></h5>
-      </button>
+    [[Файл:Хельги.jpg|300px|мини|центр|class=noclick]]
-      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+    <div class="card-hover-info">
-         <li><a class="dropdown-item" href="#">Action</a></li>
+         <div class="label">Раса:</div>
-         <li><a class="dropdown-item" href="#">Another action</a></li>
+         <div class="value">Человек: маланиец</div>
-         <li><a class="dropdown-item" href="#">Something else here</a></li>
+         <div class="label">Отличие:</div>
-      </ul>
+        <div class="value">Получил каменную руку и имперца-дебила.</div>
      </div>
+</div>
+<div class="card">
+<h5 class="card-title"> <center>[[Хельги Поток]]</center></h5>
+    [[Файл:Хельги.jpg|300px|мини|центр|class=noclick]]
+    <div class="card-hover-info">
+        <div class="label">Раса:</div>
+        <div class="value">Человек: маланиец</div>
+        <div class="label">Отличие:</div>
+        <div class="value">Получил каменную руку и имперца-дебила.</div>
+    </div>
+</div>
+</div>
+<div class="mobile-hide">
+<div class="card-group">
+<div class="card show" style="width: 20rem;>
+  [[Файл:Высший Жрец.jpg|300px|мини|центр|class=noclick]]
+  <div class="card-body">
+    <h5 class="card-title"><center>[[Хельги Поток]]</center></h5>
+            <div class="card-info">
+            <div class="item">
+                <div class="label">Раса:</div>
+                <div class="value">Человек: маланиец</div>
+            </div>
+            <div class="item">
+                <div class="label">Отличие:</div>
+                <div class="value">Получил каменную руку и имперца-дебила..</div>
+            </div>
+        </div>
+  </div>
+</div>
+<div class="card show" style="width: 20rem;>
+  [[Файл:Высший Жрец.jpg|300px|мини|центр|class=noclick]]
+  <div class="card-body">
+    <h5 class="card-title">Заголовок карточки</h5>
+    <p class="card-text">Описание карточки с анимацией.</p>
+  </div>
+</div>
+<div class="card show" style="width: 20rem;>
+  [[Файл:Высший Жрец.jpg|300px|мини|центр|class=noclick]]
+  <div class="card-body">
+    <h5 class="card-title">Заголовок карточки</h5>
+    <p class="card-text">Описание карточки с анимацией.</p>
    </div>
 </div>
+</div>
+</div>
+<br>
+<br>
+<br>
+<br>
+==Вперед==
-[[Файл:Border5.png|мини]]
-{{Навыки}}
-{{Clc}}
-{{High-risk}}
-{{Module rating}}
-{{Заметка}}
-{{Заголовки}}
-{{Infobox}}
 {{Infobox