Chaged background overlay opacity for contact to make title stand out better.

Changed contact title / subtitle text - suggestions are welcome.
Centered send message button.
Styled contact page.
Unified colors on the home page (titles / subtitles).

Author: Tomasz-Kluczkowski

_pages/04_contact.html

@@ -6,10 +6,10 @@
 
 <style>
     .contact__background-img {
-        background-size: cover;
+        background-size: contain;
         background: linear-gradient(90deg,
-            rgba(0, 0, 0, 0.7),
-            rgba(0, 0, 0, 0.7)),
+            rgba(0, 0, 0, 0.75),
+            rgba(0, 0, 0, 0.75)),
             url("{{ site.baseurl }}/static/images/contact/contact_top_1920x600px.jpg") top center no-repeat;
     }
 </style>
@@ -19,13 +19,13 @@
     <div class="contact__background-img">
         <div class="row container-fluid">
             <div class="col-sm-12">
-                <h2 class="section-title contact__title">Contact</h2>
-                <h3 class="contact__subtitle">Let us know about your ideas and concerns</h3>
+                <h2 class="section-title contact__title">Contact Us</h2>
+                <h3 class="contact__subtitle">Got an idea? Can you or your company support us? Let us know.</h3>
             </div>
         </div>
     </div>
     <!--Contact form-->
-        <form class="contact__form container" method="POST" action="//formspree.io/tomaszk1@hotmail.co.uk" role="form">
+        <form class="contact__form container" method="POST" action="//formspree.io/py.sprints@gmail.com" role="form">
             <div class="row">
                 <div class="col-md-6">
                     <div class="form-group">
@@ -50,7 +50,7 @@ <h3 class="contact__subtitle">Let us know about your ideas and concerns</h3>
                         <div class="help-block with-errors"></div>
                     </div>
                 </div>
-                <div class="col-md-12">
+                <div class="col-md-12 text-center">
                     <input type="text" name="_gotcha" style="display: none">
                     <input type="hidden" name="_subject" value="Message from Python Sprints">
                     <button type="submit" class="contact__submit-button btn btn-success btn-send btn-lg">Send Message<span class="contact__icon"><i class="fas fa-envelope"></i></span></button>

_sass/contact.scss

@@ -1,22 +1,84 @@
 .contact {
   margin-top: -66px;
+  padding-bottom: 5vh;
 }
 
-.contact__background-img {
+@media (orientation: landscape) {
+  .contact__background-img {
   min-height: 55vh;
+  }
+}
+
+@media (orientation: portrait) {
+  .contact__background-img {
+  min-height: 25vh;
+  }
 }
 
 .contact .contact__title {
+  margin-top: 20vh;
   color: antiquewhite;
 }
 
 .contact__subtitle {
-  font-size: 1.5em;
+  font-size: 1.75em;
   text-align: center;
   font-family: 'Playfair Display', serif;
   color: #A55605;
+  margin-bottom: 10vh;
 }
 
 .contact__form {
-  margin-top: 5%;
+  margin-top: 10%;
+  border-radius: 5px;
+  background: linear-gradient(180deg,
+  rgba(0, 0, 0, 0.75),
+  rgba(7, 41, 72, 0.85) 50%,
+  #072948 100%);
+  height: 100%;
+}
+
+.contact__label {
+  color: antiquewhite;
+}
+
+.form-group {
+  margin-top: 2em;
+  margin-bottom: 0;
+}
+
+.form-control {
+  background: rgba(0, 0, 0, 0.5);
+  &:focus {
+    background: rgba(250, 235, 215, 0.5);
+    color: black;
+  }
+}
+
+.contact__submit-button {
+  margin-top: 2em;
+  min-width: 10em;
+  font-size: 1.25em;
+  font-family: 'Playfair Display', serif;
+  text-align: center;
+  background: #072948;
+  border: #035E9A 2px ridge;
+  transition: all 0.5s ease-in;
+  color: #7FA0C2;
+  &:hover {
+    text-align: center;
+    background: rgba(7, 41, 72, 0.53);
+    border: #A55605 2px ridge;
+    color: antiquewhite;
+
+  }
+  &:hover > .contact__icon {
+    color: antiquewhite;
+  }
+}
+
+.contact__icon {
+  transition: all 0.5s ease-in;
+  margin-left: 5%;
+  color: #7FA0C2;
 }

_sass/style.scss

@@ -83,7 +83,7 @@ a {
 
 .navigation__brand-name {
   font-size: 0.8em;
-  color: #ffffff;
+  color: antiquewhite;
   font-family: 'Share Tech Mono', monospace;
 }
 
@@ -120,7 +120,7 @@ a {
 
 .navigation__title {
   font-family: 'Share Tech Mono', monospace;
-  color: #ffffff;
+  color: antiquewhite;
   font-size: 3.5em;
   margin-top: 40vh;
   text-align: center;
@@ -129,7 +129,7 @@ a {
 .navigation__subtitle {
   font-size: 1.16em;
   font-family: 'Share Tech Mono', monospace;
-  color: #818181;
+  color: #A55605;
   text-align: center;
   margin-bottom: 50%;
 }
@@ -585,8 +585,7 @@ a {
 }
 
 .footer {
-  margin-top: 10%;
-  padding-top: 2.5%;
+  margin-top: 5%;
   background: #072948;
   border-top: #7fa0c2 1px solid;
 }
@@ -618,6 +617,7 @@ a {
 }
 
 .footer__section-title {
+  margin-top: 1em;
   color: aliceblue;
   font-size: 1.5em;
   text-align: center;