module

module/input/Read Me.txt

@@ -0,0 +1,7 @@
+Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
+
+To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts
+
+You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.
+
+You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.

module/input/demo-files/demo.css

@@ -0,0 +1,158 @@
+body {
+  padding: 0;
+  margin: 0;
+  font-family: sans-serif;
+  font-size: 1em;
+  line-height: 1.5;
+  color: #555;
+  background: #fff;
+}
+h1 {
+  font-size: 1.5em;
+  font-weight: normal;
+}
+small {
+  font-size: .66666667em;
+}
+a {
+  color: #e74c3c;
+  text-decoration: none;
+}
+a:hover, a:focus {
+  box-shadow: 0 1px #e74c3c;
+}
+.bshadow0, input {
+  box-shadow: inset 0 -2px #e7e7e7;
+}
+input:hover {
+  box-shadow: inset 0 -2px #ccc;
+}
+input, fieldset {
+  font-family: sans-serif;
+  font-size: 1em;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+input {
+  color: inherit;
+  line-height: 1.5;
+  height: 1.5em;
+  padding: .25em 0;
+}
+input:focus {
+  outline: none;
+  box-shadow: inset 0 -2px #449fdb;
+}
+.glyph {
+  font-size: 16px;
+  width: 15em;
+  padding-bottom: 1em;
+  margin-right: 4em;
+  margin-bottom: 1em;
+  float: left;
+  overflow: hidden;
+}
+.liga {
+  width: 80%;
+  width: calc(100% - 2.5em);
+}
+.talign-right {
+  text-align: right;
+}
+.talign-center {
+  text-align: center;
+}
+.bgc1 {
+  background: #f1f1f1;
+}
+.fgc1 {
+  color: #999;
+}
+.fgc0 {
+  color: #000;
+}
+p {
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+.mvm {
+  margin-top: .75em;
+  margin-bottom: .75em;
+}
+.mtn {
+  margin-top: 0;
+}
+.mtl, .mal {
+  margin-top: 1.5em;
+}
+.mbl, .mal {
+  margin-bottom: 1.5em;
+}
+.mal, .mhl {
+  margin-left: 1.5em;
+  margin-right: 1.5em;
+}
+.mhmm {
+  margin-left: 1em;
+  margin-right: 1em;
+}
+.mls {
+  margin-left: .25em;
+}
+.ptl {
+  padding-top: 1.5em;
+}
+.pbs, .pvs {
+  padding-bottom: .25em;
+}
+.pvs, .pts {
+  padding-top: .25em;
+}
+.unit {
+  float: left;
+}
+.unitRight {
+  float: right;
+}
+.size1of2 {
+  width: 50%;
+}
+.size1of1 {
+  width: 100%;
+}
+.clearfix:before, .clearfix:after {
+  content: " ";
+  display: table;
+}
+.clearfix:after {
+  clear: both;
+}
+.hidden-true {
+  display: none;
+}
+.textbox0 {
+  width: 3em;
+  background: #f1f1f1;
+  padding: .25em .5em;
+  line-height: 1.5;
+  height: 1.5em;
+}
+#testDrive {
+  display: block;
+  padding-top: 24px;
+  line-height: 1.5;
+}
+.fs0 {
+  font-size: 16px;
+}
+.fs1 {
+  font-size: 32px;
+}
+.fs2 {
+  font-size: 24px;
+}
+.fs3 {
+  font-size: 20px;
+}
+

module/input/demo-files/demo.js

@@ -0,0 +1,30 @@
+if (!('boxShadow' in document.body.style)) {
+    document.body.setAttribute('class', 'noBoxShadow');
+}
+
+document.body.addEventListener("click", function(e) {
+    var target = e.target;
+    if (target.tagName === "INPUT" &&
+        target.getAttribute('class').indexOf('liga') === -1) {
+        target.select();
+    }
+});
+
+(function() {
+    var fontSize = document.getElementById('fontSize'),
+        testDrive = document.getElementById('testDrive'),
+        testText = document.getElementById('testText');
+    function updateTest() {
+        testDrive.innerHTML = testText.value || String.fromCharCode(160);
+        if (window.icomoonLiga) {
+            window.icomoonLiga(testDrive);
+        }
+    }
+    function updateSize() {
+        testDrive.style.fontSize = fontSize.value + 'px';
+    }
+    fontSize.addEventListener('change', updateSize, false);
+    testText.addEventListener('input', updateTest, false);
+    testText.addEventListener('change', updateTest, false);
+    updateSize();
+}());

module/input/demo.html

@@ -0,0 +1,212 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>IcoMoon Demo</title>
+    <meta name="description" content="An Icon Font Generated By IcoMoon.io">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="demo-files/demo.css">
+    <link rel="stylesheet" href="style.css"></head>
+<body>
+    <div class="bgc1 clearfix">
+        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs:&nbsp;12)</small></h1>
+    </div>
+    <div class="clearfix mhl ptl">
+        <h1 class="mvm mtn fgc1">Grid Size: 16</h1>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-search"></span>
+                <span class="mls"> icon-search</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e900" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe900;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-earth"></span>
+                <span class="mls"> icon-earth</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e901" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe901;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-location-"></span>
+                <span class="mls"> icon-location-</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e902" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe902;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-mail"></span>
+                <span class="mls"> icon-mail</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e903" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe903;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-phone"></span>
+                <span class="mls"> icon-phone</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e904" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe904;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+    </div>
+    <div class="clearfix mhl ptl">
+        <h1 class="mvm mtn fgc1">Grid Size: 24</h1>
+        <div class="glyph fs2">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-arrow_next"></span>
+                <span class="mls"> icon-arrow_next</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e905" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe905;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs2">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-arrow_prev"></span>
+                <span class="mls"> icon-arrow_prev</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e906" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe906;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+    </div>
+    <div class="clearfix mhl ptl">
+        <h1 class="mvm mtn fgc1">Grid Size: 20</h1>
+        <div class="glyph fs3">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-google"></span>
+                <span class="mls"> icon-google</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e907" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe907;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs3">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-instagram"></span>
+                <span class="mls"> icon-instagram</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e908" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe908;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs3">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-facebook"></span>
+                <span class="mls"> icon-facebook</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e909" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe909;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs3">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-twitter"></span>
+                <span class="mls"> icon-twitter</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e90a" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe90a;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+        <div class="glyph fs3">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-pinterest"></span>
+                <span class="mls"> icon-pinterest</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e90b" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe90b;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
+    </div>
+
+    <!--[if gt IE 8]><!-->
+    <div class="mhl clearfix mbl">
+        <h1>Font Test Drive</h1>
+        <label>
+            Font Size: <input id="fontSize" type="number" class="textbox0 mbm"
+            min="8" value="48" />
+            px
+        </label>
+        <input id="testText" type="text" class="phl size1of1 mvl"
+        placeholder="Type some text to test..." value=""/>
+        <div id="testDrive" class="icon-" style="font-family: icomoon">&nbsp;
+        </div>
+    </div>
+    <!--<![endif]-->
+    <div class="bgc1 clearfix">
+        <p class="mhl">Generated by <a href="https://icomoon.io/app">IcoMoon</a></p>
+    </div>
+
+    <script src="demo-files/demo.js"></script>
+</body>
+</html>

module/input/icomoon.css

@@ -0,0 +1,63 @@
+@font-face {
+  font-family: 'icomoon';
+  src:  url('fonts/icomoon.eot?nzpz98');
+  src:  url('fonts/icomoon.eot?nzpz98#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?nzpz98') format('truetype'),
+    url('fonts/icomoon.woff?nzpz98') format('woff'),
+    url('fonts/icomoon.svg?nzpz98#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon' !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-search:before {
+  content: "\e900";
+}
+.icon-earth:before {
+  content: "\e901";
+}
+.icon-location-:before {
+  content: "\e902";
+}
+.icon-mail:before {
+  content: "\e903";
+}
+.icon-phone:before {
+  content: "\e904";
+}
+.icon-arrow_next:before {
+  content: "\e905";
+}
+.icon-arrow_prev:before {
+  content: "\e906";
+}
+.icon-google:before {
+  content: "\e907";
+}
+.icon-instagram:before {
+  content: "\e908";
+}
+.icon-facebook:before {
+  content: "\e909";
+}
+.icon-twitter:before {
+  content: "\e90a";
+}
+.icon-pinterest:before {
+  content: "\e90b";
+}

module/markup/css/icomoon.css

@@ -0,0 +1,63 @@
+@font-face {
+  font-family: 'icomoon';
+  src:  url('../fonts/icon/icomoon.eot?nzpz98');
+  src:  url('../fonts/icon/icomoon.eot?nzpz98#iefix') format('embedded-opentype'),
+    url('../fonts/icon/icomoon.ttf?nzpz98') format('truetype'),
+    url('../fonts/icon/icomoon.woff?nzpz98') format('woff'),
+    url('../fonts/icon/icomoon.svg?nzpz98#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon' !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-search:before {
+  content: "\e900";
+}
+.icon-earth:before {
+  content: "\e901";
+}
+.icon-location-:before {
+  content: "\e902";
+}
+.icon-mail:before {
+  content: "\e903";
+}
+.icon-phone:before {
+  content: "\e904";
+}
+.icon-arrow_next:before {
+  content: "\e905";
+}
+.icon-arrow_prev:before {
+  content: "\e906";
+}
+.icon-google:before {
+  content: "\e907";
+}
+.icon-instagram:before {
+  content: "\e908";
+}
+.icon-facebook:before {
+  content: "\e909";
+}
+.icon-twitter:before {
+  content: "\e90a";
+}
+.icon-pinterest:before {
+  content: "\e90b";
+}

module/markup/css/normalize.css

@@ -0,0 +1,379 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+img {
+    max-width: 100%;
+    display: block;
+}
+
+ul {
+  padding: 0;
+  margin: 0;
+}
+
+li {
+  list-style-type: none;
+}
+
+a {
+  text-decoration: none;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+  padding: 0;
+}
+
+
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+ html {
+    line-height: 1.15; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+  }
+  
+  /* Sections
+     ========================================================================== */
+  
+  /**
+   * Remove the margin in all browsers.
+   */
+  
+  body {
+    margin: 0;
+  }
+  
+  /**
+   * Render the `main` element consistently in IE.
+   */
+  
+  main {
+    display: block;
+  }
+  
+  /**
+   * Correct the font size and margin on `h1` elements within `section` and
+   * `article` contexts in Chrome, Firefox, and Safari.
+   */
+  
+  h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+  }
+  
+  /* Grouping content
+     ========================================================================== */
+  
+  /**
+   * 1. Add the correct box sizing in Firefox.
+   * 2. Show the overflow in Edge and IE.
+   */
+  
+  hr {
+    box-sizing: content-box; /* 1 */
+    height: 0; /* 1 */
+    overflow: visible; /* 2 */
+  }
+  
+  /**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+  
+  pre {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+  
+  /* Text-level semantics
+     ========================================================================== */
+  
+  /**
+   * Remove the gray background on active links in IE 10.
+   */
+  
+  a {
+    background-color: transparent;
+  }
+  
+  /**
+   * 1. Remove the bottom border in Chrome 57-
+   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+   */
+  
+  abbr[title] {
+    border-bottom: none; /* 1 */
+    text-decoration: underline; /* 2 */
+    text-decoration: underline dotted; /* 2 */
+  }
+  
+  /**
+   * Add the correct font weight in Chrome, Edge, and Safari.
+   */
+  
+  b,
+  strong {
+    font-weight: bolder;
+  }
+  
+  /**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+  
+  code,
+  kbd,
+  samp {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+  
+  /**
+   * Add the correct font size in all browsers.
+   */
+  
+  small {
+    font-size: 80%;
+  }
+  
+  /**
+   * Prevent `sub` and `sup` elements from affecting the line height in
+   * all browsers.
+   */
+  
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  
+  sub {
+    bottom: -0.25em;
+  }
+  
+  sup {
+    top: -0.5em;
+  }
+  
+  /* Embedded content
+     ========================================================================== */
+  
+  /**
+   * Remove the border on images inside links in IE 10.
+   */
+  
+  img {
+    border-style: none;
+  }
+  
+  /* Forms
+     ========================================================================== */
+  
+  /**
+   * 1. Change the font styles in all browsers.
+   * 2. Remove the margin in Firefox and Safari.
+   */
+  
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 1 */
+    line-height: 1.15; /* 1 */
+    margin: 0; /* 2 */
+  }
+  
+  /**
+   * Show the overflow in IE.
+   * 1. Show the overflow in Edge.
+   */
+  
+  button,
+  input { /* 1 */
+    overflow: visible;
+  }
+  
+  /**
+   * Remove the inheritance of text transform in Edge, Firefox, and IE.
+   * 1. Remove the inheritance of text transform in Firefox.
+   */
+  
+  button,
+  select { /* 1 */
+    text-transform: none;
+  }
+  
+  /**
+   * Correct the inability to style clickable types in iOS and Safari.
+   */
+  
+  button,
+  [type="button"],
+  [type="reset"],
+  [type="submit"] {
+    -webkit-appearance: button;
+  }
+  
+  /**
+   * Remove the inner border and padding in Firefox.
+   */
+  
+  button::-moz-focus-inner,
+  [type="button"]::-moz-focus-inner,
+  [type="reset"]::-moz-focus-inner,
+  [type="submit"]::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+  }
+  
+  /**
+   * Restore the focus styles unset by the previous rule.
+   */
+  
+  button:-moz-focusring,
+  [type="button"]:-moz-focusring,
+  [type="reset"]:-moz-focusring,
+  [type="submit"]:-moz-focusring {
+    outline: 1px dotted ButtonText;
+  }
+  
+  /**
+   * Correct the padding in Firefox.
+   */
+  
+  fieldset {
+    padding: 0.35em 0.75em 0.625em;
+  }
+  
+  /**
+   * 1. Correct the text wrapping in Edge and IE.
+   * 2. Correct the color inheritance from `fieldset` elements in IE.
+   * 3. Remove the padding so developers are not caught out when they zero out
+   *    `fieldset` elements in all browsers.
+   */
+  
+  legend {
+    box-sizing: border-box; /* 1 */
+    color: inherit; /* 2 */
+    display: table; /* 1 */
+    max-width: 100%; /* 1 */
+    padding: 0; /* 3 */
+    white-space: normal; /* 1 */
+  }
+  
+  /**
+   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+   */
+  
+  progress {
+    vertical-align: baseline;
+  }
+  
+  /**
+   * Remove the default vertical scrollbar in IE 10+.
+   */
+  
+  textarea {
+    overflow: auto;
+  }
+  
+  /**
+   * 1. Add the correct box sizing in IE 10.
+   * 2. Remove the padding in IE 10.
+   */
+  
+  [type="checkbox"],
+  [type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+  }
+  
+  /**
+   * Correct the cursor style of increment and decrement buttons in Chrome.
+   */
+  
+  [type="number"]::-webkit-inner-spin-button,
+  [type="number"]::-webkit-outer-spin-button {
+    height: auto;
+  }
+  
+  /**
+   * 1. Correct the odd appearance in Chrome and Safari.
+   * 2. Correct the outline style in Safari.
+   */
+  
+  [type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    outline-offset: -2px; /* 2 */
+  }
+  
+  /**
+   * Remove the inner padding in Chrome and Safari on macOS.
+   */
+  
+  [type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  
+  /**
+   * 1. Correct the inability to style clickable types in iOS and Safari.
+   * 2. Change font properties to `inherit` in Safari.
+   */
+  
+  ::-webkit-file-upload-button {
+    -webkit-appearance: button; /* 1 */
+    font: inherit; /* 2 */
+  }
+  
+  /* Interactive
+     ========================================================================== */
+  
+  /*
+   * Add the correct display in Edge, IE 10+, and Firefox.
+   */
+  
+  details {
+    display: block;
+  }
+  
+  /*
+   * Add the correct display in all browsers.
+   */
+  
+  summary {
+    display: list-item;
+  }
+  
+  /* Misc
+     ========================================================================== */
+  
+  /**
+   * Add the correct display in IE 10+.
+   */
+  
+  template {
+    display: none;
+  }
+  
+  /**
+   * Add the correct display in IE 10.
+   */
+  
+  [hidden] {
+    display: none;
+  }

module/markup/css/slick.css

@@ -0,0 +1,119 @@
+/* Slider */
+.slick-slider
+{
+    position: relative;
+
+    display: block;
+    box-sizing: border-box;
+
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+
+    -webkit-touch-callout: none;
+    -khtml-user-select: none;
+    -ms-touch-action: pan-y;
+        touch-action: pan-y;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.slick-list
+{
+    position: relative;
+
+    display: block;
+    overflow: hidden;
+
+    margin: 0;
+    padding: 0;
+}
+.slick-list:focus
+{
+    outline: none;
+}
+.slick-list.dragging
+{
+    cursor: pointer;
+    cursor: hand;
+}
+
+.slick-slider .slick-track,
+.slick-slider .slick-list
+{
+    -webkit-transform: translate3d(0, 0, 0);
+       -moz-transform: translate3d(0, 0, 0);
+        -ms-transform: translate3d(0, 0, 0);
+         -o-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+}
+
+.slick-track
+{
+    position: relative;
+    top: 0;
+    left: 0;
+
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+.slick-track:before,
+.slick-track:after
+{
+    display: table;
+
+    content: '';
+}
+.slick-track:after
+{
+    clear: both;
+}
+.slick-loading .slick-track
+{
+    visibility: hidden;
+}
+
+.slick-slide
+{
+    display: none;
+    float: left;
+
+    height: 100%;
+    min-height: 1px;
+}
+[dir='rtl'] .slick-slide
+{
+    float: right;
+}
+.slick-slide img
+{
+    display: block;
+}
+.slick-slide.slick-loading img
+{
+    display: none;
+}
+.slick-slide.dragging img
+{
+    pointer-events: none;
+}
+.slick-initialized .slick-slide
+{
+    display: block;
+}
+.slick-loading .slick-slide
+{
+    visibility: hidden;
+}
+.slick-vertical .slick-slide
+{
+    display: block;
+
+    height: auto;
+
+    border: 1px solid transparent;
+}
+.slick-arrow.slick-hidden {
+    display: none;
+}

module/markup/index.html

@@ -0,0 +1,462 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>YOGA</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="css/normalize.css">
+    <link rel="stylesheet" href="css/icomoon.css">
+    <link rel="stylesheet" href="css/slick.css">
+    <link rel="stylesheet" href="css/main.css">
+</head>
+
+<body>
+    <div class="wrapper">
+        <header class="header">
+            <div class="container">
+                <div class="header__inner">
+                    <div class="header__logo">
+                        <a class="logo__link" href="#">
+                            <img class="logo__img" src="images/logo.png" alt="logo">
+                        </a>
+                    </div>
+                    <div class="header__menu">
+                        <nav class="menu">
+                            <input id="opener" type="checkbox">
+                            <label class="burger" for="opener">
+                                <span>menu</span>
+                            </label>
+                            <ul class="menu__list">
+                                <li class="menu__list-item">
+                                    <a class="menu__list-link active" href="#">About us</a>
+                                </li>
+                                <li class="menu__list-item">
+                                    <a class="menu__list-link" href="#">Reservation</a>
+                                </li>
+                                <li class="menu__list-item">
+                                    <a class="menu__list-link" href="#">Gallery</a>
+                                </li>
+                                <li class="menu__list-item">
+                                    <a class="menu__list-link" href="#">Blog</a>
+                                </li>
+                                <li class="menu__list-item">
+                                    <a class="menu__list-link" href="#">Elements</a>
+                                </li>
+                                <li class="menu__list-item">
+                                    <a class="menu__list-link" href="#">Shop</a>
+                                </li>
+                            </ul>
+                        </nav>
+                    </div>
+                </div>
+            </div>
+        </header>
+
+        <main class="main">
+            <div class="top">
+                <div class="top__wrapper">
+                    <div class="container">
+                        <div class="top__inner">
+                            <div class="form__block">
+                                <form class="form" action="#">
+                                    <h2 class="form__title">Trial Class</h2>
+                                    <input class="form__input" type="text" placeholder="Enter your name">
+                                    <input class="form__input" type="tel" placeholder="Enter your phone">
+                                    <select class="form__select">
+                                        <option disabled selected hidden>Choose your class</option>
+                                        <option>Lorem</option>
+                                        <option>Lorem</option>
+                                        <option>Lorem</option>
+                                    </select>
+                                    <button class="form__btn" type="submit">Try it</button>
+                                </form>
+                            </div>
+                            <div class="top__text">
+                                <h1 class="top__title">
+                                    Just balance <br> your mind & body
+                                </h1>
+                                <span class="top__sub-title">
+                                    Create the healthy living for yourself
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="program">
+                <div class="container">
+                    <h2 class="program__title">Yoga feature program</h2>
+                    <span class="program__sub-title">Our Classes</span>
+                    <ul class="program__inner">
+                        <li class="program__content">
+                            <div class="program__box">
+                                <div class="program__img program__img-one"></div>
+                                <div class="program__text">
+                                    <h3 class="program__content-title">
+                                        <a href="#">
+                                            Yoga For Health
+                                        </a>
+                                    </h3>
+                                    <div class="program__content-paragraph">
+                                        Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+                                        commodo consequat
+                                        consectetur adipisicing elit, sed do eiusmod tempor incididunt.
+                                    </div>
+                                    <a class="program__content-link" href="#">Ashtanga - Hatha</a>
+                                </div>
+                            </div>
+                        </li>
+                        <li class="program__content">
+                            <div class="program__box">
+                                <div class="program__img program__img-three"></div>
+                                <div class="program__text">
+                                    <h3 class="program__content-title">
+                                        <a href="#">
+                                            Yoga For Lose Weight
+                                        </a>
+                                    </h3>
+                                    <div class="program__content-paragraph">
+                                        Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+                                        commodo consequat
+                                        consectetur adipisicing elit, sed do eiusmod tempor incididunt.
+                                    </div>
+                                    <a class="program__content-link" href="#">Ashtanga - Hatha</a>
+                                </div>
+                            </div>
+                        </li>
+                        <li class="program__content">
+                            <div class="program__box">
+                                <div class="program__img program__img-two"></div>
+                                <div class="program__text">
+                                    <h3 class="program__content-title">
+                                        <a href="#">
+                                            Yoga For Children
+                                        </a>
+                                    </h3>
+                                    <div class="program__content-paragraph">
+                                        Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+                                        commodo consequat
+                                        consectetur adipisicing elit, sed do eiusmod tempor incididunt.
+                                    </div>
+                                    <a class="program__content-link" href="#">Ashtanga - Hatha</a>
+                                </div>
+                            </div>
+                        </li>
+                        <li class="program__content">
+                            <div class="program__box">
+                                <div class="program__img program__img-four"></div>
+                                <div class="program__text">
+                                    <h3 class="program__content-title">
+                                        <a href="#">
+                                            Yoga For Elderly
+                                        </a>
+                                    </h3>
+                                    <div class="program__content-paragraph">
+                                        Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+                                        commodo consequat
+                                        consectetur adipisicing elit, sed do eiusmod tempor incididunt.
+                                    </div>
+                                    <a class="program__content-link" href="#">Ashtanga - Hatha</a>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+
+            <div class="gallery">
+                <div class="gallery__inner">
+                    <ul class="gallery__list">
+                        <li class="gallery__item">
+                            <img class="gallery__img" src="images/gallery/1.jpg" alt="gallery">
+                        </li>
+                        <li class="gallery__item">
+                            <img class="gallery__img" src="images/gallery/2.jpg" alt="gallery">
+                        </li>
+                        <li class="gallery__item">
+                            <img class="gallery__img" src="images/gallery/3.jpg" alt="gallery">
+                        </li>
+                        <li class="gallery__item">
+                            <img class="gallery__img" src="images/gallery/4.jpg" alt="gallery">
+                        </li>
+                        <li class="gallery__item">
+                            <img class="gallery__img" src="images/gallery/5.jpg" alt="gallery">
+                        </li>
+                        <li class="gallery__item">
+                            <img class="gallery__img" src="images/gallery/6.jpg" alt="gallery">
+                        </li>
+                        <li class="gallery__item">
+                            <img class="gallery__img" src="images/gallery/7.jpg" alt="gallery">
+                        </li>
+                        <li class="gallery__item">
+                            <img class="gallery__img" src="images/gallery/8.jpg" alt="gallery">
+                        </li>
+                    </ul>
+                </div>
+            </div>
+
+            <div class="about">
+                <div class="container">
+                    <div class="about__inner">
+                        <div class="about__content">
+                            <h2 class="about__title">
+                                About us
+                            </h2>
+                            <p class="about__text">
+                                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 toui ullamcomi
+                                laboris nisi ut
+                                aliquip ex ea commodo consequat. Duis aute irure dolor it in lorei voluptate velit esse
+                                cillum dolore
+                                eu fugiat nulla pariatur lorem ispum loting sokui.
+                            </p>
+                        </div>
+                        <div class="about__slider">
+                            <div class="slider__item">
+                                <img class="slider__img" src="images/about/1.jpg" alt="about">
+                            </div>
+                            <div class="slider__item">
+                                <img class="slider__img" src="images/about/2.jpg" alt="about">
+                            </div>
+                            <div class="slider__item">
+                                <img class="slider__img" src="images/about/3.jpg" alt="about">
+                            </div>
+                            <div class="slider__item">
+                                <img class="slider__img" src="images/about/4.jpg" alt="about">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+
+            <div class="health">
+                <div class="health__wrapper">
+                    <div class="health__content">
+                        <ul class="health__list">
+                            <li class="health__item">
+                                <img class="health__img" src="images/health/1.png" alt="health">
+                                <h4 class="health__title">IMPROVED OVERALL HEALTH</h4>
+                                <p class="health__text">
+                                    Enim ad minim veniam, quis nostrud exercitation toui ullamcomi laboris nisi ut
+                                    aliquip ex ea com.
+                                </p>
+                            </li>
+                            <li class="health__item">
+                                <img class="health__img" src="images/health/2.png" alt="health">
+                                <h4 class="health__title">INCREASED CONCENTRATION</h4>
+                                <p class="health__text">
+                                    Enim ad minim veniam, quis nostrud exercitation toui ullamcomi laboris nisi ut
+                                    aliquip ex ea com.
+                                </p>
+                            </li>
+                            <li class="health__item">
+                                <img class="health__img" src="images/health/3.png" alt="health">
+                                <h4 class="health__title">BАLANCE YOUR MIND</h4>
+                                <p class="health__text">
+                                    Enim ad minim veniam, quis nostrud exercitation toui ullamcomi laboris nisi ut
+                                    aliquip ex ea com.
+                                </p>
+                            </li>
+                            <li class="health__item">
+                                <img class="health__img" src="images/health/4.png" alt="health">
+                                <h4 class="health__title">SLEEP<br>BETTER</h4>
+                                <p class="health__text">
+                                    Enim ad minim veniam, quis nostrud exercitation toui ullamcomi laboris nisi ut
+                                    aliquip ex ea com.
+                                </p>
+                            </li>
+                            <li class="health__item">
+                                <img class="health__img" src="images/health/5.png" alt="health">
+                                <h4 class="health__title">WEIGHT<br>LOSS</h4>
+                                <p class="health__text">
+                                    Enim ad minim veniam, quis nostrud exercitation toui ullamcomi laboris nisi ut
+                                    aliquip ex ea com.
+                                </p>
+                            </li>
+                            <li class="health__item">
+                                <img class="health__img" src="images/health/6.png" alt="health">
+                                <h4 class="health__title">STRENGTHENS YOUR BONES</h4>
+                                <p class="health__text">
+                                    Enim ad minim veniam, quis nostrud exercitation toui ullamcomi laboris nisi ut
+                                    aliquip ex ea com.
+                                </p>
+                            </li>
+                            <li class="health__item">
+                                <img class="health__img" src="images/health/7.png" alt="health">
+                                <h4 class="health__title">INCREASED FLEXIBILITY</h4>
+                                <p class="health__text">
+                                    Enim ad minim veniam, quis nostrud exercitation toui ullamcomi laboris nisi ut
+                                    aliquip ex ea com.
+                                </p>
+                            </li>
+                            <li class="health__item">
+                                <img class="health__img" src="images/health/8.png" alt="health">
+                                <h4 class="health__title">LOWER BLOOD PRESSURE</h4>
+                                <p class="health__text">
+                                    Enim ad minim veniam, quis nostrud exercitation toui ullamcomi laboris nisi ut
+                                    aliquip ex ea com.
+                                </p>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+
+            <div class="price">
+                <div class="container">
+                    <ul class="price__inner">
+                        <li class="price__item">
+                            <div class="price__block">
+                                <div class="price__money">
+                                    <p class="price__number">
+                                        49
+                                        <span>/ month</span>
+                                    </p>
+                                </div>
+                                <div class="price__text">
+                                    <p class="price__paragraph">
+                                        ENTRY DATE: MON – FRI
+                                    </p>
+                                    <p class="price__paragraph price__indent">
+                                        ENTRY TIME: 8A.M – 8P.M
+                                    </p>
+                                    <p class="price__paragraph">
+                                        NUTRITION ADVICER: NO
+                                    </p>
+                                </div>
+                                <a class="price__btn" href="#">Buy now</a>
+                            </div>
+                        </li>
+                        <li class="price__item">
+                            <div class="price__block">
+                                <div class="price__money">
+                                    <p class="price__number">
+                                        69
+                                        <span>/ month</span>
+                                    </p>
+                                </div>
+                                <div class="price__text">
+                                    <p class="price__paragraph">
+                                        ENTRY DATE: MON – FRI
+                                    </p>
+                                    <p class="price__paragraph price__indent">
+                                        ENTRY TIME: 8A.M – 8P.M
+                                    </p>
+                                    <p class="price__paragraph">
+                                        NUTRITION ADVICER: YES
+                                    </p>
+                                </div>
+                                <a class="price__btn" href="#">Buy now</a>
+                            </div>
+                        </li>
+                        <li class="price__item">
+                            <div class="price__block">
+                                <div class="price__money">
+                                    <p class="price__number">
+                                        99
+                                        <span>/ month</span>
+                                    </p>
+                                </div>
+                                <div class="price__text">
+                                    <p class="price__paragraph">
+                                        ENTRY DATE: MON – SUN
+                                    </p>
+                                    <p class="price__paragraph price__indent">
+                                        ENTRY TIME: 8A.M – 8P.M
+                                    </p>
+                                    <p class="price__paragraph">
+                                        NUTRITION ADVICER: YES
+                                    </p>
+                                </div>
+                                <a class="price__btn" href="#">Buy now</a>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </main>
+
+        <footer class="footer">
+            <div class="footer__content">
+                <div class="container">
+                    <div class="footer__inner">
+                        <div class="footer__about">
+                            <h3 class="footer__title">About</h3>
+                            <p class="footer__text">
+                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                                incididunt ut labore et dolore
+                                magna aliqua. Ut enim ad m inim veniam, quis nostrud exercitation toui ullamcomi laboris
+                                nisi ut aliquip ex
+                                ea commodo consequat.
+                            </p>
+                        </div>
+                        <div class="footer__contact">
+                            <h3 class="footer__title footer__title-second">Contact us</h3>
+                            <div class="footer__wrapper">
+                                <div class="footer__block">
+                                    <address class="footer__address">
+                                        <a class="footer__address-link" target="_blank" href="https://www.google.com.ua/maps/place/716+Rue+Saint-Joseph,+L%C3%A9vis,+QC+G6V+1J4,+%D0%9A%D0%B0%D0%BD%D0%B0%D0%B4%D0%B0/@46.8252393,-71.1315461,17z/data=!3m1!4b1!4m5!3m4!1s0x4cb8bfd8e255a2d1:0x7f153a7dd47cdb9a!8m2!3d46.8252357!4d-71.1293574?hl=ru">
+                                            5419 Joseph Mountains Apt.716
+                                        </a>
+                                    </address>
+                                    <a class="footer__phone tel" href="tel:+123456789">+1 234 567 89</a>
+                                    <a class="footer__phone" href="tel:+123467890">+1 234 678 90</a>
+                                </div>
+                                <div class="footer__block footer__block-second">
+                                    <a class="footer__mail"
+                                        href="mailto:joga.info@example.com">joga.info@example.com</a>
+                                    <a class="footer__website" target="_blank" href="www.example.com">www.example.com</a>
+                                </div>
+                            </div>
+                        </div>
+                        <ul class="footer__list">
+                            <li class="footer__item">
+                                <a class="footer__link" href="https://www.pinterest.com/" target="_blank">
+                                    <span class="icon-pinterest"></span>
+                                </a>
+                            </li>
+                            <li class="footer__item">
+                                <a class="footer__link" href="https://twitter.com/" target="_blank">
+                                    <span class="icon-twitter"></span>
+                                </a>
+                            </li>
+                            <li class="footer__item">
+                                <a class="footer__link" href="https://uk-ua.facebook.com/" target="_blank">
+                                    <span class="icon-facebook"></span>
+                                </a>
+                            </li>
+                            <li class="footer__item">
+                                <a class="footer__link" href="https://www.google.com/" target="_blank">
+                                    <span class="icon-google"></span>
+                                </a>
+                            </li>
+                            <li class="footer__item">
+                                <a class="footer__link" href="https://www.instagram.com/" target="_blank">
+                                    <span class="icon-instagram"></span>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <div class="footer__copyright">
+                <div class="container">
+                    <p>
+                        Copyright © 2016-2017 Yoga classes
+                    </p>
+                </div>
+            </div>
+        </footer>
+    </div>
+    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
+    <script src="js/slick.min.js"></script>
+    <script src="js/main.js"></script>
+</body>
+</html>

module/markup/js/main.js

@@ -0,0 +1,8 @@
+$(function(){
+    $(".about__slider").slick({
+        prevArrow: '<button type="button" class="slick-btn slick-prev"><span class="slick-icon icon-arrow_prev"></span></button>',
+        nextArrow: '<button type="button" class="slick-btn slick-next"><span class="slick-icon icon-arrow_next"></span></button>',
+        autoplay: true,
+        fade: true
+    });
+});