html: added about and contact placeholder pages

routes/site.py

@@ -1,6 +1,7 @@
 from app import app
 
 from flask import render_template
+from flask import request
 
 @app.route('/')
 def home():
@@ -12,6 +13,11 @@ def about():
     """Render the website's about page."""
     return render_template('about.html')
 
+@app.route('/contact/')
+def contact():
+    """Render website's home page."""
+    return render_template('contact.html')
+
 @app.route('/<file_name>.txt')
 def send_text_file(file_name):
     """Send your static text file."""

static/css/narrow.css

@@ -77,3 +77,11 @@ body {
     border-bottom: 0;
   }
 }
+
+/* Active link should be brigter */
+.nav-pills > li.active > a,
+.nav-pills > li.active > a:hover,
+.nav-pills > li.active > a:focus {
+  color: #fff;
+  background-color: #A6D6FF;
+}

templates/about.html

@@ -1,9 +1,8 @@
 {% extends "base.html" %}
 
-
 {% block js %}
 {% endblock %}
 
-
 {% block main %}
+About.
 {% endblock %}

templates/base.html

@@ -7,9 +7,9 @@
     <title>Bootstrap 101 Template</title>
 
     <!-- Bootstrap -->
-    <link href="static/css/bootstrap.min.css" rel="stylesheet">
-    <link href="static/css/bootstrap-theme.min.css" rel="stylesheet">
-    <link href="static/css/narrow.css" rel="stylesheet">
+    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
+    <link href="{{ url_for('static', filename='css/bootstrap-theme.min.css') }}" rel="stylesheet">
+    <link href="{{ url_for('static', filename='css/narrow.css') }}" rel="stylesheet">
 
     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
@@ -29,7 +29,7 @@
     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
     <!-- Include all compiled plugins (below), or include individual files as needed -->
-    <script src="js/bootstrap.min.js"></script>
+    <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
 
     <!-- Additional JavaScript libraries and plugins... -->
     {% block js %}{% endblock %}

templates/contact.html

@@ -0,0 +1,8 @@
+{% extends "base.html" %}
+
+{% block js %}
+{% endblock %}
+
+{% block main %}
+Contact.
+{% endblock %}

templates/header.html

@@ -1,17 +1,9 @@
+
 <div class="header">
   <ul class="nav nav-pills pull-right">
-    <li class="active"><a href="#">Home</a></li>
-    <li><a href="#">About</a></li>
-    <li><a href="#">Contact</a></li>
+    <li {% if request.path == "/" %}class="active"{% endif %}><a href="/">Home</a></li>
+    <li {% if request.path == "/about/" %}class="active"{% endif %}><a href="/about/">About</a></li>
+    <li {% if request.path == "/contact/" %}class="active"{% endif %}><a href="/contact/">Contact</a></li>
   </ul>
   <h3 class="text-muted">Phosic</h3>
 </div>
-
-<div class="jumbotron">
-  <h1>Make video!</h1>
-  <p class="lead">
-    This website lets you join MP3 song and a picture, for  free! Just
-    fill the form below and we will mail you the download link  when our
-    robots finish creating your video.
-  </p>
-</div>

templates/home.html

@@ -3,9 +3,17 @@
 {% block js %}
 {% endblock %}
 
-
 {% block main %}
 
+<div class="jumbotron">
+  <h1>Make video!</h1>
+  <p class="lead">
+    This website lets you join MP3 song and a picture, for  free! Just
+    fill the form below and we will mail you the download link  when our
+    robots finish creating your video.
+  </p>
+</div>
+
 <div class="row marketing">
   <div class="col-lg-12">
     <form class="form-horizontal" role="form">