diff --git a/project/static/css/style.css b/project/static/css/style.css index 6565986f0760a8f3ce9fb8220bee8d1e1365b6c7..e9b6bc552baef2dc97911442e482b2de7ffedfbb 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 058022db53c8c3acc8100a48b408c0d4fdd25a26..7aa51e9198a9a9bef1e19f010f35d34b90734bc9 100644 --- a/project/templates/home/home.html +++ b/project/templates/home/home.html @@ -1,34 +1,49 @@ {% 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> + <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 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> - </div> - </div> - </div> + <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-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 %} {% block modals %} - {% include "home/login_modal.html" %} - {% include "home/signup_modal.html" %} + {% include "home/login_modal.html" %} + {% include "home/signup_modal.html" %} {% endblock %} diff --git a/project/templates/index.html b/project/templates/index.html index 3a6a929152ce14ff3ab929cc257b1139704dca37..26a066bc7e1538f2a00581ba0d4eec550d427cd9 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>