added close symbol to slider menu

Project: http://git-wip-us.apache.org/repos/asf/incubator-fineract-site/repo
Commit: 
http://git-wip-us.apache.org/repos/asf/incubator-fineract-site/commit/0efa3295
Tree: 
http://git-wip-us.apache.org/repos/asf/incubator-fineract-site/tree/0efa3295
Diff: 
http://git-wip-us.apache.org/repos/asf/incubator-fineract-site/diff/0efa3295

Branch: refs/heads/master
Commit: 0efa32957f18831b26b6e4c4d38de4ec6bc12c97
Parents: 4d25d43
Author: mage <[email protected]>
Authored: Sat Dec 26 12:33:52 2015 +0100
Committer: mage <[email protected]>
Committed: Sat Dec 26 12:33:52 2015 +0100

----------------------------------------------------------------------
 css/fineract.css |  25 +++++++++++-
 index.html       | 109 +++++++++++++++++++++++++++++---------------------
 2 files changed, 86 insertions(+), 48 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/incubator-fineract-site/blob/0efa3295/css/fineract.css
----------------------------------------------------------------------
diff --git a/css/fineract.css b/css/fineract.css
index 8c3fb0f..7b6af47 100644
--- a/css/fineract.css
+++ b/css/fineract.css
@@ -99,6 +99,18 @@ nav {
   color: #f8f8ff;
   font-size: 28pt;
   text-decoration: none;
+  cursor: pointer;
+}
+
+.close-menu {
+  margin-left: 10px;
+  padding: 0;
+  color: #343434;
+  font-size: 28pt;
+  text-decoration: none;
+  cursor: pointer;
+  transform: rotate(90deg);
+  -wbekit-transform: rotate(90deg);
 }
 
 .modal {
@@ -118,7 +130,6 @@ nav {
 .menu-slider {
   top: 0px;
   margin: 0;
-  padding: 5px;
   width: 200px;
   height: 100%;
   visibility: hidden;
@@ -129,7 +140,12 @@ nav {
   z-index: 300;
 }
 
-.menu-slider>li {
+.menu-slider>ul {
+  margin-top: -5px;
+  padding: 0;
+}
+
+.menu-slider>ul>li {
   padding: 15px;
 }
 
@@ -211,6 +227,11 @@ h2 {
 
 .inline-list {
   margin-left: 20px;
+  margin-right: 20px;
+}
+
+.inline-list>li {
+  text-align: justify;
 }
 
 hr {

http://git-wip-us.apache.org/repos/asf/incubator-fineract-site/blob/0efa3295/index.html
----------------------------------------------------------------------
diff --git a/index.html b/index.html
index 94c1e66..8abf4af 100644
--- a/index.html
+++ b/index.html
@@ -37,7 +37,7 @@
         <div class="fully-fledged">
           <a class="nav-link nav-link-green" href="#about">About</a>
           <a class="nav-link nav-link-blue" href="#contribute">Contribute</a>
-          <a class="nav-link nav-link-magenta" href="#docs">Docs</a>
+          <a class="nav-link nav-link-magenta" href="#docs">Resources</a>
         </div>
         <div class="collapsed">
           <span class="tripple-bar">&equiv;</span>
@@ -46,34 +46,40 @@
     </div>
   </header>
   <div class="modal"></div>
-  <ul class="menu-slider slide-out">
-    <li><a class="nav-link-inverse nav-link-green menu-slider-item" 
href="#about">About</a></li>
-    <li><a class="nav-link-inverse nav-link-blue menu-slider-item" 
href="#contribute">Contribute</a></li>
-    <li><a class="nav-link-inverse nav-link-magenta menu-slider-item" 
href="#docs">Docs</a></li>
-  </ul>
+  <div class="menu-slider slide-out">
+    <span class="close-menu">&equiv;</span>
+    <ul>
+      <li><a class="nav-link-inverse nav-link-green menu-slider-item" 
href="#about">About</a></li>
+      <li><a class="nav-link-inverse nav-link-blue menu-slider-item" 
href="#contribute">Contribute</a></li>
+      <li><a class="nav-link-inverse nav-link-magenta menu-slider-item" 
href="#docs">Resources</a></li>
+    </ul>
+  </div>
   <main>
     <div class="container">
-      <div class="heading">
-        <h2>Platform for Digital Financial Services</h2>
-      </div>
-      <p class="text-justified">
-        Apache Fineract (&#92;&#8217;fīn-,<small>&#477;</small>-ˌrakt&#92;) 
is an open source system for core banking as a platform. Fineract provides a 
reliable, robust, and affordable solution for entrepreneurs, financial 
institutions, and service providers to offer financial services to the 
world’s 2 billion underbanked and unbanked.
-      </p>
+      <section id="info">
+        <div class="heading">
+          <h2>Platform for Digital Financial Services</h2>
+        </div>
+        <p class="text-justified">
+          Apache Fineract 
(&#92;&#8217;fīn-,<small>&#477;</small>-ˌrakt&#92;) is an open source system 
for core banking as a platform. Fineract provides a reliable, robust, and 
affordable solution for entrepreneurs, financial institutions, and service 
providers to offer financial services to the world’s 2 billion underbanked 
and unbanked.
+        </p>
+      </section>
       <hr>
-      <div id="about" class="heading">
-        <h2>About</h2>
-      </div>
-      <p class="text-justified">
-        Fineract can be deployed in any environment: cloud or on-premise, on 
or offline, mobile or PC; it’s extensible enough to support any 
organizational type or delivery channel, and flexible enough to support any 
product, service, or methodology. For any organization, big or small, it will 
provide the client data management, loan and savings portfolio management, 
integrated real time accounting, and social and financial reporting needed to 
bring digital financial services in a modern connected world.
-      </p>
-      <h3 class="text-justified">Rapid Product Creation</h3>
-      <p class="text-justified">
-        Our flexible product creation engine allows you to instantly create, 
configure and roll out brand new products across any of your branches. You can 
respond to client demand in no time. You can also configure your product mix to 
ensure clients can only take on a responsible amount of loans at one time.
-      </p>
-      <h3 class="text-justified">Multiple Lending Methodologies</h3>
-      <p class="text-justified">
-        The Fineract API supports
-      </p>
+      <section id="about">
+        <div class="heading">
+          <h2>About</h2>
+        </div>
+        <p class="text-justified">
+          Fineract can be deployed in any environment: cloud or on-premise, on 
or offline, mobile or PC; it’s extensible enough to support any 
organizational type or delivery channel, and flexible enough to support any 
product, service, or methodology. For any organization, big or small, it will 
provide the client data management, loan and savings portfolio management, 
integrated real time accounting, and social and financial reporting needed to 
bring digital financial services in a modern connected world.
+        </p>
+        <h3 class="text-justified">Rapid Product Creation</h3>
+        <p class="text-justified">
+          Our flexible product creation engine allows you to instantly create, 
configure and roll out brand new products across any of your branches. You can 
respond to client demand in no time. You can also configure your product mix to 
ensure clients can only take on a responsible amount of loans at one time.
+        </p>
+        <h3 class="text-justified">Multiple Lending Methodologies</h3>
+        <p class="text-justified">
+          The Fineract API supports
+        </p>
         <ul class="inline-list">
           <li>individual lending,</li>
           <li>Grameen Joint Liability group lending,</li>
@@ -81,33 +87,36 @@
           <li>standing instructions for automated payments,</li>
           <li>and co-op lending.</li>
         </ul>
-      <p class="text-justified">
-        For group lending, we have full functionality to configure and manage 
groups including client, group, center information and hierarchy.
-      </p>
-      <h3 class="text-justified">Full Range of Deposit Products</h3>
-      <p class="text-justified">
-        Savings is one of the most proven services in the financial inclusion 
toolkit. Fineract supports your organization as it moves beyond basic passbook 
savings with support for
-      </p>
+        <p class="text-justified">
+          For group lending, we have full functionality to configure and 
manage groups including client, group, center information and hierarchy.
+        </p>
+        <h3 class="text-justified">Full Range of Deposit Products</h3>
+        <p class="text-justified">
+          Savings is one of the most proven services in the financial 
inclusion toolkit. Fineract supports your organization as it moves beyond basic 
passbook savings with support for
+        </p>
         <ul class="inline-list">
           <li>fixed (term) deposits,</li>
           <li>recurring deposits,</li>
           <li>and current accounts.</li>
         </ul>
-      <p class="text-justified">
-        Your client can benefit from a fluid mix of deposit and credit 
products to help them store up the funds to resist shocks and grow income 
needed to make larger purchases and investments.
-      </p>
-      <h3 class="text-justified">Interest, Penalties, and Fees</h3>
-      <p class="text-justified">
-        Fineract supports:
-      </p>
+        <p class="text-justified">
+          Your client can benefit from a fluid mix of deposit and credit 
products to help them store up the funds to resist shocks and grow income 
needed to make larger purchases and investments.
+        </p>
+        <h3 class="text-justified">Interest, Penalties, and Fees</h3>
+        <p class="text-justified">
+          Fineract supports:
+        </p>
         <ul class="inline-list">
           <li>calculation of interest balance on daily or average daily 
balance with the ability to specify the compounding period daily or monthly</li>
           <li>flat or percentage-based fees that can be applied and collected 
on a specific due date</li>
           <li>minimum opening balance and a locking period that can be defined 
in days, weeks, months, and years</li>
         </ul>
+      </section>
       <hr>
-      <div id="contribute" class="heading">
-        <h2>Contribute</h2>
+      <section id="contribute">
+        <div class="heading">
+          <h2>Contribute</h2>
+        </div>
         <p class="text-justified">
           The Apache Fineract (incubating) community welcomes contributors who 
want to support the Fineract technology. Our community builds everything from 
this website, from the Fineract code to documentation and best practices 
information.
         </p>
@@ -130,10 +139,10 @@
           <i>This list receives an email whenever new code is contributed to 
Apache Fineract</i>.<br/>
           To subscribe, send a blank email to <a class="inline-link" 
href="mailto:[email protected]";>[email protected]</a>.
 You can also <a class="inline-link" 
href="http://markmail.org/search/?q=list%3Aorg.apache.fineract.commits+order%3Adate-backward";
 target="_blank">read the archives</a>.
         </p>
-      </div>
+      </section>
       <hr>
       <div id="docs" class="heading">
-        <h2>Docs</h2>
+        <h2>Resources</h2>
       </div>
       <hr>
     </div>
@@ -178,10 +187,18 @@
     });
 
     $('.menu-slider-item').click(function() {
-      $('.menu-slider').toggleClass('slide-in slide-out')
-      $(".modal").css({ opacity: 0 });
+      closeMenu();
+    });
+
+    $('.close-menu').click(function() {
+      closeMenu();
     });
   });
+
+  function closeMenu() {
+    $('.menu-slider').toggleClass('slide-in slide-out')
+    $(".modal").css({ opacity: 0 });
+  }
   </script>
 </body>
 </html>

Reply via email to