\ No newline at end of file
diff --git a/_includes/_navigation.html b/_includes/_navigation.html
new file mode 100644
index 0000000..a44ea0d
--- /dev/null
+++ b/_includes/_navigation.html
@@ -0,0 +1,122 @@
+
+
+
diff --git a/_includes/_pagination.html b/_includes/_pagination.html
new file mode 100644
index 0000000..c74982a
--- /dev/null
+++ b/_includes/_pagination.html
@@ -0,0 +1,42 @@
+{% comment %}
+* This loops through the paginated posts
+*
+* Total posts: {{ paginator.total_posts }}
+* Total paginate-pages: {{ paginator.total_pages }}
+*
+{% endcomment %}
+
+
+{% for post in paginator.posts %}
+
+{% endfor %}
+
+
+
+
diff --git a/_includes/_sidebar.html b/_includes/_sidebar.html
new file mode 100644
index 0000000..e3ceae1
--- /dev/null
+++ b/_includes/_sidebar.html
@@ -0,0 +1,20 @@
+
\ No newline at end of file
diff --git a/_includes/alert b/_includes/alert
new file mode 100644
index 0000000..8dd6ea2
--- /dev/null
+++ b/_includes/alert
@@ -0,0 +1,31 @@
+{% comment %}
+*
+* This include lets you easily display an alert. To use this include no `.html` ending is necessary.
+*
+* You can use the following kinds of alerts:
+*
+* - warning (foundation built-in)
+* - info (foundation built-in)
+* - success (foundation built-in)
+* - alert (foundation built-in)
+* - text (foundation built-in)
+* - terminal (custom, see Alerts in _sass/_09_elements.scss)
+* - ... (define your own: .alert-box. { @include alert-style();)
+*
+* You can even use markdown and -tags inside the alert, but beware to use " and ' properly; for example:
+*
+* {% include alert info='Show an info alert with outstandinginformation.' %}
+*
+* {% include alert info='Show an info alert with *outstanding* [information](#info).' %}
+*
+* {% include alert info='Show an info alert with *outstanding* information.' %}
+*
+* You can also call for additional classes to be put on the alert div:
+*
+* {% include alert success="Yay! you did it!" classes='round' %}
+*
+{% endcomment %}
+{% for entry in include %}
+{% if entry[0] == 'classes' %}{% continue %}{% endif %}
+
{{ entry[1] | markdownify }}
+{% endfor %}
diff --git a/_includes/gallery b/_includes/gallery
new file mode 100644
index 0000000..2536c29
--- /dev/null
+++ b/_includes/gallery
@@ -0,0 +1,36 @@
+{% comment %}
+*
+* This include lets you easily embed a gallery into your post.
+* To use the gallery include you...
+*
+* 1. ...need two images: a thumbnail and a big image.
+* 2. Name the thumbnail gallery-image-thumb.jpg and...
+* 3. ...name the big gallery-image.jpg
+* 4. Define the big version in frontmatter,
+*
+* gallery:
+* - image_url: gallery-image.jpg
+*
+* 5. Give your image a caption – works without captions, too.
+*
+* gallery:
+* - image_url: gallery-image.jpg
+* caption: Starting Page with huge One Logo
+*
+* 6. Add the include whereever you want in your content like this:
+*
+* {% include gallery %}
+*
+* Check out the example page › http://phlow.github.io/feeling-responsive/design/gallery/
+*
+{% endcomment %}
+
\ No newline at end of file
diff --git a/_includes/list-collection b/_includes/list-collection
new file mode 100644
index 0000000..5316645
--- /dev/null
+++ b/_includes/list-collection
@@ -0,0 +1,20 @@
+{% comment %}
+*
+* This include lets you loop through a collection to list
+* all entries in that collection.
+*
+* If you set »published: false« in front matter of a collection page
+* the page gots filtered out via unless
+*
+* Example: {% include list-collection ollection='wordpress' %}
+*
+{% endcomment %}
+
+
+ {% for page in site.[include.collection] %}
+ {% unless page.published == false %}
+
diff --git a/_includes/list-posts b/_includes/list-posts
new file mode 100644
index 0000000..f2e76d0
--- /dev/null
+++ b/_includes/list-posts
@@ -0,0 +1,53 @@
+{% comment %}
+*
+* Possible parameter for this loop:
+*
+* › entries
+* › offset
+* › category
+* › tag
+*
+* Example for Category: {% include list-posts entries='3' offset='1' category='design' %}
+*
+* Example for Tag: {% include list-posts entries='5' tag='terminal' %}
+*
+*
+* This loop works like this:
+*
+* 1. First we check if there was given a category for filtering › if include.categories == NULL
+* 2. If no category is given for filtering do a general loop.
+* 3. If a category/tag was given, assign category/tag to the variable category/tag › assign category = include.categories
+*
+{% endcomment %}
+
+
+
+{% assign category = include.category %}
+{% assign tag = include.tag %}
+
+
+ {% if category == NULL and tag == NULL %}
+
+ {% for post in site.posts limit:include.entries offset:include.offset %}
+
diff --git a/_layouts/redirect.html b/_layouts/redirect.html
new file mode 100644
index 0000000..be24769
--- /dev/null
+++ b/_layouts/redirect.html
@@ -0,0 +1,24 @@
+---
+# This layout is used to redirect pages, if you moved them.
+# Use the following settings in front matter:
+#
+# layout: redirect
+# sitemap: false
+# permalink: /old-location/
+# redirect_to: /new-location/
+#
+# Idea and Code by: http://codingtips.kanishkkunal.in/about/
+---
+
+
+
+
+
+
+
+
+
+
diff --git a/_posts/design/2014-09-13-grid.md b/_posts/design/2014-09-13-grid.md
new file mode 100755
index 0000000..05497d3
--- /dev/null
+++ b/_posts/design/2014-09-13-grid.md
@@ -0,0 +1,149 @@
+---
+layout: page-fullwidth
+subheadline: "Multi-Device Layouts in Color"
+title: "Grid & Colors"
+teaser: "Create powerful multi-device layouts quickly and easily with the 12-column, nest-able Foundation grid. To optimize the size of your images, you find the correct dimensions beneath. Further below you find the colorscheme and colors used for Feeling Responsive and their color codes."
+breadcrumb: true
+categories:
+ - design
+permalink: /design/grid/
+header:
+ image_fullwidth: "unsplash_brooklyn-bridge_header.jpg"
+image:
+ thumb: "unsplash_brooklyn-bridge-thumb.jpg"
+---
+*Feeling Responsive* is built on Foundation. And of course, we make use of the wonderful grid system and so can you. Find out more about [constructing beautiful layouts][1] in the foundation documentation.
+
+
+
+
+
+
Small Grid
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Large Displays
+
Large Displays Two Columns
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Large Displays Three Columns
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Large Displays Four Columns
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Color Scheme and Colors Codes
+
Feeling Responsive uses strong colors in combination with grey colors.
+
Colours
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Grey Scale
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {% include next-previous-post-in-category %}
+
+
+
+
+
+ [1]: http://foundation.zurb.com/docs/components/grid.html
diff --git a/_posts/design/2014-09-14-video.md b/_posts/design/2014-09-14-video.md
new file mode 100755
index 0000000..391e39d
--- /dev/null
+++ b/_posts/design/2014-09-14-video.md
@@ -0,0 +1,35 @@
+---
+layout: video
+show_meta: false
+title: "Video Template"
+subheadline: "Templates"
+teaser: "If you want to show videos in a large manner, the video template is the right choice."
+tags:
+ - post format
+categories:
+ - design
+iframe: ""
+#
+# These video settings are totally optional. It's only purpose
+# is SEO, so that videos show up in Google hopefully with a
+# thumbnail.
+# More › https://developers.google.com/webmasters/videosearch/schema?hl=en&rd=1
+#
+# embedURL – A URL pointing to a player for the specific video.
+# contentURL – A URL pointing to the actual video media file
+# thumbnailUrl – A URL pointing to the video thumbnail image file.
+#
+video:
+ embedURL: "https://www.youtube.com/embed/WoHxoz_0ykI"
+ contentURL: "https://www.youtube.com/watch?v=WoHxoz_0ykI"
+ thumbnailUrl: "http://img.youtube.com/vi/WoHxoz_0ykI/maxresdefault.jpg"
+---
+
+
+## About the video by Kutiman
+
+> Ophir Kutiel, professionally known as Kutiman, is an Israeli musician, composer, producer and animator. He is best known for creating the online music video project, ThruYOU, and a self-titled album. [Wikipedia](http://en.wikipedia.org/wiki/Kutiman)
+
+
+
+Source: [Kutiman – Thru You Too – »Give It Up«](https://www.youtube.com/watch?v=WoHxoz_0ykI)
diff --git a/_posts/design/2014-09-15-gallery.md b/_posts/design/2014-09-15-gallery.md
new file mode 100755
index 0000000..cf9ce50
--- /dev/null
+++ b/_posts/design/2014-09-15-gallery.md
@@ -0,0 +1,91 @@
+---
+layout: page
+subheadline: "Templates"
+title: "Responsive Galleries with Foundation"
+teaser: "Wanna create a responsive gallery to showcase your portfolio, recent photos or images? It's quite easy thanks to Foundation and Clearing Lightbox."
+categories:
+ - design
+tags:
+ - post format
+image:
+ thumb: "gallery-example-1-thumb.jpg"
+gallery:
+ - image_url: gallery-example-1.jpg
+ caption: Great images by Unsplash.com
+ - image_url: gallery-example-2.jpg
+ caption: Great images by Unsplash.com
+ - image_url: gallery-example-3.jpg
+ caption: Great images by Unsplash.com
+ - image_url: gallery-example-4.jpg
+ caption: Great images by Unsplash.com
+ - image_url: gallery-example-5.jpg
+ caption: Great images by Unsplash.com
+ - image_url: gallery-example-6.jpg
+ caption: Great images by Unsplash.com
+ - image_url: gallery-example-7.jpg
+ caption: Great images by Unsplash.com
+ - image_url: gallery-example-8.jpg
+ caption: Great images by Unsplash.com
+---
+You just need to choose a template like the [`page`][3]- or [`page-fullwidth`][4]-template and then just use `{% raw %}{% include gallery %}{% endraw %}`.
+
+
+{% include gallery %}
+
+
+## How to embed a gallery
+
+`{% raw %}{% include gallery %}{% endraw %}` lets you easily embed a gallery into your post. To use the gallery-include...
+
+
+### Step 1
+
+1. Make two images: a thumbnail and a big image.
+2. Name the thumbnail *gallery-image-thumb.jpg* and...
+3. ...name the big *gallery-image.jpg*.
+4. Place them in the *images*-folder.
+
+
+### Step 2
+
+Define the big version in frontmatter,
+
+~~~
+gallery:
+ - image_url: gallery-image.jpg
+~~~
+
+If you like captions, give each image a caption:
+
+~~~
+gallery:
+ - image_url: gallery-image.jpg
+ caption: Starting Page with huge One Logo
+~~~
+
+### Step 3
+
+Add the include whereever you want in your content with `{% raw %}{% include gallery %}{% endraw %}`.
+
+{% include alert info='Have a look at this example-entry. And have a look into the images-folder. :)' %}
+
+
+
+
+
+
+
+
+
+
+
+## Other Post Formats
+{: .t60 }
+{% include list-posts tag='post format' %}
+
+
+
+ [1]: http://foundation.zurb.com/docs/components/clearing.html
+ [2]: http://foundation.zurb.com/docs/components/block_grid.html
+ [3]: {{ site.url }}/design/page/
+ [4]: {{ site.url }}/design/page-fullwidth/
diff --git a/_posts/design/2014-10-08-header-image-pattern.md b/_posts/design/2014-10-08-header-image-pattern.md
new file mode 100755
index 0000000..9276f69
--- /dev/null
+++ b/_posts/design/2014-10-08-header-image-pattern.md
@@ -0,0 +1,36 @@
+---
+layout: page
+title: "Header Image With Pattern"
+subheadline: "Headers With Style"
+teaser: "Feeling Responsive allows you to use all kinds of headers. This example shows a header image in front of a pattern."
+categories:
+ - design
+tags:
+ - design
+ - pattern
+ - header
+header:
+ image: header_unsplash_2-970x.jpg
+ pattern: pattern_concrete.jpg
+ caption: This is a caption for the header image with link
+ caption_url: https://unsplash.com/
+---
+It's so easy to do. Just define in front matter an image and a pattern image. Instead of a pattern you can also use a color. Have a look at the [example with a background color]({{ site.url }}/design/header-image-color/).
+
+
+## Front Matter Code
+
+~~~
+header:
+ image: "header_unsplash_2-970x.jpg"
+ pattern: "pattern_concrete.jpg"
+ caption: This is a caption for the header image with link
+ caption_url: https://unsplash.com/
+~~~
+
+
+
+### All Header-Styles
+{: .t60 }
+
+{% include list-posts tag='header' %}
\ No newline at end of file
diff --git a/_posts/design/2014-10-09-header-full-width-image.md b/_posts/design/2014-10-09-header-full-width-image.md
new file mode 100755
index 0000000..c172457
--- /dev/null
+++ b/_posts/design/2014-10-09-header-full-width-image.md
@@ -0,0 +1,36 @@
+---
+layout: page
+title: "Header with a Full-Width-Image"
+subheadline: "Headers With Style"
+teaser: "Feeling Responsive allows you to use all kinds of headers. This example shows a header with a full-width-image."
+categories:
+ - design
+tags:
+ - design
+ - background color
+ - header
+image:
+ thumb: "unsplash_brooklyn-bridge-thumb.jpg"
+header:
+ image_fullwidth: "unsplash_brooklyn-bridge_header.jpg"
+ caption: This is a caption for the header image with link
+ caption_url: https://unsplash.com/
+---
+It's so easy to do. Just define in front matter your image.
+
+
+## Front Matter Code
+
+~~~
+header:
+ image_fullwidth: "unsplash_brooklyn-bridge_header.jpg"
+ caption: This is a caption for the header image with link
+ caption_url: https://unsplash.com/
+~~~
+
+
+
+### All Header-Styles
+{: .t60 }
+
+{% include list-posts tag='header' %}
\ No newline at end of file
diff --git a/_posts/design/2014-10-09-header-image-color.md b/_posts/design/2014-10-09-header-image-color.md
new file mode 100755
index 0000000..ae2c6da
--- /dev/null
+++ b/_posts/design/2014-10-09-header-image-color.md
@@ -0,0 +1,38 @@
+---
+layout: page
+title: "Header Image With Background Color"
+subheadline: "Headers With Style"
+teaser: "Feeling Responsive allows you to use all kinds of headers. This example shows a header image with a defined background color via front matter."
+categories:
+ - design
+tags:
+ - design
+ - background color
+ - header
+header:
+ image: header_unsplash_2-970x.jpg
+ background-color: "#304558"
+ caption: This is a caption for the header image with link
+ caption_url: https://unsplash.com/
+---
+It's so easy to do. Just define in front matter an image and a background color. Instead of a color you can also use a pattern image. Have a look at the [example with a background pattern]({{ site.url }}/design/header-image-pattern/).
+
+
+
+## Front Matter Code
+
+{% include alert alert="WARNING: To make this work the value of `background-color` must be inbetween quotes." %}
+
+~~~
+header:
+ image: "header_unsplash_2-970x.jpg"
+ background-color: "#fabb00"
+ caption: This is a caption for the header image with link
+ caption_url: https://unsplash.com/
+~~~
+
+
+### All Header-Styles
+{: .t60 }
+
+{% include list-posts tag='header' %}
\ No newline at end of file
diff --git a/_posts/design/2014-10-09-header-logo-only.md b/_posts/design/2014-10-09-header-logo-only.md
new file mode 100755
index 0000000..32c0dc9
--- /dev/null
+++ b/_posts/design/2014-10-09-header-logo-only.md
@@ -0,0 +1,19 @@
+---
+layout: page
+title: "Header With Logo Only"
+subheadline: "Headers With Style"
+teaser: "Feeling Responsive allows you to use all kinds of headers. This is the default mode. It shows a header just with your logo on the standard background."
+categories:
+ - design
+tags:
+ - design
+ - background color
+ - header
+---
+No front matter code needed.
+
+
+### All Header-Styles
+{: .t60 }
+
+{% include list-posts tag='header' %}
\ No newline at end of file
diff --git a/_posts/design/2015-02-10-header-with-text.md b/_posts/design/2015-02-10-header-with-text.md
new file mode 100644
index 0000000..e518657
--- /dev/null
+++ b/_posts/design/2015-02-10-header-with-text.md
@@ -0,0 +1,35 @@
+---
+layout: page
+title: "Header With Text"
+subheadline: "Headers With Style"
+teaser: "Feeling Responsive allows you to use all kinds of headers. This header is with text."
+categories:
+ - design
+tags:
+ - design
+ - background color
+ - header
+header:
+ title: header with text
+ background-color: "#EFC94C;"
+# pattern: pattern_concrete.jpg
+ image_fullwidth: unsplash_brooklyn-bridge_header.jpg
+ caption: This is a caption for the header image with link
+ caption_url: https://unsplash.com/
+---
+
+
+## Front Matter Code
+
+~~~
+header:
+ title: header with text
+ image_fullwidth: unsplash_brooklyn-bridge_header.jpg
+ caption: This is a caption for the header image with link
+ caption_url: https://unsplash.com/
+~~~
+
+### All Header-Styles
+{: .t60 }
+
+{% include list-posts tag='header' %}
\ No newline at end of file
diff --git a/_posts/design/2015-03-12-no-header-but-image.md b/_posts/design/2015-03-12-no-header-but-image.md
new file mode 100644
index 0000000..b625598
--- /dev/null
+++ b/_posts/design/2015-03-12-no-header-but-image.md
@@ -0,0 +1,33 @@
+---
+layout: page
+subheadline: "Headers With Style"
+title: "No Header but Article Image"
+teaser: "Feeling Responsive enables you to get the attention of visitors. If you don't want to use a big header, use an image for the article instead."
+categories:
+ - design
+tags:
+ - design
+ - background color
+ - header
+header: no
+image:
+ title: unsplash_eagle.jpg
+ caption: This is a caption for the header image with link
+ caption_url: https://unsplash.com/
+---
+First turn of the header with `header: no`. Then add an image to with the following code. The caption is optional.
+
+
+~~~
+header: no
+image:
+ title: unsplash_eagle.jpg
+ caption: This is a caption for the header image with link
+ caption_url: https://unsplash.com/
+~~~
+
+
+### All Header-Styles
+{: .t60 }
+
+{% include list-posts tag='header' %}
\ No newline at end of file
diff --git a/_posts/design/2015-08-11-no-header.md b/_posts/design/2015-08-11-no-header.md
new file mode 100755
index 0000000..7a1b69c
--- /dev/null
+++ b/_posts/design/2015-08-11-no-header.md
@@ -0,0 +1,25 @@
+---
+layout: page
+subheadline: "Headers With Style"
+title: "No Header"
+teaser: "Feeling Responsive allows you to use all kinds of headers. This example shows no header at all. Just the navigation."
+categories:
+ - design
+tags:
+ - design
+ - background color
+ - header
+header: no
+---
+*Silence is beautiful.* Sometimes you just want no distractions at all. Whether you like the content to speak for itself or enjoy pure typography on a plain background: *Feeling Responsive* got you covered. Just say *no* like this:
+
+
+~~~
+header: no
+~~~
+
+
+### All Header-Styles
+{: .t60 }
+
+{% include list-posts tag='header' %}
diff --git a/_posts/design/2015-08-15-comments.md b/_posts/design/2015-08-15-comments.md
new file mode 100644
index 0000000..a0c90e2
--- /dev/null
+++ b/_posts/design/2015-08-15-comments.md
@@ -0,0 +1,21 @@
+---
+layout: page
+subheadline: "Discussion"
+title: "Now with Comments!"
+teaser: "For a blog you need comments. Like all those other jekyll themes we baked in Disqus. It's easy to set, it works and makes a static jekyll blog more dynamic."
+header:
+ image_fullwidth: "header_typewriter.jpg"
+ caption: Image by Florian Klauer
+ caption_url: "http://florianklauer.de/"
+image:
+ thumb: typewriter-thumb.jpg
+ homepage: homepage_typewriter.jpg
+categories:
+ - design
+comments: true
+show_meta: false
+---
+If you want to use Disqus-Comments with *Feeling Responsive*, just open `config.yml` and add your `disqus_shortname`. [More on how to use Disqus ›](https://disqus.com/websites/)
+
+
+By default comments are turned off. You can customize the default behaviour in `config.yml`. To **turn on comments** just add `comments: true` to front matter using the page layout `layout: page`.
\ No newline at end of file
diff --git a/_posts/design/2015-08-16-typography.md b/_posts/design/2015-08-16-typography.md
new file mode 100755
index 0000000..6c00a6f
--- /dev/null
+++ b/_posts/design/2015-08-16-typography.md
@@ -0,0 +1,390 @@
+---
+layout: page-fullwidth
+title: "Wonderful Typography"
+subheadline: "Reading Experience"
+meta_teaser: "Feeling Responsive uses Volkhov for headlines, Lato for everything else and if you are in need to show some code, it will be in Lucida Console."
+teaser: "Feeling Responsive uses Volkhov for headlines, Lato for everything else and if you are in need to show some code, it will be in Lucida Console or Monaco."
+header:
+ image: homepage_typography.jpg
+ background-color: "#262930"
+ caption: This is a caption for the header image with link
+ caption_url: https://unsplash.com/
+image:
+ thumb: homepage_typography-thumb.jpg
+ homepage: homepage_typography.jpg
+ caption: Image by Antonio
+ caption_url: "http://www.aisleone.net/"
+categories:
+ - design
+---
+
+
+
+
+
+**Table of Contents**
+{: #toc }
+* TOC
+{:toc}
+
+
+
+
+
+
+
+## Lato – A Sans Serif Typeface Family
+
+[Lato][4] is a sans serif typeface family started in the summer of 2010 by Warsaw-based designer Łukasz Dziedzic. »Lato« means »Summer« in Polish. In December 2010 the Lato family was published under the Open Font License by his foundry tyPoland, with support from Google.
+
+> I do not think of type as something that should be readable. It should be beautiful.[Ed Benguiat][3]
+
+In the last ten or so years, during which Łukasz has been designing type, most of his projects were rooted in a particular design task that he needed to solve. With Lato, it was no different. Originally, the family was conceived as a set of corporate fonts for a large client — who in the end decided to go in different stylistic direction, so the family became available for a public release.
+
+When working on Lato, Łukasz tried to carefully balance some potentially conflicting priorities. He wanted to create a typeface that would seem quite “transparent” when used in body text but would display some original traits when used in larger sizes. He used classical proportions (particularly visible in the uppercase) to give the letterforms familiar harmony and elegance. At the same time, he created a sleek sans serif look, which makes evident the fact that Lato was designed in 2010 — even though it does not follow any current trend.
+
+The semi-rounded details of the letters give Lato a feeling of warmth, while the strong structure provides stability and seriousness. “Male and female, serious but friendly. With the feeling of the Summer,” says Łukasz. Learn more at [www.latofonts.com][6]
+
+
+## About Volkhov <h2>
+
+Volkhov is a low-contrast seriffed typeface with a robust character, intended for providing a motivating reading experience. Volkhov was designed by Ivan Petrov.
+
+### Feeling Responsive uses Volkhov for... <h3>
+
+* <h1>-headings
+* <h2>-headings
+* <h3>-headings
+* <h4>-headings
+* <h5>-headings
+* <h6>-headings
+
+
+#### Heading in Volkhov <h4>
+
+As a four-weight family it is well-suited for complex text environments being economic and legible, contemporary and prominent. Many of its design solutions relate to this purpose: large open counters, rather short descenders, and brutal asymmetric serifs.
+
+##### Heading in Volkhov <h5>
+
+Spacing in Bold is slightly increased compared to the normal weight, because the bold mass is mostly grown inwards. The Italic has a steep angle and a distinctive calligraphically reminiscent character, as a counterpart to the rigorous Regular.
+
+
+
+## Modular Scale
+
+*Feeling Responsive* explores the *2:3 perfect fifth* modular scale created with [www.modular-scale.com][7]. This is the modular scale of *Feeling Responsive*.
+
+44px @ 1:1.5 – Ideal text size
+16px @ 1:1.5 – Important number
+
+| Modular Scale
+------ | ----- | ----- | -------
+44.000 | 1 | 2.75 | 338.462
+36.000 | 0.818 | 2.25 | 276.923
+29.333 | 0.667 | 1.833 | 225.638
+24.000 | 0.545 | 1.5 | 184.615
+19.555 | 0.444 | 1.222 | 150.423
+16.000 | 0.364 | 1 | 123.077
+
+
+
+## Typographical Elements
+{: .t60 }
+
+Here you'll find the [complete list of HTML5-Tags][1] and this is how they look like.
+
+### <hr> Horizontal Line
+
+
+
+### <pre> Displaying Code
+~~~
+
+
+ Code Blocks
+
+
+
+~~~
+
+
+### <blockquote> Quotation
+
Everything happens for a reason. (Britney Spears)
+
+### <blockquote> and <cite> together
+
+> Age is an issue of mind over matter. If you don't mind, it doesn't matter.
+Mark Twain
+
+
+### <ol> Ordered Lists
+
+1. Ordered List
+2. Second List Item
+3. Third List Item
+ 4. Second Level First Item
+ 4. Second Level Second Item
+ 4. Second Level Third Item
+ 5. And a third level First Item
+ 5. And a third level Second Item
+ 5. And a third level Third Item
+4. Fourth List Item
+5. Fifth List Item
+
+
+### <ul> Unordered Lists
+
+- Unordered List
+- Second List Item
+- Third List Item
+ + Second Level First Item
+ + Second Level Second Item
+ + Second Level Third Item
+ * And a third level First Item
+ * And a third level Second Item
+ * And a third level Third Item
+- Fourth List Item
+- Fifth List Item
+
+### <dl> Definition Lists
+
+Definition List
+: Bacon ipsum dolor sit amet spare ribs brisket ribeye, andouille sirloin bresaola frankfurter corned beef capicola bacon. Salami beef ribs sirloin, short loin hamburger shoulder t-bone.
+
+Beef ribs jowl swine porchetta
+: Sirloin tenderloin swine frankfurter pork loin pork capicola ham hock strip steak ribeye beef ribs. Hamburger t-bone ribeye ham prosciutto bresaola.
+
+Pancetta flank sirloin pork
+: short ribs shankle prosciutto landjaeger. Beef ribs turkey shoulder drumstick. Leberkas pork belly ribeye, bresaola jerky strip steak tenderloin bacon landjaeger short ribs beef ribs. Flank pork chop fatback tail kielbasa filet mignon jowl landjaeger bresaola tongue corned beef biltong.
+: Landjaeger spare ribs fatback corned beef tenderloin drumstick, swine chicken beef turkey biltong doner tri-tip filet mignon.
+
+
+### <a>
+[Links][2] make the web exceptional.
+
+
+### <em>
+Let's *emphasize* how important responsive webdesign is.
+
+
+
+### <strong>
+This looks like **bold** text.
+
+
+
+### <small>
+This is small text.
+
+
+
+### <s>
+
+It's nice getting things done. Just strike through finished tasks.
+
+
+
+### <cite>
+
+Albert Einstein
+
+
+
+### <q>
+
+If you use <q> your text gets automagically quotes around the text passage.
+
+
+
+### <dfn>
+
+The <dfn> tag is a phrase tag. It defines a definition term.
+
+
+
+### <abbr>
+
+The WHO was founded in 1948.
+
+
+
+### <time>
+
+The concert took place on .
+
+
+### <code>
+
+Some `code: lucida console` displayed.
+
+
+
+### <var>
+
+The <var> tag is a phrase tag. It defines a variable.
+
+
+
+### <samp>
+
+Text surrounded by <samp> looks like this in monospace.
+
+
+
+### <kbd>
+
+Copycats enjoy pressing CMD + c and CMD + v.
+
+
+
+### <sub>
+
+This text lays low and chills a bit.
+
+
+### <sup>
+
+This text gets high above the clouds.
+
+
+
+### <i>
+
+This looks italic.
+
+
+
+### <b>
+
+This looks bold, too.
+
+
+
+### <u>
+
+
Underlining content for emphasize is not the best choice. You can't read it so well.
+
+
+
+### <mark>
+Let's mark this hint to give you a clue.
+
+
+
+### <br>
+
+Need a break? I give you three!
+
+
+## Footnotes
+
+If you need footnotes for your posts, articles and entries, the Kramdown-Parser [^1] got you covered. How to use footnotes? Read this footnote. [^2]
+
+
+
+ [1]: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list
+ [2]: http://phlow.de/
+ [3]: http://en.wikipedia.org/wiki/Ed_Benguiat
+ [4]: https://www.google.com/fonts/specimen/Lato
+ [5]: https://www.google.com/fonts/specimen/Volkhov
+ [6]: http://www.latofonts.com/
+ [7]: http://modularscale.com/
+ [8]: #
+ [9]: #
+ [10]: #
+
+
+[^1]: Find out more about Kramdown on
+[^2]: Kramdown has an excellent documentation of all its features. Check out, on how to [footnotes](http://kramdown.gettalong.org/syntax.html#footnotes).
+
+# <h1>-Heading in Volkhov
+
+## <h2>-Heading in Volkhov
+
+### <h3>-Heading in Volkhov
+
+#### <h4>-Heading in Volkhov
+
+##### <h5>-Heading in Volkhov
+
+###### <h6>-Heading in Volkhov
+
+
+## Tables
+
+Even tables are responsive thanks to foundation. A table can consist of these elements.
+
+
+
<table> defines an HTML table
+
+
+
+
+
+
+
+
HTML Tag
+
Defintion
+
Style
+
+
+
+
+
<caption>
+
defines a table caption
+
font-weight: bold;
+
+
+
<colgroup>
+
specifies a group of one or more columns in a table for
+formatting. The <colgroup> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.
+
no styling needed
+
+
+
<col>
+
specifies column properties for each column within a `<colgroup>`
+element
+
no styling needed
+
+
+
<thead>
+
is used to group header content in an HTML table
+
font-weight: bold;
+
+
+
<tbody>
+
is used to group the body content in an HTML table
+ 
+ {% if page.image.caption_url && page.image.caption %}
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+