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

Completed assignment.

Frederic G. MARAND 8 years ago
parent
2bd5b990e3
commit
722e0d6b21
9 changed files with 413 additions and 59 deletions
Split View Show Diff Stats
  1. 142 0
      about.html
  2. 10 0
      css/bootstrap_sandstone.min.css
  3. 10 0
      css/bootstrap_superhero.min.css
  4. 15 0
      css/styles.css
  5. 2 2
      css/styles.css.map
  6. 22 0
      css/styles.scss
  7. BIN
      images/512px-Jamie_Oliver_retouched.jpg
  8. 68 57
      index.html
  9. 144 0
      task.html

+ 142 - 0
about.html
View File 

@@ -0,0 +1,142 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="UTF-8">
 
+    <link rel="stylesheet" href="css/bootstrap_superhero.min.css" />
 
+    <link rel="stylesheet" href="css/styles.css" />
 
+    <title>About this site</title>
 
+  </head>
 
+  <body>
 
+    <!-- Header -->
 
+    <nav id="header" 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><a href="index.html">All tasks</a></li>
 
+            </ul>
 
+          <ul class="nav navbar-nav navbar-right">
 
+            <li class="active"><a href="about.html">About</a></li>
 
+          </ul>
 
+        </div><!-- /uncollapsed navbar -->
 
+      </div>
 
+    </nav>
 
+
 
+    <div id="content" class="container">
 
+      <ol class="breadcrumb">
 
+        <li><a href="/">All tasks</a></li>
 
+        <li>About this site</li>
 
+      </ol>
 
+
 
+      <div class="panel panel-default">
 
+        <div class="panel-heading"><h2>What's This For ?</h2></div>
 
+        <div class="panel-body">
 
+          <p>This is assignment 1 from the second week of the Coursera
 
+            <em>Responsive Web Design</em> MOOC by University of London &amp;
 
+            Goldsmiths, University of London</p>
 
+          <ul>
 
+            <li><a href="index.html">Main page is a TODO list</a></li>
 
+            <li><a href="task.html">Task page provides a sample task page</a></li>
 
+            <li><a href="about.html">This page provides site information</a></li>
 
+          </ul>
 
+          <p>Source is available from <a href="http://formation.osinet.fr:3000/fgm/coursera-responsive-design/src/w2">
 
+            http://formation.osinet.fr:3000/fgm/coursera-responsive-design/src/w2</a>
 
+          </p>
 
+        </div>
 
+      </div>
 
+
 
+      <div class="panel panel-default">
 
+        <div class="panel-heading"><h2>Clear responsive design with Bootstrap 3</h2></div>
 
+        <div class="panel-body">
 
+          <ul>
 
+            <li>The site makes consistent use of the Bootstrap 3
 
+              <a href="https://github.com/thomaspark/bootswatch/tree/gh-pages/superhero">Superhero</a> theme</li>
 
+            <li>On all pages, the navigation header collapses to a hamburger menu on XS displays</li>
 
+            <li>All pages - except home (all tasks) which does not need it - contain a breadcrumbs trail</li>
 
+            <li>The active top-level navigation element if flagged as such in the navbar:<ul>
 
+              <li>"All tasks" on the home page and single task page</li>
 
+              <li>"About" on this about page</li>
 
+              </ul>
 
+            </li>
 
+            <li>The <a href="/">All tasks</a> page sports 4 distinct
 
+              layouts for all 3 Bootstrap breakpoints</li>
 
+            <li>The <a href="task.html">single task</a> page sports 2 distinct
 
+              layouts, for XS screens and others</li>
 
+          </ul>
 
+        </div>
 
+      </div>
 
+
 
+      <div class="panel panel-default">
 
+        <div id="licensing" class="panel-heading"><h2 >Licensing information</h2></div>
 
+        <table class="table">
 
+          <thead>
 
+            <th scope="col">Licensed content</th>
 
+            <th scope="col">License</th>
 
+            <th scope="col">Granted by</th>
 
+          </thead>
 
+          <tbody>
 
+            <tr>
 
+              <td>Ratatouille recipe content
 
+              </td>
 
+              <td>Proprietary</td>
 
+              <td>
 
+                The
 
+                <a href="http://www.jamieoliver.com/recipes/vegetables-recipes/ratatouille/#vZWTQ6XueMbMV70p.97">Jamie Oliver site</a>
 
+                through its
 
+                <a href="http://www.jamieoliver.com/terms/">Terms and Conditions</a>,
 
+                section <em>Terms of use</em>, item 1  allowing a
 
+                <q cite="http://www.jamieoliver.com/terms/">personal, non-commercial use.</q>.
 
+              </td>
 
+            </tr>
 
+            <tr>
 
+              <td>Jamie Oliver photo</td>
 
+              <td><a href="https://creativecommons.org/licenses/by/2.0/deed.en">CC BY 2.0</a></td>
 
+              <td>License granted by Flicker member
 
+                <a href="https://www.flickr.com/people/28836461@N00">really short</a>
 
+                through
 
+                <a href="https://commons.wikimedia.org/wiki/File:Jamie_Oliver_retouched.jpg">Wikimedia Commons</a>
 
+              </td>
 
+            </tr>
 
+            <tr>
 
+              <td>Bootstrap</td>
 
+              <td><a href="https://github.com/twbs/bootstrap/blob/master/LICENSE">MIT license</a></td>
 
+              <td><a href="http://getbootstrap.com/getting-started/#license-faqs">Twitter</a></td>
 
+            </tr>
 
+            <tr>
 
+              <td>Superhero theme</td>
 
+              <td><a href="https://github.com/thomaspark/bootswatch/blob/gh-pages/LICENSE">MIT license</a></td>
 
+              <td><a href="https://github.com/thomaspark/bootswatch#user-content-copyright-and-license">Thomas Park</a></td>
 
+            </tr>
 
+          </tbody>
 
+        </table>
 
+      </div>
 
+    </div>
 
+
 
+    <!-- Footer -->
 
+    <nav id="footer" class="navbar navbar-default">
 
+      <ul class="nav navbar-nav">
 
+        <li><a href="about.html">About this site</a></li>
 
+        <li><a href="about.html#licensing">Licensing information</a></li>
 
+      </ul>
 
+    </nav>
 
+
 
+    <script src="js/jquery-2.2.1.js"></script>
 
+    <script src="js/bootstrap.js"></script>
 
+    <script src="js/behaviours.js"></script>
 
+  </body>
 
+</html>

File diff suppressed because it is too large
+ 10 - 0
css/bootstrap_sandstone.min.css


File diff suppressed because it is too large
+ 10 - 0
css/bootstrap_superhero.min.css


+ 15 - 0
css/styles.css
View File 

@@ -1,3 +1,18 @@
 
+.list-group-item .label {
 
+  float: right; }
 
 
+body {
 
+  display: flex;
 
+  min-height: 100vh;
 
+  flex-direction: column; }
 
+
 
+#content {
 
+  flex: 1; }
 
+
 
+#footer a {
 
+  margin-left: 2em; }
 
+
 
+#footer a:first-child {
 
+  margin-left: 0; }
 
 
 /*# sourceMappingURL=styles.css.map */

+ 2 - 2
css/styles.css.map
View File 

@@ -1,7 +1,7 @@
 
 {
 
 "version": 3,
 
-"mappings": "",
 
-"sources": [],
 
+"mappings": "AAEA,uBAAwB;EACtB,KAAK,EAAE,KAAK;;AAGd,IAAK;EACH,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,KAAK;EACjB,cAAc,EAAE,MAAM;;AAGxB,QAAS;EACP,IAAI,EAAE,CAAC;;AAGT,SAAU;EACR,WAAW,EAAE,GAAG;;AAGlB,qBAAsB;EACpB,WAAW,EAAE,CAAC",
 
+"sources": ["styles.scss"],
 
 "names": [],
 
 "file": "styles.css"
 
 }

+ 22 - 0
css/styles.scss
View File 

@@ -1 +1,23 @@
 
 $orange: #ff6633;
 
+
 
+.list-group-item .label {
 
+  float: right;
 
+}
 
+
 
+body {
 
+  display: flex;
 
+  min-height: 100vh;
 
+  flex-direction: column;
 
+}
 
+
 
+#content {
 
+  flex: 1;;
 
+}
 
+
 
+#footer a {
 
+  margin-left: 2em;
 
+}
 
+
 
+#footer a:first-child {
 
+  margin-left: 0;
 
+}

BIN
images/512px-Jamie_Oliver_retouched.jpg
View File


+ 68 - 57
index.html
View File 

@@ -2,13 +2,14 @@
 
 <html lang="en">
 
   <head>
 
     <meta charset="UTF-8">
 
-    <link rel="stylesheet" href="css/bootstrap.css" />
 
+    <link rel="stylesheet" href="css/bootstrap_superhero.min.css" />
 
     <link rel="stylesheet" href="css/styles.css" />
 
     <title>TODOs</title>
 
   </head>
 
 
   <body>
 
-    <nav class="navbar navbar-default">
 
+    <!-- Header -->
 
+    <nav id="header" class="navbar navbar-default">
 
       <div class="container-fluid">
 
         <!-- collapsed navbar -->
 
         <div class="navbar-header">
 
@@ -28,7 +29,7 @@
 
         <!-- 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>
 
+            <li class="active"><a href="index.html">All tasks</a></li>
 
             </ul>
 
           <ul class="nav navbar-nav navbar-right">
 
             <li><a href="about.html">About</a></li>
 
@@ -37,68 +38,78 @@
 
       </div>
 
     </nav>
 
 
-    <div class="container">
 
-        <ul class="list-group">
 
-          <li class="list-group-item list-group-item-heading">
 
-            <h1>List of tasks</h1>
 
-          </li>
 
+    <div id="content" class="container">
 
+      <ul class="list-group">
 
+        <li class="list-group-item list-group-item-heading">
 
+          <h1>All tasks</h1>
 
+        </li>
 
 
-          <li class="list-group-item list-group-item-success col-sm-6 col-md-4 col-lg-3">
 
-            <div class="input-group">
 
-              <span class="input-group-addon">
 
-                <input type="checkbox" checked aria-label="Task done">
 
-              </span>
 
-            <a class="form-control" href="task.html">Buy groceries</a>
 
-            </div>
 
-          </li>
 
+        <li class="list-group-item list-group-item-success col-sm-6 col-md-4 col-lg-3">
 
+          <div class="input-group">
 
+            <span class="input-group-addon">
 
+              <input type="checkbox" checked aria-label="Task done">
 
+            </span>
 
+          <a class="form-control" href="task.html">Buy groceries</a>
 
+          </div>
 
+        </li>
 
 
-          <li class="list-group-item list-group-item-success col-sm-6 col-md-4 col-lg-3">
 
-            <div class="input-group">
 
-              <span class="input-group-addon">
 
-                <input type="checkbox" checked aria-label="Task done">
 
-              </span>
 
-              <a class="form-control" href="task.html">Cook vegetables</a>
 
-            </div>
 
-          </li>
 
+        <li class="list-group-item list-group-item-success col-sm-6 col-md-4 col-lg-3">
 
+          <div class="input-group">
 
+            <span class="input-group-addon">
 
+              <input type="checkbox" checked aria-label="Task done">
 
+            </span>
 
+            <a class="form-control" href="task.html">Cook ratatouille
 
+              <span class="label label-primary"><em class="glyphicon glyphicon-share-alt"></em></span>
 
+            </a>
 
+          </div>
 
+        </li>
 
 
-          <li class="list-group-item list-group-item-success col-sm-6 col-md-4 col-lg-3">
 
-            <div class="input-group">
 
-              <span class="input-group-addon">
 
-                <input type="checkbox" checked aria-label="Task done">
 
-              </span>
 
-              <a class="form-control" href="task.html">Eat</a>
 
-            </div>
 
-          </li>
 
+        <li class="list-group-item list-group-item-success col-sm-6 col-md-4 col-lg-3">
 
+          <div class="input-group">
 
+            <span class="input-group-addon">
 
+              <input type="checkbox" checked aria-label="Task done">
 
+            </span>
 
+            <a class="form-control" href="task.html">Eat</a>
 
+          </div>
 
+        </li>
 
 
-          <li class="list-group-item list-group-item-warning col-sm-6 col-md-4 col-lg-3">
 
-            <div class="input-group">
 
-              <span class="input-group-addon">
 
-                <input type="checkbox" aria-label="Task not yet done">
 
-              </span>
 
-              <a class="form-control" href="task.html">Enjoy</a>
 
-            </div>
 
-          </li>
 
+        <li class="list-group-item list-group-item-warning col-sm-6 col-md-4 col-lg-3">
 
+          <div class="input-group">
 
+            <span class="input-group-addon">
 
+              <input type="checkbox" aria-label="Task not yet done">
 
+            </span>
 
+            <a class="form-control" href="task.html">Enjoy</a>
 
+          </div>
 
+        </li>
 
 
-          <li class="list-group-item list-group-item-warning col-sm-6 col-md-4 col-lg-3">
 
-            <div class="input-group">
 
-              <span class="input-group-addon">
 
-                <input type="checkbox" aria-label="Task not yet done">
 
-              </span>
 
-              <a class="form-control" href="task.html">Do the dishes</a>
 
-            </div>
 
-          </li>
 
+        <li class="list-group-item list-group-item-warning col-sm-6 col-md-4 col-lg-3">
 
+          <div class="input-group">
 
+            <span class="input-group-addon">
 
+              <input type="checkbox" aria-label="Task not yet done">
 
+            </span>
 
+            <a class="form-control" href="task.html">Do the dishes</a>
 
+          </div>
 
+        </li>
 
 
-          <li class="list-group-item list-group-item-warning col-sm-6 col-md-4 col-lg-3">
 
-            <div class="input-group">
 
-              <span class="input-group-addon">
 
-                <input type="checkbox" aria-label="Task not yet done">
 
-              </span>
 
-              <a class="form-control" href="task.html">Resume the MOOC</a>
 
-            </div>
 
-          </li>
 
-        </ul>
 
+        <li class="list-group-item list-group-item-warning col-sm-6 col-md-4 col-lg-3">
 
+          <div class="input-group">
 
+            <span class="input-group-addon">
 
+              <input type="checkbox" aria-label="Task not yet done">
 
+            </span>
 
+            <a class="form-control" href="task.html">Resume the MOOC</a>
 
+          </div>
 
+        </li>
 
+      </ul>
 
     </div>
 
 
+    <!-- Footer -->
 
+    <nav id="footer" class="navbar navbar-default">
 
+      <ul class="nav navbar-nav">
 
+        <li><a href="about.html">About this site</a></li>
 
+        <li><a href="about.html#licensing">Licensing information</a></li>
 
+      </ul>
 
+    </nav>
 
+
 
     <script src="js/jquery-2.2.1.js"></script>
 
     <script src="js/bootstrap.js"></script>
 
     <script src="js/behaviours.js"></script>

+ 144 - 0
task.html
View File 

@@ -0,0 +1,144 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="UTF-8">
 
+    <link rel="stylesheet" href="css/bootstrap_superhero.min.css" />
 
+    <link rel="stylesheet" href="css/styles.css" />
 
+    <title>Cook ratatouille</title>
 
+  </head>
 
+
 
+  <body>
 
+    <!-- Header -->
 
+    <nav id="header" 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">All 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>
 
+
 
+    <div id="content" class="container">
 
+      <ol class="breadcrumb">
 
+        <li><a href="/">List of tasks</a></li>
 
+        <li>Cook ratatouille</li>
 
+      </ol>
 
+
 
+      <!-- Page title -->
 
+      <div class="page-header">
 
+        <h1>Cook ratatouille<span class=""></span></h1>
 
+      </div>
 
+
 
+      <div class="row">
 
+        <!-- Task description -->
 
+        <div class="col-sm-9">
 
+
 
+          <p>Preheat the grill to high.</p>
 
+
 
+          <p>Cut the aubergines into 1cm slices, then place on a baking tray and
 
+            brush with 1 tablespoon of oil.</p>
 
+
 
+          <p>Grill for 10 to 12 minutes, till golden brown. Turn the slices
 
+            over, brush with another tablespoon of oil and grill for 5 to 8
 
+            minutes, until golden.</p>
 
+
 
+          <p>Peel and finely slice the onions widthways, peel and finely slice
 
+            the garlic, then deseed and slice the peppers and fennel. Cut the
 
+            courgettes into 1cm rounds.</p>
 
+
 
+          <p>In a large frying pan, heat the remaining oil over a medium heat.
 
+            Add the onions and cook for 5 minutes, until they begin to soften
 
+            and turn golden.</p>
 
+
 
+          <p>Add the garlic and cook for a few minutes, then add the peppers,
 
+            fennel and courgettes, and cook for 5 to 8 minutes until they begin
 
+            to soften.</p>
 
+
 
+          <p>Use a knife to score a cross into the base of each tomato. Put them
 
+            in a bowl, cover with boiling water and leave for a minute. Remove
 
+            with a slotted spoon and peel the skin.</p>
 
+
 
+          <p>Cut the tomatoes in half and remove the seeds with a spoon. Roughly
 
+            chop the tomatoes and add to the pan, along with the aubergine and
 
+            herbes de Provence.</p>
 
+
 
+          <p>Lower the heat, cover the pan with a tight lid and simmer gently
 
+            for 20 minutes or so, until the vegetables are cooked through.
 
+            Season to taste.</p>
 
+
 
+          <p>To make the salsa verde, remove any tough herb stalks and peel the
 
+            garlic, then use a pestle and mortar to grind the herbs and garlic
 
+            to a paste, adding a little sea salt to help the process (or blitz
 
+            in a food processor).</p>
 
+
 
+          <p>Crush in the capers. Stir in the oil, finely grate in the lemon
 
+            zest and squeeze in the juice, adding more oil or juice if
 
+            necessary, to create a flavour and texture you like. Season to
 
+            taste.</p>
 
+
 
+          <p>Serve the ratatouille in bowls with a spoonful of salsa verde.</p>
 
+
 
+          <p>Read more at <a href="http://www.jamieoliver.com/recipes/vegetables-recipes/ratatouille/#bAEduEzEa72Dx1bi.99">
 
+            http://www.jamieoliver.com/recipes/vegetables-recipes/ratatouille/#bAEduEzEa72Dx1bi.99
 
+            </a>
 
+          </p>
 
+        </div>
 
+
 
+        <!-- User -->
 
+        <div class="col-sm-3">
 
+          <ul class="list-group">
 
+            <li class="list-group-item list-group-item-warning">
 
+              <div class="input-group">
 
+              <span class="input-group-addon">
 
+                <input type="checkbox" aria-label="Task not yet completed">
 
+              </span>
 
+                <a class="form-control" href="task.html">Done?</a>
 
+              </div>
 
+            </li>
 
+          </ul>
 
+          <div class="thumbnail">
 
+            <div class="caption">
 
+              <p>Submitted by:</p>
 
+              <p><a href="https://en.wikipedia.org/wiki/Jamie_Oliver">Jamie Oliver</a></p>
 
+            </div>
 
+            <img src="images/512px-Jamie_Oliver_retouched.jpg" alt="Jamie Oliver" />
 
+
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+
 
+    <!-- Footer -->
 
+    <nav id="footer" class="navbar navbar-default">
 
+      <ul class="nav navbar-nav">
 
+        <li><a href="about.html">About this site</a></li>
 
+        <li><a href="about.html#licensing">Licensing information</a></li>
 
+      </ul>
 
+    </nav>
 
+    
+    <script src="js/jquery-2.2.1.js"></script>
 
+    <script src="js/bootstrap.js"></script>
 
+    <script src="js/behaviours.js"></script>
 
+  </body>
 
+</html>
 
+

Some files were not shown because too many files changed in this diff