Started working on contact page.

Created contact.scss with style for contact page.
Added import in main.scss.
New credits for new photos.
Added 2 images for testing layout of contact page.

Author: Tomasz-Kluczkowski

_pages/04_contact.html

@@ -4,5 +4,73 @@
 permalink: /contact/
 ---
 
-<h1>This is the content of the Contact page</h1>
-<h2>Fill it in !!!!</h2>
+<style>
+    .contact {
+        background-size: cover;
+        background: linear-gradient(90deg,
+            rgba(0, 0, 0, 0.5),
+            rgba(0, 0, 0, 0.5)),
+            url("{{ site.baseurl }}/static/images/contact/contact_top_1920x600px.jpg") top center no-repeat;
+    }
+</style>
+
+
+<section class="contact">
+    <div class="row container-fluid">
+        <!--<img class="img-fluid" src="{{ site.baseurl }}/static/images/contact/contact_top_1920x600px.jpg">-->
+        <div class="col-sm-12">
+                <h2 class="section-title">Contact</h2>
+            </div>
+        </div>
+    <!--Contact form-->
+        <form class="contact__form container" method="post" action="#" role="form">
+            <div class="row">
+                <div class="col-md-6">
+                    <div class="form-group">
+                        <label class="contact__label" for="form_name">Firstname *</label>
+                        <input id="form_name" type="text" name="name" class="form-control" placeholder="Please enter your firstname *" required="required" data-error="Firstname is required.">
+                    </div>
+                </div>
+                <div class="col-md-6">
+                    <div class="form-group">
+                        <label class="contact__label" for="form_lastname">Lastname *</label>
+                        <input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Please enter your lastname *" required="required" data-error="Lastname is required.">
+                        <div class="help-block with-errors"></div>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-md-6">
+                    <div class="form-group">
+                        <label class="contact__label" for="form_email">Email *</label>
+                        <input id="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 class="col-md-6">
+                    <div class="form-group">
+                        <label class="contact__label" for="form_phone">Phone</label>
+                        <input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Please enter your phone">
+                        <div class="help-block with-errors"></div>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-md-12">
+                    <div class="form-group">
+                        <label class="contact__label" for="form_message">Message *</label>
+                        <textarea id="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">
+                    <button type="button" 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>
+                    <!--<input type="submit" class="contact__submit-button btn btn-success btn-send btn-lg" value="Send message">-->
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-md-12">
+                    <p class="text-muted"><strong>*</strong> Required fields</p>
+                </div>
+            </div>
+        </form>
+    </section>

_sass/contact.scss

@@ -0,0 +1,4 @@
+.contact {
+  margin-top: -66px;
+}
+

static/credits.txt

@@ -4,4 +4,8 @@
 
 <a href='https://www.freepik.com/free-vector/abstract-running-design_1113095.htm'>Designed by Freepik</a>
 
-<a href='https://www.freepik.com/free-vector/abstract-vector-mesh-background-chaotically-connected-points-and-polygons-flying-in-space-flying-debris-futuristic-technology-style-card-lines-points-circles-and-planes-futuristic-design_1283675.htm'>Designed by Freepik</a>
+<a href='https://www.freepik.com/free-vector/abstract-vector-mesh-background-chaotically-connected-points-and-polygons-flying-in-space-flying-debris-futuristic-technology-style-card-lines-points-circles-and-planes-futuristic-design_1283675.htm'>Designed by Freepik</a>
+
+
+contact photo: Photo by Alejandro Escamilla on Unsplash / Photo by NordWood Themes on Unsplash
+contact: <a href='https://www.freepik.com/free-photo/blank-business-cards-and-cup-of-coffee-on-wooden-table-corporate-stationary-branding-mock-up_1187395.htm'>Designed by Freepik</a>

static/css/main.scss

@@ -8,4 +8,5 @@ $postimage: "{{ page.image }}";
 @import
   "typography",
 	"post",
+  "contact",
   "style";