<div class = "headofpage">
  <h1>Lisa's Interests</h1>
  <p>There are <em>lots</em> of things of interest, but what of the things are the things that really interest <b><em>me</em></b>?</p>
</div>

<div class = boxdiv>
  <h3>What is this page?</h3>
    The purpose of this page is to share with you my interests. The next section describes, in a table, the animals places and foods that I like. 
    When you have read the table, you can read on to find out how I combine my favourite things. </br ></br>There are all sorts out there, but these are the ones I like the most:
</div>

<div class = paddediv>
  <center>
  <table width = 600 class = center>
    <tr>
      <th>Animals</th>
      <th>Places</th>
      <th>Foods</th>
    </tr>
    <tr>
      <td>Llamas
        <ul>
          <li class="llamasLi">Llamas</li>
          <li class="llamasLi">Alpacas</li>
          <li class="llamasLi">Camels</li>
        </ul>
      </td>
      <td>Mayfield Farm</td>
      <td>Chocolate Cake <br />
       <img src="https://cdn.shopify.com/s/files/1/0642/6881/products/BlackoutCakeSlice_1024x1024_b4200389-6bd0-4292-a222-fac7840612c4.jpg?v=1563561824" width="42%" id= "foodIMGs"></td>
    </tr>
    <tr>
      <td>Rabbits</td>
      <td>The moon</td>
      <td>Peas <br />
      <img src="https://cdn.shopify.com/s/files/1/0156/0137/products/Dwarf_Pea_1200x960_d41dc70a-51b0-4520-b9dc-2eee9fbdede9.jpg?v=1522848373" width="42%" id= "foodIMGs"> </td>
    </tr>
    <tr>
      <td>Elephants</td>
      <td>The seaside</td>
      <td>Coffee <br />
       <img src="https://www.precisionnutrition.com/wp-content/uploads/2010/01/cup-of-black-coffee1.jpg" width="42%" id= "foodIMGs"></td>
    </tr>
</center> </table>
</div>

<div class = boxdiv >
  <h3>So which is really my favourite animal?</h3>
  Well, as you can imagine, although I have a few favourite animals, one really tops the rest! Here are my favourites, in order:
  <ol>
    <li>Llama-style animals
      <ul>
        <li>Llamas</li>
        <li>Alpacas</li>
        <li>Camels</li>
      </ul>
    </li>
    <li>Rabbits</li>
    <li>Elephants</li>
  </ol>
</div>

<div class = boxdiv2>
  <h3>Favourite Combination:</h3>
  My favourite place is the 
  <a href="https://www.mayfieldanimalpark.co.uk/" target="blank_">Mayfield Alpaca Farm</a>

  <p> <center><img src="https://irp-cdn.multiscreensite.com/d33a0d85/dms3rep/multi/desktop/2434bd63-ea27-48ab-b9b2-45a216ee0370+%281%29.JPG" alt="alpacas" width="42%"> </center></p>
  <p>Here are some reasons I think it's great:
    <ul>
      <li>They really look after their alpacas</li>
      <li>The caf&eacute;  is great</li>
      <li>You can feed the alpacas!</li>
    </ul>
  </p>
  <p>
  So, it combines my favourite things: chocolate cake and coffee, a cuddle with an alpaca and the great outdoors!
  </p>
</div>

<div class=boxdiv3>
  <p><center><span class="redText">And that's about it &#128526. I do hope you enjoyed my page, thanks for coming and please come again!</span></center></p>
  <center> <p style="font-size:100px">&#128540;</p> </center>
</div>

body {
  /*Background color for entire page*/
  background-color: #FFFFF0;
}
.headofpage {
  /*Styling the top "header" for my page*/
  border-top-style: outset;
  border-bottom-style: outset;
  border-color: teal;
  border-width: 5px;
  padding-left: 5px;
  font-family: "Goudy Bookletter 1911", sans-serif;
  text-align: center;
}
.boxdiv {
  /*A blue box with rounded corners div*/
  background-color: #66CDAA;
  border: solid;
  border-width: 1px;
  border-color: #66CDAA;
  margin: 10px 2px 15px 2px;
  padding: 0px 17px 15px 17px;
  border-radius: 20px;
  font-family: Verdana, Geneva, sans-serif;
}
.boxdiv2 {
  /*A pink box with rounded corners div*/
  background-color: #DDA0DD;
  border: solid;
  border-width: 1px;
  border-color: #DDA0DD;
  margin: 10px 2px 15px 2px;
  padding: 0px 17px 15px 17px;
  border-radius: 20px;
  font-family: Verdana, Geneva, sans-serif;
}
.redText{
  font-family: Verdana, Geneva, sans-serif;
  font-size: 24px;
}
.boxdiv3 {
  /*A blue box with rounded corners div*/
  background-color: #66CDAA;
  border: solid;
  border-width: 1px;
  border-color: #66CDAA;
  margin: 10px 2px 15px 2px;
  padding: 0px 17px 15px 17px;
  border-radius: 20px;

}
      
    }
  table.center {
    margin-left:auto; 
    margin-right:auto;
  }
}
h1{
  text-align: center;
  color: teal;
}
/*Let's make the table nice */
table, th, td {
  border: 2px solid black;
}
table {
  width: 60%;
}

th {
  height: 50px;
  text-align: center;
  padding: 5px;
  background-color: #1E90FF;
  color: Black;
}
td {
  height: 50px;
  vertical-align: center;
  text-align: center;
  padding: 10px; 
}

li{
  color: indigo;
}
.llamasLi{
  color: indigo
}

#foodIMGs{
  float: center;
}