Skip to content
Snippets Groups Projects
Commit bbe815c8 authored by Nathan Bills's avatar Nathan Bills
Browse files

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

parent 425bb203
Branches
No related tags found
No related merge requests found
...@@ -2,6 +2,10 @@ html,body { ...@@ -2,6 +2,10 @@ html,body {
height: 100%; height: 100%;
} }
#homepage-responsive-image {
width: 100%;
}
#wrap { #wrap {
min-height: 100%; min-height: 100%;
height: auto !important; height: auto !important;
......
project/static/images/responsive-web-design.png

16.3 KiB

{% extends "usernav.html" if user else "index.html"%} {% extends "usernav.html" if user else "index.html"%}
{% block content %} {% block content %}
<div class="col-sm-12"> <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"> <div class="row text-center">
<!-- Indicators --> <div class="col-sm-12 col-md-4">
<ol class="carousel-indicators"> <div class="panel panel-default">
<li data-target="#carousel-homepage" data-slide-to="0" class="active"></li> <div class="panel-heading">Get Started, <small>it's fast, easy and free!</small></div>
<li data-target="#carousel-homepage" data-slide-to="1"></li> <div class="panel-body">
<li data-target="#carousel-homepage" data-slide-to="2"></li> <p>Once you have created an account, start making libraries and adding your movies to those libraries.</p>
</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> </div>
</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>
<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>
</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>
<!-- 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>
</div> </div>
<div class="col-xs-12 col-sm-6">
<div class="thumbnail"> <div class="row text-center">
<img data-src="holder.js/100%x200/vine" alt="..."> <div class="col-sm-12 col-md-6 col-md-offset-3">
<div class="caption"> <h3>Responsive Design</h3>
<h3>It is so cool!</h3> <p>This web application was made to be responsive, so you can use this on any device!</p>
</div> <img id="homepage-responsive-image" src="{{ url_for('static', filename='images/responsive-web-design.png') }}" alt="Responsive Design">
</div> </div>
</div> </div>
</div> -->
</div> </div>
{% endblock %} {% endblock %}
......
...@@ -70,7 +70,7 @@ ...@@ -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> <a href="https://www.themoviedb.org/"><img src="https://d3a8mw37cqal2z.cloudfront.net/assets/619c6e3db1177d51/images/tmdb-logo.png" style="width:180px;"></a>
</div> </div>
<div class="col-md-3 col-sm-12"> <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> </div>
</div> </div>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment