j1_template 2019.4.8 → 2019.4.10

data/lib/starter_web/pages/public/start/_unused/_roundtrip/420_responsive_tables_extensions.adoc

@@ -0,0 +1,268 @@
+---
+title:                                  Roundtrip
+tagline:                                BS table extensions
+description:                            Enhanced table styles for Bootstrap
+
+tags:                                   [ 
+                                         Template, Bootstrap, Roundtrip, Extended, Tables
+                                        ]
+index:                                  []
+categories:                             [ pages ]
+
+flowtext:                               false
+
+permalink:                              /pages/public/start/roundtrip/responsive_tables/
+regenerate:                             false
+
+resources:                              []
+resource_options:
+  - attic:
+#    background_color:
+#      color_1:                        md_grey_100
+#      color_2:                        md_grey_400
+#     padding_top:                      350
+#     padding_bottom:                   50
+      opacity:                          0.7
+      slides:
+        - url:                          /assets/images/pages/roundtrip/tables-1920x1280-bw.jpg
+          alt:                          Photo by Markus Spiske on Unsplash
+          badge:
+            type:                       unsplash
+            author:                     Markus Spiske
+            href:                       https://unsplash.com/@markusspiske/portfolio
+---
+
+// Enable the Liquid Preprocessor
+// -----------------------------------------------------------------------------
+:page-liquid:
+
+// Set other global page attributes here
+// -----------------------------------------------------------------------------
+
+// Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture set_env_entry_document %}themes/{{site.template.name}}/procedures/global/set_env_entry_document.proc{%endcapture%}
+
+// 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]
+include::{includedir}/attributes.asciidoc[tag=data]
+
+// Additional Asciidoc page attributes goes here
+// -----------------------------------------------------------------------------
+
+// Include sub-documents
+// -----------------------------------------------------------------------------
+
+
+Creating a design for responsive tables is challenging. The approch used by
+J1 Template is based on pure CSS for simplicity and portability to be viewed
+best on all devices and browsers.
+
+
+== Type of tables
+
+But, for sure, the solution provided is a compromise. To fit the common needs
+for tables viewed on desktop *and* mobile devices, three types of responsive
+tables are implemented:
+
+.Types of responsive tables
+[cols="2a,4a,6a", options="header", width="100%", role="g-bg-white-opacity-0_8 rtable_v table-responsive mt-3"]
+|===============================================================================
+|Type |Style |Description
+
+|Bootstrap
+|`table-responsive`
+|The adding the class `.table-responsive`, it creates a responsive table based
+on BS CSS styles. The table will then scroll horizontally on small devices.
+
+
+|V Table
+|`rtable_v`
+|The style `.rtable_v` *rebuilds* a table. A header is set in *invisible* and 
+all *columns* gets vertically *stacked* as *rows*.
+
+|H Table
+|`rtable_h`
+|The style `.rtable_h` *rebuilds* a table for multiple columns into a fixed,
+two column style having only *one* row. The table header get rewritten 
+*stacked* and *fixed* for the first column. All other rows of the previous
+table are *horizontal* slideable using a scrollbar or moved on touch.
+
+|===============================================================================
+
+[NOTE]
+====
+The styles for responsive tables takes effect if the viewport is 
+smaller than 768px for the width (x-axis), typically for small devices 
+like mobiles or tablets.
+
+The styles for V Table *or* H Table can be combined with *Bootstrap*
+responsive tables.
+====
+
+To see the transformation in action, for desktop devices resize the browser
+window or use a device the viewport is smaller than 768px (mobiles or tablets)
+
+
+== 2-column Table
+
+lorem:sentences[2] +
+lorem:sentences[3] +
+
+[cols="6a,6a", options="header", width="100%", role="g-bg-white-opacity-0_8 rtable_v table-responsive mt-3"]
+|===============================================================================
+|Variable |Description
+
+|`page.content` 
+|The content of the Page, rendered or un-rendered
+depending upon what Liquid is being processed and what `page` is.
+
+|`page.title`
+|The title of the Page.
+
+|`page.excerpt`
+|The un-rendered excerpt of the Page.
+
+|`page.url`
+|The URL of the Post without the domain, but with a leading
+slash, e.g. `/2008/12/14/my-post.html`
+
+|`page.date`
+|The Date assigned to the Post. This can be overridden in a
+Post's front matter by specifying a new date/time in the format
+`YYYY-MM-DD HH:MM:SS` (assuming UTC), or `YYYY-MM-DD HH:MM:SS +/-TTTT`
+(to specify a time zone using an offset from UTC. e.g.
+`2008-12-14 10:30:00 +0900`).
+
+|`page.id` 
+|An identifier unique to the Post (useful in RSS feeds). e.g.
+`/2008/12/14/my-post`
+
+|`page.categories`
+|The list of categories to which this post belongs.
+Categories are derived from the directory structure above the `_posts`
+directory. For example, a post at
+`/work/code/_posts/2008-12-24-closures.md` would have this field set to
+`['work', 'code']`. These can also be specified in the
+link:../frontmatter/[YAML Front Matter].
+
+|===============================================================================
+
+
+[cols="6a,6a", options="header", width="100%", role="g-bg-white-opacity-0_8  rtable_h table-responsive mt-3"]
+|===============================================================================
+|Variable |Description
+
+|`page.content` 
+|The content of the Page, rendered or un-rendered
+depending upon what Liquid is being processed and what `page` is.
+
+|`page.title`
+|The title of the Page.
+
+|`page.excerpt`
+|The un-rendered excerpt of the Page.
+
+|`page.url`
+|The URL of the Post without the domain, but with a leading
+slash, e.g. `/2008/12/14/my-post.html`
+
+|`page.date`
+|The Date assigned to the Post. This can be overridden in a
+Post's front matter by specifying a new date/time in the format
+`YYYY-MM-DD HH:MM:SS` (assuming UTC), or `YYYY-MM-DD HH:MM:SS +/-TTTT`
+(to specify a time zone using an offset from UTC. e.g.
+`2008-12-14 10:30:00 +0900`).
+
+|`page.id` 
+|An identifier unique to the Post (useful in RSS feeds). e.g.
+`/2008/12/14/my-post`
+
+|`page.categories`
+|The list of categories to which this post belongs.
+Categories are derived from the directory structure above the `_posts`
+directory. For example, a post at
+`/work/code/_posts/2008-12-24-closures.md` would have this field set to
+`['work', 'code']`. These can also be specified in the
+link:../frontmatter/[YAML Front Matter].
+
+|===============================================================================
+
+
+== Multi-column Table
+
+lorem:sentences[2] +
+lorem:sentences[3] +
+
+[cols="3,2,2,5", options="header", width="100%", role="g-bg-white-opacity-0_8 rtable_v table-responsive mt-3"]
+|===============================================================================
+|Parameter |Type |Default |Description
+
+|`background_color`
+|Hash
+|`md_white`
+|The *background_color hash* contains a pair of colors to control the header
+background as a gradient.
+
+|`background_color.color_1`
+|Symbolic color \| RGB valuess
+|`md_indigo`
+|Start value (color) for the gradient used for the header box background.
+Alternatively, the color can be configured as (hexadecimal) RGB valuess of
+the form `#RRGGBB`
+
+|`background_color.color_2`
+|Symbolic color \| RGB valuess
+|`md_indigo`
+|End value (color) for the gradient used for the header box background.
+Alternatively, the color can be configured as (hexadecimal) RGB valuess of
+the form `#RRGGBB`
+
+|===============================================================================
+
+
+
+[cols="3,2,2,5", options="header", width="100%", role="g-bg-white-opacity-0_8  rtable_h table-responsive mt-3"]
+|===============================================================================
+|Parameter |Type |Default |Description
+
+|`background_color`
+|Hash
+|`md_white`
+|The *background_color hash* contains a pair of colors to control the header
+background as a gradient.
+
+|`background_color.color_1`
+|Symbolic color \| RGB valuess
+|`md_indigo`
+|Start value (color) for the gradient used for the header box background.
+Alternatively, the color can be configured as (hexadecimal) RGB valuess of
+the form `#RRGGBB`
+
+|`background_color.color_2`
+|Symbolic color \| RGB valuess
+|`md_indigo`
+|End value (color) for the gradient used for the header box background.
+Alternatively, the color can be configured as (hexadecimal) RGB valuess of
+the form `#RRGGBB`
+
+|===============================================================================
+
+
+== What's next
+
+Hopefully you've enjoyed exploring all the possibilities J1 offers sofar.
+An interesting feature may using themes. But much, much more can the J1 do 
+for your Web Site.
+
+Check out what themes can do. Have a look at link:{roundtrip-themes}[BS themes] 
+feature!
+
+
+

data/lib/starter_web/pages/public/start/_unused/_roundtrip/500_themes.adoc

@@ -0,0 +1,81 @@
+---
+title:                                  Roundtrip
+tagline:                                themes
+description:                            J1 Template Roundtrip - Template Themes
+
+tags:                                   [ Template, Roundtrip, Bootstrap, Themes ]
+index:                                  []
+categories:                             [ pages ]
+
+permalink:                              /pages/public/start/roundtrip/themes/
+regenerate:                             false
+
+resources:                              []
+resource_options:
+  - attic:
+      opacity:                          0.5
+      slides:
+        - url:                          /assets/images/pages/roundtrip/themes-1920x1280-bw.jpg
+          alt:                          Photo by Clem Onojeghuo on Unsplash
+          badge:
+            type:                       unsplash
+            author:                     Clem Onojeghuo
+            href:                       https://unsplash.com/@clemono
+---
+
+// 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]
+include::{includedir}/attributes.asciidoc[tag=data]
+
+// 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 some of the possibilities J1 offers for
+managing themes. But much, much more can the J1 do for your website.
+
+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 site, go for *Web in a day*. This tutorial
+guides you through all the steps how to build a website - your site using Jekyll 
+and the template system J1. It's really a nice journey to *explore* and 
+*learn* creating a static web - start from here: 
+link:{kickstarter-web-in-a-day}[Web in a day, window="_blank"].
+
+

data/lib/starter_web/pages/public/start/_unused/_roundtrip/800_whats_next.adoc

@@ -0,0 +1,73 @@
+---
+title:                                  Roundtrip
+tagline:                                where to go
+description:                            Where to go further
+
+tags:                                   [ Start, Template, Whats, Next, Further ]
+index:                                  []
+categories:                             [ pages ]
+
+permalink:                              /pages/public/start/roundtrip/whats_next/
+regenerate:                             false
+
+resources:                              [ lightbox ]
+resource_options:
+  - attic:
+      opacity:                          0.5
+      slides:
+        - url:                          /assets/images/attics/go-up-1920x1280-bw.jpg
+          alt:                          Photo by Fab Lentz on Unsplash
+          badge:
+            type:                       unsplash
+            author:                     Fab Lentz
+            href:                       https://unsplash.com/@fossy
+---
+
+// 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]
+include::{includedir}/attributes.asciidoc[tag=data]
+
+// Additional Asciidoc page attributes goes here
+//
+
+Welcome to the Web Pages of J1 Template. If your here first time,
+hopefully you get on that page first - the *ReadMe First* of the *Start*
+section. For sure, there is no better place to start.
+
+Having a menu system is great. We hope the the Navigator of J1 will help
+you to explore this site, find what your are looking for. The site of J1
+has grown over the last month a lot. Many documents where seeking for a home.
+And we have really a bunch of them.
+
+== 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, window="_blank"]!.

data/lib/starter_web/pages/public/start/_unused/_roundtrip/_unused/600_cards.adoc

@@ -0,0 +1,770 @@
+---
+title:                                  Roundtrip
+tagline:                                Cards, compact content previews
+description:                            J1 Template Roundtrip - Cards, compact content previews
+
+tags:                                   [ Template, Roundtrip, Cards ]
+index:                                  []
+categories:                             [ pages ]
+
+permalink:                              /pages/public/start/roundtrip/cards/
+regenerate:                             false
+
+resources:                              []
+resource_options:
+  - attic:
+      opacity:                          0.2
+      slides:
+        - url:                          /assets/images/pages/roundtrip/cards-1920.jpg
+          alt:                          Photo by Jack Hamilton on Unsplash
+          caption:                      Photo by Jack Hamilton on Unsplash
+          caption_href:                 https://unsplash.com/@jacc
+          caption_color:                rgba(255, 255, 255, 0.8)
+---
+
+// 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]
+include::{includedir}/attributes.asciidoc[tag=data]
+
+// Additional Asciidoc page attributes goes here
+// -----------------------------------------------------------------------------
+
+A card is a sheet of material that serves as an entry point to more detailed
+information. Cards may contain a photo, text, and a link about a single subject.
+They may display content containing elements of varying size, such as photos
+with captions of variable length.
+
+== Plain Cards
+
+lorem:sentences[5]
+
+=== Text Cards
+
+lorem:sentences[5]
+
+lorem:sentences[2]
+
+++++
+  <div class="row mb-5">
+
+    <div class="col-md-6 mt-3">
+      <div class="card">
+        <div class="content content-warning">
+          <h5 class="notoc category-social">
+            <i class="mdi mdi-information-outline"></i> The Next Web
+          </h5>
+          <h4 class="notoc card-title">
+            <a href="#">"Focus on Your Employees"</a>
+          </h4>
+          <p class="card-description">
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+          </p>
+          <div class="footer text-center">
+            <a href="#" class="btn btn-secondary mt-1 mb-2">
+              <i class="mdi mdi-blogger"></i> Read Article
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="col-md-6 mt-3">
+      <div class="card">
+        <div class="content content-info">
+          <h5 class="notoc category-social">
+            <i class="mdi mdi-twitter"></i> Twitter
+          </h5>
+          <h4 class="notoc card-title">
+            <a href="#">"Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore."</a>
+          </h4>
+          <div class="footer mt-5 mb-2">
+            <div class="author">
+              <a href="#">
+                <img class="avatar img-raised" src="/assets/images/md-kit/avatar.jpg" alt="image avatar.jpg" >
+                <span>Tania Andrew</span>
+              </a>
+            </div>
+            <div class="stats">
+              <i class="mdi mdi-heart"></i> 2.4K · <i class="mdi mdi-share"></i> 45
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+++++
+
+
+=== Background Cards
+
+lorem:sentences[5]
+
+++++
+<div class="row mb-5">
+
+  <div class="col-md-6 mt-3">
+    <div class="card card-background" style="background-image: url('/assets/images/md-kit/office1.jpg')">
+      <div class="content">
+        <h6 class="notoc category text-info">Productivy Apps</h6>
+        <a href="#">
+          <h3 class="notoc card-title">The Best Productivity Apps on Market</h3>
+        </a>
+        <p class="card-description">
+          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+        </p>
+        <a href="#" class="btn btn-info btn-round btn-raised mt-1 mb-1">
+        <i class="mdi mdi-blogger"></i> Read Article
+        </a>
+        <a href="#" class="btn btn-info btn-round btn-raised">
+        <i class="mdi mdi-timer"></i> Watch Later
+        </a>
+      </div>
+    </div>
+  </div>
+
+  <div class="col-md-6 mt-3">
+    <div class="card card-background" style="background-image: url('/assets/images/md-kit/card-blog3.jpg')">
+      <div class="content">
+        <h6 class="notoc category text-info">Materials</h6>
+        <h3 class="notoc card-title">The Sculpture Where Details Matter</h3>
+        <p class="card-description">
+          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+        </p>
+        <a href="#" class="btn btn-danger btn-round btn-raised mb-1">
+        <i class="mdi mdi-blogger"></i> Read Article
+        </a>
+      </div>
+    </div>
+  </div>
+
+</div>
+++++
+
+
+== Image Cards
+
+lorem:sentences[5]
+
+lorem:sentences[3]
+
+
+=== Image Header Cards
+
+lorem:sentences[5]
+
+++++
+  <div class="row mb-5">
+
+    <div class="col-md-6 mt-3">
+      <div class="card card-blog">
+
+        <div class="card-image">
+          <a href="#">
+            <img class="img" src="/assets/images/md-kit/blog5.jpg" alt="image blog5.jpg">
+          </a>
+        </div>
+
+        <div class="content">
+
+          <div class="card-title">
+            This Summer Will be Awesome
+          </div>
+
+          <h5 class="notoc category text-info">Fashion</h5>
+          <p class="card-description">
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+          </p>
+
+        </div>
+
+      </div>
+    </div>
+
+    <div class="col-md-6 mt-3">
+      <div class="card card-blog card-plain">
+        <div class="card-image">
+          <a href="#">
+          <img class="img" src="/assets/images/md-kit/blog5.jpg" alt="image blog5.jpg">
+          </a>
+
+        </div>
+        <div class="content">
+          <div class="card-title">
+            This Summer Will be Awesome
+          </div>
+          <h5 class="notoc category text-info">Fashion</h5>
+          <p class="card-description">
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+          </p>
+        </div>
+      </div>
+
+    </div>
+
+  </div>
+++++
+
+=== Image Header Cards + Actions
+
+lorem:sentences[5]
+
+++++
+  <div class="row mt-3 mb-5">
+
+    <div class="col-md-6 mt-3">
+      <div class="card">
+        <div class="card-height-indicator"></div>
+        <div class="card-content">
+          <div class="card-image">
+            <img src="/assets/images/carousel/cats/cat-2.jpg" alt="image cat-2.jpg">
+            <h3 class="notoc card-image-headline">Scharfe Katz</h3>
+          </div>
+          <div class="card-body">
+            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
+          </div>
+          <footer class="card-footer">
+            <button class="btn btn-flat">Share</button>
+            <button class="btn btn-flat btn-primary">Learn More</button>
+          </footer>
+        </div>
+      </div>
+    </div>
+     <div class="col-md-6 mt-3">
+      <div class="card card-plain">
+        <div class="card-height-indicator"></div>
+        <div class="card-content">
+          <div class="card-image">
+            <img src="/assets/images/carousel/cats/cat-8.jpg" alt="image cat-8.jpg">
+            <h3 class="notoc card-image-headline">Nette Katz</h3>
+          </div>
+          <div class="card-body">
+            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
+          </div>
+          <footer class="card-footer">
+            <button class="btn btn-flat">Share</button>
+            <button class="btn btn-flat btn-primary">Learn More</button>
+          </footer>
+        </div>
+      </div>
+    </div>
+
+  </div>
+++++
+
+=== Profile Cards
+
+lorem:sentences[5]
+
+lorem:sentences[2]
+
+++++
+    <div class="row mb-5">
+      <div class="col-md-4">
+        <div class="card card-profile">
+          <div class="card-image">
+            <a href="#">
+            <img class="img" src="/assets/images/md-kit/card-profile4.jpg" alt="image card-profile4.jpg">
+            </a>
+          </div>
+          <div class="content">
+            <h4 class="notoc card-title">Mia Müller-Fusch</h4>
+            <h6 class="notoc category text-info">Web Designer</h6>
+            <p class="card-description">
+              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+            </p>
+            <div class="footer">
+              <a href="#" class="btn btn-just-icon btn-simple btn-twitter"><i class="fab fa-twitter"></i></a>
+              <a href="#" class="btn btn-just-icon btn-simple btn-dribbble"><i class="fab fa-dribbble"></i></a>
+              <a href="#" class="btn btn-just-icon btn-simple btn-instagram"><i class="fab fa-instagram"></i></a>
+            </div>
+          </div>
+      </div>
+      </div>
+      <div class="col-md-4">
+        <div class="card card-profile">
+          <div class="card-image">
+            <a href="#">
+            <img class="img" src="/assets/images/md-kit/card-profile1.jpg" alt="image card-profile1.jpg">
+            </a>
+          </div>
+          <div class="content">
+            <h4 class="notoc card-title">Jupp Schmitz</h4>
+            <h6 class="notoc category text-gray">CEO &#xB7; Co-Founder</h6>
+            <div class="footer">
+              <ul class="social-icons">
+                <li><a href="#" data-original-title="Facebook" class="rounded-circle social_facebook"></a></li>
+                <li><a href="#" data-original-title="Twitter" class="rounded-circle social_twitter"></a></li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-md-4">
+        <div class="card card-profile">
+          <div class="card-avatar">
+            <a href="#">
+            <img class="img" src="/assets/images/md-kit/marc.jpg" alt="image marc.jpg">
+            </a>
+          </div>
+          <div class="content">
+            <h4 class="notoc card-title">Heini Vorderseer</h4>
+            <h6 class="notoc category text-gray">CEO &#xB7; Co-Founder</h6>
+            <p class="card-description">
+              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+            </p>
+            <a href="#" class="btn btn-info btn-round btn-raised">Follow</a>
+          </div>
+        </div>
+      </div>
+    </div>
+++++
+
+=== Blog Cards
+
+lorem:sentences[4]
+
+++++
+  <div class="row mb-5">
+
+    <div class="col-md-6 mt-3">
+      <div class="card card-blog">
+        <div class="card-image">
+          <a href="#">
+          <img class="img" src="/"pages/roundtrip/meeting.jpg" alt="image img12.jpg">
+          </a>
+        </div>
+        <div class="content">
+          <h5 class="notoc category text-success">
+            <i class="mdi mdi-scale-balance"></i> Legal
+          </h5>
+          <h4 class="notoc card-title">
+            <a href="#">5 Common Legal Mistakes That Can Trip-Up Your Startup</a>
+          </h4>
+          <p class="card-description">
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+            tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+          </p>
+          <div class="footer">
+            <div class="author">
+              <a href="#">
+                <img class="avatar img-raised" src="/assets/images/md-kit/marc.jpg" alt="image mark.jpg">
+              <span>Mike John</span>
+              </a>
+            </div>
+            <div class="stats">
+              <i class="mdi mdi-timer"></i> 5 min read
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="col-md-6 mt-3">
+      <div class="card card-blog card-plain">
+        <div class="card-image">
+          <a href="#">
+            <img class="img" src="/assets/images/attics/stefan-stefancik-1280x800.png" alt="image stefan-stefancik-1200.jpg" >
+          </a>
+        </div>
+        <div class="content">
+          <h5 class="notoc category text-danger">
+            <i class="mdi mdi-trending-up"></i> Trending
+          </h5>
+          <h4 class="notoc card-title">
+            <a href="#">To Grow Your Business Start Focusing on Your Employees</a>
+          </h4>
+          <div class="footer">
+            <div class="author">
+              <a href="#">
+                <img class="avatar img-raised" src="/assets/images/md-kit/marc.jpg" alt="image mark.jpg">
+              <span>Mike John</span>
+              </a>
+            </div>
+            <div class="stats">
+              <i class="mdi mdi-timer"></i> 5 min read
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+++++
+
+
+== Fact Cards
+
+lorem:sentences[5]
+
+lorem:sentences[2]
+
+++++
+    <div class="row mt-3 mb-5">
+
+      <div class="col-md-4">
+        <div class="card card-profile">
+          <div class="card-icon">
+            <a href="#">
+              <i class="card-icon-circle raised mdi mdi-responsive mdi-5x mdi-md-bg-primary-50 card-icon-background-color-theme card-icon-mdi"></i>
+            </a>
+          </div>
+          <div class="content">
+            <h6 class="notoc category text-gray">J1 Template</h6>
+            <h4 class="notoc card-title">Voll Responsive</h4>
+            <p class="card-description">
+              Das Web ist überall. J1 Template unterstützt jede Hardware.
+              Für beste Ergebnisse auf PCs, Tablets and SmartPhones.
+            </p>
+            <p class="card-description">
+              <i>Folgen Sie Ihren Besuchern.</i>
+            </p>
+            <a href="#" class="btn btn-info btn-round btn-raised">Mehr Lesen</a>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-md-4">
+        <div class="card card-profile">
+          <div class="card-icon">
+            <a href="#">
+              <i class="card-icon-circle raised mdi mdi-language-html5 mdi-5x mdi-md-bg-primary-50 card-icon-background-color-theme card-icon-mdi"></i>
+            </a>
+          </div>
+          <div class="content">
+            <h6 class="notoc category text-gray">J1 Template</h6>
+            <h4 class="notoc card-title">HTML5 &#xB7; CSS3 &#xB7; JS</h4>
+            <p class="card-description">
+              Gutes Design, aktuelle Technologie. Präsentieren Sie Ihre
+              Produkte, Projekte, Dienstleistungen und Ihr Team besonders.
+            </p>
+            <p class="card-description">
+              <i>Machen Sie Ihre Site einzigartig.</i>
+            </p>
+            <a href="#" class="btn btn-info btn-round btn-raised">Mehr Lesen</a>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-md-4">
+        <div class="card card-profile">
+          <div class="card-icon">
+            <a href="#">
+              <i class="card-icon-circle raised mdi mdi-clock mdi-5x mdi-md-bg-primary-50 card-icon-background-color-theme card-icon-mdi"></i>
+            </a>
+          </div>
+          <div class="content">
+            <h6 class="notoc category text-gray">J1 Template</h6>
+            <h4 class="notoc card-title">Sofort Starten</h4>
+            <p class="card-description">
+              Programmierung ist nicht nötig. Eine große Zahl an fertigen
+              Komponenten steht Ihnen zur Verfügung die den Job erledigen.
+            </p>
+            <p class="card-description">
+              <i>Konfigurieren was nötig ist.</i>
+            </p>
+            <a href="#" class="btn btn-info btn-round btn-raised">Mehr Lesen</a>
+          </div>
+        </div>
+      </div>
+
+    </div>
+++++
+
+
+== Nav Cards
+
+lorem:sentences[4]
+
+=== Tabs
+
+lorem:sentences[5]
+
+++++
+<div class="row mb-4">
+
+  <div class="col-md-6 mt-3">
+    <h3 class="notoc"><small>Tabs on Plain Card</small></h3>
+    <!-- Tabs on Plain Card -->
+    <div class="card card-nav-tabs card-plain">
+      <div class="header header-danger">
+        <!-- colors: "header-primary", "header-info", "header-success", "header-warning", "header-danger" -->
+        <div class="nav-tabs-navigation">
+          <div class="nav-tabs-wrapper">
+            <ul class="nav nav-tabs" data-tabs="tabs">
+              <li class="nav-item"><a class="nav-link active" href="#home" data-toggle="tab">Home</a></li>
+              <li class="nav-item"><a class="nav-link" href="#updates" data-toggle="tab">Updates</a></li>
+              <li class="nav-item"><a class="nav-link" href="#history" data-toggle="tab">History</a></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div class="content">
+        <div class="tab-content">
+          <div class="tab-pane active" id="home">
+            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
+          </div>
+          <div class="tab-pane" id="updates">
+            <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
+          </div>
+          <div class="tab-pane" id="history">
+            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div> <!-- End Tabs on plain Card -->
+
+  <div class="col-md-6 mt-3">
+    <h3 class="notoc"><small>Tabs with Icons on Plain Card</small></h3>
+    <!-- Tabs with icons on Card -->
+    <div class="card card-nav-tabs">
+      <div class="header header-success">
+        <!-- colors: "header-primary", "header-info", "header-success", "header-warning", "header-danger" -->
+        <div class="nav-tabs-navigation">
+          <div class="nav-tabs-wrapper">
+            <ul class="nav nav-tabs" data-tabs="tabs">
+              <li class="nav-item">
+                <a class="nav-link active" href="#profile" data-toggle="tab">
+                <i class="mdi mdi-face mdi-lg mr-1"></i>
+                <!-- i class="material-icons">face</i -->
+                Profile
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#messages" data-toggle="tab">
+                <i class="mdi mdi-comment-text mdi-lg mr-1"></i>
+                <!-- i class="material-icons">chat</i -->
+                Messages
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#settings" data-toggle="tab">
+                <i class="mdi mdi-wrench mdi-lg mr-1"></i>
+                <!-- i class="material-icons">build</i -->
+                Settings
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div class="content">
+        <div class="tab-content">
+          <div class="tab-pane active" id="profile">
+            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
+          </div>
+          <div class="tab-pane" id="messages">
+            <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
+          </div>
+          <div class="tab-pane" id="settings">
+            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>  <!-- End Tabs with icons on Card -->
+
+</div>
+++++
+
+=== Accordion
+
+lorem:sentences[4]
+
+++++
+  <div class="row mb-5">
+
+    <div class="col-md-6 mt-3">
+      <h3 class="notoc"><small>Accordion on a Image Card</small></h3>
+      <div class="card card-blog">
+
+        <div class="card-image">
+          <a href="#">
+            <img class="img" src="/assets/images/md-kit/blog5.jpg" alt="image blog5.jpg">
+          </a>
+        </div>
+
+        <div class="content">
+
+          <div class="card-title mb-3">Image Card Title</div>
+          <p class="card-description">
+            At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+          </p>
+
+          <div id="accordion-1" class="panel-group" role="tablist" aria-multiselectable="true">
+            <div class="panel panel-default">
+              <div class="panel-heading" role="tab" id="headingOne-1-1">
+                <h5 class="notoc mb-0">
+                  <a class="accordion-toggler" role="button" data-toggle="collapse" data-parent="#accordion-1" href="#collapseOne-1-1" aria-expanded="false" aria-controls="collapseOne-1-1">
+                    <span class="mdi mdi-plus-circle-outline mdi-lg mr-2"></span>
+                    Group #1
+                  </a>
+                </h5>
+              </div>
+              <div id="collapseOne-1-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne-1-1" aria-expanded="false" style="height: 0px;">
+                <div class="panel-body ml-3">
+                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr. Sed diam nonumy eirmod tempor invidunt ut
+                  labore et dolore magna aliquyam erat, sed diam voluptua.
+
+                  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
+                  sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. Sed
+                  diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+                </div>
+              </div>
+            </div>
+            <div class="panel panel-default">
+              <div class="panel-heading" role="tab" id="headingTwo-1-1">
+                <h5 class="notoc mb-0">
+                  <a class="accordion-toggler" role="button" data-toggle="collapse" data-parent="#accordion-1" href="#collapseTwo-1-1" aria-expanded="false" aria-controls="collapseTwo-1-1">
+                    <span class="mdi mdi-plus-circle-outline mdi-lg mr-2"></span>
+                    Group #2
+                  </a>
+                </h5>
+              </div>
+              <div id="collapseTwo-1-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo-1-1" aria-expanded="false" style="height: 0px;">
+                <div class="panel-body ml-3">
+                  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
+                  officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
+
+                  Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
+                  Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan
+                  excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth
+                  nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+                </div>
+              </div>
+            </div>
+            <div class="panel panel-default">
+              <div class="panel-heading" role="tab" id="headingThree-1-1">
+                <h5 class="notoc mb-0">
+                  <a class="accordion-toggler" role="button" data-toggle="collapse" data-parent="#accordion-1" href="#collapseThree-1-1" aria-expanded="false" aria-controls="collapseThree-1-1">
+                    <span class="mdi mdi-plus-circle-outline mdi-lg mr-2"></span>
+                    Group #3
+                  </a>
+                </h5>
+              </div>
+              <div id="collapseThree-1-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree-1-1" aria-expanded="false">
+                <div class="panel-body ml-3">
+                  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
+                  sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
+                  sed diam nonumy eirmod tempor invidunt.Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
+                  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+                </div>
+              </div>
+            </div>
+          </div>
+
+        </div>
+
+      </div>
+    </div>
+
+    <div class="col-md-6 mt-3">
+      <h3 class="notoc"><small>Accordion on a Plain Card</small></h3>
+      <div class="card card-blog">
+
+        <div class="content">
+
+          <div class="card-title mb-3">Plain Card Title</div>
+          <p class="card-description">
+            Card Description: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+          </p>
+
+          <div id="accordion-2" class="panel-group" role="tablist" aria-multiselectable="true">
+            <div class="panel panel-default">
+              <div class="panel-heading" role="tab" id="headingOne-1-2">
+                <h5 class="notoc mb-0">
+                  <a class="accordion-toggler" role="button" data-toggle="collapse" data-parent="#accordion-2" href="#collapseOne-1-2" aria-expanded="false" aria-controls="collapseOne-1-2">
+                    <span class="mdi mdi-plus-circle-outline mdi-lg mr-2"></span>
+                    Group #1
+                  </a>
+                </h5>
+              </div>
+              <div id="collapseOne-1-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne-1-2" aria-expanded="false" style="height: 0px;">
+                <div class="panel-body ml-3">
+                  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+                </div>
+              </div>
+            </div>
+            <div class="panel panel-default">
+              <div class="panel-heading" role="tab" id="headingTwo-1-2">
+                <h5 class="notoc mb-0">
+                  <a class="accordion-toggler" role="button" data-toggle="collapse" data-parent="#accordion-2" href="#collapseTwo-1-2" aria-expanded="false" aria-controls="collapseTwo-1-2">
+                    <span class="mdi mdi-plus-circle-outline mdi-lg mr-2"></span>
+                    Group #2
+                  </a>
+                </h5>
+              </div>
+              <div id="collapseTwo-1-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo-1-2" aria-expanded="false" style="height: 0px;">
+                <div class="panel-body ml-3">
+                  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+                </div>
+              </div>
+            </div>
+            <div class="panel panel-default">
+              <div class="panel-heading" role="tab" id="headingThree-1-2">
+                <h5 class="notoc mb-0">
+                  <a class="accordion-toggler" role="button" data-toggle="collapse" data-parent="#accordion-2" href="#collapseThree-1-2" aria-expanded="false" aria-controls="collapseThree-1-2">
+                    <span class="mdi mdi-plus-circle-outline mdi-lg mr-2"></span>
+                    Group #3
+                  </a>
+                </h5>
+              </div>
+              <div id="collapseThree-1-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree-1-2" aria-expanded="false">
+                <div class="panel-body ml-3">
+                  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+                </div>
+              </div>
+            </div>
+          </div>
+
+        </div>
+
+      </div>
+    </div>
+
+  </div>
+
+  <script>
+    // See: https://www.bootply.com/89084
+    $('.collapse').on('shown.bs.collapse', function(){
+      $(this).parent().find('.mdi-plus-circle-outline').removeClass('mdi-plus-circle-outline').addClass('mdi-minus-circle-outline');
+    })
+    .on('hidden.bs.collapse', function(){
+       $(this).parent().find('.mdi-minus-circle-outline').removeClass('mdi-minus-circle-outline').addClass('mdi-plus-circle-outline');
+    });
+  </script>
+
+++++
+
+== What's next?
+
+You've found cards for your web that fit your needs? If so, really great.
+
+Content counts - no way. If a page is opened, yes a great one, the very first
+what your vistors will see is what is top most on a page - a header. A header
+is somewhat like an intro. Very important to make a reader feel right on a
+page. Or interested to go for reading.
+
+Beside simple text headers, J1 support *Image Headers* using pictures or videos.
+To create eye-catching headers no expensive software is needed.
+
+What? Find out how it works: link:{roundtrip-typography}[J1 Typography].