<s>[INST] Hi! I would like you to help me with developing my HTML website based around cooking. I want to have four pages in total: 1. page would be the home page with hyperlinks to all other pages and information about what is the website for. 2. page would be filled with my favourite recipes. Third page would contain my favourite cooking websites / sources / chefs. Please make it look good and modern! [/INST] // Here is the home page. You can store it in file index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Cooking Website</title>
    <style>
      #menu {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        background-color: #8bc34a;
        padding: 10px;
      }
      #menu a {
        padding: 10px;
        text-decoration: none;
        color: #333;
      }
      #menu a:hover {
        background-color: #689f38;
      }
    </style>
  </head>
  <body>
    <div id="menu">
      <a href="html/favourite-recipes.html">Favourite Recipes</a>
      <a href="html/favourite-cooking-websites.html">Favourite Cooking Websites</a>
    </div>
    <div id="main">
        <h1>My Cooking Website</h1>
    </div>
  </body>
</html></s>\ <s>[INST] great! now for my favorite recipes page [/INST] <!DOCTYPE html>
<html>
  <head>
    <title>Cooking Website - Favourite Recipes</title>
    <style>
      #menu {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        background-color: #8bc34a;
        padding: 10px;
      }
      #menu a {
        padding: 10px;
        text-decoration: none;
        color: #333;
      }
      #menu a:hover {
        background-color: #689f38;
      }
    </style>
  </head>
  <body>
    <div id="menu">
      <a href="#">Favourite Recipes</a>
      <a href="html/favourite-cooking-websites.html">Favourite Cooking Websites</a>
    </div>
    <div id="main">
        <h1>Favourite Recipes</h1>
    </div>
  </body>
</html></s>