j1_template_mde 2018.4.10

data/lib/starter_web/pages/start/roundtrip/600_themes.adoc

@@ -0,0 +1,75 @@
+---
+title:                                  Roundtrip
+tagline:                                Themes
+description:                            J1 Template Roundtrip - Template Themes
+
+tags:                                   [ Roundtrip, Themes ]
+
+resources:                              []
+permalink:                              /pages/start/roundtrip/themes/
+regenerate:                             false
+
+resource_options:
+
+  - masthead:
+      opacity:                          0.5
+      slides:
+        - url:                          /assets/images/pages/roundtrip/theme-1920.jpg
+          alt:                          Photo by Clem Onojeghuo on Unsplash
+          caption:                      Photo by Clem Onojeghuo on Unsplash
+          caption_href:                 https://unsplash.com/@clemono2
+          caption_color:                rgba_lighten_800
+---
+
+// Enable the Liquid Preprocessor
+//
+:page-liquid:
+
+// Set other global page attributes here
+// -------------------------------------------------------------------
+
+
+{% comment %} Liquid procedures
+--------------------------------------------------------------- {% endcomment %}
+{% capture set_env_entry_document %}themes/{{site.template.name}}/procedures/global/set_env_entry_document.proc{%endcapture%}
+
+
+// NOTE: Initialize entry document paths
+//
+{% include {{set_env_entry_document}} init_folders=all %}
+
+// Load tags and urls
+//
+include::{includedir}/attributes.asciidoc[tag=tags]
+include::{includedir}/attributes.asciidoc[tag=urls]
+
+// Additional Asciidoc page attributes goes here
+//
+
+++++
+<!-- page_path:            {{page_path | debug}} -->
+<!-- site.source:          {{site.source | debug}} -->
+<!-- site.source.size:     {{site.source.size | debug}} -->
+++++
+
+lorem:sentences[5]
+lorem:sentences[2]
+
+== Themes
+
+lorem:sentences[5]
+
+
+== What's next?
+
+Hopefully you've enjoyed exploring all the possibilities J1 offers for managing
+themes. But much, much more can the J1 do for your Web Site.
+
+This was the last place to go for the roundtrip. More details of the most
+common elements of Bootstrap can be found on the previewer for a theme. Have
+a look at the link:{previewer-theme}[Theme Previewer, window="_blank"].
+
+To make things real for your new Web, go for *Web in a Day*. This tutorial
+guides you through all the steps to build a Web - your Web using Jekyll and the
+Template J1. It's really a nice journey to *explore* and *learn* J1 - start with
+link:{kickstarter-web-in-a-day}[Web in a Day here, window="_blank"]!

data/lib/starter_web/pages/start/roundtrip/700_additional_modals.adoc

@@ -0,0 +1,1369 @@
+---
+title:                                  Additional Modals
+tagline:                                Check common components for a selected Theme
+description:                            Themes Previewer for J1 Template
+tags:                                   [ Bootstrap, Preview]
+
+author:                                 J1 Team
+flowtext:                               false
+resources:                              [ tocbot ]
+toc:                                    true
+permalink:                              /pages/start/roundtrip/modals/
+regenerate:                             false
+---
+
+// Enable the Liquid Preprocessor
+//
+:page-liquid:
+
+// Set other global page attributes here
+// -------------------------------------------------------------------
+
+
+{% comment %} Liquid procedures
+--------------------------------------------------------------- {% endcomment %}
+{% capture set_env_entry_document %}themes/{{site.template.name}}/procedures/global/set_env_entry_document.proc{%endcapture%}
+
+
+// NOTE: Initialize entry document paths
+//
+{% include {{set_env_entry_document}} init_folders=all %}
+
+// Load tags and urls
+//
+include::{includedir}/attributes.asciidoc[tag=tags]
+include::{includedir}/attributes.asciidoc[tag=urls]
+
+// Additional ASCIIDOC attributes goes here
+//
+
+
+++++
+  <!-- Prepend H1 tag here -->
+  <div id="h1_theme_name" class="row mb-3">
+    <!-- Add J1 Theme Manager details -->
+    <script>
+      // Load the previously selected theme from the cookies
+      var themeName = Cookies.get('j1-theme.name');
+      if ( themeName ) {
+        var themeNameHeadline = '<h1>Theme <i id="theme_name">' + themeName + '</i> </h1>';
+      } else {
+        var themeName         = 'J1 Default';
+        var themeNameHeadline = '<h1>Theme <i id="theme_name">' + themeName + '</i> </h1>';
+      }
+      $('#h1_theme_name').prepend(themeNameHeadline);
+    </script>
+  </div>
+++++
+
+Enhanced Bootstrap Modals are based on the free package `Bootstrap 4 plugin` 
+based on (legycy) version 4.3.2 provided by https://mdbootstrap.com/[MDBootstrap.com].
+
+lorem:sentences[2]
+
+pass:[<i class="mdi mdi-book-open mdi-2x mdi-md-indigo"></i>]
+Refer to: https://mdbootstrap.com/legacy/4.3.2/?page=javascript/modals[MDB - Enhanced Bootstrap Modals, window="_blank"].
+
+== Modals
+
+Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for
+lightboxes, user notifications, or completely custom content. Modals are
+built with HTML, CSS, and JavaScript. They’re positioned over everything
+else in the document and remove scroll from the <body> so that modal
+content scrolls instead.
+
+pass:[<i class="mdi mdi-book-open mdi-2x mdi-md-indigo"></i>]
+Refer to: link:{bs_doc_components_modal}[Bootstrap Docs, window="_blank"].
+
+Using J1 enhanced predefined modal styles, some emotional weight is added to 
+the information displaye - ranging from a simple warning to critical system 
+failure or from an operation success to a neutral information.
+
+If you want to learn about advanced usage of Modals, read our free tutorial 
+https://mdbootstrap.com/automated-app-start/[Creating Automated web application].
+
+See also: https://mdbootstrap.com/javascript/modals/[Modal Core Documentation], 
+https://mdbootstrap.com/javascript/bootstrap-modal-examples/[Modal Forms and Modal Templates].
+
+=== Position and sizes
+
+lorem:sentences[5]
+
+++++
+<div class="row mb-4">
+  <!--First column-->
+  <div class="col-md-3">
+    <h5 class="text-center mb-1">Frame</h5>
+    <img src="/assets/images/pages/modals/01_frame_modal.jpg" alt="" class="img-fluid z-depth-1">
+    <div class="text-center">
+      <a class="btn btn-primary btn-raised mt-3" data-toggle="modal" data-target="#frameModalTopInfoDemo" data-backdrop="false">Launch</a> <br>
+    </div>
+  </div>
+  <!--First column-->
+  <!--Second column-->
+  <div class="col-md-3">
+    <h5 class="text-center mb-1">Side</h5>
+    <img src="/assets/images/pages/modals/02_site_modal.jpg" alt="" class="img-fluid z-depth-1">
+    <div class="text-center">
+      <a class="btn btn-primary btn-raised mt-3" data-toggle="modal" data-target="#sideModalTRSuccessDemo" data-backdrop="false">Launch</a> <br>
+    </div>
+  </div>
+  <!--Second column-->
+  <!--Third column-->
+  <div class="col-md-3">
+    <h5 class="text-center mb-1">Central</h5>
+    <img src="/assets/images/pages/modals/03_central_modal.jpg" alt="" class="img-fluid z-depth-1">
+    <div class="text-center">
+      <a class="btn btn-primary btn-raised mt-3" data-toggle="modal" data-target="#frameModalTopInfoDemo" data-backdrop="false">Launch</a> <br>      
+    </div>
+  </div>
+  <!--Third column-->
+  <!--Fourth column-->
+  <div class="col-md-3">
+    <h5 class="text-center mb-1">Fluid</h5>
+    <img src="/assets/images/pages/modals/04_fluid_modal.jpg" alt="" class="img-fluid z-depth-1">
+    <div class="text-center">
+      <button type="button" class="btn btn-primary btn-raised mt-3" data-toggle="modal" data-target="#fluidModalRightSuccessDemo">Launch</button> <br>
+    </div>
+  </div>
+  <!--Fourth column-->
+</div>
+++++
+
+lorem:sentences[5]
+
+=== Contact Form
+
+Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
+
+++++
+<div class="ml-2 mb-5">
+  <!-- Button trigger modal -->
+  <button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#modalContactForm">
+    Launch Modal Contact Form
+  </button>
+</div>
+++++
+
+=== Top Info
+
+Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
+
+++++
+<div class="ml-2 mb-5">
+  <!-- Button trigger modal -->
+  <button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#frameModalTopInfoDemo">
+    Launch Modal Top Info
+  </button>
+</div>
+++++
+
+=== Bottom Success
+
+Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
+
+++++
+<div class="ml-2 mb-5">
+  <!-- Button trigger modal -->
+  <button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#frameModalBottomSuccessDemo">
+    Launch Modal Bottom Success
+  </button>
+</div>
+++++
+
+
+=== Top Right Success
+
+Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
+
+++++
+<div class="ml-2 mb-5">
+  <!-- Button trigger modal -->
+  <button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#sideModalTRSuccessDemo">
+    Launch Modal Top Right Success
+  </button>
+</div>
+++++
+
+=== Top Left Info
+
+Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
+
+++++
+<div class="ml-2 mb-5">
+  <!-- Button trigger modal -->
+  <button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#sideModalTLInfoDemo">
+    Launch Modal Top Left Info
+  </button>
+</div>
+++++
+
+=== Bottom Right Danger
+
+Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
+
+++++
+<div class="ml-2 mb-5">
+  <!-- Button trigger modal -->
+  <button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#sideModalBRDangerDemo">
+    Launch Modal Bottom Right Danger
+  </button>
+</div>
+++++
+
+=== Bottom Left Warning
+
+Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
+
+++++
+<div class="ml-2 mb-5">
+  <!-- Button trigger modal -->
+  <button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#sideModalBLWarningDemo">
+    Launch Modal Bottom Left Warning
+  </button>
+</div>
+++++
+
+=== Form Login with Avatar
+
+Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
+
+++++
+<div class="ml-2 mb-5">
+  <!-- Button trigger modal -->
+  <button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#modalLoginAvatarDemo">
+    Launch Modal Form Login with Avatar
+  </button>
+</div>
+++++
+
+=== OmniLogin
+
+Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
+
+++++
+<div class="ml-2 mb-5">
+  <!-- Button trigger modal -->
+  <button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#modalOmniLogin">
+    Launch Modal OmniLogin
+  </button>
+</div>
+++++
+
+++++
+<!--Modal OmniLogin -->
+<div class="modal fade show" id="modalOmniLogin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
+  <div class="modal-dialog modal-notify modal-lg modal-notify modal-info" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">SignIn</p>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <i class="mdi mdi-close mdi-light mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body mb-0">
+        <!-- Modal nav pills -->
+        <div class="row ml-2 mr-2">
+          <ul class="nav nav-pills nav-pills-icons mt-2" role="tablist">
+            <li class="nav-item">
+              <a class="nav-link active" href="#h-tabs-1" role="tab" data-toggle="tab" aria-expanded="false" aria-selected="true">
+              <i class="mdi mdi-github-circle mt-1 mb-2"></i> Github
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#h-tabs-2" role="tab" data-toggle="tab" aria-expanded="false" aria-selected="false">
+              <i class="mdi mdi-facebook mt-1 mb-2"></i> Facebook
+              </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#h-tabs-3" role="tab" data-toggle="tab" aria-expanded="true" aria-selected="false">
+              <i class="mdi mdi-format-paragraph mt-1 mb-2"></i> Patreon
+              </a>
+            </li>
+          </ul>
+          <div class="tab-content tab-space">
+            <div class="tab-pane active" id="h-tabs-1">
+              To get access to all <b>PRIVATE</b> content pages, login to Github or Facebook
+            </div>
+            <div class="tab-pane" id="h-tabs-2">
+              To get access to all <b>PRIVATE</b> content pages, login to Github or Facebook
+            </div>
+            <div class="tab-pane" id="h-tabs-3">
+              To get access to all <b>PREMIUM</b> content pages, login to Patreon
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer justify-content-right">
+        <button type="button" id="loginButton" class="btn btn-primary-modal mr-2" data-dismiss="modal">
+          <i class="mdi mdi-18px mdi-light mdi-login"></i>
+          Yes, please
+        </a>
+        <button type="button" id="exitButton" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Modal OmniLogin -->
+<script>
+  var signIn = {
+    provider:   'Github',
+    login:      false
+  }
+  $('ul.nav-pills > li').click(function (e) {
+      e.preventDefault();
+      signIn.provider = $(this).text().trim();
+      signIn.provider = signIn.provider.toLowerCase();
+  });
+  $("button").click(function() {
+    if (this.id === "loginButton") {
+      signIn.login = true;
+    } else {
+      signIn.login = false;
+    }
+  });
+  $("#modalOmniLogin").on('hidden.bs.modal', function() {
+    if (signIn.login == true) {
+      console.log(signIn.provider, ' : ', signIn.login);
+      var provider = signIn.provider.toLowerCase();
+      //var link = '/pages/about?provider=' + provider;
+      var link = '/auth?provider=' + provider;
+      window.location.href = link;
+    } else {
+      console.log(signIn.provider, ' : ', signIn.login);
+    }
+  });
+</script>
+++++
+
+=== Central Large Info
+
+Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
+
+++++
+<div class="ml-2 mb-5">
+  <!-- Button trigger modal -->
+  <button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#centralModalLGInfoDemo">
+    Launch Modal Central Large Info
+  </button>
+</div>
+++++
+
+
+=== Central Fluid Success
+
+Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
+
+++++
+<div class="ml-2 mb-5">
+  <!-- Button trigger modal -->
+  <button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#centralModalFluidSuccessDemo">
+    Launch Modal Central Fluid Success
+  </button>
+</div>
+++++
+
+=== Full Height Right Success
+
+Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
+
+++++
+<div class="ml-2 mb-5">
+  <!-- Button trigger modal -->
+  <button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#fluidModalRightSuccessDemo">
+    Launch Modal Central Fluid Success
+  </button>
+</div>
+++++
+
+=== Full Height Left Info
+
+Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
+
+++++
+<div class="ml-2 mb-5">
+  <!-- Button trigger modal -->
+  <button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#fluidModalLeftInfoDemo">
+    Launch Modal Full Height Left Info
+  </button>
+</div>
+++++
+
+
+=== Full Height Top Warning
+
+Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
+
+++++
+<div class="ml-2 mb-5">
+  <!-- Button trigger modal -->
+  <button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#fluidModalTopWarningDemo">
+    Launch Modal Full Height Top Warning
+  </button>
+</div>
+++++
+
+=== Full Height Bottom Danger
+
+Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
+
+++++
+<div class="ml-2 mb-5">
+  <!-- Button trigger modal -->
+  <button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#fluidModalBottomDangerDemo">
+    Launch Modal Full Height Bottom Danger
+  </button>
+</div>
+++++
+
+=== Central Success
+
+Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
+
+++++
+<div class="ml-2 mb-5">
+  <!-- Button trigger modal -->
+  <button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#centralModalSuccessDemo">
+    Launch Modal Central Success
+  </button>
+</div>
+++++
+
+++++
+<!-- Modal Contact Form -->
+<div class="modal fade" id="modalContactForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
+  <div class="modal-dialog modal-notify modal-info" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Contact Form</p>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-light mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body mb-0">
+        <div class="md-form form-sm">
+          <i class="mdi mdi-light mdi-email"></i>
+          <input type="text" id="form19" class="form-control">
+          <label for="form19">Your name</label>
+        </div>
+        <div class="md-form form-sm">
+          <i class="mdi mdi-light mdi-lock"></i>
+          <input type="password" id="form20" class="form-control">
+          <label for="form20">Your email</label>
+        </div>
+        <div class="md-form form-sm">
+          <i class="mdi mdi-light mdi-tag"></i>
+          <input type="text" id="form21" class="form-control">
+          <label for="form21">Subject</label>
+        </div>
+        <div class="md-form form-sm">
+          <i class="mdi mdi-light mdi-pencil"></i>
+          <textarea type="text" id="form8" class="md-textarea form-control mb-0"></textarea>
+          <label for="form8">Your message</label>
+        </div>
+        <!-- Footer -->
+        <div class="modal-footer mt-5">
+          <a type="button" class="btn btn-primary-modal btn-text">Send<i class="mdi mdi-light mdi-send ml-1"></i></a>
+        </div>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Modal Contact Form -->
+
+<!-- Modal Full Height Right Success-->
+<div class="modal fade right" id="fluidModalRightSuccess" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-full-height modal-right modal-notify modal-success" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Modal Success</p>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-light mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <div class="text-center">
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.</p>
+          <i class="mdi mdi-4x mdi-check mdi-rotateIn mb-1"></i>
+        </div>
+        <ul class="list-group z-depth-0">
+          <li class="list-group-item justify-content-between">
+            Cras justo odio
+            <span class="badge badge-primary badge-pill">14</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Dapibus ac facilisis in
+            <span class="badge badge-primary badge-pill">2</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Morbi leo risus
+            <span class="badge badge-primary badge-pill">1</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Cras justo odio
+            <span class="badge badge-primary badge-pill">14</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Dapibus ac facilisis in
+            <span class="badge badge-primary badge-pill">2</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Morbi leo risus
+            <span class="badge badge-primary badge-pill">1</span>
+          </li>
+        </ul>
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer">
+        <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Full Height Modal Right Success -->
+
+<!-- Modal Top Info -->
+<div class="modal fade top" id="frameModalTopInfoDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
+  <div class="modal-dialog modal-frame modal-top modal-notify modal-info" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!-- Body -->
+      <div class="modal-body">
+        <div class="row px-4">
+          <p class="pt-1 pr-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos..</p>
+          <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
+          <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
+        </div>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Modal Top Info -->
+
+<!-- Modal Bottom Success-->
+<div class="modal fade bottom" id="frameModalBottomSuccessDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
+  <div class="modal-dialog modal-frame modal-bottom modal-notify modal-success" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!-- Body -->
+      <div class="modal-body">
+        <div class="row px-4">
+          <p class="pt-1 pr-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos..</p>
+          <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
+          <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
+        </div>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Modal Bottom Success -->
+
+<!-- Side Modal Top Right Success -->
+<div class="modal fade right" id="sideModalTRSuccessDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
+  <div class="modal-dialog modal-side modal-top-right modal-notify modal-success" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Modal Success</p>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-light mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <div class="text-center">
+          <i class="mdi mdi-4x mdi-check mdi-rotateIn mb-1"></i>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.
+          </p>
+        </div>
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer justify-content-center">
+        <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Side Modal Top Right Success -->
+
+<!-- Side Modal Top Left Info -->
+<div class="modal fade left" id="sideModalTLInfoDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
+  <div class="modal-dialog modal-side modal-top-left modal-notify modal-info" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Modal Info</p>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-light mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <img src="https://mdbootstrap.com/wp-content/uploads/2016/11/admin-dashboard-bootstrap.jpg" alt="" class="img-fluid">
+        <div class="text-center">
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt vero illo error eveniet cum.</p>
+        </div>
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer justify-content-center">
+        <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Side Modal Top Left Info -->
+
+<!-- Side Modal Bottom Right Danger -->
+<div class="modal fade right" id="sideModalBRDangerDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
+  <div class="modal-dialog modal-side modal-bottom-right modal-notify modal-danger" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Modal Danger</p>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-light mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <div class="row">
+          <div class="col-3">
+            <p></p>
+            <p class="text-center"><i class="mdi mdi-cart fa-4x"></i></p>
+          </div>
+          <div class="col-9">
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, molestiae provident temporibus sunt earum.</p>
+            <h2 class="notoc"><span class="badge">v52gs1</span></h2>
+          </div>
+        </div>
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer justify-content-center">
+        <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Side Modal Bottom Right Danger -->
+
+<!-- Side Modal Bottom Left Warning -->
+<div class="modal fade left" id="sideModalBLWarningDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
+  <div class="modal-dialog modal-side modal-bottom-left modal-notify modal-warning" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Modal Warning</p>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-light mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <div class="row">
+          <div class="col-3 text-center">
+            <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(1).jpg" alt="Michal Szymanski - founder of Material Design for Bootstrap" class="img-fluid z-depth-1-half rounded-circle">
+            <div style="height: 10px"></div>
+            <p class="title mb-0">Jane</p>
+            <p class="text-muted " style="font-size: 13px">Consultant</p>
+          </div>
+          <div class="col-9">
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, molestiae provident temporibus sunt earum.</p>
+            <p class="card-text"><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</strong></p>
+          </div>
+        </div>
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer justify-content-center">
+        <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Side Modal Bottom Left Warning -->
+
+<!-- Modal Form Login with Avatar Demo -->
+<div class="modal fade" id="modalLoginAvatarDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+  <div class="modal-dialog cascading-modal modal-avatar modal-sm" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%281%29.jpg" class="rounded-circle img-responsive">
+      </div>
+      <!-- Body -->
+      <div class="modal-body text-center mb-1">
+        <h5 class="mt-1 mb-2 notoc">Maria Doe</h5>
+        <div class="md-form ml-0 mr-0">
+          <input type="password" type="text" id="form1" class="form-control ml-0">
+          <label for="form1" class="ml-0">Enter password</label>
+        </div>
+        <div class="text-center">
+          <button class="btn btn-cyan mt-1">Login <i class="mdi mdi-login ml-1"></i></button>
+        </div>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!--END Modal Form Login with Avatar Demo -->
+
+<!--Modal Login-Register Form Demo -->
+<div class="modal fade" id="modalLRFormDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+  <div class="modal-dialog cascading-modal" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!-- Modal cascading tabs -->
+      <div class="modal-c-tabs">
+        <!-- Nav tabs -->
+        <ul class="nav nav-tabs tabs-2 light-blue darken-3" role="tablist">
+          <li class="nav-item">
+            <a class="nav-link active" data-toggle="tab" href="#panel17" role="tab"><i class="mdi mdi-account mr-1"></i> Login</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" data-toggle="tab" href="#panel18" role="tab"><i class="mdi mdi-account-plus mr-1"></i> Register</a>
+          </li>
+        </ul>
+        <!-- Tab panels -->
+        <div class="tab-content">
+          <!--Panel 17-->
+          <div class="tab-pane fade in show active" id="panel17" role="tabpanel">
+            <!-- Body -->
+            <div class="modal-body mb-1">
+              <div class="md-form form-sm">
+                <i class="mdi mdi-email"></i>
+                <input type="text" id="form2" class="form-control">
+                <label for="form2">Your email</label>
+              </div>
+              <div class="md-form form-sm">
+                <i class="mdi mdi-lock"></i>
+                <input type="password" id="form3" class="form-control">
+                <label for="form3">Your password</label>
+              </div>
+              <div class="text-center mt-2">
+                <button class="btn btn-info">Log in <i class="mdi mdi-login ml-1"></i></button>
+              </div>
+            </div>
+            <!-- Footer -->
+            <div class="modal-footer">
+              <div class="options text-center text-md-right mt-1">
+                <p>Not a member? <a href="#" class="blue-text">Sign Up</a></p>
+                <p>Forgot <a href="#" class="blue-text">Password?</a></p>
+              </div>
+              <button type="button" class="btn btn-outline-info ml-auto" data-dismiss="modal">Close <i class="mdi mdi-close ml-1"></i></button>
+            </div>
+          </div>
+          <!--/.Panel 7-->
+          <!--Panel 18-->
+          <div class="tab-pane fade" id="panel18" role="tabpanel">
+            <!-- Body -->
+            <div class="modal-body">
+              <div class="md-form form-sm">
+                <i class="mdi mdi-email"></i>
+                <input type="text" id="form14" class="form-control">
+                <label for="form14">Your email</label>
+              </div>
+              <div class="md-form form-sm">
+                <i class="mdi mdi-lock"></i>
+                <input type="password" id="form5" class="form-control">
+                <label for="form5">Your password</label>
+              </div>
+              <div class="md-form form-sm">
+                <i class="mdi mdi-lock"></i>
+                <input type="password" id="form6" class="form-control">
+                <label for="form6">Repeat password</label>
+              </div>
+              <div class="text-center form-sm mt-2">
+                <button class="btn btn-info">Sign up <i class="mdi mdi-login ml-1"></i></button>
+              </div>
+              <fieldset class="additional-option">
+                <input type="checkbox" id="checkbox1">
+                <label for="checkbox1">Subscribe me to the newsletter</label>
+              </fieldset>
+            </div>
+            <!-- Footer -->
+            <div class="modal-footer">
+              <div class="options text-right">
+                <p class="pt-1">Already have an account? <a href="#" class="blue-text">Log In</a></p>
+              </div>
+              <button type="button" class="btn btn-outline-info ml-auto" data-dismiss="modal">Close <i class="mdi mdi-close ml-1"></i></button>
+            </div>
+          </div>
+          <!--/.Panel 8-->
+        </div>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Modal Login-Register Form Demo -->
+
+
+
+
+
+
+<!-- Modal Central Large Info -->
+<div class="modal fade" id="centralModalLGInfoDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-lg modal-notify modal-info" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Modal Info</p>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-light mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <div class="text-center">
+          <i class="mdi mdi-4x mdi-check mdi-rotateIn mb-1"></i>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.
+          </p>
+        </div>
+        <img src="https://mdbootstrap.com/wp-content/uploads/2016/11/admin-dashboard-bootstrap.jpg" alt="" class="img-fluid">
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer">
+        <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Modal Central Large Info -->
+
+<!-- Modal Central Fluid Success -->
+<div class="modal fade" id="centralModalFluidSuccessDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-fluid modal-notify modal-success" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Modal Success</p>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-light mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <div class="text-center">
+          <i class="mdi mdi-4x mdi-check mdi-rotateIn mb-1"></i>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.
+          </p>
+        </div>
+        <ul class="list-group z-depth-0">
+          <li class="list-group-item justify-content-between">
+            Cras justo odio
+            <span class="badge badge-primary badge-pill">14</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Dapibus ac facilisis in
+            <span class="badge badge-primary badge-pill">2</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Morbi leo risus
+            <span class="badge badge-primary badge-pill">1</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Cras justo odio
+            <span class="badge badge-primary badge-pill">14</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Dapibus ac facilisis in
+            <span class="badge badge-primary badge-pill">2</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Morbi leo risus
+            <span class="badge badge-primary badge-pill">1</span>
+          </li>
+        </ul>
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer">
+        <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Modal Central Fluid Success -->
+
+<!-- Modal Full Height Right Success Demo -->
+<div class="modal fade right" id="fluidModalRightSuccessDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
+  <div class="modal-dialog modal-full-height modal-right modal-notify modal-success" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Modal Success</p>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-light mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <div class="text-center">
+          <i class="mdi mdi-4x mdi-check mdi-rotateIn mb-1"></i>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.
+          </p>
+        </div>
+        <ul class="list-group z-depth-0">
+          <li class="list-group-item justify-content-between">
+            Cras justo odio
+            <span class="badge badge-primary badge-pill">14</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Dapibus ac facilisis in
+            <span class="badge badge-primary badge-pill">2</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Morbi leo risus
+            <span class="badge badge-primary badge-pill">1</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Cras justo odio
+            <span class="badge badge-primary badge-pill">14</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Dapibus ac facilisis in
+            <span class="badge badge-primary badge-pill">2</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Morbi leo risus
+            <span class="badge badge-primary badge-pill">1</span>
+          </li>
+        </ul>
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer">
+        <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Modal Full Height Right Success Demo -->
+
+<!-- Modal Full Height Left Info Demo -->
+<div class="modal fade left" id="fluidModalLeftInfoDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
+  <div class="modal-dialog modal-full-height modal-left modal-notify modal-info" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Modal Success</p>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-light mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <div class="text-center">
+          <i class="mdi mdi-4x mdi-check mdi-rotateIn mb-1"></i>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.
+          </p>
+        </div>
+        <ul class="list-group z-depth-0">
+          <li class="list-group-item justify-content-between">
+            Cras justo odio
+            <span class="badge badge-primary badge-pill">14</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Dapibus ac facilisis in
+            <span class="badge badge-primary badge-pill">2</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Morbi leo risus
+            <span class="badge badge-primary badge-pill">1</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Cras justo odio
+            <span class="badge badge-primary badge-pill">14</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Dapibus ac facilisis in
+            <span class="badge badge-primary badge-pill">2</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Morbi leo risus
+            <span class="badge badge-primary badge-pill">1</span>
+          </li>
+        </ul>
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer">
+        <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Modal Full Height Left Info Demo -->
+
+<!-- Modal Full Height Top Warning Demo -->
+<div class="modal fade top" id="fluidModalTopWarningDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
+  <div class="modal-dialog modal-full-height modal-top modal-notify modal-warning" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Modal Warning</p>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-light mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <div class="text-center">
+          <i class="mdi mdi-4x mdi-check mdi-rotateIn mb-1"></i>
+        </div>
+        <ul class="list-group z-depth-0">
+          <li class="list-group-item justify-content-between">
+            Cras justo odio
+            <span class="badge badge-primary badge-pill">14</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Dapibus ac facilisis in
+            <span class="badge badge-primary badge-pill">2</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Morbi leo risus
+            <span class="badge badge-primary badge-pill">1</span>
+          </li>
+        </ul>
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer">
+        <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Modal Full Height Top Warning Demo -->
+
+<!-- Modal Full Height Bottom Danger Demo -->
+<div class="modal fade bottom" id="fluidModalBottomDangerDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
+  <div class="modal-dialog modal-full-height modal-bottom modal-notify modal-danger" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Modal Danger</p>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-light mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <div class="text-center">
+          <i class="mdi mdi-4x mdi-check mdi-rotateIn mb-1"></i>
+        </div>
+        <ul class="list-group z-depth-0">
+          <li class="list-group-item justify-content-between">
+            Cras justo odio
+            <span class="badge badge-primary badge-pill">14</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Dapibus ac facilisis in
+            <span class="badge badge-primary badge-pill">2</span>
+          </li>
+          <li class="list-group-item justify-content-between">
+            Morbi leo risus
+            <span class="badge badge-primary badge-pill">1</span>
+          </li>
+        </ul>
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer">
+        <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Modal Full Height Bottom Danger Demo -->
+
+<!-- Modal Central Success Demo -->
+<div class="modal fade" id="centralModalSuccessDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-notify modal-success" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Modal Success</p>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-light mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <div class="text-center">
+          <i class="mdi mdi-4x mdi-check mdi-rotateIn mb-1"></i>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.
+          </p>
+        </div>
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer justify-content-center">
+        <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Central Success Demo -->
+
+<!-- Modal Central Info Demo -->
+<div class="modal fade" id="centralModalInfoDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-notify modal-info" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Modal Info</p>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-light mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <img src="https://mdbootstrap.com/wp-content/uploads/2016/11/admin-dashboard-bootstrap.jpg" alt="" class="img-fluid">
+        <div class="text-center">
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt vero illo error eveniet cum.</p>
+        </div>
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer justify-content-center">
+        <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Modal Central Info Demo -->
+
+<!-- Modal Central Danger Demo -->
+<div class="modal fade" id="centralModalDangerDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-notify modal-danger" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Modal Danger</p>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-light mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <div class="row">
+          <div class="col-3">
+            <p></p>
+            <p class="text-center"><i class="mdi mdi-cart fa-4x"></i></p>
+          </div>
+          <div class="col-9">
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, molestiae provident temporibus sunt earum.</p>
+            <h2 class="notoc"><span class="badge">v52gs1</span></h2>
+          </div>
+        </div>
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer justify-content-center">
+        <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Modal Central Danger Demo -->
+
+<!-- Modal Central Warning Demo -->
+<div class="modal fade" id="centralModalWarningDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-notify modal-warning" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Modal Warning</p>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-light mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <div class="row">
+          <div class="col-3 text-center">
+            <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(1).jpg" alt="Michal Szymanski - founder of Material Design for Bootstrap" class="img-fluid z-depth-1-half rounded-circle">
+            <div style="height: 10px"></div>
+            <p class="title mb-0">Jane</p>
+            <p class="text-muted " style="font-size: 13px">Consultant</p>
+          </div>
+          <div class="col-9">
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, molestiae provident temporibus sunt earum.</p>
+            <p class="card-text"><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</strong></p>
+          </div>
+        </div>
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer justify-content-center">
+        <a type="button" class="btn btn-primary-modal mr-2">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Modal Central Warning Demo -->
+
+<!--Modal New User -->
+<div class="modal fade right" id="modalBFDemoNewUser" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
+  <div class="modal-dialog modal-side modal-bottom-right modal-notify modal-info" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Welcome to MDBootstrap!</p>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <span aria-hidden="true" class="white-text">×</span>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <div class="row">
+          <div class="col-3 text-center">
+            <img src="https://mdbootstrap.com/img/Others/Modals/michal.jpg" alt="Michal Szymanski - founder of Material Design for Bootstrap" class="img-fluid z-depth-1-half rounded-circle">
+            <div style="height: 10px"></div>
+            <p class="title mb-0">Michal</p>
+            <p class="text-muted " style="font-size: 13px">MDB Founder</p>
+          </div>
+          <div class="col-9">
+            <p><strong>Hey there!</strong></p>
+            <p>We're happy to see that you're getting involved.</p>
+            <p>How about <strong>we help you in getting more</strong> out of all this awesomeness?</p>
+          </div>
+        </div>
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer justify-content-center">
+        <a href="https://mdbootstrap.com/bootstrap-tutorial/" class="btn btn-primary-modal">Start tutorial <i class="mdi mdi-code-tags ml-1"></i></a>
+        <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!-- END Modal New User -->
+
+<!--Modal 10% Discount -->
+<div class="modal fade right" id="modalBFDemoDiscount" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
+  <div class="modal-dialog modal-side modal-bottom-right modal-notify modal-danger" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header">
+        <p class="lead">Discount offer: <strong>10% off</strong></p>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <i class="mdi mdi-close mdi-light mdi-48px"></i>
+        </button>
+      </div>
+      <!-- Body -->
+      <div class="modal-body">
+        <div class="row">
+          <div class="col-3">
+            <p></p>
+            <p class="text-center"><i class="mdi mdi-gift mdi-4x"></i></p>
+          </div>
+          <div class="col-9">
+            <p>Sharing is caring. Therefore, from time to time we like to give our visitors small gifts. Today is one of those days.</p>
+            <p><strong>Copy the following code and use it at the checkout. It's valid for <u>one day</u>.</strong></p>
+            <h2 class="notoc"><span class="badge">v52gs1</span></h2>
+          </div>
+        </div>
+      </div>
+      <!-- Footer -->
+      <div class="modal-footer justify-content-center">
+        <a href="https://mdbootstrap.com/product/material-design-for-bootstrap-pro/" class="btn btn-primary-modal">Yes, please</a>
+        <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal">No, thanks</a>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!--END Modal 10% Discount -->
+
+<!--Modal Subscription -->
+<div class="modal fade" id="modalBFDemoSubscription" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+  <div class="modal-dialog cascading-modal z-depth-1" role="document">
+    <!-- Content -->
+    <div class="modal-content">
+      <!--Header-->
+      <div class="modal-header light-blue darken-3 white-text">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+        <span aria-hidden="true">×</span>
+        </button>
+        <h4 class="title notoc"><i class="mdi mdi-newspaper"></i> Don’t miss important updates</h4>
+      </div>
+      <!-- Body -->
+      <div class="modal-body mb-0">
+        <p class="lead text-center">Subscribe to our newsletter</p>
+        <div class="md-form form-sm">
+          <i class="mdi mdi-lock"></i>
+          <input type="password" id="form16" class="form-control">
+          <label for="form16">Your name</label>
+        </div>
+        <div class="md-form form-sm">
+          <i class="mdi mdi-email"></i>
+          <input type="text" id="form17" class="form-control">
+          <label for="form17">Your email</label>
+        </div>
+        <div class="text-center mt-1-half">
+          <button class="btn btn-info">Submit <i class="mdi mdi-check ml-1"></i></button>
+          <button class="btn btn-outline-info" data-dismiss="modal">No, thanks</button>
+        </div>
+      </div>
+    </div>
+    <!-- END Content -->
+  </div>
+</div>
+<!--END Modal Subscription -->
+++++
+