Home Explore Help
Sign In
fgm
/
front__coursera-responsive-design
1
0
Fork 0
Files Issues 0 Pull Requests 0
Browse Source

Main navbar on index.html.

Frederic G. MARAND 9 years ago
parent
e6aa70dd20
commit
ced7584669
2 changed files with 69 additions and 0 deletions
Unified View Show Diff Stats
  1. 25 0
      TODO.md
  2. 44 0
      index.html

+ 25 - 0
TODO.md
View File 

@@ -0,0 +1,25 @@
 
+# Final
 
+
 
+In this exercise you will design and build a task list website using your HTML and CSS skills.
 
+
 
+## Instructions
 
+
 
+You are to design a website that presents a set of tasks to its users. An example of a task is ‘do the shopping’. The website should be implemented using static content for the tasks, i.e. it does not need to be data driven as that is covered in later modules.
 
+
 
+There should be 3 pages on the site:
 
+
 
+* A landing page that presents a list of tasks to the user. Tasks can be be finished or not finished. Every task in the list links to the same task page.
 
+* A task page that presents the details of a single task to the user. Tasks have a title, a description and a person associated with them. You should display that person somehow (e.g. their name, a picture, etc.). It is ok for all the tasks on the landing page to link to the same task detail page, as this is just an example of how a task looks.
 
+* An ‘about’ page that explains what the site is for.
 
+
 
+The pages on the site should have the following features:
 
+
 
+1. Clear navigation allowing the user to move between pages.
 
+1. Consistent style across the pages.
 
+1. Responsive layout where the layout changes depending on the size of the browser window.
 
+1. Clearly stated purpose for each page.
 
+1. Use the bootstrap library.
 
+
 
+## Review Criteria less
 
+
 
+You will be evaluated based on whether the required pages exist and whether they adhere to the five feature requirements listed in the instructions.

+ 44 - 0
index.html
View File 

@@ -0,0 +1,44 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="UTF-8">
 
+    <link rel="stylesheet" href="css/bootstrap.css" />
 
+    <link rel="stylesheet" href="css/styles.css" />
 
+    <title>TODOs</title>
 
+  </head>
 
+
 
+  <body>
 
+    <nav class="navbar navbar-default">
 
+      <div class="container-fluid">
 
+        <!-- collapsed navbar -->
 
+        <div class="navbar-header">
 
+          <a class="navbar-brand" href="/">Simple TODOs</a>
 
+          <button type="button"
 
+            class="navbar-toggle collapsed"
 
+            data-toggle="collapse"
 
+            data-target="#main_navbar"
 
+            aria-expanded="false">
 
+            <span class="sr-only">Toggle navigation</span>
 
+            <span class="icon-bar"></span>
 
+            <span class="icon-bar"></span>
 
+            <span class="icon-bar"></span>
 
+          </button>
 
+        </div><!-- /collapsed navbar -->
 
+
 
+        <!-- uncollapsed navbar -->
 
+        <div id="main_navbar" class="collapse navbar-collapse">
 
+          <ul class="nav navbar-nav">
 
+            <li class="active"><a href="index.html">View tasks</a></li>
 
+            </ul>
 
+          <ul class="nav navbar-nav navbar-right">
 
+            <li><a href="about.html">About</a></li>
 
+          </ul>
 
+        </div><!-- /uncollapsed navbar -->
 
+      </div>
 
+    </nav>
 
+
 
+    <script src="js/jquery-2.2.1.js"></script>
 
+    <script src="js/bootstrap.js"></script>
 
+  </body>
 
+</html>
 
+