Added design and asset for landing page

edivorce/apps/core/static/css/main.scss

@@ -499,6 +499,60 @@ textarea {
 			padding-right: 25px;
 		}
 	}
+	&.intro-page {
+		background: $color-blue-medium url("../img/bg-edivorce__landing.jpg")  no-repeat top center fixed;
+		background-size: cover;
+		.content-column {
+			margin: 100px auto;
+			padding: 0;
+			max-width: 800px;
+			padding: 0 20px;
+			text-align: center;
+			color: #ffffff;
+			h1, h3 {
+				color: #ffffff;
+			}
+			.intro {
+				font-size: 24px;
+				line-height: 36px;
+				margin: 0 100px;
+			}
+			a {
+				color: #ffffff;
+				text-decoration: none;
+			}
+			a:hover, a:focus {
+				text-decoration: underline;
+				&.btn {
+					text-decoration: none;
+				}
+			}
+			.btn-group-lg>.btn, .btn-lg {
+			    padding: 12px 40px;
+				margin: 10px;
+			}
+			.flex-wrapper {
+				display: flex;
+				margin: 20px 0px;
+				text-align: left;
+				justify-content: space-between;
+				font-size: 18px;
+				.flex-column {
+					width: 45%
+				}
+				span.number-circle {
+				    border: solid 2px white;
+				    padding: 5px;
+				    border-radius: 40px;
+				    width: 50px;
+				    height: 50px;
+				    display: inline-block;
+				    text-align: center;
+				    margin-right: 10px;
+				}
+			}
+		}
+	}
 }
 
 /* Side Progress Navigation */

edivorce/apps/core/templates/base.html

@@ -75,7 +75,7 @@
 
         {% endif %}
 
-        <div class="row-flex">
+        <div class="row-flex {% block container %}{% endblock %}">
             {% block progress %}
             {% endblock %}
             <div class="col">

edivorce/apps/core/templates/intro.html

@@ -2,40 +2,47 @@
 
 {% block title %}{{ block.super }}: Intro{% endblock %}
 
-{% block content %}
-
-<h1>Let us guide you through the divorce process</h1>
-
-<p>This online Divorce Assistantance tool will help you determine the forms you will need to assemble,
-    and the tasks you will need to complete, in order to complete your divorce.</p>
+{% block container %}intro-page{% endblock %}
 
-<h3>How it works</h3>
+{% block content %}
 
-<p><b>1. Answer Questions</b>
-    <br>
-    Filling out our secure online questionnaire is completely free. Your work is saved so you can
-    proceed at your own pace.
-</p>
+<h1>Welcome to Online Divorce Assistant</h1>
+
+<p class="intro">This tool will help you determine the forms you will need to assemble, and the tasks you will need to complete, in order to complete your divorce.</p>
+
+<div class="flex-wrapper">
+    <div class="flex-column">
+        <h3><span class="number-circle">1</span> Answer Questions</h3>
+        <p>
+            Filling out our secure online questionnaire is completely free. Your work is saved so you can proceed at your own pace.
+        </p>
+    </div>
+
+    <div class="flex-column">
+        <h3><span class="number-circle">2</span> Print Your Forms</h3>
+        <p>
+            Print your papers and file* at your local court registry. That’s all there is to it!
+        </p>
+        <small>
+            *At this point in time, we cannot offer online submission so you will need to print off your forms and take them to a court registry.        </p>
+        </small>
+    </div>
+</div>
 
-<p><b>2. Print Your Forms</b>
-    <br>
-    Print your papers and file at your local court registry. That's all there is to it!
-</p>
 
-<div class="information-message bg-danger">
+<div class="information-message">
     <p>
-        Please note: at this point in time we cannot offer online submission (like your taxes)
-        so you will need to print off your forms and take them to a court registry.
+
     </p>
 </div>
 
-<h2 style="text-decoration: underline">
-    <a href="{% url 'prequalification' '01' %}">New User - Let's Get Started</a>
-</h2>
+<p>
+    <a href="{% url 'prequalification' '01' %}" class="btn btn-primary btn-lg">Let's Get Started</a>
+</p>
 
-<h2 style="text-decoration: underline">
-    <a href="{% url 'login' %}">Returning User - Login with BCeID</a>
-</h2>
+<p>
+    <a href="{% url 'login' %}">Returning User<br />Login with BCeID</a>
+</p>
 
 {% endblock %}