Anzac Biscuits

Simple HTML and CSS demonstration

by Alvan

HTML

<img class="image" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/95/ANZAC_biscuits.JPG/320px-ANZAC_biscuits.JPG" />

<div class="description">
  <h2> ANZAC Biscuits </h2>
  ANZAC Biscuits were made by the wives of Australian and New Zealand service men durnig the first world war as a sweet treet that could be made at home and shipped overseas.
</div>
<hr/>
<div class="ingredients">
  <h2>Ingredients</h2>
  <ul>
    <li> 1 cup each of rolled oats, sugar and coconut </li>
    <li> 1 tablespoon syrup</li>
    <li> 3/4 cup flour </li>
    <li> 2 tablespoons butter</li>
    <li>1 teaspoon bicarbonate of soda (dissolved in 2 tablespoons boiling water)</li>
  </ul>
</div>
<h2>Method</h2>
<ol>
  <li>Melt butter.</li>
  <li>Add syrup to dissolved soda and water. Combine with melted butter.</li>
  <li>Mix dry ingredients and stir in liquid.</li>
  <li>Place small balls on to buttered tray and bake in moderate oven.</li>
  <li>Lift out carefully with a knife as they are soft till cold.</li>
  <li>Biscuits will harden when cool. </li>
</ol>

<h2>Reference</h2>
Original recipe from the <a href="http://www.awm.gov.au/encyclopedia/anzac/biscuit/recipe/">Australian War Memorial</a>.

<p id="license">Image by pfctdayelise licensed under the Creative Commons Attribution-Share Alike 2.5 Generic, 2.0 Generic and 1.0 Generic license </p>

CSS

.image {
  width: 20%;
  float: left;
}

.description {
  float: left;
  width: 75%;
  padding-left: 5%;
}

.ingredients {
  padding-top: 5px;
  clear: both;
}

ul,
ol {
  background-color: lightgrey;
}