From d08ef03b7c0cd3b69482f5c2d4e058c8e6e172f7 Mon Sep 17 00:00:00 2001
From: Rick Rongen <rickrongen@outlook.com>
Date: Fri, 16 Feb 2018 16:42:18 +0100
Subject: [PATCH] feat: Improved to be somewhat complete

---
 index.html      | 19 +++++++++++++++++++
 style/main.sass | 26 ++++++++++++++++++++++++++
 2 files changed, 45 insertions(+)

diff --git a/index.html b/index.html
index ce75b96..9d87d1a 100644
--- a/index.html
+++ b/index.html
@@ -65,6 +65,25 @@
         <div id="portfolio" class="contentBlock">
             <h3 class="center">Portfolio</h3>
         </div>
+        <div id="contact" class="contentBlock">
+            <h3 class="center">Contact</h3>
+            <div id="formWrapper">
+                <form action="contact.php" method="post" target="_self" id="formContact">
+                    <div class="textinput">
+                        <label for="txtName">Name</label>
+                        <input type="text" name="txtName" id="txtName">
+                    </div>
+                    <div class="textinput">
+                        <label for="txtEmail">E-Mail</label>
+                        <input type="text" name="txtEmail" id="txtEmail">
+                    </div>
+                </form>
+                <div class="textinput last">
+                    <label for="txtMessage">E-Mail</label>
+                    <textarea name="txtMessage" id="txtMessage" cols="30" rows="10" form="formContact"></textarea>
+                </div>
+            </div>
+        </div>
     </div>
 </body>
 </html>
diff --git a/style/main.sass b/style/main.sass
index 6a64c83..d33e28e 100644
--- a/style/main.sass
+++ b/style/main.sass
@@ -112,6 +112,29 @@ h5
     margin-left: auto
     margin-right: auto
 
+#contact
+  background: $fourth
+
+#formWrapper
+  max-width: 700px
+  margin-left: auto
+  margin-right: auto
+
+  .textinput
+    width: 100%
+    display: grid
+    grid-template-columns: 30% 70%
+    box-sizing: border-box
+    padding: 24px
+    border: 1px solid $tertiary
+
+    &:first-child
+      border-top-left-radius: 16px
+      border-top-right-radius: 16px
+    &.last
+      border-bottom-left-radius: 16px
+      border-bottom-right-radius: 16px
+
 .button
   padding: 1em 2em
   border-radius: 8px
@@ -119,6 +142,9 @@ h5
   margin: 0 2em
   color: $primary
   text-decoration: none
+  @media screen and (max-width: $mediaMaxScreenSizeMobile)
+    display: block
+    margin-bottom: 1em
 
   &.button-dark
     background: $tertiary