<script src="<?= $BASENAME ?>/lib/global/js/prettify/lang-css.js" type="text/javascript"></script>
<p>Below is one possible solution to this problem.</p>
<header>
<h3>Step 1</h3>
<div class="workinglink"><a href="solution/journal_ex1.html">working example</a></div>
</header>
<pre class="prettyprint lang-html linenums"><?= escape(load("solution/journal_ex1.html", 20, 61)) ?></pre>
<pre class="prettyprint lang-css linenums"><?= escape(load("solution/journal_ex1.css", 7)) ?></pre>
<header>
<h3>Step 2</h3>
<div class="workinglink"><a href="solution/journal_ex2.html">working example</a></div>
</header>
<pre class="prettyprint lang-css linenums"><?= escape(load("solution/journal_ex2.css", 7)) ?></pre>
<header>
<h3>Step 3</h3>
<div class="workinglink"><a href="solution/journal_ex3.html">working example</a></div>
</header>
<pre class="prettyprint lang-css linenums"><?= escape(load("solution/journal_ex3.css", 7)) ?></pre>
<header>
<h3>Step 4</h3>
<div class="workinglink"><a href="solution/journal_ex4.html">working example</a></div>
</header>
<pre class="prettyprint lang-css linenums"><?= escape(load("solution/journal_ex4.css", 7)) ?></pre>
<header>
<h3>Step 5</h3>
<div class="workinglink"><a href="solution/journal_ex5.html">working example</a></div>
</header>
<pre class="prettyprint lang-css linenums"><?= escape(load("solution/journal_ex5.css", 7)) ?></pre>
<header>
<h3>Step 6</h3>
<div class="workinglink"><a href="solution/journal_ex6.html">working example</a></div>
</header>
<pre class="prettyprint lang-html linenums"><?= escape(load("solution/journal_ex6.html")) ?></pre>
<pre class="prettyprint lang-css linenums"><?= escape(load("solution/journal_ex6.css")) ?></pre>