footer.html

<footer style="margin-top: 60px; font-size: 0.8em; padding: 10px; background-color: rgba(0,0,0,0.08); display: table; width: 98%">

  <a href="https://www.amazon.com/Hands-Data-Visualization-Storytelling-Spreadsheets/dp/1492086002/" style="width: 80px; margin-left: auto; margin-right: auto;"  class="db dtc-ns">
    <img src="images/0-preface/cover-400wide.jpg" alt="O'Reilly Book Cover" style="width: 100px;" />
  </a>

  <div style="padding: 0 15px;" class="db dtc-ns">
    <p>
      Buy the print book at
      <a href="https://www.amazon.com/Hands-Data-Visualization-Storytelling-Spreadsheets/dp/1492086002/">Amazon</a> -
      <a href="https://www.barnesandnoble.com/w/hands-on-data-visualization-jack-dougherty/1137725933">Barnes & Noble</a> -
      <a href="https://bookshop.org/books/hands-on-data-visualization-interactive-storytelling-from-spreadsheets-to-code/9781492086000">Bookshop</a> -
      <a href="https://www.powells.com/book/hands-on-data-visualization-9781492086000">Powell's</a> - or your local bookstore.<br>
      Or begin a 30-day free trial to all books and digital content on the <a href="https://learning.oreilly.com/get-learning/?code=HODV21">O'Reilly online learning platform</a>.<br>
      Share your feedback about the book by tagging <a href="https://twitter.com/handsondataviz" target="_blank">@handsondataviz on Twitter</a> or
      <a href="https://handsondataviz.org/authors.html">contact the authors</a>.
    </p>

    <p style="color: rgba(0,0,0,0.4)">
      &copy; 2021 Jack Dougherty & Ilya Ilyankou / Picturedigits Ltd.
    </p>
  </div>
</footer>

<style>
  footer a:hover img {
    transform: rotate(1deg);
  }

  .db {
    display: block;
  }

  @media screen and (min-width: 30em) {
    .dtc-ns {
      display: table-cell;
      vertical-align: middle;
    }
}
</style>