From 84e94aa92f506b91b19e73832794703f5f7a0689 Mon Sep 17 00:00:00 2001
From: Anxhelo Lushka <anxhelo1995@gmail.com>
Date: Sun, 5 May 2019 17:17:07 +0200
Subject: [PATCH] Added style contact form

---
 _includes/contact.html | 32 +++++++++++++++++++++-
 _sass/_layout.scss     | 60 +++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 90 insertions(+), 2 deletions(-)

diff --git a/_includes/contact.html b/_includes/contact.html
index 7b261f3..a39c130 100644
--- a/_includes/contact.html
+++ b/_includes/contact.html
@@ -3,8 +3,38 @@
 			<svg width="46" height="44" viewBox="0 0 46 44" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M21.0979 1.8541C21.6966 0.0114772 24.3034 0.0114801 24.9021 1.8541L28.8374 13.9656C29.1051 14.7896 29.873 15.3475 30.7395 15.3475H43.4742C45.4117 15.3475 46.2172 17.8268 44.6498 18.9656L34.3472 26.4509C33.6462 26.9601 33.3529 27.8629 33.6206 28.6869L37.5559 40.7984C38.1546 42.641 36.0456 44.1732 34.4782 43.0344L24.1756 35.5492C23.4746 35.0399 22.5254 35.0399 21.8244 35.5492L11.5218 43.0344C9.95438 44.1732 7.84542 42.641 8.44413 40.7984L12.3794 28.6869C12.6471 27.8629 12.3538 26.9601 11.6528 26.4509L1.35021 18.9656C-0.217217 17.8268 0.588336 15.3475 2.52578 15.3475H15.2605C16.127 15.3475 16.8949 14.7896 17.1626 13.9656L21.0979 1.8541Z" fill="black"/>
 </svg>
-<p>Get your custom logo</p>
+<p class="bold">Get your custom logo</p>
 <p class="mb-3">Get your own minimal logo with a turnaround which suits you.</p>
 <hr>
+
+<div class="pt-3 pb-2 align-left">
+        <form action="https://formspree.io/hello@ura.design" method="POST">
+              <p>What’s the <strong>Name</strong> of your project you need a logo for?<br />
+          <input class='required' name='Project Name' placeholder='Project Name' type='text'></p>
+           <div class="pt-2">
+              <p>What is your <strong>Email Address</strong>?<br />
+          <input class='required email' name='E-mail' placeholder='E-Mail' type='text'></p>
+      </div>
+      <div class="pt-2">
+              <p>Tell us more about your project. What type of logo are you looking for? What is the audience and what do you aim to accomplish with your project? Help us help you.<br />
+                    <textarea class='required' name='message' placeholder=''></textarea></p>
+                </div>
+                    <div class="pt-2">
+              <p>Name a <strong>Price</strong><br>
+                  <input class='required' name='budget' placeholder='0' type='number' min="0" max="9999999"></p>
+              </div>
+                  <div class="center pt-3">
+            <input class="button-submit" type="submit" value="Submit logo request">
+        </div>
+        </form>
+</div>
+<hr>
+
+<p class="pt-2">Every logo gets the fully fledged treatment from us. The higher your<br> bid is, the quicker we can get your logo up to speed. Not satisfied?</p>
+<p class="bold">We offer a 100% Money Back Guarantee.</p>
+
+<div class="pt-2 pb-2">
+	<p>Questions? <a href="mailto: hello@ura.design">Contact us</a>.</p>
+</div>
 		</div>
 	</div>
\ No newline at end of file
diff --git a/_sass/_layout.scss b/_sass/_layout.scss
index abf0658..bb7cff6 100644
--- a/_sass/_layout.scss
+++ b/_sass/_layout.scss
@@ -62,6 +62,30 @@
     -moz-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
     }
+    }
+
+      .button-submit {
+    display: inline-block;
+    text-decoration: none !important;
+    color: #fff !important;
+    background-color: #000; 
+    font-size: 16px !important;
+    font-weight: 600;
+    text-transform: uppercase;
+    border: 3px solid #000;
+    box-sizing: border-box;
+    border-radius: 10px;
+    padding: 12px 20px;
+    margin-left: 15px;
+
+    &:hover {
+    background-color: transparent !important;
+    color: #000 !important;
+    border: 3px solid #000;
+    -webkit-transition: all 0.3s ease-in-out;
+    -moz-transition: all 0.3s ease-in-out;
+    transition: all 0.3s ease-in-out;
+    }
     }
 
     .button-premium {
@@ -262,6 +286,10 @@
        padding-top: 2rem;
     }
 
+    .pt-3 {
+        padding-top: 3rem;
+    }
+
     .pb-2 {
        padding-bottom: 2rem;
     }
@@ -275,7 +303,7 @@
     min-height: 500px;
     margin-top: 2rem;
     padding-top: 4rem;
-    font-size: 24px;
+    font-size: 20px;
     }
 
     .bg-mute hr {
@@ -332,3 +360,33 @@
 .non-justify {
     text-align: initial;
 }
+
+.align-left {
+    text-align: left;
+}
+
+input {
+      font-size: 16px;
+}
+
+form textarea {
+  width: 100%;
+  max-width: 100%;
+  min-width: 100%;
+  padding: 14px 24px;
+  box-sizing: border-box;
+  color: #000;
+  background: #FFFFFF;
+  border: 2px solid #D8D8D8;
+  border-radius: 4px;
+}
+
+input[type=text], input[type=textarea], input[type=number] {
+  width: 100%;
+  padding: 14px 24px;
+  box-sizing: border-box;
+  color: #000;
+  background: #FFFFFF;
+  border: 2px solid #D8D8D8;
+  border-radius: 4px;
+}
\ No newline at end of file