yorha.html

<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="UTF-8" />
<link rel="stylesheet" href="styles/yorha.css" />
<style>
	.full {
		width: 100%;
	}
</style>
<title>YoRHa</title>
<h1>YoRHa</h1>
<p>CSS based on Nier Automata's interface design language.</p>
<h2>Inline elements</h2>
<ul>
	<li><a href="#">a (link)</a></li>
	<li><strong>strong (strong)</strong></li>
	<li><em>em (emphasis)</em></li>
	<li><b>b (bold)</b></li>
	<li><i>i (italics)</i></li>
	<li>
		<u>u (underline)</u>
	</li>
	<li>
		<s>s (strikethrough)</s>
	</li>
	<li>
		<del>del (deleted)</del>
	</li>
	<li><ins>ins (inseted)</ins></li>
	<li>sup<sup>(superscript)</sup></li>
	<li>sub<sub>(subscript)</sub></li>
	<li><small>small (small)</small></li>
	<li>
		<q>q (quote)</q>
	</li>
	<li>
		<cite>cite (citation)</cite>
	</li>
	<li>
		<dfn>dfn (definition)</dfn>
	</li>
	<li>
		<mark>mark (highlight)</mark>
	</li>
	<li>
		<var>var (variable)</var>
	</li>
	<li>
		<time>time (datetime)</time>
	</li>
</ul>
<h2>Headings</h2>
<figure>
	<h1>Heading 1</h1>
	<h2>Heading 2</h2>
	<h3>Heading 3</h3>
	<h4>Heading 4</h4>
	<h5>Heading 5</h5>
	<h6>Heading 6</h6>
</figure>
<h2>Figures</h2>
<figure>
	<figcaption>Bare Fists</figcaption>
	<div>
		<p>Unarmed.</p>
		<hr />
		<p>Attack: 0 - 0</p>
		<p>Combo: Lt 0 Hv 0</p>
		<ul>
			<li>-</li>
			<li>-</li>
		</ul>
	</div>
</figure>
<h2>Forms</h2>
<form>
	<fieldset>
		<legend>Android Information</legend>
		<p>
			<label for="text">Name</label>
			<input class="full" id="text" type="text" placeholder="YoRHa No2 Type B" />
		</p>
		<p>
			<label for="select">Weapons</label>
			<select class="full" id="select">
				<option>Weapon Set 1</option>
				<option>Weapon Set 2</option>
			</select>
		</p>
		<p>
			<label for="textarea">Biography</label>
			<textarea class="full" id="textarea" rows="8" placeholder="She is a..."></textarea>
		</p>
		<button class="full" type="submit">Submit</button>
	</fieldset>
</form>
<h2>Blockquotes</h2>
<blockquote>
	Nier: Automata (Japanese: ニーア オートマタ Hepburn: Nīa Ōtomata, stylized as NieR:Automata) is an upcoming action
	role-playing video game developed by PlatinumGames and published by Square Enix for PlayStation 4 and Microsoft
	Windows. The game is set in the same universe as Nier, a spin-off of the Drakengard series. Set in the midst of a
	proxy war between machines created by otherworldly invaders and the remnants of humanity, the story follows the
	battles of a combat android and her companion.
	<cite><a href="https://en.wikipedia.org/wiki/Nier:_Automata">Wikipedia</a></cite>
</blockquote>
<h2>Code</h2>
<pre>
P R E F O R M A T T E D T E X T
  ! " # $ % & ' ( ) * + , - . /
  0 1 2 3 4 5 6 7 8 9 : ; < = > ?
  @ A B C D E F G H I J K L M N O
  P Q R S T U V W X Y Z [ \ ] ^ _
  ` a b c d e f g h i j k l m n o
  p q r s t u v w x y z { | } ~</pre
>
<h2>Tables</h2>
<table>
	<thead>
		<tr>
			<th width="15%">Character</th>
			<th width="15%">CV</th>
			<th>Role</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>YoRHa No2 Type B</td>
			<td>Yui Ishikawa</td>
			<td>
				She is a female model android created by humans who fled to the Moon to avoid extinction by the
				Machines. The main playable character and protagonist.
			</td>
		</tr>
		<tr>
			<td>YoRHa No9 Type S</td>
			<td>Natsuki Hanae</td>
			<td>
				Scanner type android who is best served when hacking, however he is still able to keep up with other
				close-range attackers. He has a very gentle and kind personality. The second playable character and
				deuratagonist.
			</td>
		</tr>
		<tr>
			<td>YoRHa Type A No2</td>
			<td>Ayaka Suwa</td>
			<td>
				She is a prototype model that was used in order to create the superior 2B and 9S. She doesn't like to
				speak and often keeps to herself. The final playable character and tritagonist.
			</td>
		</tr>
	</tbody>
</table>
<h2>Lists</h2>
<ol>
	<li>Drakengard</li>
	<li>Nier</li>
	<li>Nier Automata</li>
</ol>
<ul>
	<li>Bare Fists</li>
	<li>Virtuous Contract</li>
	<li>Virtuous Treaty</li>
</ul>