task.html 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <link rel="stylesheet" href="css/bootstrap_superhero.min.css" />
  6. <link rel="stylesheet" href="css/styles.css" />
  7. <title>Cook ratatouille</title>
  8. </head>
  9. <body>
  10. <!-- Header -->
  11. <nav id="header" class="navbar navbar-default">
  12. <div class="container-fluid">
  13. <!-- collapsed navbar -->
  14. <div class="navbar-header">
  15. <a class="navbar-brand" href="/">Simple TODOs</a>
  16. <button type="button"
  17. class="navbar-toggle collapsed"
  18. data-toggle="collapse"
  19. data-target="#main_navbar"
  20. aria-expanded="false">
  21. <span class="sr-only">Toggle navigation</span>
  22. <span class="icon-bar"></span>
  23. <span class="icon-bar"></span>
  24. <span class="icon-bar"></span>
  25. </button>
  26. </div><!-- /collapsed navbar -->
  27. <!-- uncollapsed navbar -->
  28. <div id="main_navbar" class="collapse navbar-collapse">
  29. <ul class="nav navbar-nav">
  30. <li class="active"><a href="index.html">All tasks</a></li>
  31. </ul>
  32. <ul class="nav navbar-nav navbar-right">
  33. <li><a href="about.html">About</a></li>
  34. </ul>
  35. </div><!-- /uncollapsed navbar -->
  36. </div>
  37. </nav>
  38. <div id="content" class="container">
  39. <ol class="breadcrumb">
  40. <li><a href="/">List of tasks</a></li>
  41. <li>Cook ratatouille</li>
  42. </ol>
  43. <!-- Page title -->
  44. <div class="page-header">
  45. <h1>Cook ratatouille<span class=""></span></h1>
  46. </div>
  47. <div class="row">
  48. <!-- Task description -->
  49. <div class="col-sm-9">
  50. <p>Preheat the grill to high.</p>
  51. <p>Cut the aubergines into 1cm slices, then place on a baking tray and
  52. brush with 1 tablespoon of oil.</p>
  53. <p>Grill for 10 to 12 minutes, till golden brown. Turn the slices
  54. over, brush with another tablespoon of oil and grill for 5 to 8
  55. minutes, until golden.</p>
  56. <p>Peel and finely slice the onions widthways, peel and finely slice
  57. the garlic, then deseed and slice the peppers and fennel. Cut the
  58. courgettes into 1cm rounds.</p>
  59. <p>In a large frying pan, heat the remaining oil over a medium heat.
  60. Add the onions and cook for 5 minutes, until they begin to soften
  61. and turn golden.</p>
  62. <p>Add the garlic and cook for a few minutes, then add the peppers,
  63. fennel and courgettes, and cook for 5 to 8 minutes until they begin
  64. to soften.</p>
  65. <p>Use a knife to score a cross into the base of each tomato. Put them
  66. in a bowl, cover with boiling water and leave for a minute. Remove
  67. with a slotted spoon and peel the skin.</p>
  68. <p>Cut the tomatoes in half and remove the seeds with a spoon. Roughly
  69. chop the tomatoes and add to the pan, along with the aubergine and
  70. herbes de Provence.</p>
  71. <p>Lower the heat, cover the pan with a tight lid and simmer gently
  72. for 20 minutes or so, until the vegetables are cooked through.
  73. Season to taste.</p>
  74. <p>To make the salsa verde, remove any tough herb stalks and peel the
  75. garlic, then use a pestle and mortar to grind the herbs and garlic
  76. to a paste, adding a little sea salt to help the process (or blitz
  77. in a food processor).</p>
  78. <p>Crush in the capers. Stir in the oil, finely grate in the lemon
  79. zest and squeeze in the juice, adding more oil or juice if
  80. necessary, to create a flavour and texture you like. Season to
  81. taste.</p>
  82. <p>Serve the ratatouille in bowls with a spoonful of salsa verde.</p>
  83. <p>Read more at <a href="http://www.jamieoliver.com/recipes/vegetables-recipes/ratatouille/#bAEduEzEa72Dx1bi.99">
  84. http://www.jamieoliver.com/recipes/vegetables-recipes/ratatouille/#bAEduEzEa72Dx1bi.99
  85. </a>
  86. </p>
  87. </div>
  88. <!-- User -->
  89. <div class="col-sm-3">
  90. <ul class="list-group">
  91. <li class="list-group-item list-group-item-warning">
  92. <div class="input-group">
  93. <span class="input-group-addon">
  94. <input type="checkbox" aria-label="Task not yet completed">
  95. </span>
  96. <a class="form-control" href="task.html">Done?</a>
  97. </div>
  98. </li>
  99. </ul>
  100. <div class="thumbnail">
  101. <div class="caption">
  102. <p>Submitted by:</p>
  103. <p><a href="https://en.wikipedia.org/wiki/Jamie_Oliver">Jamie Oliver</a></p>
  104. </div>
  105. <img src="images/512px-Jamie_Oliver_retouched.jpg" alt="Jamie Oliver" />
  106. </div>
  107. </div>
  108. </div>
  109. </div>
  110. <!-- Footer -->
  111. <nav id="footer" class="navbar navbar-default">
  112. <ul class="nav navbar-nav">
  113. <li><a href="about.html">About this site</a></li>
  114. <li><a href="about.html#licensing">Licensing information</a></li>
  115. </ul>
  116. </nav>
  117. <script src="js/jquery-2.2.1.js"></script>
  118. <script src="js/bootstrap.js"></script>
  119. <script src="js/behaviours.js"></script>
  120. </body>
  121. </html>