index.html

<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="dist/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>