Template:ArticleResponsiveGallery: Difference between revisions

Help

Latest revision as of 23:57, 8 October 2023

For testing purposes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis, nisi et vehicula aliquet, lorem purus fermentum elit, sit amet sagittis orci orci eget tortor. Aliquam lobortis pellentesque metus. Ut vel velit justo. Etiam mattis efficitur interdum. Maecenas nec molestie nunc. Aliquam erat volutpat. Duis faucibus sem nulla, nec ultricies nibh vehicula aliquet. Nam a cursus velit, nec auctor magna. Nam et fermentum sapien. Nam malesuada quam vitae venenatis commodo. Duis eget nisl et magna elementum suscipit. Maecenas diam lorem, vulputate ac suscipit sit amet, venenatis at nisl. Nam dictum blandit tellus, sit amet congue lectus tempor quis. Mauris posuere, metus volutpat venenatis sollicitudin, quam nisl finibus purus, ac facilisis urna urna id metus. Donec tempor lectus et commodo varius.

Proin at pharetra felis, ut convallis est. Donec sollicitudin mi sed sagittis tincidunt. Ut rhoncus dictum nunc, nec vulputate velit vestibulum in. Integer facilisis arcu ac hendrerit scelerisque. Ut interdum lorem quis aliquet tincidunt. Sed quis metus velit. Cras id orci ac nulla malesuada imperdiet. Morbi nec nisi sed quam tempus pharetra. Fusce accumsan venenatis nisl. Phasellus a dui ipsum. Duis sodales dui nec elit posuere dictum. Donec ligula ex, fringilla in tortor feugiat, malesuada finibus magna. Donec fringilla imperdiet mauris sit amet vulputate.

Morbi tellus nibh, ornare euismod efficitur quis, euismod non turpis. Sed sed laoreet justo, non fringilla massa. Aliquam sed ante mattis, consequat dolor eget, tempus augue. Pellentesque eget magna ut arcu ullamcorper dignissim sed vel purus. Vivamus sit amet sem convallis, rhoncus ipsum id, vestibulum lorem. Vivamus leo nulla, sagittis id augue imperdiet, mattis eleifend magna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam ornare porttitor ultricies.

Nunc imperdiet volutpat dapibus. Cras malesuada odio eget massa malesuada elementum. Nam lacinia, diam in posuere efficitur, sapien risus condimentum tortor, ut vehicula nunc eros eu ipsum. Curabitur accumsan faucibus accumsan. Proin eget tortor mi. Aliquam cursus viverra elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec nec pulvinar neque. Curabitur condimentum, justo vel luctus porta, ex mi hendrerit neque, vitae cursus velit elit a urna. Aliquam metus quam, sagittis tempor cursus sit amet, vehicula sed odio. Curabitur euismod sapien mi, nec hendrerit lacus bibendum semper. Vivamus feugiat mollis dignissim. Donec nec rutrum erat. Aliquam felis quam, vestibulum at suscipit in, dictum facilisis quam. Vivamus sit amet ipsum vehicula ligula aliquam gravida vel sed odio. Vestibulum fringilla tortor at justo lobortis, ut finibus ex volutpat.

Cras lectus urna, commodo ut nunc vel, porttitor porta est. Phasellus dignissim odio quam, dictum tristique ipsum fringilla a. Etiam iaculis eget metus sed volutpat. Curabitur malesuada dignissim neque vel auctor. Phasellus vel lacus semper, auctor enim nec, egestas leo. Integer dignissim mi sem, eu blandit libero blandit quis. Integer sed interdum ipsum. Ut venenatis sollicitudin velit et gravida. Duis non metus magna. Phasellus euismod, lorem eu ultrices mattis, lectus mi porttitor felis, at maximus erat felis tempor metus.

The Real deal

Grants

Qiuck reflexes

Armor of the Guardians

Artifact, Ingredient, Heavy Armor

17

+3 Armor

Devotion

Artifact, Ingredient, Heavy Armor

38

Grants

Zombify

Instant

40

9

0

Turn your own mortal unit permanently into a Walking Corpse - a strong, resilient minion that doesn't require upkeep.

Death Spellpage I (Slot 1)

Flavor flave.

@@ Line 1: / Line 1: @@
-<div class="MainARG" style="min-width: 70%;max-width: 99%;margin:0;border: 2px solid #000;background: rgba(120, 55, 6, 0.15);text-align: left;overflow: hidden;"><span style="background: #000;height: 55px;text-align: center;line-height: 3;border: 1px solid #000;display: block;">'''Buildings & Units Plans' Locations'''</span><span style="text-align: left;font-family: Times New Roman !important;font-weight: 700;font-size: 125%;padding: 3px 10px;background: linear-gradient(to bottom, #eb2 0%,#620 95%);
+{{CoE Styles}}
-color: #eff;text-shadow: -1px -1px 0 rgba(0, 0, 0, .8), 1px -1px 0 rgba(0, 0, 0, .8), -1px 1px 0 rgba(0, 0, 0, .8), 1px 1px 0 rgba(0, 0, 0, .8);border: 1px solid #000;width: 100%;display: block;">Available from the beginning</span>
+{{#css:
-<div class="ARG_container" style="display: grid;grid-template-columns: repeat(auto-fit, minmax(200px,1fr));grid-gap: 10px;">
+.tooltiptest {
-	<div class="item" style="background: rgba(248, 147, 38, 0.12);padding: 10px;display: grid;grid-template-columns: min-content auto;align-items: center;justify-items: center;align-content: flex-start;"> <div class="icon" style="grid-column: span 2;"><span style="background: linear-gradient(to bottom, rgba(0,183,234,1) 0%,rgba(0,158,195,1) 100%);width: 50px;height: 50px;display: block;margin: 2px auto;box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;padding: 4px;border: 4px double #000;border-radius: 3px;">[[Image:HMWoodcuttersHutIcon.png|50px|link=|Humans - Woodcutter's Hut]]</span></div>
+    position: relative;
-		<div class="content" style="padding: 2px 5px;grid-column: span 2;"><span class="title" style="font-weight: 600;text-align: center;width: 100%;display: block;">[[Building Plans#Humans|Woodcutter's Hut]]</span>
+	-webkit-transition: all 0.3s ease-in-out 0s;
-			<p class="text" style="font-family: 'Trebuchet MS', sans-serif;"> </p>
+	transition: all 0.3s ease-in-out 0s;
-		</div>
+	display: inline-block;
-	</div>
+}
-	<div class="item" style="background: rgba(248, 147, 38, 0.12);padding: 10px;display: grid;grid-template-columns: min-content auto;align-items: center;justify-items: center;align-content: flex-start;"> <div class="icon" style="grid-column: span 2;"><span style="background: linear-gradient(to bottom, rgba(0,183,234,1) 0%,rgba(0,158,195,1) 100%);width: 50px;height: 50px;display: block;margin: 2px auto;box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;padding: 4px;border: 4px double #000;border-radius: 3px;">[[Image:HMQuarryIcon.png|50px|link=|Humans - Quarry]]</span></div>
+.tooltiptest a {
-		<div class="content" style="padding: 2px 5px;grid-column: span 2;"><span class="title" style="font-weight: 600;text-align: center;width: 100%;display: block;">[[Building Plans#Humans|Quarry]]</span>
+	display: inline-block;
-			<p class="text" style="font-family: 'Trebuchet MS', sans-serif;"> </p>
+	color: #07f!important;
-		</div>
+	font-family: Palatino, serif;
-	</div>
+}
-	<div class="item" style="background: rgba(248, 147, 38, 0.12);padding: 10px;display: grid;grid-template-columns: min-content auto;align-items: center;justify-items: center;align-content: flex-start;"> <div class="icon" style="grid-column: span 2;"><span style="background: linear-gradient(to bottom, rgba(0,183,234,1) 0%,rgba(0,158,195,1) 100%);width: 50px;height: 50px;display: block;margin: 2px auto;box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;padding: 4px;border: 4px double #000;border-radius: 3px;">[[Image:HMMineIcon.png|50px|link=|Humans - Mine]]</span></div>
+.tooltipvero a {
-		<div class="content" style="padding: 2px 5px;grid-column: span 2;"><span class="title" style="font-weight: 600;text-align: center;width: 100%;display: block;">[[Building Plans#Humans|Mine]]</span>
+	position: absolute;
-			<p class="text" style="font-family: 'Trebuchet MS', sans-serif;"> </p>
+	display: block;
-		</div>
+	visibility: hidden;
-	</div>
+	opacity: 0;
-	<div class="item" style="background: rgba(248, 147, 38, 0.12);padding: 10px;display: grid;grid-template-columns: min-content auto;align-items: center;justify-items: center;align-content: flex-start;"> <div class="icon" style="grid-column: span 2;"><span style="background: linear-gradient(to bottom, rgba(0,183,234,1) 0%,rgba(0,158,195,1) 100%);width: 50px;height: 50px;display: block;margin: 2px auto;box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;padding: 4px;border: 4px double #000;border-radius: 3px;">[[Image:HMHuntingLodgeIcon.png|50px|link=|Humans - Hunting Lodge]]</span></div>
+	transition: all .3s;
-		<div class="content" style="padding: 2px 5px;grid-column: span 2;"><span class="title" style="font-weight: 600;text-align: center;width: 100%;display: block;">[[Building Plans#Humans|Hunting Lodge]]</span>
+	border-radius: 5px;
-			<p class="text" style="font-family: 'Trebuchet MS', sans-serif;"> </p>
+	box-shadow: 0 0 20px #444 inset;
-		</div>
+	padding: 3px 5px 3px 5px;
-	</div>
+	top: -140px;
-	<div class="item" style="background: rgba(248, 147, 38, 0.12);padding: 10px;display: grid;grid-template-columns: min-content auto;align-items: center;justify-items: center;align-content: flex-start;"> <div class="icon" style="grid-column: span 2;"><span style="background: linear-gradient(to bottom, rgba(0,183,234,1) 0%,rgba(0,158,195,1) 100%);width: 50px;height: 50px;display: block;margin: 2px auto;box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;padding: 4px;border: 4px double #000;border-radius: 3px;">[[Image:HMFishersHutIcon.png|50px|link=|Humans - Fisher's Hut]]</span></div>
+	left: 0px;
-		<div class="content" style="padding: 2px 5px;grid-column: span 2;"><span class="title" style="font-weight: 600;text-align: center;width: 100%;display: block;">[[Building Plans#Humans|Fisher's Hut]]</span>
+	z-index: 9999999;
-			<p class="text" style="font-family: 'Trebuchet MS', sans-serif;"> </p>
+	border: 1px solid #514d4d;
-		</div>
+}
-	</div>
+.tooltipvero a::after {
-	<div class="item" style="background: rgba(248, 147, 38, 0.12);padding: 10px;display: grid;grid-template-columns: min-content auto;align-items: center;justify-items: center;align-content: flex-start;"> <div class="icon" style="grid-column: span 2;"><span style="background: linear-gradient(to bottom, rgba(0,183,234,1) 0%,rgba(0,158,195,1) 100%);width: 50px;height: 50px;display: block;margin: 2px auto;box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;padding: 4px;border: 4px double #000;border-radius: 3px;">[[Image:HMForgeIcon.png|50px|link=|Humans - Forge]]</span></div>
+	content: " ";
-		<div class="content" style="padding: 2px 5px;grid-column: span 2;"><span class="title" style="font-weight: 600;text-align: center;width: 100%;display: block;">[[Building Plans#Humans|Forge]]</span>
+	border-style: solid;
-			<p class="text" style="font-family: 'Trebuchet MS', sans-serif;"> </p>
+	border-width: 7px 7px 0px 7px;
-		</div>
+	border-color: rgba(55, 64, 70, 0.5) transparent transparent transparent;
-	</div>
+	transition-duration: 0s;
-	<div class="item" style="background: rgba(248, 147, 38, 0.12);padding: 10px;display: grid;grid-template-columns: min-content auto;align-items: center;justify-items: center;align-content: flex-start;"> <div class="icon" style="grid-column: span 2;"><span style="background: linear-gradient(to bottom, rgba(0,183,234,1) 0%,rgba(0,158,195,1) 100%);width: 50px;height: 50px;display: block;margin: 2px auto;box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;padding: 4px;border: 4px double #000;border-radius: 3px;">[[Image:HMCrossbowTowerIcon.png|50px|link=|Humans - Crossbow Tower]]</span></div>
+	transform-origin: top;
-		<div class="content" style="padding: 2px 5px;grid-column: span 2;"><span class="title" style="font-weight: 600;text-align: center;width: 100%;display: block;">[[Building Plans#Humans|Crossbow Tower]]</span>
+	transform: translateX(-50%) scaleY(1);
-			<p class="text" style="font-family: 'Trebuchet MS', sans-serif;"> </p>
+	position: absolute;
-		</div>
+	left: 5%;
-	</div>
+	bottom: -7px;
-	<div class="item" style="background: rgba(248, 147, 38, 0.12);padding: 10px;display: grid;grid-template-columns: min-content auto;align-items: center;justify-items: center;align-content: flex-start;"> <div class="icon" style="grid-column: span 2;"><span style="background: linear-gradient(to bottom, rgba(0,183,234,1) 0%,rgba(0,158,195,1) 100%);width: 50px;height: 50px;display: block;margin: 2px auto;box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;padding: 4px;border: 4px double #000;border-radius: 3px;">[[Image:HMSmallHQIcon.png|50px|link=|Humans - Small Headquarters]]</span></div>
+}
-		<div class="content" style="padding: 2px 5px;grid-column: span 2;"><span class="title" style="font-weight: 600;text-align: center;width: 100%;display: block;">[[Building Plans#Humans|Small Headquarters]]</span>
+.tooltipvero a img {
-			<p class="text" style="font-family: 'Trebuchet MS', sans-serif;"> </p>
+	display: block;
-		</div>
+	border: 1px solid #444;
-	</div>
+	max-width: 360px;
-	<div class="item" style="background: rgba(248, 147, 38, 0.12);padding: 10px;display: grid;grid-template-columns: min-content auto;align-items: center;justify-items: center;align-content: flex-start;"> <div class="icon" style="grid-column: span 2;"><span style="background: linear-gradient(to bottom, rgba(0,183,234,1) 0%,rgba(0,158,195,1) 100%);width: 50px;height: 50px;display: block;margin: 2px auto;box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;padding: 4px;border: 4px double #000;border-radius: 3px;">[[Image:HMFoodStoreIcon.png|50px|link=|Humans - Food Store]]</span></div>
+	height: auto;
-		<div class="content" style="padding: 2px 5px;grid-column: span 2;"><span class="title" style="font-weight: 600;text-align: center;width: 100%;display: block;">[[Building Plans#Humans|Food Store]]</span>
+}
-			<p class="text" style="font-family: 'Trebuchet MS', sans-serif;"> </p>
+.tooltiptest:hover .tooltipvero a {
-		</div>
+    visibility: visible;
-	</div>
+    opacity: 1;
-	<div class="item" style="background: rgba(248, 147, 38, 0.12);padding: 10px;display: grid;grid-template-columns: min-content auto;align-items: center;justify-items: center;align-content: flex-start;"> <div class="icon" style="grid-column: span 2;"><span style="background: linear-gradient(to bottom, rgba(0,183,234,1) 0%,rgba(0,158,195,1) 100%);width: 50px;height: 50px;display: block;margin: 2px auto;box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;padding: 4px;border: 4px double #000;border-radius: 3px;">[[Image:HMRecruitIcon.png|50px|link=|Humans - Recruit]]</span></div>
+}
-		<div class="content" style="padding: 2px 5px;grid-column: span 2;"><span class="title" style="font-weight: 600;text-align: center;width: 100%;display: block;">[[Unit Plans#Humans|Recruit]]</span>
+@media only screen and (max-width: 600px) {
-			<p class="text" style="font-family: 'Trebuchet MS', sans-serif;"> </p>
+.item-block,
-		</div>
+.item-block-splitter img {
-	</div>
+	width: 95%!important;
-	<div class="item" style="background: rgba(248, 147, 38, 0.12);padding: 10px;display: grid;grid-template-columns: min-content auto;align-items: center;justify-items: center;align-content: flex-start;"> <div class="icon" style="grid-column: span 2;"><span style="background: linear-gradient(to bottom, rgba(0,183,234,1) 0%,rgba(0,158,195,1) 100%);width: 50px;height: 50px;display: block;margin: 2px auto;box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;padding: 4px;border: 4px double #000;border-radius: 3px;">[[Image:HMScoutIcon.png|50px|link=|Humans - Scout]]</span></div>
+}
-		<div class="content" style="padding: 2px 5px;grid-column: span 2;"><span class="title" style="font-weight: 600;text-align: center;width: 100%;display: block;">[[Unit Plans#Humans|Scout]]</span>
+h4 .item-title {
-			<p class="text" style="font-family: 'Trebuchet MS', sans-serif;"> </p>
+	font-size: 120% !important;
-		</div>
+}
-	</div>
+.tooltip-short, .tooltip, .tooltip-long {
-	<div class="item" style="background: rgba(248, 147, 38, 0.12);padding: 10px;display: grid;grid-template-columns: min-content auto;align-items: center;justify-items: center;align-content: flex-start;"> <div class="icon" style="grid-column: span 2;"><span style="background: linear-gradient(to bottom, rgba(64, 224, 208,1) 0%,rgba(9, 164, 179,1) 100%);width: 50px;height: 50px;display: block;margin: 2px auto;box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;padding: 4px;border: 4px double #000;border-radius: 3px;">[[Image:HMWoodcuttersHutIcon.png|50px|link=|Humans - Woodcutter's Hut]]</span></div>
+	display: none!important;
-		<div class="content" style="padding: 2px 5px;grid-column: span 2;"><span class="title" style="font-weight: 600;text-align: center;width: 100%;display: block;">card-1</span>
+}
-			<p class="text" style="font-family: 'Trebuchet MS', sans-serif;">One thing that you’ll definitely come across living in digs is that everyone has their own way of keeping things tidy… or untidy. Sharing living space with a group of...</p>
+}
-		</div>
+.spell-main-block {
-	</div>
+  background: repeating-conic-gradient(#7b440800 0.000045%, #ac855dde 0.0005%),#cb9;
-	<div class="item" style="background: rgba(248, 147, 38, 0.12);padding: 10px;display: grid;grid-template-columns: min-content auto;align-items: center;justify-items: center;align-content: flex-start;"> <div class="icon" style="grid-column: span 2;"><span style="background: linear-gradient(to bottom, rgba(64, 224, 208,1) 0%,rgba(9, 164, 179,1) 100%);width: 50px;height: 50px;display: block;margin: 2px auto;box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;padding: 4px;border: 4px double #000;border-radius: 3px;">[[Image:HMWoodcuttersHutIcon.png|50px|link=|Humans - Woodcutter's Hut]]</span></div>
+  overflow: hidden;
-		<div class="content" style="padding: 2px 5px;grid-column: span 2;"><span class="title" style="font-weight: 600;text-align: center;width: 100%;display: block;">card-1</span>
+}
-			<p class="text" style="font-family: 'Trebuchet MS', sans-serif;">One thing that you’ll definitely come across living in digs is that everyone has their own way of keeping things tidy… or untidy. Sharing living space with a group of...</p>
+.spell-flavor-block {
-		</div>
+	min-height: 70px;
-	</div>
+}
-	<div class="item" style="background: rgba(248, 147, 38, 0.12);padding: 10px;display: grid;grid-template-columns: min-content auto;align-items: center;justify-items: center;align-content: flex-start;"> <div class="icon" style="grid-column: span 2;"><span style="background: linear-gradient(to bottom, rgba(64, 224, 208,1) 0%,rgba(9, 164, 179,1) 100%);width: 50px;height: 50px;display: block;margin: 2px auto;box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;padding: 4px;border: 4px double #000;border-radius: 3px;">[[Image:HMQuarryIcon.png|50px|link=|Humans - Quarry]]</span></div>
+}}
-		<div class="content" style="padding: 2px 5px;grid-column: span 2;"><span class="title" style="font-weight: 600;text-align: center;width: 100%;display: block;">card-2</span>
-			<p class="text" style="font-family: 'Trebuchet MS', sans-serif;">One thing that you’ll definitely come across living in digs is that everyone has their own way of keeping things tidy… or untidy. Sharing living space with a group of...</p>
+==For testing purposes==
-		</div>
-	</div>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis, nisi et vehicula aliquet, lorem purus fermentum elit, sit amet sagittis orci orci eget tortor. Aliquam lobortis pellentesque metus. Ut vel velit justo. Etiam mattis efficitur interdum. Maecenas nec molestie nunc. Aliquam erat volutpat. Duis faucibus sem nulla, nec ultricies nibh vehicula aliquet. Nam a cursus velit, nec auctor magna. Nam et fermentum sapien. Nam malesuada quam vitae venenatis commodo. Duis eget nisl et magna elementum suscipit. Maecenas diam lorem, vulputate ac suscipit sit amet, venenatis at nisl. Nam dictum blandit tellus, sit amet congue lectus tempor quis. Mauris posuere, metus volutpat venenatis sollicitudin, quam nisl finibus purus, ac facilisis urna urna id metus. Donec tempor lectus et commodo varius.
-	<div class="item" style="background: rgba(248, 147, 38, 0.12);padding: 10px;display: grid;grid-template-columns: min-content auto;align-items: center;justify-items: center;align-content: flex-start;"> <div class="icon" style="grid-column: span 2;"><span style="background: linear-gradient(to bottom, rgba(64, 224, 208,1) 0%,rgba(9, 164, 179,1) 100%);width: 50px;height: 50px;display: block;margin: 2px auto;box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;padding: 4px;border: 4px double #000;border-radius: 3px;">[[Image:HMWoodcuttersHutIcon.png|50px|link=|Humans - Woodcutter's Hut]]</span></div>
-		<div class="content" style="padding: 2px 5px;grid-column: span 2;"><span class="title" style="font-weight: 600;text-align: center;width: 100%;display: block;">card-1</span>
+Proin at pharetra felis, ut convallis est. Donec sollicitudin mi sed sagittis tincidunt. Ut rhoncus dictum nunc, nec vulputate velit vestibulum in. Integer facilisis arcu ac hendrerit scelerisque. Ut interdum lorem quis aliquet tincidunt. Sed quis metus velit. Cras id orci ac nulla malesuada imperdiet. Morbi nec nisi sed quam tempus pharetra. Fusce accumsan venenatis nisl. Phasellus a dui ipsum. Duis sodales dui nec elit posuere dictum. Donec ligula ex, fringilla in tortor feugiat, malesuada finibus magna. Donec fringilla imperdiet mauris sit amet vulputate.
-			<p class="text" style="font-family: 'Trebuchet MS', sans-serif;">One thing that you’ll definitely come across living in digs is that everyone has their own way of keeping things tidy… or untidy. Sharing living space with a group of...</p>
-		</div>
+Morbi tellus nibh, ornare euismod efficitur quis, euismod non turpis. Sed sed laoreet justo, non fringilla massa. Aliquam sed ante mattis, consequat dolor eget, tempus augue. Pellentesque eget magna ut arcu ullamcorper dignissim sed vel purus. Vivamus sit amet sem convallis, rhoncus ipsum id, vestibulum lorem. Vivamus leo nulla, sagittis id augue imperdiet, mattis eleifend magna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam ornare porttitor ultricies.
-	</div>
-	<div class="item" style="background: rgba(248, 147, 38, 0.12);padding: 10px;display: grid;grid-template-columns: min-content auto;align-items: center;justify-items: center;align-content: flex-start;"> <div class="icon" style="grid-column: span 2;"><span style="background: linear-gradient(to bottom, rgba(64, 224, 208,1) 0%,rgba(9, 164, 179,1) 100%);width: 50px;height: 50px;display: block;margin: 2px auto;box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;padding: 4px;border: 4px double #000;border-radius: 3px;">[[Image:HMWoodcuttersHutIcon.png|50px|link=|Humans - Woodcutter's Hut]]</span></div>
+Nunc imperdiet volutpat dapibus. Cras malesuada odio eget massa malesuada elementum. Nam lacinia, diam in posuere efficitur, sapien risus condimentum tortor, ut vehicula nunc eros eu ipsum. Curabitur accumsan faucibus accumsan. Proin eget tortor mi. Aliquam cursus viverra elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec nec pulvinar neque. Curabitur condimentum, justo vel luctus porta, ex mi hendrerit neque, vitae cursus velit elit a urna. Aliquam metus quam, sagittis tempor cursus sit amet, vehicula sed odio. Curabitur euismod sapien mi, nec hendrerit lacus bibendum semper. Vivamus feugiat mollis dignissim. Donec nec rutrum erat. Aliquam felis quam, vestibulum at suscipit in, dictum facilisis quam. Vivamus sit amet ipsum vehicula ligula aliquam gravida vel sed odio. Vestibulum fringilla tortor at justo lobortis, ut finibus ex volutpat.
-		<div class="content" style="padding: 2px 5px;grid-column: span 2;"><span class="title" style="font-weight: 600;text-align: center;width: 100%;display: block;">card-1</span>
-			<p class="text" style="font-family: 'Trebuchet MS', sans-serif;">One thing that you’ll definitely come across living in digs is that everyone has their own way of keeping things tidy… or untidy. Sharing living space with a group of...</p>
+Cras lectus urna, commodo ut nunc vel, porttitor porta est. Phasellus dignissim odio quam, dictum tristique ipsum fringilla a. Etiam iaculis eget metus sed volutpat. Curabitur malesuada dignissim neque vel auctor. Phasellus vel lacus semper, auctor enim nec, egestas leo. Integer dignissim mi sem, eu blandit libero blandit quis. Integer sed interdum ipsum. Ut venenatis sollicitudin velit et gravida. Duis non metus magna. Phasellus euismod, lorem eu ultrices mattis, lectus mi porttitor felis, at maximus erat felis tempor metus.
-		</div>
-	</div>
+===The Real deal===
-	<div class="item" style="background: rgba(248, 147, 38, 0.12);padding: 10px;display: grid;grid-template-columns: min-content auto;align-items: center;justify-items: center;align-content: flex-start;"> <div class="icon" style="grid-column: span 2;"><span style="background: linear-gradient(to bottom, rgba(64, 224, 208,1) 0%,rgba(9, 164, 179,1) 100%);width: 50px;height: 50px;display: block;margin: 2px auto;box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;padding: 4px;border: 4px double #000;border-radius: 3px;">[[Image:HMWoodcuttersHutIcon.png|50px|link=|Humans - Woodcutter's Hut]]</span></div>
+<div class="item-text">Grants <div class="tooltip-short">Quick Reflexes<span style="margin: 5px; display: block;height: auto; max-width: 250px;" border="0">[[Image:SF CoE Ability Quick Reflexes.png|link=Quick Reflexes]]</span></div></div>
-		<div class="content" style="padding: 2px 5px;grid-column: span 2;"><span class="title" style="font-weight: 600;text-align: center;width: 100%;display: block;">card-1</span>
-			<p class="text" style="font-family: 'Trebuchet MS', sans-serif;">One thing that you’ll definitely come across living in digs is that everyone has their own way of keeping things tidy… or untidy. Sharing living space with a group of...</p>
+<div class="tooltiptest">
-		</div>
+  [[Quick Reflexes|Qiuck reflexes]]<div class="tooltipvero"><span style="margin: 5px; display: block;height: auto; max-width: 250px;" border="0">[[Image:SF CoE Ability Quick Reflexes.png|link=Quick Reflexes]]</span></div>
-	</div>
-	<div class="item" style="background: rgba(248, 147, 38, 0.12);padding: 10px;display: grid;grid-template-columns: min-content auto;align-items: center;justify-items: center;align-content: flex-start;"> <div class="icon" style="grid-column: span 2;"><span style="background: linear-gradient(to bottom, rgba(64, 224, 208,1) 0%,rgba(9, 164, 179,1) 100%);width: 50px;height: 50px;display: block;margin: 2px auto;box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;padding: 4px;border: 4px double #000;border-radius: 3px;">[[Image:HMQuarryIcon.png|50px|link=|Humans - Quarry]]</span></div>
-		<div class="content" style="padding: 2px 5px;grid-column: span 2;"><span class="title" style="font-weight: 600;text-align: center;width: 100%;display: block;">card-2</span>
-			<p class="text" style="font-family: 'Trebuchet MS', sans-serif;">One thing that you’ll definitely come across living in digs is that everyone has their own way of keeping things tidy… or untidy. Sharing living space with a group of...</p>
-		</div>
-	</div>
-	<div class="item" style="background: rgba(248, 147, 38, 0.12);padding: 10px;display: grid;grid-template-columns: min-content auto;align-items: center;justify-items: center;align-content: flex-start;"> <div class="icon" style="grid-column: span 2;"><span style="background: linear-gradient(to bottom, rgba(64, 224, 208,1) 0%,rgba(9, 164, 179,1) 100%);width: 50px;height: 50px;display: block;margin: 2px auto;box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;padding: 4px;border: 4px double #000;border-radius: 3px;">[[Image:HMWoodcuttersHutIcon.png|50px|link=|Humans - Woodcutter's Hut]]</span></div>
-		<div class="content" style="padding: 2px 5px;grid-column: span 2;"><span class="title" style="font-weight: 600;text-align: center;width: 100%;display: block;">card-1</span>
-			<p class="text" style="font-family: 'Trebuchet MS', sans-serif;">One thing that you’ll definitely come across living in digs is that everyone has their own way of keeping things tidy… or untidy. Sharing living space with a group of...</p>
-		</div>
-	</div>
-	<div class="item" style="background: rgba(248, 147, 38, 0.12);padding: 10px;display: grid;grid-template-columns: min-content auto;align-items: center;justify-items: center;align-content: flex-start;"> <div class="icon" style="grid-column: span 2;"><span style="background: linear-gradient(to bottom, rgba(64, 224, 208,1) 0%,rgba(9, 164, 179,1) 100%);width: 50px;height: 50px;display: block;margin: 2px auto;box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;padding: 4px;border: 4px double #000;border-radius: 3px;">[[Image:HMWoodcuttersHutIcon.png|50px|link=|Humans - Woodcutter's Hut]]</span></div>
-		<div class="content" style="padding: 2px 5px;grid-column: span 2;"><span class="title" style="font-weight: 600;text-align: center;width: 100%;display: block;">card-1</span>
-			<p class="text" style="font-family: 'Trebuchet MS', sans-serif;">One thing that you’ll definitely come across living in digs is that everyone has their own way of keeping things tidy… or untidy. Sharing living space with a group of...</p>
-		</div>
-	</div>
 </div>
+{{CoE Item
+|title = Armor of the Guardians
+|sub-title = Artifact, Ingredient, Heavy Armor
+|icon = SF CoE Icon Armor of the Guardians.png
+|value-gold = 17
+|value-elemental = 1
+|value-arcane = 2
+|value-death = 1
+|line-1 = +3 Armor
+}}
+{{CoE Item
+|title = Devotion
+|sub-title = Artifact, Ingredient, Heavy Armor
+|icon = SF CoE Icon Devotion.png
+|value-gold = 38
+|value-elemental = 4
+|value-death = 1
+|line-1 = Grants
+|tooltip-1-type = tooltip-short
+|line-1-link = Armored
+|tooltip-1-img = SF CoE Classification Armored.png
+|line-2 = Grants
+|tooltip-2-type = tooltip-short
+|line-2-link = Steadfast
+|tooltip-2-img = SF CoE Ability Steadfast.png
+|line-3 = Grants
+|tooltip-3-type = tooltip
+|line-3-link = Total Awareness
+|tooltip-3-img = SF CoE Ability Total Awareness.png
+}}
+<div class="spell-main-block">
+<div class="spell-grid">
+  <div class="spell-icon-block">[[Image:SF CoE Zombify Icon.png]]</div>
+  <div class="spell-title-left-block left outer"></div>
+  <div class="spell-title-block"><h4><div class="spell-title">Zombify</div></h4></div>
+  <div class="spell-subtitle-block spell-subtitle">Instant</div>
+  <div class="spell-title-right-block right outer"></div>
+  <div class="spell-research-block spell-resource-text">[[Image:SF CoE Icon Research Transparent.png|20px|link=|Research Cost]] 40</div>
+  <div class="spell-mana-block spell-resource-text">[[Image:SF CoE Icon Mana Transparent.png|20px|link=|Mana Cost]] 9</div>
+  <div class="spell-upkeep-block spell-resource-text">[[Image:SF CoE Icon Mana Upkeep Transparent.png|20px|link=|Mana Upkeep]] 0</div>
+  <div class="spell-info-block spell-text">Turn your own mortal unit permanently into a [[Walking Corpses(CoE)|Walking Corpse]] - a strong, resilient minion that doesn't require upkeep.</div>
+  <div class="spell-blank-block">[[Image:SF CoE Zombify Blank.png|500px|link=|Spell Slot Before Unlock]]</div>
+  <div class="spell-page-block spell-flavor-text">[[Death Spellpage I (Slot 1)]]</div>
+  <div class="spell-flavor-block spell-flavor-text">Flavor flave.</div>
+</div>
 </div>