html
<style>
  body {
    font-family: Arial, sans-serif;
    background-image: linear-gradient(to bottom, #f2f2f2, #000000);
    background-size: 200px 200px;
    background-position: 0 0;
  }
  .h1 {
    color: #ff00ff;
    border: 4px solid black;
  }
  .h2 {
    color: #00ff00;
    border: 4px solid black;
  }
  .container {
    width: 800px;
    margin: 0 auto;
    padding: 20px;
    background: #ffffff;
  }
  .recipe {
    border: 4px solid black;
    background: #000000;
    color: #ffffff;
  }
  .style {
    color: #ff00ff;
  }
  .description {
    font-size: 16px;
    color: #008000;
  }
  .link {
    background: #000000;
    color: #ffffff;
    border: 4px solid #000000;
  }
  .image {
    width: 200px;
    height: 200px;
    background: #000000;
  }
  .image:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  }
  .link:hover {
    background: #000000;
  }
</style>

<div class="container">
  <h1>Ale Recipes</h1>
  <h2>Sub-Styles</h2>
  <div class="style">
    <h3>Style 1: Saison</h3>
    <p class="description">A crisp, refreshing beer for hot summer days.</p>
    <div class="recipe">
      <p class="description">Ingredients: 2 oz yeast, 1 lb pilsner malt, 1 lb wheat malt, 1 lb rice flake.</p>
      <a class="link" href="/projects/beer-recipes/ale-recipes/saison">Read More</a>
    </div>
  </div>
  <div class="style">
    <h3>Style 2: Gueuze</h3>
    <p class="description">A funky, tart beer for adventurous palates.</p>
    <div class="recipe">
      <p class="description">Ingredients: 2 oz yeast, 1 lb pilsner malt, 1 lb wheat malt, 1 lb champagne yeast.</p>
      <a class="link" href="/projects/beer-recipes/ale-recipes/gueuze">Read More</a>
    </div>
  </div>
  <h3>Explore Other Styles:</h3>
  <a class="link" href="/projects/beer-recipes/ale-recipes/lambic-recipes">Lambics</a>
  <a class="link" href="/projects/beer-recipes/ale-recipes/biere-de-rouge">Biere de Rouge</a>
  <a class="link" href="/projects/beer-recipes/ale-recipes/koelsch">Kölsch</a>
</div>