Skip to content

Instantly share code, notes, and snippets.

@rodrigorodriguescosta

rodrigorodriguescosta/pedido.html

Created December 20, 2021 22:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rodrigorodriguescosta/307e804f081ee955de41a77710271912 to your computer and use it in GitHub Desktop.
Save rodrigorodriguescosta/307e804f081ee955de41a77710271912 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
pedido.html
<!doctype html>
<html lang=pt-br>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<title>PEDIDO</title>
<style> .coluna {
padding: 3px;
}
.coluna .caption {
font-family: Arial, normal, serif;
font-weight: 700 !important;
margin-right: 3px;
}
.coluna .conteudo {
font-family: Arial, normal, serif;
}
.linha-composicao {
font-size: 10px;
} </style>
<body class=container>
<style> *:before, *:after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
@page {
padding: 5px;
size: A4;
}
@media print {
html, body {
width: 210mm;
height: 297mm;
}
}
body {
margin: 5px;
width: 21cm;
height: 29.7cm;
font-size: 13px;
font-family: Arial, serif;
}
/* css da tabela de produtos */
.tabela td, th {
padding: 1px;
}
.tabela th {
text-align: left;
word-wrap: break-word; /* All browsers since IE 5.5+ */
overflow-wrap: break-word; /* Renamed property in CSS3 draft spec */
}
.tabela {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
.text-right {
text-align: right !important;
}
.text-center {
text-align: center;
}
.flex {
display: flex;
}
.flex-column {
flex-flow: column;
-webkit-flex-flow: column;
}
.justify-between {
justify-content: space-between;
-webkit-justify-content: space-between;
}
.justify-center {
justify-content: center;
-webkit-justify-content: center;
-webkit-box-pack: center; /* wkhtmltopdf uses this one */
}
.borda {
border: solid 1px;
width: 150px;
height: 80px;
padding: 3px;
} </style>
<div class="flex justify-between" style="height: 55px; padding: 3px; border: 1px solid black;">
<div class="flex flex-column"><b style="margin: 1px;">CASA DO CONSTRUTOR</b> <b style="margin: 1px;">19.843.657/0001-49</b>
<b style="margin: 1px;">(84) 98709-5123</b></div>
<div style="width: 52px; height: 52px; padding: 3px;"></div>
</div>
<div class=flex-column style="margin-top: 5px;"><h3 class=text-center>Pedido Nº 24353</h3>
<div class=flex style=justify-content:space-between;>
<div class=flex-column>
<div class="coluna flex">
<div class=caption>Nome:</div>
<div class=conteudo>RODRIGO RODRIGUES DA COSTA</div>
</div>
<div class="coluna flex">
<div class=caption>Cpf/Cnpj:</div>
<div class=conteudo>050.046.144-90</div>
</div>
<div class="coluna flex">
<div class=caption>Endereço:</div>
<div class=conteudo>RUA MARECHAL FLORIANO , 22</div>
</div>
<div class="coluna flex">
<div class=caption>Bairro:</div>
<div class=conteudo>PAREDOES</div>
</div>
<div class="coluna flex">
<div class=caption>Cidade/UF:</div>
<div class=conteudo>MOSSORO- RN</div>
</div>
<div class="coluna flex">
<div class=caption>Cep:</div>
<div class=conteudo>59618-080</div>
</div>
</div>
<div class=flex-column>
<div class="coluna flex">
<div class=caption>Data/Hora emissão:</div>
<div class=conteudo>15/11/2021 01:40:58</div>
</div>
</div>
</div>
</div>
<div><h5 style="margin: 4px" class=text-center>PRODUTOS</h5>
<table class=tabela>
<tr>
<th style="width: 220px">Descrição
<th style="width: 75px">Código
<th style="width: 20px">Un
<th style="width: 20px" class=text-right>Qtde
<th style="width: 40px" class=text-right>V. Unitário
<th style="width: 20px" class=text-right>Total
<tr>
<td>JOELHO 90 SOLDAVEL AGUA 20MM
<td>
<td>UN
<td class=text-right>22
<td class=text-right>10,00
<td class=text-right style="padding-right: 3px">220,00
<tr>
<td>BANCADA
<td>
<td>UN
<td class=text-right>1
<td class=text-right>553,61
<td class=text-right style="padding-right: 3px">553,61
<tr style="padding-left: 10px">
<td>
<div style="padding-left: 10px;"><b>Composição</b></div>
<tr class=linha-composicao>
<td style="padding-left: 10px">GRANITO VERDE UBATUBA POL 2 (0,36m x 0,36m = 0,13m)
<td>
<td>M2
<td class=text-right>1
<td class=text-right>36,29
<td class=text-right>36,29
<tr class=linha-composicao>
<td style="padding-left: 10px">GRANITO VERDE UBATUBA POL 2 (1,2m x 0,36m = 0,43m)
<td>
<td>M2
<td class=text-right>3
<td class=text-right>120,96
<td class=text-right>362,88
<tr class=linha-composicao>
<td style="padding-left: 10px">GRANITO BRANCO PRADO /MA CLARA POL 1 (1,3m x 0,36m = 0,47m)
<td>
<td>M2
<td class=text-right>1
<td class=text-right>154,44
<td class=text-right>154,44
<tr style="padding-left: 10px;margin-bottom: 7px;">
<td>
<td>
<td>
<td>
<td>
<td>
<tr>
<td>JOELHO 90 SOLDAVEL AGUA 20MM
<td>
<td>UN
<td class=text-right>1
<td class=text-right>0,36
<td class=text-right style="padding-right: 3px">0,36
<tr>
<td>BANCADA
<td>
<td>UN
<td class=text-right>1
<td class=text-right>29,70
<td class=text-right style="padding-right: 3px">29,70
<tr style="padding-left: 10px">
<td>
<div style="padding-left: 10px;"><b>Composição</b></div>
<tr class=linha-composicao>
<td style="padding-left: 10px">GRANITO BRANCO PRADO /MA CLARA POL 1 (0,36m x 0,25m = 0,09m)
<td>
<td>M2
<td class=text-right>1
<td class=text-right>29,70
<td class=text-right>29,70
<tr style="padding-left: 10px;margin-bottom: 7px;">
<td>
<td>
<td>
<td>
<td>
<td>
<tr>
<td>BANCADA
<td>
<td>UN
<td class=text-right>2
<td class=text-right>915,56
<td class=text-right style="padding-right: 3px">1.831,12
<tr style="padding-left: 10px">
<td>
<div style="padding-left: 10px;"><b>Composição</b></div>
<tr class=linha-composicao>
<td style="padding-left: 10px">GRANITO BRANCO PRADO /MA CLARA POL 1 (0,96m x 1,36m = 1,31m)
<td>
<td>M2
<td class=text-right>1
<td class=text-right>430,85
<td class=text-right>430,85
<tr class=linha-composicao>
<td style="padding-left: 10px">GRANITO BRANCO PRADO /MA CLARA POL 1 (1,36m x 0,36m = 0,49m)
<td>
<td>M2
<td class=text-right>3
<td class=text-right>161,57
<td class=text-right>484,71
<tr style="padding-left: 10px;margin-bottom: 7px;">
<td>
<td>
<td>
<td>
<td>
<td>
<tr>
<td>BANCADA
<td>
<td>UN
<td class=text-right>1
<td class=text-right>3.350,32
<td class=text-right style="padding-right: 3px">3.350,32
<tr style="padding-left: 10px">
<td>
<div style="padding-left: 10px;"><b>Composição</b></div>
<tr class=linha-composicao>
<td style="padding-left: 10px">GRANITO BRANCO PRADO /MA CLARA POL 1 (0,36m x 3,36m = 1,21m)
<td>
<td>M2
<td class=text-right>1,3
<td class=text-right>399,17
<td class=text-right>518,92
<tr class=linha-composicao>
<td style="padding-left: 10px">GRANITO BRANCO PRADO /MA CLARA POL 1 (1,3m x 3,3m = 4,29m)
<td>
<td>M2
<td class=text-right>2
<td class=text-right>1.415,70
<td class=text-right>2.831,40
<tr style="padding-left: 10px;margin-bottom: 7px;">
<td>
<td>
<td>
<td>
<td>
<td>
<tr>
<td>BANCADA
<td>
<td>UN
<td class=text-right>1
<td class=text-right>1,08
<td class=text-right style="padding-right: 3px">1,08
<tr style="padding-left: 10px">
<td>
<div style="padding-left: 10px;"><b>Composição</b></div>
<tr class=linha-composicao>
<td style="padding-left: 10px">JOELHO 90 SOLDAVEL AGUA 20MM
<td>
<td>UN
<td class=text-right>1
<td class=text-right>0,36
<td class=text-right>0,36
<tr class=linha-composicao>
<td style="padding-left: 10px">JOELHO 90 SOLDAVEL AGUA 20MM
<td>
<td>UN
<td class=text-right>1
<td class=text-right>0,36
<td class=text-right>0,36
<tr class=linha-composicao>
<td style="padding-left: 10px">JOELHO 90 SOLDAVEL AGUA 20MM
<td>
<td>UN
<td class=text-right>1
<td class=text-right>0,36
<td class=text-right>0,36
<tr style="padding-left: 10px;margin-bottom: 7px;">
<td>
<td>
<td>
<td>
<td>
<td>
<tr>
<td>BANCADA
<td>
<td>UN
<td class=text-right>1
<td class=text-right>1,44
<td class=text-right style="padding-right: 3px">1,44
<tr style="padding-left: 10px">
<td>
<div style="padding-left: 10px;"><b>Composição</b></div>
<tr class=linha-composicao>
<td style="padding-left: 10px">JOELHO 90 SOLDAVEL AGUA 20MM
<td>
<td>UN
<td class=text-right>1
<td class=text-right>0,36
<td class=text-right>0,36
<tr class=linha-composicao>
<td style="padding-left: 10px">JOELHO 90 SOLDAVEL AGUA 20MM
<td>
<td>UN
<td class=text-right>1
<td class=text-right>0,36
<td class=text-right>0,36
<tr class=linha-composicao>
<td style="padding-left: 10px">JOELHO 90 SOLDAVEL AGUA 20MM
<td>
<td>UN
<td class=text-right>1
<td class=text-right>0,36
<td class=text-right>0,36
<tr class=linha-composicao>
<td style="padding-left: 10px">JOELHO 90 SOLDAVEL AGUA 20MM
<td>
<td>UN
<td class=text-right>1
<td class=text-right>0,36
<td class=text-right>0,36
<tr style="padding-left: 10px;margin-bottom: 7px;">
<td>
<td>
<td>
<td>
<td>
<td>
<tr>
<td>BANCADA
<td>
<td>UN
<td class=text-right>1
<td class=text-right>0,72
<td class=text-right style="padding-right: 3px">0,72
<tr style="padding-left: 10px">
<td>
<div style="padding-left: 10px;"><b>Composição</b></div>
<tr class=linha-composicao>
<td style="padding-left: 10px">JOELHO 90 SOLDAVEL AGUA 20MM
<td>
<td>UN
<td class=text-right>1
<td class=text-right>0,36
<td class=text-right>0,36
<tr class=linha-composicao>
<td style="padding-left: 10px">JOELHO 90 SOLDAVEL AGUA 20MM
<td>
<td>UN
<td class=text-right>1
<td class=text-right>0,36
<td class=text-right>0,36
<tr style="padding-left: 10px;margin-bottom: 7px;">
<td>
<td>
<td>
<td>
<td>
<td>
<tr>
<td>BANCADA
<td>
<td>UN
<td class=text-right>1
<td class=text-right>304,36
<td class=text-right style="padding-right: 3px">304,36
<tr style="padding-left: 10px">
<td>
<div style="padding-left: 10px;"><b>Composição</b></div>
<tr class=linha-composicao>
<td style="padding-left: 10px">JOELHO 90 SOLDAVEL AGUA 20MM
<td>
<td>UN
<td class=text-right>1
<td class=text-right>0,36
<td class=text-right>0,36
<tr class=linha-composicao>
<td style="padding-left: 10px">VEDA CALHA W-MAX 280ML
<td>
<td>UN
<td class=text-right>1
<td class=text-right>152,00
<td class=text-right>152,00
<tr class=linha-composicao>
<td style="padding-left: 10px">VEDA CALHA W-MAX 280ML
<td>
<td>UN
<td class=text-right>1
<td class=text-right>152,00
<td class=text-right>152,00
<tr style="padding-left: 10px;margin-bottom: 7px;">
<td>
<td>
<td>
<td>
<td>
<td>
<tr>
<td>BANCADA
<td>
<td>UN
<td class=text-right>1
<td class=text-right>0,72
<td class=text-right style="padding-right: 3px">0,72
<tr style="padding-left: 10px">
<td>
<div style="padding-left: 10px;"><b>Composição</b></div>
<tr class=linha-composicao>
<td style="padding-left: 10px">JOELHO 90 SOLDAVEL AGUA 20MM
<td>
<td>UN
<td class=text-right>1
<td class=text-right>0,36
<td class=text-right>0,36
<tr class=linha-composicao>
<td style="padding-left: 10px">JOELHO 90 SOLDAVEL AGUA 20MM
<td>
<td>UN
<td class=text-right>1
<td class=text-right>0,36
<td class=text-right>0,36
<tr style="padding-left: 10px;margin-bottom: 7px;">
<td>
<td>
<td>
<td>
<td>
<td>
<tr>
<td>BANCADA
<td>
<td>UN
<td class=text-right>1
<td class=text-right>2,16
<td class=text-right style="padding-right: 3px">2,16
<tr style="padding-left: 10px">
<td>
<div style="padding-left: 10px;"><b>Composição</b></div>
<tr class=linha-composicao>
<td style="padding-left: 10px">JOELHO 90 SOLDAVEL AGUA 20MM
<td>
<td>UN
<td class=text-right>1
<td class=text-right>0,36
<td class=text-right>0,36
<tr class=linha-composicao>
<td style="padding-left: 10px">JOELHO 90 SOLDAVEL AGUA 20MM
<td>
<td>UN
<td class=text-right>1
<td class=text-right>0,36
<td class=text-right>0,36
<tr class=linha-composicao>
<td style="padding-left: 10px">JOELHO 90 SOLDAVEL AGUA 20MM
<td>
<td>UN
<td class=text-right>1
<td class=text-right>0,36
<td class=text-right>0,36
<tr class=linha-composicao>
<td style="padding-left: 10px">JOELHO 90 SOLDAVEL AGUA 20MM
<td>
<td>UN
<td class=text-right>1
<td class=text-right>0,36
<td class=text-right>0,36
<tr class=linha-composicao>
<td style="padding-left: 10px">JOELHO 90 SOLDAVEL AGUA 20MM
<td>
<td>UN
<td class=text-right>1
<td class=text-right>0,36
<td class=text-right>0,36
<tr class=linha-composicao>
<td style="padding-left: 10px">JOELHO 90 SOLDAVEL AGUA 20MM
<td>
<td>UN
<td class=text-right>1
<td class=text-right>0,36
<td class=text-right>0,36
<tr style="padding-left: 10px;margin-bottom: 7px;">
<td>
<td>
<td>
<td>
<td>
<td>
</table>
<div class=text-right style="border: 1px solid;padding: 3px;"><b>R$ 6.295,59</b></div>
</div>
<div style="margin-top: 12px;font-size: 12px;align-items: end;flex-flow: column;"><h3>PAGAMENTOS</h3>
<table>
<tr>
<th>Forma de Pagamento
<th class=text-right>Valor
<tr>
<td>DINHEIRO
<td class=text-right>R$ 7.000,00
</table>
</div>
<div style="margin-top: 12px;align-items: end;flex-flow: column;" class=flex>
<div><h3>TOTAIS</h3></div>
<div class=flex style="width: 100%;justify-content: space-between;">
<div class="coluna flex" style="max-width: 500px"></div>
<div class=flex style="justify-content: flex-end">
<div class="flex flex-column">
<div class=text-right style="margin-right: 10px;">TOTAL DE PRODUTOS:</div>
<div class=text-right style="margin-right: 10px;">TOTAL:</div>
<div class=text-right style="margin-right: 10px;">TOTAL PAGO:</div>
</div>
<div class="flex flex-column">
<div class=text-right>R$ 6.295,59</div>
<div class=text-right>R$ 6.295,59</div>
<div class=text-right>R$ 7.000,00</div>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment