Merge pull request #8 from ndbills/homepage

Merging the 'homepage' branch into develop

project/static/css/style.css

@@ -2,6 +2,10 @@ html,body {
     height: 100%;
 }
 
+#homepage-responsive-image {
+  width: 100%;
+}
+
 #wrap {
     min-height: 100%;
     height: auto !important;

project/templates/home/home.html

 {% extends "usernav.html" if user else "index.html"%}
 {% block content %}
 	<div class="col-sm-12">
-        <div class="jumbotron">
-            <h1>It's working!!!</h1>
-            <p>Here, all of your wildest dreams can come true.</p>
-            <p><a class="btn btn-primary btn-lg" role="button">The Demo</a></p>
+		<div class="jumbotron text-center">
+			<h1>Welcome to 'My Movie Library'</h1>
+			<p>Whether your movies are in the movie cabinet or loaned to a friend, this <em>easy-to-use</em> web application can help you track your ever-growing movie library.</p>
 		</div>
 
-        <div class="row">
-            <div class="col-xs-12 col-sm-6">
-                <div class="thumbnail">
-                    <img data-src="holder.js/100%x200/sky" alt="...">
-                    <div class="caption">
-                        <h3>Awesome Sauce!</h3>
+		<div class="row text-center">
+			<div class="col-sm-12 col-md-4">
+				<div class="panel panel-default">
+					<div class="panel-heading">Get Started, <small>it's fast, easy and free!</small></div>
+					<div class="panel-body">
+						<p>Once you have created an account, start making libraries and adding your movies to those libraries.</p>
 					</div>
 				</div>
 			</div>
-            <div class="col-xs-12 col-sm-6">
-                <div class="thumbnail">
-                    <img data-src="holder.js/100%x200/vine" alt="...">
-                    <div class="caption">
-                        <h3>It is so cool!</h3>
+			<div class="col-sm-12 col-md-4">
+				<div class="panel panel-default">
+					<div class="panel-heading">On-loan, <small>keep track of that movie!</small></div>
+					<div class="panel-body">
+						<p>When you want your movie back, you can send an email asking for the movie to be returned.</p>
 					</div>
 				</div>
 			</div>
+			<div class="col-sm-12 col-md-4">
+				<div class="panel panel-default">
+					<div class="panel-heading">Open Source, <small>give back to the community!</small></div>
+					<div class="panel-body">
+						<p>This project is open source, so make suggestions, contribute or even fork our project on github!</p>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div class="row text-center">
+			<div class="col-sm-12 col-md-6 col-md-offset-3">
+				<h3>Responsive Design</h3>
+				<p>This web application was made to be responsive, so you can use this on any device!</p>
+				<img id="homepage-responsive-image" src="{{ url_for('static', filename='images/responsive-web-design.png') }}" alt="Responsive Design">
+			</div>
 		</div>
 	</div>
 {% endblock %}

project/templates/index.html

@@ -70,7 +70,7 @@
                                 <a href="https://www.themoviedb.org/"><img src="https://d3a8mw37cqal2z.cloudfront.net/assets/619c6e3db1177d51/images/tmdb-logo.png" style="width:180px;"></a>
                             </div>
                             <div class="col-md-3 col-sm-12">
-                                <p>This product uses the TMDb API but is not endorsed or certified by TMDb.</p>
+                                <p>The My Movie Library project uses the TMDb API but is not endorsed or certified by TMDb.</p>
                             </div>
                         </div>
                     </div>