Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                 <!DOCTYPE html>
<html>
<head>
<title>Technical Info Page</title>

</head>
  
<style>

nav {
      display: inline-block;
      position: fixed;
}

ul.navbar {
    list-style-type: none;
    margin: 0;
    padding: 20px;
    width: 20%;
    top: 0;
    left:  0;
    max-width: 420px;
    height: 100%;
    position: fixed;
    overflow: auto;
    background-color: lightgrey;
    font-family: Arial, Helvetica, sans-serif;
    display: inline-block;
}
li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}
main.maindoc {
    margin-left:20%;
    padding:50px;
  font-family: Arial, Helvetica, sans-serif;
  height: 100%;
}

 @media screen and (max-height: 450px) {
   #navbar  {padding-top: 15px;}
   #navbar  a {font-size: 18px;}
  }

</style>

<section id="JavaScript_and_Java">

<!--lol, none -->

</section>

<div> <!-- Nav Bar Section --> 

<nav id="navbar">

<ul class="navbar">
<li><header><strong>Sticky Date Pudding</strong></header></li>
<li><a class="nav-link" href="#Sticky_Date_Pudding_Recipe">Sticky Date Pudding Recipe</a></li>
<li><a class="nav-link" href="#STICKY_DATE_PUDDING_-_CHILDHOOD_FAVOURITE">STICKY DATE PUDDING - CHILDHOOD FAVOURITE</a></li>
<li><a class="nav-link" href="#DATES_ARE_KEY">DATES ARE KEY</a></li>
<li><a class="nav-link" href="#ONE_FOR_EVERYONE_-_OR_A_BIG_ONE_TO_SHARE">ONE FOR EVERYONE - OR A BIG ONE TO SHARE</a></li>
<li><a class="nav-link" href="#SECRET_TIP:_DOUSE_HOT_PUDDING_WITH_SAUCE">SECRET TIP: DOUSE HOT PUDDING WITH SAUCE</a></li>
<li><a class="nav-link" href="#Ingredients">Ingredients</a></li>
<li><a class="nav-link" href="#Butterscotch_Sauce_Ingredients">Butterscotch Sauce Ingredients</a></li>
<li><a class="nav-link" href="#Serving">Serving</a></li>
<li><a class="nav-link" href="#Instructions">Instructions</a></li>
<li><a class="nav-link" href="#Mashed_Dates">Mashed Dates</a></li>
<li><a class="nav-link" href="#Batter">Batter</a></li>
<li><a class="nav-link" href="#One_Pudding">One Pudding</a></li>
<li><a class="nav-link" href="#Baking_Individual_Puddings">Baking Individual Puddings</a></li>
<li><a class="nav-link" href="#Butterscotch_Sauce">Butterscotch Sauce</a></li>
<li><a class="nav-link" href="#Recipe_Notes">Recipe Notes</a></li>
<li><a class="nav-link" href="#General_Notes">General Notes</a></li>
</ul>

</nav>

</div>

<main id="main-doc" class="maindoc"> <!-- Main Text Section --> 

<section id="Sticky_Date_Pudding_Recipe" class="main-section">

<header>

<h1>Sticky Date Pudding Recipe</h1>

</header>

<code></code> <!-- obligatory code element -->

<p>Recipe taken from this website: <a href="https://www.recipetineats.com/sticky-toffee-pudding/">https://www.recipetineats.com/sticky-toffee-pudding/</a>I take absolutely no credit whatsoever for this recipie, all rights are to the original websites owner and author and I have used this text only because the format suited my purpose, and I like this recipie for sticky date pudding.</p>

<hr>

<p>Sticky Date Pudding – you’re my favourite and always will be. Also known as Sticky Toffee Pudding, the simple trick that makes all the difference is to pour some Butterscotch Sauce over the warm cake when it comes out of the oven. </p>
<p>It makes it ultra moist and gives it that intense dark colour. Plus, more sauce to serve, of course!</p>

</section>

<section class="main-section"  id="STICKY_DATE_PUDDING_-_CHILDHOOD_FAVOURITE">

<header><h2>STICKY DATE PUDDING - CHILDHOOD FAVOURITE</h2></header>

<code></code> <!-- obligatory code element -->

<p>Who else has childhood memories of Sara Lee frozen Sticky Date Pudding?? It is the only store bought dessert my mother ever bought – and only on special occasions. </p>
<p>And as much as I loved it, my one gripe was always that there was not enough Butterscotch Sauce to go around. Never fear. You won’t have that problem with this recipe! </p>
<p>I know this recipe is called Sticky Toffee Pudding by most of the world – other than Australia and New Zealand it seems. And given that dates are the key ingredient in the pudding, I would say we’ve got it right for this one!!</p>

</section>

<section class="main-section" id="DATES_ARE_KEY">

<header>

<h2>DATES ARE KEY</h2>

</header>

<code></code> <!-- obligatory code element -->

<p>I am pretty sure this is the only recipe I use dates for. And I realise that the photo above of the date sludge may look thoroughly unappetising to some people, but rest assured even if you’re a date hater that you can’t taste it in the end result. The dates contribute to the stickiness and moistness of the sponge, as well as giving it colour.</p> 
<p>Don’t ask me for a sub! (Oh wait, you can. Prunes. Pretty much the same thing!) </p>

</section>

<section id="ONE_FOR_EVERYONE_-_OR_A_BIG_ONE_TO_SHARE"class="main-section">

<header><h2>ONE FOR EVERYONE - OR A BIG ONE TO SHARE</h2></header>

<code></code> <!-- obligatory code element -->

<p>I think it’s more common here in Australia to make one pudding cake that is then cut to serve. Sara Lee frozen dessert style. Whereas in the UK it seems more common to make individual puddings. I might be wrong here. But either way will work fine, and I’ve provided cook times and directions for both.</p>

</section>

<section  id="SECRET_TIP:_DOUSE_HOT_PUDDING_WITH_SAUCE"class="main-section">

<header><h2>SECRET TIP: DOUSE HOT PUDDING WITH SAUCE</h2></header>

<code></code> <!-- obligatory code element -->

<p>If you’ve ever made one of those cakes that you douse with syrup, you’ll know exactly what you’re in for with this trick!
It goes like this – as soon as the pudding comes out of the oven, poke lots of holes using a skewer (I find this strangely satisfying but let’s not read too much into this), then pour over some hot butterscotch sauce. This makes the pudding intensely moist as well as staining the sponge to give it that signature dark brown colour, rather than being a pale golden colour which many sticky toffee pudding recipes are. It also means this pudding keeps for days and days in the fridge and once reheated, it’s just like it’s fresh out of the oven. The only question is – will you serve yours with cream or ice cream? I’m an ice cream gal, all the way!! – Nagi x </p>

</section>

<section class="main-section"  id="Ingredients">

<header>

<h2 id="Ingredients">Ingredients</h2>

</header>
  
<code></code> <!-- obligatory code element -->

<h3>Sticky Date Pudding</h3>

<ul>
    <li>280g / 9oz pitted dates , roughly chopped (Note 1)</li>
    <li>1 tsp baking soda / bi carb soda</li>
    <li>1 cup / 250 ml boiling water</li>
    <li>40 g / 1/4 cup brown sugar , loosely packed</li>
    <li>80 g / 6 tbsp unsalted butter , softened</li>
    <li>2 eggs , at room temperature</li>
    <li>1 1/4 cups / 185 g plain flour (all purpose)</li>
    <li>1 1/2 tsp baking powder</li>
</ul>

</section>

<section  id="Butterscotch_Sauce_Ingredients" class="main-section">

<header>

<h3>Butterscotch Sauce Ingredients</h3>

</header>

<ul>
    <li>200 g/ 1 1/4 cups brown sugar , loosely packed</li>
    <li>375 ml ml / 1 1/2 cups thickened cream (heavy cream)</li>
    <li>1/2 tsp vanilla extract</li>
    <li>70 g / 5 tbsp unsalted butter</li>
</ul>

</section>

<section id="Serving" class="main-section">

<header>

<h3>Serving</h3>

</header>

<ul>
    <li>Ice cream or dolloping cream</li>
</ul>

</section>

<section class="main-section"  id="Instructions">

<header>

<h3>Instructions</h3>

</header>

<ul>
    <li>Preheat oven to 180C/350F (standard) or 160C/320F (fan/convection).</li>
    <li>Grease 7 pudding moulds (Note 2) with butter or grease and line a 20 cm / 8" square cake pan with overhang.</li>
</ul>

</section>

<section id="Mashed_Dates" class="main-section">

<header>

<h3>Mashed Dates</h3>

</header>

<ul>
    <li>Place dates in a bowl, sprinkle over baking soda. Pour over boiling water. Stand 10 minutes, then mash well with a potato masher (or fork) until it resembles sloppy porridge (see video for texture / thickness). (Note 3)</li>
</ul>

</section>

<section id="Batter" class="main-section">

<header>

<h3>Batter</h3>

</header>

<ul>
    <li>Place butter and sugar in a bowl. Beat until combined and smooth.</li>
    <li>Add eggs, beat until incorporated.</li>
    <li>Add flour then sprinkle baking powder across the surface. Mix until flour is incorporated.</li>
    <li>Add dates, mix quickly until dates are well incorporated into the batter. (Note 2) Follow directions to make one pudding or individual ones.</li>
</ul>

</section>

<section  id="One_Pudding" class="main-section">

<header>

<h3>One Pudding</h3>

</header>

<ul>
    <li>Pour into cake pan, smooth surface. Bake 35 minutes or until skewer inserted into the centre comes out clean.</li>
    <li>While still hot, poke about 40 holes all over the surface using a skewer. Pour over 1/2 cup Butterscotch Sauce, leave to soak for 10 minutes.</li>
    <li>Use overhang to lift cake out. Cut, serve warm with remaining warm sauce and ice cream or cream.</li>
</ul>

</section>

<section class="main-section"  id="Baking_Individual_Puddings">

<header>

<h3>Baking Individual Puddings</h3>

</header>

<ul>
    <li>Pour batter into pudding moulds, only fill 2/3 of the way up.</li>
    <li>ake for 25 minutes, or until skewer inserted into the centre comes out clean.</li>
    <li>While still hot, poke about 10 holes on the surface of the pudding. Spoon over 1 tbsp of Butterscotch Sauce per Pudding. Leave to soak 10 minutes.</li>
    <li>Turn pudding moulds upside down on serving plate. Serve warm with remaining warm sauce and ice cream or cream.</li>
</ul>

</section>

<section id="Butterscotch_Sauce" class="main-section">

<header>

<h3>Butterscotch Sauce</h3>

</header>

<ul>
    <li>Place ingredients in a saucepan over medium heat. Once butter is melted, stir, then bring to simmer.</li>
    <li>Simmer for 2 minutes, stirring once, then remove from heat. Serve warm.</li>
</ul>

</section>

<section id="Recipe_Notes" class="main-section">

<header>

<h3>Recipe Notes</h3>

</header>

<ol>
<li>Dates sub: Prunes can also be used but change as follows: Use 1 1/4 cups boiling water, simmer with prunes in saucepan for 10 minutes. Remove form heat, stir through bicarb, cool then mash per recipe. Proceed with recipe.</li>
<li>Moulds: My pudding moulds are 210ml 5 x 8 cm. Any size is fine, just fill 2/3 of the way up - need a bit of room for the sauce to pool around the edges. Large muffin tins will also work. If using standard muffin tins, just pour the sauce over a bit at a time, giving it time to soak in. Makes 12 standard muffins - they aren't as tall as pictured.</li>
<li>This gives the pudding its dark brown colour. Unless you mash well and mix well into the batter, the cake ends up a pale golden colour with splotches of dates.</li>
<li>Make Ahead: Exceptional for reheating because it's so moist. Poke the holes and soak with sauce, reserve remaining sauce for serving. Best way to reheat is in the microwave because it keeps the pudding moist.</li>
<li>Nutrition per serving, assuming 9 servings and that all Sauce is consumed, which it may not be. I like to ensure there is enough Sauce because running out is a disaster. Nutrition for 7 individual puddings is 703 calories per serving. They are very generous sizes with loads of sauce (because the sauce recipe makes enough for 9 servings for the pudding cake), so when I scale the Sauce down by 20%, it reduces to 606 calories. Calories per serve for lightened up sauce (see Less Sweet Sauce above) is 477 calories.</li>
</ol>

</section>

<section  id="General_Notes" class="main-section">

<header>
<h3>General Notes</h3>
</header>

<ul>
<li>This recipe probably makes more sauce than you need - but it's better to err on the side of caution!</li>
<li>An electric beater will make your life easier but a whisk + wooden spoon will work fine too without exerting yourself too much. Just make sure your butter is well softened and easy to mix by hand.</li>
<li>Poking holes into the pudding and pouring the sauce over to soak stains the pudding sponge a darker colour as well as adding more moisture into the pudding.</li>
<li>Sticky Date Pudding is indulgent and very sweet, from both the dates + sugar in sauce. If you don't have a sweet tooth, this dessert is not for you! To reduce sweetness, you can skimp on the sauce. Or make a lighter, less sweet sauce as follows: Use half the sugar, butter and cream, make per recipe. When it simmers, add 1 cup low fat milk, then 2 tsp cornflour/cornstarch dissolved in 1 tbsp water. Simmer to thicken. </li>
</ul>

</section>
</main>
</html>
              
            
!

CSS

              
                
              
            
!

JS

              
                // !! IMPORTANT README:

// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place. 

/***********
INSTRUCTIONS:
  - Select the project you would 
    like to complete from the dropdown 
    menu.
  - Click the "RUN TESTS" button to
    run the tests against the blank 
    pen.
  - Click the "TESTS" button to see 
    the individual test cases. 
    (should all be failing at first)
  - Start coding! As you fulfill each
    test case, you will see them go   
    from red to green.
  - As you start to build out your 
    project, when tests are failing, 
    you should get helpful errors 
    along the way!
    ************/

// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!

// Once you have read the above messages, you can delete all comments. 

              
            
!
999px

Console