|%
++  css  ^~  %-  trip
'''
body{
  width: 600;
  margin: auto;
  height: 100%;
  overflow-y: hidden;
}
.row{
  display: flex;
}
.meta{
  justify-items: right;
}
'''
++  logo  "https://s3.sortug.com/img/sortug-logo.png"
++  html
;html
;body
;style: {css}
  ;div.row
    ;div.logo
      ;div:"Sortug Development"
      ;img@"{logo}";
    ==
    ;h1: Invoice
  ==
  ;div.row
    ;div.dest
      ;div:"Billed to:"
      ;div:"Chorus One AG"
    ==
    ;div.meta
      ;div:"Invoice #20240205"
      ;div:"Issued 2024/Feb/21"
      ;div:"Due: On receipt"
    ==
  ==
    ;table.items
      ;tr
        ;th:"Description"
        ;th:"Quantity"
        ;th:"Price"
        ;th:"Amount"
      ==
      ;tr.item
        ;td.desc
          ;div:"Urbit Development"
          ;span:"Development of Tendermint implementation for %chain project"
        ==
        ;td:"1"
        ;td:"USD 2,500"
        ;td:"USD 2,500"
      ==
    ==
    ;div.row
      ;div.payment
        ;h2:"Payment Method"
        ;div:"Bank name: HSBC Hong Kong"
        ;div:"Bank address: 1 Queen's Road Central, Hong Kong"
        ;div:"SWIFT code: HSBCHKHHHKH"
        ;div:"Account number: 121-338933-833"
        ;div:"Account name: Santiago Campos Losada"
      ==
      ;table.total
        ;tr
          ;td:"Subtotal"
          ;td:"USD 2,500"
        ==
        ;tr
          ;td:"Tax"
          ;td:"-"
        ==
        ;tr
          ;td:"Discount"
          ;td:"-"
        ==
        ;tr.total
          ;td:"Total due"
          ;td:"USD 2,500"
        ==
      ==
    ==
==
==
--