diff --git a/project/static/css/style.css b/project/static/css/style.css
index eddea54134a73154a62ebf6c5e3b3bf31a207584..9dd1422263c3ee39dde7fb16fe6a39ef4fbcfa3c 100644
--- a/project/static/css/style.css
+++ b/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;
diff --git a/project/static/images/responsive-web-design.png b/project/static/images/responsive-web-design.png
new file mode 100644
index 0000000000000000000000000000000000000000..886ea95af5228158dbdbd4eea3b84cef31dd7196
Binary files /dev/null and b/project/static/images/responsive-web-design.png differ
diff --git a/project/templates/home/home.html b/project/templates/home/home.html
index 74bd0a82245d1bafe7702b70b67dabf247d64fc7..7aa51e9198a9a9bef1e19f010f35d34b90734bc9 100644
--- a/project/templates/home/home.html
+++ b/project/templates/home/home.html
@@ -1,75 +1,45 @@
{% 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>
- <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 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>
-
- <!-- 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 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 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>
- </div>
- </div> -->
+ </div>
</div>
{% endblock %}
diff --git a/project/templates/index.html b/project/templates/index.html
index 9daf8a55adff2301552231e1968978a47fc347f9..8ef668fd98c073714b9cd5bd97fb5faae8435c31 100644
--- a/project/templates/index.html
+++ b/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>