text: <!doctype html>
  <!-- - - - - - - - - - - - - - - -->
  <!-- Book Finder                 -->
  <!-- dnajs.org/book-finder.html  -->
  <!-- - - - - - - - - - - - - - - -->
  <html lang=en>
  <head>
  <meta charset=utf-8>
  <title>Book Finder</title>
  <link rel=icon href=https://dnajs.org/graphics/bookmark.png>
  <style>
     body      { font-family: system-ui, sans-serif; margin: 30px; }
     .book     { display: flex; align-items: flex-start;
                 width: 400px; background-color: skyblue;
                 padding: 10px; margin: 10px 0px; }
     .book img { width: 100px; margin-right: 10px; }
     .book h2  { margin: 0px; }
  </style>
  </head>
  <body>
  
  <main>
     <h1>Book Finder</h1>
     <label>
        Search:
        <input placeholder="Enter terms" autofocus>
     </label>
     <button>Find</button>
     <section class=books>
        <div class=book>
           <img src=https://dnajs.org/graphics/sample-book-cover.jpg alt=cover>
           <div>
              <h2>Title</h2>
              <p>Publisher</p>
              <i>Price</i>
           </div>
        </div>
     </section>
  </main>
  
  </body>
  </html>
  