From f4d8a3b1b53511a2652b67527709433ed39e01c4 Mon Sep 17 00:00:00 2001
From: Alice Perez <alicejohannaperezvillanueva@gmail.com>
Date: Mon, 12 Oct 2015 10:34:21 -0500
Subject: [PATCH 1/9] Update index.html

---
 index.html | 56 +++++++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 43 insertions(+), 13 deletions(-)
diff --git a/index.html b/index.html
index 143ef13..f47ab05 100644
--- a/index.html
+++ b/index.html
@@ -1,7 +1,7 @@
----
+<!-- ---
 # Yeah, this should be .mustache
 # But this way we can gh-pages.
----
+--- -->
 <!DOCTYPE html>
 <!--
                                       _  _
@@ -42,12 +42,44 @@
     <title>{{ site.name }}</title>
     <link href="burt.css" media="screen" rel="stylesheet" type="text/css" />
     <link href="extras/highlight.css" media="screen" rel="stylesheet" type="text/css" />
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
+    <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
   </head>
   <body>
-    <span id="logo">}</span>
-    <div id="content">
-      <p>Logic-less templates.</p>
+    <header>
+ 
+      <nav>
+        <ul class="brand">
+          <li><a href="#home">MUSTACHE</a></li>
+        </ul>
+        <ul>
+        <li>
+        <a class="docs" href="">Documentation <i class="fa fa-caret-down"></i></a>
+          <ul>
+            <li><a style="border-bottom:1px solid white"href="mustache.5.html">Mutache 1</a></li></br>
+            <li><a href="mustache.1.html">Mutache 5</a></li>
+          </ul>
+        </li>
+          <li><a class="btn"href="https://github.com/typicode/jsonplaceholder"><i class="fa fa-code-fork"></i> Fork on Github</a></li>
+        </ul>
+      </nav>
+    </header>
+    <section id="home" class="home">
+      <div class="home-Container center">
+        <span class="logo">}</span> 
+        <h1 class="title center">MUSTACHE</h1> 
+        <p class="subtitle center">Logic-less templates.</p>  
+      </div>    
+    </section>
+    <section class="about">
+      <div class="home-Container center">
+        <h2>Why mustache?</h2>
+        <p>Mustache can be used for HTML, config files, source code - anything. It works by expanding tags in a template using values provided in a hash or object.</p>
+        <p>We call it "logic-less" because there are no if statements, else clauses, or for loops. Instead there are only tags. Some tags are replaced with a value, some nothing, and others a series of values.</p>
+      </div>
+    </section>
 
+    <div id="content">
       <p>
         Available in
         {% for language in site.data.languages %}
@@ -63,14 +95,6 @@
           <a href="{{ editor.url }}">{{ editor.name }}</a>{% unless forloop.last %},{% endunless %}
         {% endfor %}
       </p>
-
-      <p>
-        The Manual:
-        <a href="mustache.5.html">mustache(5)</a>
-        and
-        <a href="mustache.1.html">mustache(1)</a>
-      </p>
-
       <p>
         <a id="demo" href="#demo">Demo</a>
       </p>
@@ -93,6 +117,12 @@
 
       <p>GitHub pages: <a href="https://github.com/mustache/mustache.github.com">https://github.com/mustache/mustache.github.com</a></p>
     </div>
+    <footer>
+      <p>
+      Coded and built with <i class="fa fa-heart"></i>.
+      Source code available on <a href="https://github.com/typicode/jsonplaceholder">GitHub</a>.
+     </p>
+    </footer>
 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
     <script src="extras/mustache.js"></script>

From 05d0a29f57ca53df57303c510e8b6d9a074cd85d Mon Sep 17 00:00:00 2001
From: Alice Perez <alicejohannaperezvillanueva@gmail.com>
Date: Mon, 12 Oct 2015 10:36:08 -0500
Subject: [PATCH 2/9] Update burt.css

---
 burt.css | 151 ++++++++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 132 insertions(+), 19 deletions(-)

diff --git a/burt.css b/burt.css
index 5855caf..823189d 100644
--- a/burt.css
+++ b/burt.css
@@ -1,39 +1,145 @@
 body {
-    font-family: Georgia;
-    color: #333;
+    font-family: 'Roboto Condensed', sans-serif;
+    color: #000;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    overflow-x:hidden; 
+}
+a
+{
+    text-decoration: none;
+}
+.center
+{
+    text-align: center;
+}
+header
+{
+  background: #ff7f50;
+  width:100%;
+  z-index: 100;
+  position: fixed;
 }
 
-#logo {
-    color: #000;
-    height: 180px;
-    width: 200px;
+.brand
+{
+  color: white;
+  float: left;
+}
+nav
+{
+  float: right;
+  width: 100%;
+
+}
+nav ul
+{
+  list-style: none;
+  overflow: hidden;
+  float: right;
+}
+nav ul li
+{
+  float: left;
+
+}
+nav ul li a
+{
+  display: block;
+  padding: 5px;
+  margin-right: 10px;
+  color: white
+}
+nav ul li:hover ul
+{
+    display: block;
+}
+nav ul ul
+{
+    display: none;
+    position: absolute;
+    background: #222;
+    border-radius: 10px;
+    float: left !important;
+
+}
+nav ul ul li a
+{
+    color: #fff;
+    margin-left: -25px;
+    padding: 10px;
+
+
+}
+nav ul ul li a:hover
+{
+    color:#ff7f50;
+}
+.docs
+{
+    margin-bottom: 5px;
+}
+.btn
+{
+    background: #222;
+    padding: 5px;
+    border-radius: 5px;
+}
+.home
+{
+    background: #ff7f50;
+    width:100%;
+    height: 100%;
+    padding-top: 50px;
+}
+.home-Container
+{
+    width: 50%;
+    margin: 0 auto;
+}
+h2
+{
+    font-size: 40px;
+}
+.logo {
+    width: 380px;
     -webkit-transform: rotate(-90deg);
     -moz-transform: rotate(-90deg);
     transform: rotate(-90deg);
-    text-align: center;
     display: block;
-    font-size: 250px;
     font-family: Georgia;
+    font-size: 200px;
     margin: 0 auto;
     line-height: 200px;
-    margin-bottom: -30px;
+    padding-top: -100px;
+
 }
+.title
+{
+    font-size: 100px;
+    margin-top: -50px;
+    margin-bottom: -30px;
 
+}
+.subtitle
+{
+    font-size: 30px;
+}
+.about
+{
+    width: 100%;
+    height: 100%;
+    padding: 20px;
+}
 #content {
     width: 600px;
     margin: 0 auto;
 }
-
-p {
-    font-size: 30px;
-    margin-bottom: 20px;
-    text-align: left;
+p
+{
+    font-size: 20px;
 }
-
-label {
-
-}
-
 textarea, .html {
     border: 1px solid #bbb;
     padding: 5px;
@@ -52,3 +158,10 @@ textarea, .html {
     margin-bottom: 20px;
     font-size: 130%;
 }
+footer
+{
+    background: #222;
+      text-align: center;
+      padding:5px;
+      color: white;
+}

From 0f300bec0d2bcdfcd289aeb0257402f2ae2f3413 Mon Sep 17 00:00:00 2001
From: Alice Perez <alicejohannaperezvillanueva@gmail.com>
Date: Fri, 16 Oct 2015 20:32:06 -0500
Subject: [PATCH 3/9] Update index.html

---
 index.html | 71 ++++++++++++++++++++++++------------------------------
 1 file changed, 32 insertions(+), 39 deletions(-)

diff --git a/index.html b/index.html
index f47ab05..49bb9f1 100644
--- a/index.html
+++ b/index.html
@@ -78,52 +78,45 @@ <h2>Why mustache?</h2>
         <p>We call it "logic-less" because there are no if statements, else clauses, or for loops. Instead there are only tags. Some tags are replaced with a value, some nothing, and others a series of values.</p>
       </div>
     </section>
-
-    <div id="content">
-      <p>
-        Available in
-        {% for language in site.data.languages %}
-          {% if forloop.last %}and for{% endif %}
-          <a href="{{ language.url }}">{{ language.name }}</a>{% unless forloop.last %},{% endunless %}
-        {% endfor %}
-      </p>
-
-      <p>
-        Works great with
-        {% for editor in site.data.editors %}
-          {% if forloop.last %}and{% endif %}
-          <a href="{{ editor.url }}">{{ editor.name }}</a>{% unless forloop.last %},{% endunless %}
-        {% endfor %}
-      </p>
-      <p>
-        <a id="demo" href="#demo">Demo</a>
-      </p>
-
-      <div id="demo-box" style="display:none;">
-        <label>Mustache</label>
-        <textarea class="template">{% include demo.mustache %}</textarea>
-
-        <label>JSON <small>(try setting empty to true)</small></label>
-        <textarea class="json">{% include demo.json %}</textarea>
-
-        <p><input type="button" class="run" value="Render Template"/></p>
-
+    <section class="example">
+      <div class="center"><h2><a id="demo" class="black  center" href="#demo"> Example </a></h2></div> 
+      <div class="example-Container">
+        <div class="code-Box">
+          <label>Mustache</label>
+          <textarea class="template">{% include demo.mustache %}</textarea>
+        </div>
+        <div class="code-Box">
+          <label>JSON <small>(try setting empty to true)</small></label>
+          <textarea class="json">{% include demo.json %}</textarea>
+        </div>
+      </div>    
+    </section>
+    
+    <div class="example-Result">
+      <p><input type="button" class="run" value="Render Template"/></p>
         <label>HTML</label>
         <pre class="html sh_html"></pre>
-      </div>
-
-      <p>IRC: <a href="irc://irc.freenode.net:6667/#{">#{</a> on Freenode</p>
-      <p>Mailing list: <a href="mailto:mustache@librelist.com">mustache@librelist.com</a></p>
-
-      <p>GitHub pages: <a href="https://github.com/mustache/mustache.github.com">https://github.com/mustache/mustache.github.com</a></p>
     </div>
+    <section class="language">
+      <div class="center">
+          <h2>Available in</h2>
+            <div id="content">
+              <p>
+                {% for language in site.data.languages %}
+                  {% if forloop.last %}and for{% endif %}
+                  <a class="black" href="{{ language.url }}">{{ language.name }}</a>{% unless forloop.last %},{% endunless %}
+                {% endfor %}
+              </p>
+            </div>
+      </div>
+    </section>
     <footer>
       <p>
-      Coded and built with <i class="fa fa-heart"></i>.
-      Source code available on <a href="https://github.com/typicode/jsonplaceholder">GitHub</a>.
+      Source code available on <a class="coral" href="https://github.com/mustache/mustache.github.com">GitHub</a>.
+      Mailing list: <a class="coral" href="mailto:mustache@librelist.com">mustache@librelist.com</a>
+      IRC: <a class="coral" href="irc://irc.freenode.net:6667/#{">#{</a> on Freenode
      </p>
     </footer>
-
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
     <script src="extras/mustache.js"></script>
     <script src="extras/highlight.js"></script>

From 5b7f52bbaa17bea0a0ec10b32eb4d610406f5cca Mon Sep 17 00:00:00 2001
From: Alice Perez <alicejohannaperezvillanueva@gmail.com>
Date: Fri, 16 Oct 2015 20:33:49 -0500
Subject: [PATCH 4/9] Update burt.css

---
 burt.css | 39 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/burt.css b/burt.css
index 823189d..2aa2961 100644
--- a/burt.css
+++ b/burt.css
@@ -140,6 +140,45 @@ p
 {
     font-size: 20px;
 }
+.language
+{
+    background: #ccc;
+    width:100%;
+    height: 100%;
+    padding: 20px;
+}
+.example
+{
+    width:100%;
+    height: 100%;
+    padding: 20px 20px 0px 20px;
+}
+.example-Container
+{
+  display: flex;
+  width:80%;
+  margin: 0 auto;
+  margin-bottom: 0px;
+}
+.example-Result
+{
+  width:75%;
+  margin: 0 auto;
+  padding: 30px; 
+}
+.code-Box
+{
+  width: 50%;
+  margin: 20px 20px 0px 20px;
+}
+.run
+{
+  background: #ff7f50;
+  color: #fff;
+  border: none;
+  font-size: 20px;
+  padding: 10px;
+}
 textarea, .html {
     border: 1px solid #bbb;
     padding: 5px;

From 47336cca190337fa824ddf8ee662487c1a62996e Mon Sep 17 00:00:00 2001
From: Alice Perez <alicejohannaperezvillanueva@gmail.com>
Date: Fri, 16 Oct 2015 20:37:51 -0500
Subject: [PATCH 5/9] Update burt.css

---
 burt.css | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/burt.css b/burt.css
index 2aa2961..8d042e6 100644
--- a/burt.css
+++ b/burt.css
@@ -192,11 +192,6 @@ textarea, .html {
 .json {
   margin-bottom: 0;
 }
-
-.run {
-    margin-bottom: 20px;
-    font-size: 130%;
-}
 footer
 {
     background: #222;

From ad85ec693982f81e03c787c4cc394063dd3fdc2a Mon Sep 17 00:00:00 2001
From: Alice Perez <alicejohannaperezvillanueva@gmail.com>
Date: Fri, 16 Oct 2015 20:50:24 -0500
Subject: [PATCH 6/9] Update index.html

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 49bb9f1..f965b11 100644
--- a/index.html
+++ b/index.html
@@ -60,7 +60,7 @@
             <li><a href="mustache.1.html">Mutache 5</a></li>
           </ul>
         </li>
-          <li><a class="btn"href="https://github.com/typicode/jsonplaceholder"><i class="fa fa-code-fork"></i> Fork on Github</a></li>
+          <li><a class="btn"href="https://github.com/aliceperez/mustache.github.com"><i class="fa fa-code-fork"></i> Fork on Github</a></li>
         </ul>
       </nav>
     </header>

From 5614d6720cb94b9c167cc56c676a8ccd28779e31 Mon Sep 17 00:00:00 2001
From: Alice Perez <alicejohannaperezvillanueva@gmail.com>
Date: Fri, 16 Oct 2015 20:51:02 -0500
Subject: [PATCH 7/9] Update index.html

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index f965b11..c592f92 100644
--- a/index.html
+++ b/index.html
@@ -60,7 +60,7 @@
             <li><a href="mustache.1.html">Mutache 5</a></li>
           </ul>
         </li>
-          <li><a class="btn"href="https://github.com/aliceperez/mustache.github.com"><i class="fa fa-code-fork"></i> Fork on Github</a></li>
+          <li><a class="btn"href="https://github.com/mustache/mustache.github.com"><i class="fa fa-code-fork"></i> Fork on Github</a></li>
         </ul>
       </nav>
     </header>

From 662396fb9587d9cbcd32c77ecfb7cd95f020935d Mon Sep 17 00:00:00 2001
From: Alice Perez <alicejohannaperezvillanueva@gmail.com>
Date: Fri, 16 Oct 2015 21:22:11 -0500
Subject: [PATCH 8/9] Update index.html

---
 index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index c592f92..7581ab7 100644
--- a/index.html
+++ b/index.html
@@ -56,8 +56,8 @@
         <li>
         <a class="docs" href="">Documentation <i class="fa fa-caret-down"></i></a>
           <ul>
-            <li><a style="border-bottom:1px solid white"href="mustache.5.html">Mutache 1</a></li></br>
-            <li><a href="mustache.1.html">Mutache 5</a></li>
+            <li><a style="border-bottom:1px solid white"href="mustache.1.html">Mutache 1</a></li></br>
+            <li><a href="mustache.5.html">Mutache 5</a></li>
           </ul>
         </li>
           <li><a class="btn"href="https://github.com/mustache/mustache.github.com"><i class="fa fa-code-fork"></i> Fork on Github</a></li>

From 3a2a56e16984ab54848942e12910e14a32a54ff1 Mon Sep 17 00:00:00 2001
From: Alice Perez <alicejohannaperezvillanueva@gmail.com>
Date: Fri, 16 Oct 2015 21:57:28 -0500
Subject: [PATCH 9/9] Update burt.css

---
 burt.css | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/burt.css b/burt.css
index 8d042e6..2cef529 100644
--- a/burt.css
+++ b/burt.css
@@ -10,6 +10,14 @@ a
 {
     text-decoration: none;
 }
+.coral
+{
+  color: #ff7f50;
+}
+.black
+{
+  color: #000;
+}
 .center
 {
     text-align: center;
