mana/index.html

160 lines
6.4 KiB
HTML
Raw Normal View History

2015-03-23 14:16:34 +00:00
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<title>Mana</title>
<link rel="stylesheet" href="css/mana.css" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<style type="text/css">
body {
background: #fff;
border-top: 3px solid #CBC8BB;
color: #333;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans",
Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.6em;
margin: 0;
padding: 0 100px;
}
h3 {
font-size: 16px;
font-weight: bold;
margin: 0;
}
p {
margin: 10px 0 20px;
}
footer {
border-top: 1px solid #eee;
margin: 40px 0 0;
padding: 20px 0 30px;
}
</style>
</head>
<body>
<h1>Mana</h1>
<h2>MTG Mana Symbol Demos</h2>
<p>
This HTML file is for demo purposes and is not necessary for Mana installation or use.
You can view all of the mana symbol font icons and the available examples below (casting cost background and increased sizes).
</p>
<h3>Regular mana symbols</h3>
<p>
<i class="ms ms-w ms-cost ms-shadow"></i>
<i class="ms ms-u ms-cost ms-shadow"></i>
<i class="ms ms-b ms-cost ms-shadow"></i>
<i class="ms ms-r ms-cost ms-shadow"></i>
<i class="ms ms-g ms-cost ms-shadow"></i>
<i class="ms ms-0 ms-cost ms-shadow"></i>
<i class="ms ms-1 ms-cost ms-shadow"></i>
<i class="ms ms-2 ms-cost ms-shadow"></i>
<i class="ms ms-3 ms-cost ms-shadow"></i>
<i class="ms ms-4 ms-cost ms-shadow"></i>
<i class="ms ms-5 ms-cost ms-shadow"></i>
<i class="ms ms-6 ms-cost ms-shadow"></i>
<i class="ms ms-7 ms-cost ms-shadow"></i>
<i class="ms ms-8 ms-cost ms-shadow"></i>
<i class="ms ms-9 ms-cost ms-shadow"></i>
<i class="ms ms-10 ms-cost ms-shadow"></i>
<i class="ms ms-11 ms-cost ms-shadow"></i>
<i class="ms ms-12 ms-cost ms-shadow"></i>
<i class="ms ms-13 ms-cost ms-shadow"></i>
<i class="ms ms-14 ms-cost ms-shadow"></i>
<i class="ms ms-15 ms-cost ms-shadow"></i>
<i class="ms ms-16 ms-cost ms-shadow"></i>
<i class="ms ms-17 ms-cost ms-shadow"></i>
<i class="ms ms-18 ms-cost ms-shadow"></i>
<i class="ms ms-19 ms-cost ms-shadow"></i>
<i class="ms ms-20 ms-cost ms-shadow"></i>
2015-03-23 14:16:34 +00:00
<i class="ms ms-x ms-cost ms-shadow"></i>
<i class="ms ms-y ms-cost ms-shadow"></i>
<i class="ms ms-z ms-cost ms-shadow"></i>
</p>
2015-12-14 14:49:43 +00:00
<h3>Phyrexian, snow, colorless, and split symbols</h3>
2015-03-23 14:16:34 +00:00
<p>
<i class="ms ms-wp ms-cost ms-shadow"></i>
<i class="ms ms-up ms-cost ms-shadow"></i>
<i class="ms ms-bp ms-cost ms-shadow"></i>
<i class="ms ms-rp ms-cost ms-shadow"></i>
<i class="ms ms-gp ms-cost ms-shadow"></i>
2015-03-23 14:16:34 +00:00
<i class="ms ms-s ms-cost ms-shadow"></i>
2015-12-14 14:49:43 +00:00
<i class="ms ms-c ms-cost ms-shadow"></i>
2015-03-23 14:16:34 +00:00
<br />
<i class="ms ms-wu ms-split ms-cost ms-shadow"></i>
<i class="ms ms-wb ms-split ms-cost ms-shadow"></i>
<i class="ms ms-ub ms-split ms-cost ms-shadow"></i>
<i class="ms ms-ur ms-split ms-cost ms-shadow"></i>
<i class="ms ms-br ms-split ms-cost ms-shadow"></i>
<i class="ms ms-bg ms-split ms-cost ms-shadow"></i>
<i class="ms ms-rw ms-split ms-cost ms-shadow"></i>
<i class="ms ms-rg ms-split ms-cost ms-shadow"></i>
<i class="ms ms-gw ms-split ms-cost ms-shadow"></i>
<i class="ms ms-gu ms-split ms-cost ms-shadow"></i>
<i class="ms ms-2w ms-split ms-cost ms-shadow"></i>
<i class="ms ms-2u ms-split ms-cost ms-shadow"></i>
<i class="ms ms-2b ms-split ms-cost ms-shadow"></i>
<i class="ms ms-2r ms-split ms-cost ms-shadow"></i>
<i class="ms ms-2g ms-split ms-cost ms-shadow"></i>
</p>
<h3>Tap and roll symbols</h3>
<p>
<i class="ms ms-tap ms-cost ms-shadow"></i>
<i class="ms ms-untap ms-cost"></i>
<i class="ms ms-tap-alt ms-cost ms-shadow"></i>
<i class="ms ms-chaos"></i>
</p>
<h3>2x size (3-6x also included)</h3>
<p>
<i class="ms ms-w ms-cost ms-shadow ms-2x"></i>
<i class="ms ms-u ms-cost ms-shadow ms-2x"></i>
<i class="ms ms-b ms-cost ms-shadow ms-2x"></i>
<i class="ms ms-r ms-cost ms-shadow ms-2x"></i>
<i class="ms ms-g ms-cost ms-shadow ms-2x"></i>
</p>
2016-05-31 14:53:22 +00:00
<h3><a href="http://gatherer.wizards.com/Pages/Card/Details.aspx?multiverseid=74257">Half mana symbols</a></h3>
2015-12-02 18:55:43 +00:00
<p>
<span class="ms-half"><i class="ms ms-w ms-cost"></i></span>
<span class="ms-half"><i class="ms ms-u ms-cost"></i></span>
<span class="ms-half"><i class="ms ms-b ms-cost"></i></span>
<span class="ms-half"><i class="ms ms-r ms-cost"></i></span>
<span class="ms-half"><i class="ms ms-g ms-cost"></i></span>
</p>
2016-05-31 14:53:22 +00:00
<h3>Un-set mana symbols</h3>
<p>
<i class="ms ms-1-2 ms-cost ms-shadow"></i>
<i class="ms ms-infinity ms-cost ms-shadow"></i>
<i class="ms ms-100 ms-cost ms-shadow"></i>
<i class="ms ms-100000 ms-cost ms-shadow"></i>
</p>
2015-03-23 14:16:34 +00:00
<h3>Future Sight type symbols</h3>
<p>
<i class="ms ms-artifact ms-2x"></i>
<i class="ms ms-creature ms-2x"></i>
<i class="ms ms-enchantment ms-2x"></i>
<i class="ms ms-instant ms-2x"></i>
<i class="ms ms-land ms-2x"></i>
<i class="ms ms-planeswalker ms-2x"></i>
<i class="ms ms-sorcery ms-2x"></i>
2015-04-13 15:52:54 +00:00
&nbsp;&nbsp;
<i class="ms ms-flashback ms-2x"></i>
2015-03-23 14:16:34 +00:00
</p>
<h3>Planeswalker symbols</h3>
<p>
<i class="ms ms-loyalty-up ms-loyalty-3 ms-3x"></i>
<i class="ms ms-loyalty-down ms-loyalty-x ms-3x"></i>
<i class="ms ms-loyalty-zero ms-loyalty-0 ms-3x"></i>
<i class="ms ms-loyalty-start ms-loyalty-4 ms-4x"></i>
</p>
2016-05-31 14:53:22 +00:00
<h3>Double-faced card symbols</h3>
<p>
<i class="ms ms-dfc ms-dfc-day ms-2x"></i>
<i class="ms ms-dfc ms-dfc-night ms-2x"></i>
</p>
2015-03-23 14:16:34 +00:00
<footer>
Made with &hearts; by <a href="http://andrewgioia.com">Andrew Gioia</a>
</footer>
</body>
</html>