<commit_before><!DOCTYPE html>
<html lang="en">
<head>

  <!-- Basic Page Needs
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta charset="utf-8">
  <title><NAME> - resources</title>
  <meta name="description" content="Freelance front-ender and graphics designer.">
  <meta name="keywords" content="Web, Design, Dev, Graphics, Front-end, Ludvig, Bruchmann, <NAME>, Brüchmann">
  <meta name="author" content="<NAME>">

  <!-- Mobile Specific Metas
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- FONT
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link href="http://fonts.googleapis.com/css?family=Roboto:300,400,900" rel="stylesheet" type="text/css">
  <link href='https://fonts.googleapis.com/css?family=Source+Code+Pro' rel='stylesheet' type='text/css'>

  <!-- MOTUS
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="stylesheet" href="../css//normalize.css">
  <link rel="stylesheet" href="../css/motus.min.css">

   <!-- CSS
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link href="http://www.ludvig.xyz/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

  <!-- Favicon
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="icon" type="image/png" href="http://www.ludvig.xyz/images/favicon.gif">
  <link href="http://www.ludvig.xyz/images/favicon.png" rel="apple-touch-icon-precomposed" />
  <link href="http://www.ludvig.xyz/images/favicon.ico" rel="icon" />
  <link href="http://www.ludvig.xyz/images/favicon.png" sizes="192x192" rel="icon" />

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src='../js/motus.js'></script>

</head>
<body>

  <!-- Primary Page Layout
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
    <div class="container mt">
      <div class="row">
	    <div class="grid-12 center">
          <h1><b>motus.css</b></h1>
          <p>Fully responsive CSS framework for the modern web. Resize your browser to experience responsive magic!<br><span class="muted"><i class="fa fa-code"></i> with <i class="fa fa-heart-o"></i> in Denmark.</p></span>
            <p><a href="http://resources.ludvig.xyz/" class="btn"><i class="fa fa-chevron-left"></i> Back to resources.ludvig.xyz</a></p>
        </div>
      </div>
    </div>

  <div class="container" id="load">
      <div class="row">
	    <div class="grid-12" style="margin-top: 6rem;">
          <h2>Initialize motus from <a href="http://resources.ludvig.xyz/">resources.ludvig.xyz</a></h2>
          <p>Put the following code in the <code>&lt;head&gt;</code> tag of your document to load motus.</p>
		  <pre class="code">&lt;link rel="stylesheet" href="http://resources.ludvig.xyz/normalize.css"&gt;<br>&lt;link rel="stylesheet" href="http://resources.ludvig.xyz/motus.min.css"&gt;</pre>
        </div>
      </div>
	</div>

    <div class="container mt" id="gridstructure">
        <div class="row">
        <div class="grid-12">
            <h4 class="center">Grid structure</h4>
            <pre class="code">&lt;div class="container"&gt;<br/>&ensp; &lt;div class="row"&gt;<br/>&ensp; &ensp; &lt;div class="grid-12"&gt;<br/>&ensp; &ensp; &ensp; &lt;h2&gt;Heading&lt;/h2&gt;<br/>&ensp; &ensp; &ensp; &lt;p&gt;This is a text field&lt;/p&gt;<br/>&ensp; &ensp; &lt;/div&gt;<br/>&ensp; &lt;/div&gt;<br/>&lt;/div&gt;</pre>
          </div>
        </div>
    </div>

    <div class="container mt" id="grid">
      <div class="row">
	    <div class="grid-12 center">
          <h4>Grid showcase</h4>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row center">
        <div class="grid-6">
            <p style="background-color: #347fef; color: #fff; padding: 20px;">grid-6</p>
        </div>
        <div class="grid-3">
            <p style="background-color: #347fef; color: #fff; padding: 20px;">grid-3</p>
        </div>
        <div class="grid-2">
            <p style="background-color: #347fef; color: #fff; padding: 20px;">grid-2</p>
        </div>
        <div class="grid-1">
            <p style="background-color: #347fef; color: #fff; padding: 20px;">grid-1</p>
        </div>
        <div class="grid-12">
            <p style="background-color: #347fef; color: #fff; padding: 20px;">grid-12</p>
        </div>
        <div class="grid-6 offset-3">
            <p style="background-color: #347fef; color: #fff; padding: 20px;">grid-6 offset-3</p>
        </div>
      </div>
	</div>

    <div class="container mt" id="img">
      <div class="row">
	    <div class="grid-12 center">
          <h4>Grid showcase, responsive images</h4>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="grid-6">
            <img class="responsiveimg" src="http://resources.ludvig.xyz/placeholder.svg">
        </div>
        <div class="grid-3">
            <img class="responsiveimg" src="http://resources.ludvig.xyz/placeholder.svg">
        </div>
        <div class="grid-2">
            <img class="responsiveimg" src="http://resources.ludvig.xyz/placeholder.svg">
        </div>
        <div class="grid-1">
            <img class="responsiveimg" src="http://resources.ludvig.xyz/placeholder.svg">
        </div>
      </div>
	</div>
    <div class="container mt">
      <div class="row">
	    <div class="grid-12 center">
          <p>Use <code>class=&quot;img-responsive&quot;</code> <i>or</i> <code>class=&quot;img-responsive-max&quot;</code>.<br>-max means that the image will NOT be stretched out.</p>
        </div>
      </div>
    </div>


     <div class="container mt" id="style">
      <div class="row">
	    <div class="grid-12 center">
          <h4>Style showcase</h4>
        </div>
      </div>
    </div>
    <div class="container mt">
      <div class="row">
	    <div class="grid-12">
          <h1>Heading 1</h1>
          <h2>Heading 2</h2>
		  <h3>Heading 3</h3>
          <h4>Heading 4</h4>
          <a>Link</a><br>
          <a class="underline">Link underline</a><br>
		  <p>When the lights go out, it's nobody's business what goes on between two consenting adults. Yep, I remember. They came in last at the Olympics, then retired to promote alcoholic beverages! Stop! Don't shoot fire stick in space canoe! Cause explosive decompression!<br>I'm a thing. Who said that? SURE you can die! You want to die?! Oh, I always feared he might run off like this. Why, why, why didn't I break his legs? Leela, Bender, we're going grave robbing.<br><span class="lead">Lead</span><br>Hey! I'm a porno-dealing monster, what do I care what you think? Fry, you can't just sit here in the dark listening to classical music. We can't compete with Mom! <b>Her company is big and evil!</b> Ours is small and neutral! I don't want to be rescued. Wow! A superpowers drug you can just rub onto your skin? You'd think it would be something you'd have to freebase. Yep, I remember. They came in last at the Olympics, then retired to promote alcoholic beverages!<br></br><a>Read more...</a><br></p>
          <blockquote><p class="lead">Blockquote:</p>“If, For Any Reason You’re Not Satisfied, I Hate You.”<br>– Sales Clerk</blockquote>
          <blockquote class="blockquote-thin"><p class="lead">Blockquote thin</p></blockquote>
          <a class="btn">Button</a><br>
          <a class="btn primary">Button Primary</a><br>
          <a class="btn info">Button Info</a><br>
          <a class="btn error">Button Error</a><br>
          <a class="btn rounded">Button Rounded</a><br>
          <a class="btn primary rounded">Button Primary Rounded</a><br>
          <p class="lead">Popups (requires motus.js):</p>
          <a class="btn" data-popup--open="popup-1" href="#">Default Popup</a><br>
          <a class="btn" data-popup--open="popup-2" href="#">Plain Popup</a><br>
          <p class="lead" id="pagination">Pagination, button-group:</p>
          <div class="pagination">
            <a>1</a>
            <a class="active">2</a>
            <a>3</a>
            <a class="disabled">..</a>
            <a>42</a>
          </div>
          <div class="pagination">
            <a>First</a>
            <a>1</a>
            <a>2</a>
            <a>3</a>
            <a>4</a>
            <a>5</a>
            <a>6</a>
            <a>7</a>
            <a>8</a>
            <a>9</a>
            <a>Last</a>
          </div>
          <div class="button-group">
            <a><i class="fa fa-print"></i></a>
            <a>Button 2</a>
            <a>Button 3</a>
          </div>
          <p class="lead" id="label">Labels:</p>
          <p>Motus labels:<br>
            <span class="label">default</span>, <span class="label blue">blue</span>, <span class="label green">green</span>, <span class="label red">red</span>, <span class="label black">black</span>,
          <br></br>Modifiers:<br>
            <span class="label text-l">text-l</span>, <span class="label border">border</span>
          <br></br>red + text-l + border:<br>
            <span class="label red text-l border">Important!</span>
          </p>
          </p>
        </div>
      </div>
	</div>

    <div class="container mt mb" id="form">
      <div class="row">
	    <div class="grid-12">
          <h4 class="center">Form style</h4>
            <form action="">
              First name:<br>
              <input type="text" name="firstname" value="Mickey">
              <br>
              Last name:<br>
              <input type="text" name="lastname" value="Mouse">
              <br><br>
              <input type="submit" value="Submit">
            </form>
        <h4 class="center">Form style wide</h4>
            <form action="" class="wide">
              First name:<br>
              <input type="text" name="firstname" value="Mickey">
              <br>
              Last name:<br>
              <input type="text" name="lastname" value="Mouse">
              <br><br>
              <input type="submit" value="Submit">
            </form>
        <h4 class="center">Form style select</h4>
            <form action="">
              First name:<br>
              <input type="text" name="firstname" value="Mickey">
              <select name="tourney">
                <option value="BRDTNS16">Bordtennis</option>
                <option value="SMSHBR16">Smash Bros</option>
                <option value="MROKRT16"><NAME></option>
                <option value="GEKOUT16">Geek out</option>
                <option value="HRTSTN16">Hearthstone</option>
              </select>
            </form>
        </div>
      </div>
	</div>


    <div class="container mt mb" id="list">
      <div class="row">
	    <div class="grid-12">
          <h4>List style</h4>
            <p>using <code>&lt;ul/dl/ol&gt; and &lt;li&gt;</code></p>
            <ul>
                <li>Numero uno</li>
                <li>Nummer to</li>
                <ul>
                    <li>Numero duo uno</li>
                    <li>Nummer to to</li>
                </ul>
                <li>Number three</li>
                <li>Numeron kvar</li>
                <li>Broj pet</li>
            </ul>
            <br></br>
        <h4>Inline list style</h4>
        <p>using <code>&lt;ul/dl/ol&gt; and &lt;li&gt;</code> with class <code>.inline</code></p>
            <ul class="inline">
                <li>Numero uno</li>
                <li>Nummer to</li>
                <li>Number three</li>
                <li>Numeron kvar</li>
                <li>Broj pet</li>
            </ul>
            <br></br>
        <h4>Muted list style</h4>
        <p>using <code>&lt;ul/dl/ol&gt; and &lt;li&gt;</code> with class <code>.muted</code></p>
            <ul class="muted">
                <li>Numero uno</li>
                <li>Nummer to</li>
                <ul class="muted">
                    <li>Numero duo uno</li>
                    <li>Nummer to to</li>
                </ul>
                <li>Number three</li>
                <li>Numeron kvar</li>
                <li>Broj pet</li>
            </ul>
            <br></br>
        </div>
      </div>
	</div>

    <div class="container mt mb" id="table">
      <div class="row">
	    <div class="grid-12">
          <h4>Table Style</h4>
            <table style="width:100%">
              <tr>
                <td>Jill</td>
                <td>Smith</td>
                <td>50</td>
              </tr>
              <tr>
                <td>Eve</td>
                <td>Jackson</td>
                <td>94</td>
              </tr>
              <tr>
                <td>Julie</td>
                <td>Klaphat</td>
                <td>40</td>
              </tr>
              <tr>
                <td>John</td>
                <td>Tron</td>
                <td>24</td>
              </tr>
            </table>
            <h4>Striped Table Style</h4>
            <p><code>&lt;table class="striped"&gt;</code></p>
            <table class="striped" style="width:100%">
              <tr>
                <td>Jill</td>
                <td>Smith</td>
                <td>50</td>
              </tr>
              <tr>
                <td>Eve</td>
                <td>Jackson</td>
                <td>94</td>
              </tr>
              <tr>
                <td>Julie</td>
                <td>Klaphat</td>
                <td>40</td>
              </tr>
              <tr>
                <td>John</td>
                <td>Tron</td>
                <td>24</td>
              </tr>
            </table>
        </div>
      </div>
	</div>

    <div class="container mt mb" id="bg">
      <div class="row">
	    <div class="grid-12">
          <h4>BG Structure</h4>
          <p>Use an extra div around your container with <code>class="bg &#36;color"</code> where &#36;color is the class of your <code>background-color</code><br></br>Motus comes standard with <code>.black</code> and <code>.grey</code></p>
        <p class="lead">Customization example:</p>
        <pre class="code">
.bg.red {
  background-color: #ff0000;
}
</pre>
        </div>
      </div>
	</div>

  <div class="bg black">
    <div class="container">
      <div class="row">
	    <div class="grid-12">
          <h4>BG Style</h4>
          <p class="muted">BG Black Muted text</p>
        </div>
      </div>
	</div>
  </div>


  <div class="bg gray">
    <div class="container">
      <div class="row">
	    <div class="grid-12">
          <h4>BG Style</h4>
          <p class="muted">BG Grey Muted text</p>
        </div>
      </div>
	</div>
  </div>

    <div class="container mt mb">
      <div class="row">
	    <div class="grid-12">
          <h4>Fullscreen video</h4>
            <a href="video.html">Demo</a><br></br>
          <p class="lead">.video-container</p>
          <p>place your video tag with a fullscreen class inside a <code>.video-container</code> div, then place a container with the contents you want on top of the video after the video tag.</p>
        </div>
      </div>
	</div>

  <!--////////////////////////////////////////////////-->
  <!--////////////////////MODALS//////////////////////-->
  <!--////////////////////////////////////////////////-->

  <div data-popup="popup-1" class="popup">
    <div class="popup-container">
      <h4>Popup</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <div class="right"><a data-popup--close="popup-1" href="#">Close</a></div>
    </div>
  </div>

  <div data-popup="popup-2" class="popup">
    <div class="popup-container-plain">
      <h4>Plain Popup</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <a class="btn red" data-popup--close="popup-2" href="#">Close</a>
    </div>
  </div>

<!-- End Document
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
</html>
<commit_msg>Updated docs<commit_after><!DOCTYPE html>
<html lang="en">
<head>

  <!-- Basic Page Needs
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta charset="utf-8">
  <title><NAME> - resources</title>
  <meta name="description" content="Freelance front-ender and graphics designer.">
  <meta name="keywords" content="Web, Design, Dev, Graphics, Front-end, Ludvig, Bruchmann, Ludvig Bruchmann, Brüchmann">
  <meta name="author" content="<NAME>">

  <!-- Mobile Specific Metas
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- FONT
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link href="http://fonts.googleapis.com/css?family=Roboto:300,400,900" rel="stylesheet" type="text/css">
  <link href='https://fonts.googleapis.com/css?family=Source+Code+Pro' rel='stylesheet' type='text/css'>

  <!-- MOTUS
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="stylesheet" href="../css//normalize.css">
  <link rel="stylesheet" href="../css/motus.min.css">

   <!-- CSS
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link href="http://www.ludvig.xyz/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

  <!-- Favicon
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="icon" type="image/png" href="http://www.ludvig.xyz/images/favicon.gif">
  <link href="http://www.ludvig.xyz/images/favicon.png" rel="apple-touch-icon-precomposed" />
  <link href="http://www.ludvig.xyz/images/favicon.ico" rel="icon" />
  <link href="http://www.ludvig.xyz/images/favicon.png" sizes="192x192" rel="icon" />

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src='../js/motus.js'></script>

</head>
<body>

  <!-- Primary Page Layout
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
    <div class="container mt">
      <div class="row">
	    <div class="grid-12 center">
          <h1><b>motus.css</b></h1>
          <p>Fully responsive CSS framework for the modern web. Resize your browser to experience responsive magic!<br><span class="muted"><i class="fa fa-code"></i> with <i class="fa fa-heart-o"></i> in Denmark.</p></span>
            <p><a href="http://resources.ludvig.xyz/" class="btn"><i class="fa fa-chevron-left"></i> Back to resources.ludvig.xyz</a></p>
        </div>
      </div>
    </div>

  <div class="container" id="load">
      <div class="row">
	    <div class="grid-12" style="margin-top: 6rem;">
          <h2>Load motus </h2>
          <p>Put the following code in the <code>&lt;head&gt;</code> tag of your document to load motus. And put motus in your css folder.</p>
		  <pre class="code">&lt;link rel="stylesheet" href="css/normalize.css"&gt;<br>&lt;link rel="stylesheet" href="css/motus.min.css"&gt;</pre>
        </div>
      </div>
	</div>

    <div class="container mt" id="gridstructure">
        <div class="row">
        <div class="grid-12">
            <h4 class="center">Grid structure</h4>
            <pre class="code">&lt;div class="container"&gt;<br/>&ensp; &lt;div class="row"&gt;<br/>&ensp; &ensp; &lt;div class="grid-12"&gt;<br/>&ensp; &ensp; &ensp; &lt;h2&gt;Heading&lt;/h2&gt;<br/>&ensp; &ensp; &ensp; &lt;p&gt;This is a text field&lt;/p&gt;<br/>&ensp; &ensp; &lt;/div&gt;<br/>&ensp; &lt;/div&gt;<br/>&lt;/div&gt;</pre>
          </div>
        </div>
    </div>

    <div class="container mt" id="grid">
      <div class="row">
	    <div class="grid-12 center">
          <h4>Grid showcase</h4>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row center">
        <div class="grid-6">
            <p style="background-color: #347fef; color: #fff; padding: 20px;">grid-6</p>
        </div>
        <div class="grid-3">
            <p style="background-color: #347fef; color: #fff; padding: 20px;">grid-3</p>
        </div>
        <div class="grid-2">
            <p style="background-color: #347fef; color: #fff; padding: 20px;">grid-2</p>
        </div>
        <div class="grid-1">
            <p style="background-color: #347fef; color: #fff; padding: 20px;">grid-1</p>
        </div>
        <div class="grid-12">
            <p style="background-color: #347fef; color: #fff; padding: 20px;">grid-12</p>
        </div>
        <div class="grid-6 offset-3">
            <p style="background-color: #347fef; color: #fff; padding: 20px;">grid-6 offset-3</p>
        </div>
      </div>
	</div>

    <div class="container mt" id="img">
      <div class="row">
	    <div class="grid-12 center">
          <h4>Grid showcase, responsive images</h4>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="grid-6">
            <img class="responsiveimg" src="http://resources.ludvig.xyz/placeholder.svg">
        </div>
        <div class="grid-3">
            <img class="responsiveimg" src="http://resources.ludvig.xyz/placeholder.svg">
        </div>
        <div class="grid-2">
            <img class="responsiveimg" src="http://resources.ludvig.xyz/placeholder.svg">
        </div>
        <div class="grid-1">
            <img class="responsiveimg" src="http://resources.ludvig.xyz/placeholder.svg">
        </div>
      </div>
	</div>
    <div class="container mt">
      <div class="row">
	    <div class="grid-12 center">
          <p>Use <code>class=&quot;img-responsive&quot;</code> <i>or</i> <code>class=&quot;img-responsive-max&quot;</code>.<br>-max means that the image will NOT be stretched out.</p>
        </div>
      </div>
    </div>


     <div class="container mt" id="style">
      <div class="row">
	    <div class="grid-12 center">
          <h4>Style showcase</h4>
        </div>
      </div>
    </div>
    <div class="container mt">
      <div class="row">
	    <div class="grid-12">
          <h1>Heading 1</h1>
          <h2>Heading 2</h2>
		  <h3>Heading 3</h3>
          <h4>Heading 4</h4>
          <a>Link</a><br>
          <a class="underline">Link underline</a><br>
		  <p>When the lights go out, it's nobody's business what goes on between two consenting adults. Yep, I remember. They came in last at the Olympics, then retired to promote alcoholic beverages! Stop! Don't shoot fire stick in space canoe! Cause explosive decompression!<br>I'm a thing. Who said that? SURE you can die! You want to die?! Oh, I always feared he might run off like this. Why, why, why didn't I break his legs? Leela, Bender, we're going grave robbing.<br><span class="lead">Lead</span><br>Hey! I'm a porno-dealing monster, what do I care what you think? Fry, you can't just sit here in the dark listening to classical music. We can't compete with Mom! <b>Her company is big and evil!</b> Ours is small and neutral! I don't want to be rescued. Wow! A superpowers drug you can just rub onto your skin? You'd think it would be something you'd have to freebase. Yep, I remember. They came in last at the Olympics, then retired to promote alcoholic beverages!<br></br><a>Read more...</a><br></p>
          <blockquote><p class="lead">Blockquote:</p>“If, For Any Reason You’re Not Satisfied, I Hate You.”<br>– Sales Clerk</blockquote>
          <blockquote class="blockquote-thin"><p class="lead">Blockquote thin</p></blockquote>
          <a class="btn">Button</a><br>
          <a class="btn primary">Button Primary</a><br>
          <a class="btn info">Button Info</a><br>
          <a class="btn error">Button Error</a><br>
          <a class="btn rounded">Button Rounded</a><br>
          <a class="btn primary rounded">Button Primary Rounded</a><br>
          <p class="lead">Popups (requires motus.js):</p>
          <a class="btn" data-popup--open="popup-1" href="#">Default Popup</a><br>
          <a class="btn" data-popup--open="popup-2" href="#">Plain Popup</a><br>
          <p class="lead" id="pagination">Pagination, button-group:</p>
          <div class="pagination">
            <a>1</a>
            <a class="active">2</a>
            <a>3</a>
            <a class="disabled">..</a>
            <a>42</a>
          </div>
          <div class="pagination">
            <a>First</a>
            <a>1</a>
            <a>2</a>
            <a>3</a>
            <a>4</a>
            <a>5</a>
            <a>6</a>
            <a>7</a>
            <a>8</a>
            <a>9</a>
            <a>Last</a>
          </div>
          <div class="button-group">
            <a><i class="fa fa-print"></i></a>
            <a>Button 2</a>
            <a>Button 3</a>
          </div>
          <p class="lead">Rounded</p>
          <div class="pagination rounded">
            <a>1</a>
            <a class="active">2</a>
            <a>3</a>
            <a class="disabled">..</a>
            <a>42</a>
          </div>
          <div class="pagination rounded">
            <a>First</a>
            <a>1</a>
            <a>2</a>
            <a>3</a>
            <a>4</a>
            <a>5</a>
            <a>6</a>
            <a>7</a>
            <a>8</a>
            <a>9</a>
            <a>Last</a>
          </div>
          <div class="button-group rounded">
            <a><i class="fa fa-print"></i></a>
            <a>Button 2</a>
            <a>Button 3</a>
          </div>
          <p class="lead" id="label">Labels:</p>
          <p>Motus labels:<br>
            <span class="label">default</span>, <span class="label blue">blue</span>, <span class="label green">green</span>, <span class="label red">red</span>, <span class="label black">black</span>
          <br></br>Modifiers:<br>
            <span class="label text-l">text-l</span>, <span class="label border">border</span>
          <br></br>red + text-l + border:<br>
            <span class="label red text-l border">Important!</span>
          </p>
          </p>
        </div>
      </div>
	</div>

    <div class="container mt mb" id="form">
      <div class="row">
	    <div class="grid-12">
          <h4 class="center">Form style</h4>
            <form action="">
              First name:<br>
              <input type="text" name="firstname" value="Mickey">
              <br>
              Last name:<br>
              <input type="text" name="lastname" value="Mouse">
              <br><br>
              <input type="submit" value="Submit">
            </form>
        <h4 class="center">Form style wide</h4>
            <form action="" class="wide">
              First name:<br>
              <input type="text" name="firstname" value="Mickey">
              <br>
              Last name:<br>
              <input type="text" name="lastname" value="Mouse">
              <br><br>
              <input type="submit" value="Submit">
            </form>
        <h4 class="center">Form style select</h4>
            <form action="">
              First name:<br>
              <input type="text" name="firstname" value="Mickey">
              <select name="tourney">
                <option value="BRDTNS16">Bordtennis</option>
                <option value="SMSHBR16">Smash Bros</option>
                <option value="MROKRT16"><NAME></option>
                <option value="GEKOUT16">Geek out</option>
                <option value="HRTSTN16">Hearthstone</option>
              </select>
            </form>
        </div>
      </div>
	</div>


    <div class="container mt mb" id="list">
      <div class="row">
	    <div class="grid-12">
          <h4>List style</h4>
            <p>using <code>&lt;ul/dl/ol&gt; and &lt;li&gt;</code></p>
            <ul>
                <li>Numero uno</li>
                <li>Nummer to</li>
                <ul>
                    <li>Numero duo uno</li>
                    <li>Nummer to to</li>
                </ul>
                <li>Number three</li>
                <li>Numeron kvar</li>
                <li>Broj pet</li>
            </ul>
            <br></br>
        <h4>Inline list style</h4>
        <p>using <code>&lt;ul/dl/ol&gt; and &lt;li&gt;</code> with class <code>.inline</code></p>
            <ul class="inline">
                <li>Numero uno</li>
                <li>Nummer to</li>
                <li>Number three</li>
                <li>Numeron kvar</li>
                <li>Broj pet</li>
            </ul>
            <br></br>
        <h4>Muted list style</h4>
        <p>using <code>&lt;ul/dl/ol&gt; and &lt;li&gt;</code> with class <code>.muted</code></p>
            <ul class="muted">
                <li>Numero uno</li>
                <li>Nummer to</li>
                <ul class="muted">
                    <li>Numero duo uno</li>
                    <li>Nummer to to</li>
                </ul>
                <li>Number three</li>
                <li>Numeron kvar</li>
                <li>Broj pet</li>
            </ul>
            <br></br>
        </div>
      </div>
	</div>

    <div class="container mt mb" id="table">
      <div class="row">
	    <div class="grid-12">
          <h4>Table Style</h4>
            <table style="width:100%">
              <tr>
                <td>Jill</td>
                <td>Smith</td>
                <td>50</td>
              </tr>
              <tr>
                <td>Eve</td>
                <td>Jackson</td>
                <td>94</td>
              </tr>
              <tr>
                <td>Julie</td>
                <td>Klaphat</td>
                <td>40</td>
              </tr>
              <tr>
                <td>John</td>
                <td>Tron</td>
                <td>24</td>
              </tr>
            </table>
            <h4>Striped Table Style</h4>
            <p><code>&lt;table class="striped"&gt;</code></p>
            <table class="striped" style="width:100%">
              <tr>
                <td>Jill</td>
                <td>Smith</td>
                <td>50</td>
              </tr>
              <tr>
                <td>Eve</td>
                <td>Jackson</td>
                <td>94</td>
              </tr>
              <tr>
                <td>Julie</td>
                <td>Klaphat</td>
                <td>40</td>
              </tr>
              <tr>
                <td>John</td>
                <td>Tron</td>
                <td>24</td>
              </tr>
            </table>
        </div>
      </div>
	</div>

    <div class="container mt mb" id="bg">
      <div class="row">
	    <div class="grid-12">
          <h4>BG Structure</h4>
          <p>Use an extra div around your container with <code>class="bg &#36;color"</code> where &#36;color is the class of your <code>background-color</code><br></br>Motus comes standard with <code>.black</code> and <code>.grey</code></p>
        <p class="lead">Customization example:</p>
        <pre class="code">
.bg.red {
  background-color: #ff0000;
}
</pre>
        </div>
      </div>
	</div>

  <div class="bg black">
    <div class="container">
      <div class="row">
	    <div class="grid-12">
          <h4>BG Style</h4>
          <p class="muted">BG Black Muted text</p>
        </div>
      </div>
	</div>
  </div>


  <div class="bg gray">
    <div class="container">
      <div class="row">
	    <div class="grid-12">
          <h4>BG Style</h4>
          <p class="muted">BG Grey Muted text</p>
        </div>
      </div>
	</div>
  </div>

    <div class="container mt mb">
      <div class="row">
	    <div class="grid-12">
          <h4>Fullscreen video</h4>
            <a href="video.html">Demo</a><br></br>
          <p class="lead">.video-container</p>
          <p>place your video tag with a fullscreen class inside a <code>.video-container</code> div, then place a container with the contents you want on top of the video after the video tag.</p>
        </div>
      </div>
	</div>

  <!--////////////////////////////////////////////////-->
  <!--////////////////////MODALS//////////////////////-->
  <!--////////////////////////////////////////////////-->

  <div data-popup="popup-1" class="popup">
    <div class="popup-container">
      <h4>Popup</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <div class="right"><a data-popup--close="popup-1" href="#">Close</a></div>
    </div>
  </div>

  <div data-popup="popup-2" class="popup">
    <div class="popup-container-plain">
      <h4>Plain Popup</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <a class="btn red" data-popup--close="popup-2" href="#">Close</a>
    </div>
  </div>

<!-- End Document
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
</html>

{'fraction_non_alphanumeric': 0.20485230823654266, 'fraction_numerical': 0.013383644832262249, 'mean_word_length': 2.016986837424404, 'pattern_counts': {'":': 0, '<': 1306, '<?xml version=': 0, '>': 1306, 'https://': 4, 'lorem ipsum': 0, 'www.': 10, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 28, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3166845', 'n_tokens_mistral': 12265, 'n_tokens_neox': 10925, 'n_words': 2534}