styled submit button

Author: dpatanin

src/pages/contact/index.js

@@ -40,31 +40,12 @@ class ContactPage extends React.Component {
 
   render() {
     return (
-      <Layout bodyclass="page-contact">
+      <Layout bodyClass="page-contact">
         <SEO title="Contact" />
-        <div clas="container">
-          <div class="row m-b-lg">
-            <div class="col-lg-12 text-center">
-              <div class="navy-line"></div>
+        <div class="container">
+          <div className="intro pb-4">
+            <div class="container">
               <h1>Contact us now!</h1>
-              <p></p>
-            </div>
-          </div>
-          <div class="row m-b-lg">
-            <div class="col-lg-3 col-lg-offset-3">
-              <address>
-                <strong>
-                  <span class="navy">iteratec GmbH</span>
-                </strong>
-                <br />
-                St.-Martin-Straße 114
-                <br />
-                81669 München
-                <br />
-                Telefon: +49 89 614551-0
-              </address>
-            </div>
-            <div class="col-lg-4">
               <p class="text-color">
                 You're interested about{" "}
                 <a href="https://github.com/secureCodeBox">secureCodeBox</a> or
@@ -82,12 +63,26 @@ class ContactPage extends React.Component {
             </div>
           </div>
 
+          {/* <div class="col-lg-3 col-lg-offset-3">
+            <address>
+              <strong>
+                <span class="navy">iteratec GmbH</span>
+              </strong>
+              <br />
+              St.-Martin-Straße 114
+              <br />
+              81669 München
+              <br />
+              Telefon: +49 89 614551-0
+            </address>
+          </div> */}
+
           <div class="row">
             <div class="col-lg-12 text-center">
               <div id="mc_embed_signup">
                 <form onSubmit={this._handleSubmit}>
                   <div class="form-group">
-                    <label for="mce-EMAIL" class="col-lg-4 control-label">
+                    <label for="mce-EMAIL">
                       Email address<span class="asterisk">*</span>
                     </label>
                     <div class="col-lg-8">
@@ -101,7 +96,7 @@ class ContactPage extends React.Component {
                     </div>
                   </div>
                   <div class="form-group">
-                    <label for="mce-FNAME" class="col-lg-4 control-label">
+                    <label for="mce-FNAME">
                       First name<span class="asterisk">*</span>
                     </label>
                     <div class="col-lg-8">
@@ -115,7 +110,7 @@ class ContactPage extends React.Component {
                     </div>
                   </div>
                   <div class="form-group">
-                    <label for="mce-LNAME" class="col-lg-4 control-label">
+                    <label for="mce-LNAME">
                       Surname<span class="asterisk">*</span>
                     </label>
                     <div class="col-lg-8">
@@ -130,7 +125,7 @@ class ContactPage extends React.Component {
                   </div>
 
                   <div class="form-group">
-                    <label for="mce-MESSAGE" class="col-lg-4 control-label">
+                    <label for="mce-MESSAGE">
                       Interessted in &hellip;
                     </label>
                     <div class="col-lg-8">
@@ -155,7 +150,7 @@ class ContactPage extends React.Component {
                       value="Subscribe"
                       name="subscribe"
                       id="mc-embedded-subscribe"
-                      class="btn btn-primary"
+                      class="button-submit"
                     />
                   </div>
                 </form>

src/scss/components/_buttons.scss

@@ -22,7 +22,24 @@
     box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
     text-decoration: none;
   }
+  &-submit {
+    background-color: $secureCodeBlue;
+    border-color: $secureCodeBlue;
+    color: $white;
+    font-size: 14px;
+    padding: 10px 20px;
+    font-weight: 600;
+    line-height: 1.42857143;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    &:hover {
+      margin-top: -1px;
+      margin-bottom: 1px;
+      box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
+      cursor: pointer;
+    }
+  }
 }
-
-
-

src/scss/pages/contact/_page-contact.scss

@@ -0,0 +1,20 @@
+.page-contact {
+  background-repeat: no-repeat;
+  background-size: 115%;
+  background-position: 49px -40px;
+  @include media-breakpoint-up(sm) {
+    background-size: 50%;
+    background-position: 300px 50px;
+  }
+  @include media-breakpoint-up(md) {
+    background-size: 70%;
+    background-position: 100% -100px;
+  }
+  @include media-breakpoint-up(lg) {
+    background-size: 55%;
+    background-position: 100% 70px;
+  }
+  .form-group {
+      color: $secondary;
+  }
+}

src/scss/style.scss

@@ -64,6 +64,7 @@
 
 // Pages
 @import 'pages/home';
+@import 'pages/contact/page-contact';
 @import 'pages/team/page-teams';
 @import 'pages/scanners/page-scanner';
 @import 'pages/scanners/scanner';