Add new image background and index page

5 files changed, 56 insertions, 23 deletions

diff --git a/app/static/css/style.css b/app/static/css/style.css
index e69de29..497a2bf 100644
--- a/app/static/css/style.css
+++ b/app/static/css/style.css
@@ -0,0 +1,12 @@
+.gym-background {
+	background: linear-gradient(
+		rgba(0, 0, 0, 0.7),
+		rgba(0, 0, 0, 0.7)
+	), url('/static/img/index.jpg') no-repeat center center fixed;
+
+	/* background: url('/static/img/index.jpg') no-repeat center center fixed; */
+	-webkit-background-size: cover;
+	-moz-background-size: cover;
+	-o-background-size: cover;
+	background-size: cover;
+}
diff --git a/app/static/img/index.jpg b/app/static/img/index.jpg
new file mode 100644
index 0000000..5c0809d
--- /dev/null
+++ b/app/static/img/index.jpg
diff --git a/app/templates/base/form.html b/app/templates/base/form.html
index 8423a0c..22f926b 100644
--- a/app/templates/base/form.html
+++ b/app/templates/base/form.html
@@ -2,17 +2,17 @@
 
 {% block content %}
 <div class="form">
-    <section class="hero is-primary is-fullheight-with-navbar">
-        <div class="hero-body">
-            <div class="container">
-                <div class="columns is-centered">
-                    <div class="column {{ column_classes }}">
-                        <h1 class="title is-2">{% block title %}{% endblock %}</h1>
+	<section class="hero is-primary is-fullheight-with-navbar gym-background">
+		<div class="hero-body">
+			<div class="container">
+				<div class="columns is-centered">
+					<div class="column {{ column_classes }}">
+						<h1 class="title is-2">{% block title %}{% endblock %}</h1>
 
-                        <!-- TODO: render errors -->
-                        {% with messages = get_flashed_messages(with_categories=true) %}
-                        {% if messages %}
-                        {% for category, message in messages %}
+						<!-- TODO: render errors -->
+						{% with messages = get_flashed_messages(with_categories=true) %}
+						{% if messages %}
+						{% for category, message in messages %}
 							{% if category == "message" %}
 								<div class="notification is-info">
 							{% else %}
@@ -20,18 +20,18 @@
 							{% endif %}
 								{{ message }}
 							</div>
-                        {% endfor %}
-                        {% endif %}
-                        {% endwith %}
+						{% endfor %}
+						{% endif %}
+						{% endwith %}
 
-                        <form method="POST" class="box">
-                            {{ form.csrf_token }}
-                            {% block form %}{% endblock %}
-                        </form>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
+						<form method="POST" class="box">
+							{{ form.csrf_token }}
+							{% block form %}{% endblock %}
+						</form>
+					</div>
+				</div>
+			</div>
+		</div>
+	</section>
 </div>
 {% endblock %}
diff --git a/app/templates/base/layout.html b/app/templates/base/layout.html
index e3607cb..4b83110 100644
--- a/app/templates/base/layout.html
+++ b/app/templates/base/layout.html
@@ -8,6 +8,9 @@
 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
 	<script src="https://friconix.com/cdn/friconix.js"> </script>
 
+	<!-- custom css -->
+	<link rel="stylesheet" href="/static/css/style.css">
+
 	<!-- favicon.io template -->
 	<link rel="apple-touch-icon" sizes="180x180" href="/static/favicon/apple-touch-icon.png">
 	<link rel="icon" type="image/png" sizes="32x32" href="/static/favicon/favicon-32x32.png">
diff --git a/app/templates/index.html b/app/templates/index.html
index 04b89ef..e3bf978 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -1,5 +1,23 @@
 {% extends 'base/layout.html' %}
 
 {% block content %}
-	Index Page
+
+<section class="hero is-info is-fullheight-with-navbar gym-background">
+	<div class="hero-body">
+		<div class="container has-text-centered">
+			<div class="column is-6 is-offset-3">
+				<h1 class="title">
+					Welcome to Strengthy
+				</h1>
+				<h1 class="subtitle">
+					Strenghty is an open source fitness tracking application that
+					helps users meet their fitness goals. To get started,
+					<a href="/register">Sign Up</a> to create an account.
+				</h1>
+			</div>
+		</div>
+	</div>
+
+</section>
+
 {% endblock %}