Recreated elements page using section layout. Each <section> is a different .md file in the elements directory.

19 files changed, 253 insertions, 200 deletions

diff --git a/exampleSite/content/contact.md b/exampleSite/content/contact.md
new file mode 100644
index 0000000..2a1ac13
--- /dev/null
+++ b/exampleSite/content/contact.md
@@ -0,0 +1,11 @@
+---
+Title: "Contact Us"
+description: "Tell us what you think about our little operation."
+date: "2019-02-06T00:00:00"
+tags: ["tag1","tag2"]
+## Size param refers to the css class for the <section> tag
+## Opions are: xsmall, small, medium, large, xlarge, max
+## Default is 'auto'
+size: "medium"
+---
+{{< form-contact >}}
\ No newline at end of file
diff --git a/exampleSite/content/elements.bak b/exampleSite/content/elements.bak
deleted file mode 100644
index 08eb723..0000000
--- a/exampleSite/content/elements.bak
+++ /dev/null
@@ -1,199 +0,0 @@
-+++
-Title = "Elements Reference"
-+++
-
-## TEXT
-
-This is **bold** and this is strong. This is _italic_ and this is emphasized. This is superscript text and this is subscript text. This is underlined and this is code: `for (;;) { ... }`. Finally, this is a [link]().
-
-----
-## HEADING LEVEL 2
-
-### HEADING LEVEL 3
-
-#### HEADING LEVEL 4
-
-##### HEADING LEVEL 5
-
-###### HEADING LEVEL 6
-
-----
-{{< subheader >}}
-## HEADING WITH A SUBTITLE
-Lorem ipsum dolor sit amet nullam id egestas urna aliquam
-{{< /subheader >}}
-
-Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.
-
-{{< subheader >}}
-### HEADING WITH A SUBTITLE
-Lorem ipsum dolor sit amet nullam id egestas urna aliquam
-{{< /subheader >}}
-
-Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.
-
-{{< subheader >}}
-#### HEADING WITH A SUBTITLE
-Lorem ipsum dolor sit amet nullam id egestas urna aliquam
-{{< /subheader >}}
-
-Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.
-
-----
-## LISTS
-
-### UNORDERED
-
-- Dolor pulvinar etiam.
-- Sagittis lorem eleifend.
-- Felis feugiat dolore viverra.
-- Dolor pulvinar etiam.
-
-### ORDERED
-1. Dolor pulvinar etiam.
-2. Etiam vel felis at viverra.
-3. Felis enim feugiat magna.
-4. Etiam vel felis nullam.
-5. Felis enim et tempus.
-
-### DEFINITION
-{{< definition-group >}}
-    {{< definition title="Item 1" >}}
-    Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent.
-    {{< /definition >}}
-    
-    {{< definition title="Item 2" >}}
-    Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent.
-    {{< /definition >}}
-    
-    {{< definition title="Item 3" >}}
-    Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent.
-    {{< /definition >}}
-{{< /definition-group >}}
-
-
-### ACTIONS
-
-{{< button-group class="" >}}
-    {{< button title="PRIMARY" link= "#actions" class="primary" >}}
-    {{< button title="DEFAULT" link= "#actions" class="" >}}
-{{< /button-group >}}
-
-{{< button-group class="small" >}}
-    {{< button title="SMALL" link= "#actions" class="primary small" >}}
-    {{< button title="SMALL" link= "#actions" class="small" >}}
-{{< /button-group >}}
-
-{{< button-group class="stacked" >}}
-    {{< button title="PRIMARY" link= "#actions" class="primary" >}}
-    {{< button title="DEFAULT" link= "#actions" class="" >}}
-{{< /button-group >}}
-
-{{< button-group class="fit" >}}
-    {{< button title="DEFAULT" link= "#actions" class="primary" >}}
-    {{< button title="SMALL" link= "#actions" class="primary small" >}}
-{{< /button-group >}}
-
-{{< button-group class="fit" >}}
-    {{< button title="DEFAULT" link= "#actions" class="" >}}
-    {{< button title="SMALL" link= "#actions" class="small" >}}
-{{< /button-group >}}
-
----
-## BLOCKQUOTE
-
-> Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis.
-
----
-## TABLE
-
-DEFAULT
-
-| NAME | DESCRIPTION | PRICE |
-|:--|:--|:--|
-| Item 1 | Ante turpis integer aliquet porttitor. | 29.99 |
-| Item 2 | Vis ac commodo adipiscing arcu aliquet. | 19.99 |
-| Item 3 | Morbi faucibus arcu accumsan lorem. | 29.99 |
-| Item 4 | Vitae integer tempus condimentum. | 19.99 |
-| Item 5 | Ante turpis integer aliquet porttitor. | 29.99 |
-|  || 100.00 |
-
----
-
-## BUTTONS
-
-
-{{< button-group class="actions" >}}
-    {{< button title="PRIMARY" link= "#buttons" class="primary" >}}
-    {{< button title="DEFAULT" link= "#buttons" class="" >}}
-{{< /button-group >}}
-
-{{< button-group class="actions" >}}
-    {{< button title="LARGE" link= "#buttons" class="primary large" >}}
-    {{< button title="DEFAULT" link= "#buttons" class="" >}}
-    {{< button title="SMALL" link= "#buttons" class="small" >}}
-{{< /button-group >}}
-
-{{< button-group class="actions fit" >}}
-    {{< button title="FIT" link= "#buttons" class="primary" >}}
-    {{< button title="FIT" link= "#buttons" class="" >}}
-{{< /button-group >}}
-
-{{< button-group class="actions fit" >}}
-    {{< button title="FIT + SMALL" link= "#buttons" class="primary fit small" >}}
-    {{< button title="FIT + SMALL" link= "#buttons" class="fit small" >}}
-{{< /button-group >}}
-
-{{< button-group class="actions" >}}
-    {{< button title="ICON" link= "#buttons" class="primary icon solid fa-search" >}}
-    {{< button title="ICON" link= "#buttons" class="icon solid fa-download" >}}
-{{< /button-group >}}
-
-{{< button-group class="actions" >}}
-    {{< button title="PRIMARY" link= "#buttons" class="primary disabled" >}}
-    {{< button title="DEFAULT" link= "#buttons" class="disabled" >}}
-{{< /button-group >}}
-
----
-## FORM
-
-{{< form >}}
-
----
-## IMAGE
-
-FIT
-
-{{< image src="/images/pic01.jpg" class= "fit" >}}
-
-### LEFT & RIGHT
-
-{{< image-text src="/images/pic08.jpg" class= "left" >}}
-Lorem ipsum dolor sit accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Vestibulum ante ipsum primis in faucibus magna blandit adipiscing eu felis iaculis.
-{{< /image-text >}}
-
-{{< image-text src="/images/pic09.jpg" class= "right" >}}
-Lorem ipsum dolor sit accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Vestibulum ante ipsum primis in faucibus magna blandit adipiscing eu felis iaculis.
-{{< /image-text >}}
-
----
-
-## BOX
-{{< box >}}
-Felis sagittis eget tempus primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Magna sed etiam ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus lorem ipsum dolor sit amet nullam. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Vestibulum ante ipsum primis in faucibus magna blandit adipiscing eu felis iaculis volutpat lorem ipsum dolor.
-{{< /box >}}
-
----
-## PREFORMATTED
-
-```
-i = 0;
-
-while (!deck.isInOrder()) {
-    print 'Iteration ' + i;
-    deck.shuffle();
-    i++;
-}
-
-print 'It took ' + i + ' iterations to sort the deck.';
-```
\ No newline at end of file
diff --git a/exampleSite/content/elements/_index.md b/exampleSite/content/elements/_index.md
new file mode 100644
index 0000000..3c2217f
--- /dev/null
+++ b/exampleSite/content/elements/_index.md
@@ -0,0 +1,4 @@
++++
+Title = "Elements"
+description = "Just an assorted selection of elements."
++++
diff --git a/exampleSite/content/elements/buttons.md b/exampleSite/content/elements/buttons.md
new file mode 100644
index 0000000..ace25ef
--- /dev/null
+++ b/exampleSite/content/elements/buttons.md
@@ -0,0 +1,37 @@
++++
+Title = "Buttons"
+weight = 40
++++
+
+### {{< param title >}}
+
+{{< button-group class="actions" >}}
+    {{< button title="PRIMARY" link= "#buttons" class="primary" >}}
+    {{< button title="DEFAULT" link= "#buttons" class="" >}}
+{{< /button-group >}}
+
+{{< button-group class="actions" >}}
+    {{< button title="LARGE" link= "#buttons" class="primary large" >}}
+    {{< button title="DEFAULT" link= "#buttons" class="" >}}
+    {{< button title="SMALL" link= "#buttons" class="small" >}}
+{{< /button-group >}}
+
+{{< button-group class="actions fit" >}}
+    {{< button title="FIT" link= "#buttons" class="primary" >}}
+    {{< button title="FIT" link= "#buttons" class="" >}}
+{{< /button-group >}}
+
+{{< button-group class="actions fit" >}}
+    {{< button title="FIT + SMALL" link= "#buttons" class="primary fit small" >}}
+    {{< button title="FIT + SMALL" link= "#buttons" class="fit small" >}}
+{{< /button-group >}}
+
+{{< button-group class="actions" >}}
+    {{< button title="ICON" link= "#buttons" class="primary icon solid fa-search" >}}
+    {{< button title="ICON" link= "#buttons" class="icon solid fa-download" >}}
+{{< /button-group >}}
+
+{{< button-group class="actions" >}}
+    {{< button title="PRIMARY" link= "#buttons" class="primary disabled" >}}
+    {{< button title="DEFAULT" link= "#buttons" class="disabled" >}}
+{{< /button-group >}}
\ No newline at end of file
diff --git a/exampleSite/content/elements/form.md b/exampleSite/content/elements/form.md
new file mode 100644
index 0000000..97e7c6a
--- /dev/null
+++ b/exampleSite/content/elements/form.md
@@ -0,0 +1,7 @@
++++
+Title = "Form"
+weight = 50
++++
+
+### {{< param title >}}
+{{< form >}}
\ No newline at end of file
diff --git a/exampleSite/content/elements/image/index.md b/exampleSite/content/elements/image/index.md
new file mode 100644
index 0000000..9abebe5
--- /dev/null
+++ b/exampleSite/content/elements/image/index.md
@@ -0,0 +1,22 @@
++++
+Title = "Image"
+weight = 60
++++
+
+### {{< param title >}}
+
+#### FIT
+
+{{< image src="/images/pic04.jpg" class= "fit" >}}
+
+{{< gallery >}}
+
+#### LEFT & RIGHT
+
+{{< image-text src="/images/pic05.jpg" class= "left" >}}
+Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent.
+{{< /image-text >}}
+
+{{< image-text src="/images/pic05.jpg" class= "right" >}}
+Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent.
+{{< /image-text >}} 
\ No newline at end of file
diff --git a/exampleSite/content/elements/image/pic04-0.jpg b/exampleSite/content/elements/image/pic04-0.jpg
new file mode 100644
index 0000000..780314a
--- /dev/null
+++ b/exampleSite/content/elements/image/pic04-0.jpg
diff --git a/exampleSite/content/elements/image/pic04-1.jpg b/exampleSite/content/elements/image/pic04-1.jpg
new file mode 100644
index 0000000..780314a
--- /dev/null
+++ b/exampleSite/content/elements/image/pic04-1.jpg
diff --git a/exampleSite/content/elements/image/pic04-2.jpg b/exampleSite/content/elements/image/pic04-2.jpg
new file mode 100644
index 0000000..780314a
--- /dev/null
+++ b/exampleSite/content/elements/image/pic04-2.jpg
diff --git a/exampleSite/content/elements/image/pic04-3.jpg b/exampleSite/content/elements/image/pic04-3.jpg
new file mode 100644
index 0000000..780314a
--- /dev/null
+++ b/exampleSite/content/elements/image/pic04-3.jpg
diff --git a/exampleSite/content/elements/image/pic04-4.jpg b/exampleSite/content/elements/image/pic04-4.jpg
new file mode 100644
index 0000000..780314a
--- /dev/null
+++ b/exampleSite/content/elements/image/pic04-4.jpg
diff --git a/exampleSite/content/elements/image/pic04-5.jpg b/exampleSite/content/elements/image/pic04-5.jpg
new file mode 100644
index 0000000..780314a
--- /dev/null
+++ b/exampleSite/content/elements/image/pic04-5.jpg
diff --git a/exampleSite/content/elements/lists.md b/exampleSite/content/elements/lists.md
new file mode 100644
index 0000000..c6f8040
--- /dev/null
+++ b/exampleSite/content/elements/lists.md
@@ -0,0 +1,48 @@
++++
+Title = "Lists"
+weight = 20
++++
+
+### {{< param title >}}
+
+#### Unordered 
+
+- Dolor pulvinar etiam.
+- Sagittis lorem eleifend.
+- Felis feugiat dolore viverra.
+- Dolor pulvinar etiam.
+
+#### Ordered
+1. Dolor pulvinar etiam.
+2. Etiam vel felis at viverra.
+3. Felis enim feugiat magna.
+4. Etiam vel felis nullam.
+5. Felis enim et tempus.
+
+
+#### Actions
+
+{{< button-group class="" >}}
+    {{< button title="PRIMARY" link= "#actions" class="primary" >}}
+    {{< button title="DEFAULT" link= "#actions" class="" >}}
+{{< /button-group >}}
+
+{{< button-group class="small" >}}
+    {{< button title="SMALL" link= "#actions" class="primary small" >}}
+    {{< button title="SMALL" link= "#actions" class="small" >}}
+{{< /button-group >}}
+
+{{< button-group class="stacked" >}}
+    {{< button title="PRIMARY" link= "#actions" class="primary" >}}
+    {{< button title="DEFAULT" link= "#actions" class="" >}}
+{{< /button-group >}}
+
+{{< button-group class="fit" >}}
+    {{< button title="DEFAULT" link= "#actions" class="primary" >}}
+    {{< button title="SMALL" link= "#actions" class="primary small" >}}
+{{< /button-group >}}
+
+{{< button-group class="fit" >}}
+    {{< button title="DEFAULT" link= "#actions" class="" >}}
+    {{< button title="SMALL" link= "#actions" class="small" >}}
+{{< /button-group >}}
\ No newline at end of file
diff --git a/exampleSite/content/elements/table.md b/exampleSite/content/elements/table.md
new file mode 100644
index 0000000..d4ade85
--- /dev/null
+++ b/exampleSite/content/elements/table.md
@@ -0,0 +1,18 @@
++++
+Title = "Table"
+weight = 30
++++
+
+### {{< param title >}}
+
+#### Default
+
+| NAME | DESCRIPTION | PRICE |
+|:--|:--|:--|
+| Item 1 | Ante turpis integer aliquet porttitor. | 29.99 |
+| Item 2 | Vis ac commodo adipiscing arcu aliquet. | 19.99 |
+| Item 3 | Morbi faucibus arcu accumsan lorem. | 29.99 |
+| Item 4 | Vitae integer tempus condimentum. | 19.99 |
+| Item 5 | Ante turpis integer aliquet porttitor. | 29.99 |
+|  || 100.00 |
+
diff --git a/exampleSite/content/elements/text.md b/exampleSite/content/elements/text.md
new file mode 100644
index 0000000..027c16f
--- /dev/null
+++ b/exampleSite/content/elements/text.md
@@ -0,0 +1,62 @@
++++
+Title = "Text"
+weight = 10
++++
+
+### {{< param title >}}
+
+This is **bold** and this is strong. This is _italic_ and this is emphasized. This is <sup>superscript</sup> text and this is subscript text. This is underlined and this is code: `for (;;) { ... }`. Finally, this is a [link]().
+
+----
+
+{{< subheader >}}
+## HEADING WITH A SUBTITLE
+Lorem ipsum dolor sit amet nullam id egestas urna aliquam
+{{< /subheader >}}
+
+Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.
+
+{{< subheader >}}
+### HEADING WITH A SUBTITLE
+Lorem ipsum dolor sit amet nullam id egestas urna aliquam
+{{< /subheader >}}
+
+Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.
+
+{{< subheader >}}
+#### HEADING WITH A SUBTITLE
+Lorem ipsum dolor sit amet nullam id egestas urna aliquam
+{{< /subheader >}}
+
+Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.
+
+---
+
+## HEADING LEVEL 2
+
+### HEADING LEVEL 3
+
+#### HEADING LEVEL 4
+
+##### HEADING LEVEL 5
+
+###### HEADING LEVEL 6
+
+---
+#### BLOCKQUOTE
+
+> Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis.
+
+#### PREFORMATTED
+
+```
+i = 0;
+
+while (!deck.isInOrder()) {
+    print 'Iteration ' + i;
+    deck.shuffle();
+    i++;
+}
+
+print 'It took ' + i + ' iterations to sort the deck.';
+```
\ No newline at end of file
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index ed68545..b035536 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -6,7 +6,7 @@
     <body class="is-preload">
         <div id="page-wrapper">
             {{- partial "header.html" . -}}
-            <section id="main" class="container">
+            <section id="main" class="container {{ with .Params.size }}{{ . }}{{ end }}">
                 {{- block "main" . }}{{- end }}
             </section>
             {{- partial "footer.html" . -}}
diff --git a/layouts/_default/section.html b/layouts/_default/section.html
new file mode 100644
index 0000000..3151171
--- /dev/null
+++ b/layouts/_default/section.html
@@ -0,0 +1,15 @@
+{{ define "main" }}
+<header>
+  <h2>{{ .Title }}</h2>
+  <p>{{ .Description }}</p>
+</header>
+{{ range .Pages }}
+<div class="row">
+  <div class="col-12">
+    <section class="box">
+      {{ .Content }}
+    </section>
+  </div>
+</div>
+{{ end }}
+{{ end }}
\ No newline at end of file
diff --git a/layouts/shortcodes/form-contact.html b/layouts/shortcodes/form-contact.html
new file mode 100644
index 0000000..d951125
--- /dev/null
+++ b/layouts/shortcodes/form-contact.html
@@ -0,0 +1,21 @@
+<form method="post" action="#">
+  <div class="row gtr-50 gtr-uniform">
+    <div class="col-6 col-12-mobilep">
+      <input type="text" name="name" id="name" value="" placeholder="Name" />
+    </div>
+    <div class="col-6 col-12-mobilep">
+      <input type="email" name="email" id="email" value="" placeholder="Email" />
+    </div>
+    <div class="col-12">
+      <input type="text" name="subject" id="subject" value="" placeholder="Subject" />
+    </div>
+    <div class="col-12">
+      <textarea name="message" id="message" placeholder="Enter your message" rows="6"></textarea>
+    </div>
+    <div class="col-12">
+      <ul class="actions special">
+        <li><input type="submit" value="Send Message" /></li>
+      </ul>
+    </div>
+  </div>
+</form>
\ No newline at end of file
diff --git a/layouts/shortcodes/gallery.html b/layouts/shortcodes/gallery.html
new file mode 100644
index 0000000..4ac7e69
--- /dev/null
+++ b/layouts/shortcodes/gallery.html
@@ -0,0 +1,7 @@
+<div class="box alt">
+  <div class="row gtr-50 gtr-uniform">
+    {{ range $.Page.Resources.ByType "image" }}
+    <div class="col-4"><span class="image fit"><img src="{{ .Permalink }}" alt="" /></span></div>
+    {{ end }}
+  </div>
+</div>
\ No newline at end of file