better form

Author: kalwalt

_layouts/contact.html

@@ -2,20 +2,21 @@
 layout: default
 ---
 {% include header.html %}
-<main class="content" role="main" id="hero-about">
-    <section class="main-content">
+<main class="" role="main" id="hero-contact">
+    <section class="form-section">
       {{ content }}
       <form
+        class="container-form"
         action="https://formspree.io/f/maylovzq"
         method="POST"
        >
         <label>
           Your email:
-          <input type="text" name="_replyto">
+          <input type="text" name="_replyto" placeholder="Your email address">
         </label>
         <label>
           Your message:
-          <textarea name="message"></textarea>
+          <textarea name="message" placeholder="Write something..." ></textarea>
         </label>
 
         <!-- your other form fields go here -->
@@ -24,4 +25,5 @@
       </form>
       {% include footer.html %}
     </section>
+
 </main>

_sass/jekyll-theme-cayman.scss

@@ -189,6 +189,15 @@ nav > ul > li > a:hover {
   margin-top: 90vh;
 }
 
+#hero-contact {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 300px;
+  margin-top: 40vh;
+}
+
 .blog-header {
   display: contents;
 }
@@ -494,3 +503,35 @@ nav > ul > li > a:hover {
 .site-footer-credits {
   color: $blockquote-text-color;
 }
+
+.form-section {
+  max-width: 164rem;
+}
+
+.container-form{
+  display: grid;
+  grid-template-columns: auto;
+  grid-gap: 10px;
+  background-color: #ffff;
+  padding: 10px;
+}
+#subject{
+  width:80%;
+}
+form{
+  	vertical-align: baseline;
+}
+input,
+textarea {
+	border: 0.05em solid #2196F3;
+	&:focus {
+		border: 0.05em solid white;
+  width: auto;
+	}
+}
+
+textarea {
+  vertical-align: top;
+	resize: vertical;
+	max-width: none;
+}

contact.md

@@ -6,6 +6,6 @@ image: ./resources/webarkit-logo-social.jpg
 permalink: /contact/
 ---
 
-# Contact US!
+# Contact us!
 
-We are glad if you send a message, with your thinking
+We are glad if you send a message...