Added contact section in navigation and index.html.

Modified necessary styles in contact.scss.

Author: Tomasz-Kluczkowski

_includes/navigation.html

@@ -67,6 +67,9 @@
                 <li class="nav-item">
                     <a class="navigation__link nav-link" href="#about">About</a>
                 </li>
+                <li class="nav-item">
+                    <a class="navigation__link nav-link" href="#contact">Contact</a>
+                </li>
             {% else %}
                 <li class="nav-item">
                     <a class="navigation__link nav-link" href="{{ '/' | prepend: site.baseurl }}">Home<span class="sr-only">(current)</span></a>

_sass/contact.scss

@@ -1,4 +1,5 @@
 .contact {
+  margin-top: 10%;
 }
 
 .contact__background-img-container {
@@ -26,7 +27,7 @@
 
 @media (max-width: 576px) {
   .contact__form {
-      max-width: 96%;
+    max-width: 96%;
   }
 }
 

index.html

@@ -158,4 +158,68 @@ <h2 class="services__title text-left">Engaging Core Developers</h2>
                  alt="Core developers in action">
         </div>
     </div>
+</section>
+
+<section id="contact" class="contact">
+    <div class="contact__background-img-container">
+        <picture>
+            <source srcset="../static/images/contact/contact_top_450x150px.jpg 450w,
+                            ../static/images/contact/contact_top_960x300px.jpg 960w,
+                            ../static/images/contact/contact_top_1920x600px.jpg 1920w"
+                    media="(orientation: landscape)"
+                    sizes="100vw">
+            <source srcset="../static/images/contact/contact_top_750x650px.jpg 750w,
+                            ../static/images/contact/contact_top_1650x1100px.jpg 1650w"
+                    media="(orientation: portrait)"
+                    sizes="100vw">
+            <img class="contact__background-img"
+                 src="../static/images/contact/contact_top_960x300px.jpg"
+                 alt="Contact Us">
+        </picture>
+        <div class="contact__page-title-container row container-fluid">
+            <div class="col-sm-12">
+                <h1 class="contact__page-title">Contact Us</h1>
+                <h2 class="contact__page-subtitle">We Are Happy To Help</h2>
+            </div>
+        </div>
+    </div>
+
+    <!--Contact 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">
+                    <label class="contact__label" for="contact__form-name">Full Name *</label>
+                    <input id="contact__form-name" type="text" name="name" class="form-control" placeholder="Please enter your full name *" required="required" data-error="Full name is required.">
+                    <div class="help-block with-errors"></div>
+                </div>
+            </div>
+             <div class="col-md-6">
+                <div class="form-group">
+                    <label class="contact__label" for="contact__form-email">Email *</label>
+                    <input id="contact__form-email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
+                </div>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col-md-12">
+                <div class="form-group">
+                    <label class="contact__label" for="contact__form-message">Message *</label>
+                    <textarea id="contact__form-message" name="message" class="form-control" placeholder="Message *" rows="4" required="required" data-error="Please,leave us a message."></textarea>
+                    <div class="help-block with-errors"></div>
+                </div>
+            </div>
+            <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>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-md-12">
+                <p class="text-muted"><strong>*</strong> Required fields</p>
+            </div>
+        </div>
+    </form>
 </section>