Updating the home page layout and information. I think it looks pretty good!

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 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 id="carousel-homepage" class="carousel slide" data-ride="carousel" data-pause="hover">
-			<!-- Indicators -->
-			<ol class="carousel-indicators">
-				<li data-target="#carousel-homepage" data-slide-to="0" class="active"></li>
-				<li data-target="#carousel-homepage" data-slide-to="1"></li>
-				<li data-target="#carousel-homepage" data-slide-to="2"></li>
-			</ol>
-
-			<!-- Wrapper for slides -->
-			<div class="carousel-inner">
-				<div class="item active">
-					<img src="holder.js/100%x500/#777:#555/text:Welcome" alt="Welcome">
-					<div class="carousel-caption">
-						<h3>Welcome to My Movie Library</h3>
-						<p>This web application can help you keep track of your ever-growning movie library</p>
+		<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 class="item">
-					<img src="http://sccreader.files.wordpress.com/2012/09/movie_night_images.png" alt="Second Slide">
-					<div class="carousel-caption">
-						<h3>Awesome-sauce!</h3>
-						<p>You can keep track of the movies you loan to your friends!</p>
 			</div>
+			<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 class="item">
-					<img src="holder.js/100%x500/#555:#333/text:Third Slide" alt="Third Slide">
-					<div class="carousel-caption">
-						<h3>Open Source</h3>
-						<p>This project used open source tools provided by the community</p>
 				</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>
-
-			<!-- Controls -->
-			<a class="left carousel-control" href="#carousel-homepage" data-slide="prev">
-				<span class="glyphicon glyphicon-chevron-left"></span>
-			</a>
-			<a class="right carousel-control" href="#carousel-homepage" data-slide="next">
-				<span class="glyphicon glyphicon-chevron-right"></span>
-			</a>
-		</div>
-
-
-
-		<!-- <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>
-
-		<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>
 			</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>
+
+		<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> -->
 	</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>