print_invoice

by Andrey Izman

HTML

<div class="bill">

  <!--div class="caution" style = "padding-top: 100px">
        Attention! Payment of this invoice means acceptance of the terms of delivery of the goods.
    </div-->
  <div class="requisites">
    <table class="requisites__table">
      <tr class="requisites__table-tr">
        <td class="requisites__table-td border-b0" colspan="4"><b>
            {org["bank_row1_col1_header"]}
          </b></td>
      </tr>
      <tr class="requisites__table-tr">
        <td class="requisites__table-td border-t0" colspan="4">
          {org["bank_row1_col1_content"]}
        </td>
      </tr>
      <tr class="requisites__table-tr">
        <td class="requisites__table-td border-b0" colspan="2"><b>
            {org["bank_row2_col1_header"]}
          </b></td>
        <td class="requisites__table-td border-b0" colspan="2">
          {org["bank_row2_col2_header"]}
        </td>
      </tr>
      <tr class="requisites__table-tr">
        <td class="requisites__table-td border-t0" colspan="2"><b>
            {org["bank_row2_col1_content"]}
          </b></td>
        <td class="requisites__table-td border-t0" colspan="2">
          {org["bank_row2_col2_content"]}
        </td>
      </tr>
      <tr class="requisites__table-tr">
        <td class="requisites__table-td border-b0" colspan="2"><b>
            {org["bank_row3_col1_header"]}
          </b></td>
        <td class="requisites__table-td border-b0" colspan="2">
          {org["bank_row3_col2_header"]}
        </td>
      </tr>
      <tr class="requisites__table-tr">
        <td class="requisites__table-td border-t0" colspan="2"><b>
            {org["bank_row3_col1_content"]}
          </b></td>
        <td class="requisites__table-td border-t0" colspan="2">
          {org["bank_row3_col2_content"]}
        </td>
      </tr>
      <tr class="requisites__table-tr">
        <td class="requisites__table-td border-b0" colspan="4"><b>
            {org["bank_row4_col1_header"]}
          </b></td>
      </tr>
...

CSS

.unzoom {
  zoom: 0.8;
  -moz-transform: scale(0.5);/* Firefox Property */
  -moz-transform-origin: 0 0;
  -o-transform: scale(0.5);/* Opera Property */
  -o-transform-origin: 0 0;
  -webkit-transform: scale(0.5);/* Safari Property */
  -webkit-transform-origin: 0 0;
  transform: scale(0.8); /* Standard Property */
  transform-origin: 0 0;  /* Standard Property */
}

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600|Roboto:400,400i,700,700i,500|Roboto+Mono:400,700&amp;subset=cyrillic");
body {font-family: 'Roboto', sans-serif; }


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
  font-family: 'Tahoma', sans-serif;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0 auto;
}

.clear {
  clear: both;
  margin-bottom: 5px;
}

.bill {
  position: relative;
  margin: 0 auto;
  padding: 14px 0 0;
  width: 1000px;
  font-size: 16px;
}

.bill .logo {
  margin: 33px 0;
  width: 370px;
  height: 90px;
}

.bill .logo img {
  width: 100%;
}

.bill .caution {
  margin: 0 auto 32px;
  width: 850px;
  text-align: center;
}

.bill .requisites__table {
  width: 100%;
}


.bill...