Plantilla de factura a4 a formato de impresora... - Freelance Job in Web design

About this project

Open

Tengo una Plantilla HTML, de una Factura que trabaja solo en A4 para imprimir en impresoras normales, ahora ocupo pasar esa misma Factura para impresión de papel de 80mm, ocupo que todos los campos se acomoden en una plantilla HTML pero para papel de 80mm.

Este es el Coding actual en Papel A4

-----------

<html>
<head>
    <title></title>
</head>
<body>
<style type="text/css">*
{
    border: 0;
    box-sizing: content-box;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    line-height: inherit;
    list-style: none;
    margin: 0;
    text-decoration: none;
}

h3{
font-size:16px;
font-weight:bold;
}

body{
width:100%;
height:100%;
}

body,td,th {
font-family: Arial;
font-size: 12px;
}

.table-invoice {
font-size: 85%;
table-layout: fixed;
border-collapse: collapse;
width:100%;
}

.border{
border-right: 1px solid #d9e8ed ;
}

.table-invoice td {
padding:7px 4px;
border-bottom: 1px solid #d9e8ed;
}

.table-invoice th {
    background:#eef2f3;
    font-weight:bold;
    height:30px;
    vertical-align:middle;
}
.invoice-content{
border:1px solid #d9e8ed;
margin:5px 10px;
min-height:100px;
display:inline-block;
}

.monto-letras{
font-weight:bold;
padding:10px;
padding-top:20px;
background: #eef2f3;
}

.table-total{
font-size: 85%;
table-layout: fixed;
border-collapse: collapse;
width:100%;
}

.table-total td {
padding:5px 5px;
border-bottom: 1px solid #d9e8ed;
}

.content-total{
margin:0px 10px;
}
.bold,b{
    font-weight:bold;
}
.header{
margin:10px;
}
.nopagado,.estadocss{
background: #ff5356;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
width: 100%;
padding: 3px;
color: #fff;
right: 10px;
text-align: center;
margin-bottom: 5px;
}

.pagado{
background: #06C393;
font-size: 18px;
font-weight: bold;;
text-transform: uppercase;
width: 100%;
padding: 3px;
color: #fff;
right: 10px;
text-align: center;
margin-bottom: 5px;
}

.anulado{
background: #e4b932;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
width: 100%;
padding: 3px;
color: #fff;
right: 10px;
text-align: center;
margin-bottom: 5px;
}

.col{
min-height:30px;
width: 46%;
float:left;
padding:10px;
margin-top:5px;
}

.mayu{
text-transform:uppercase;
}
.table-invoice .pad{
padding:5px 30px 5px 10px !important;
}

.text{
color:#565656;
line-height:inherit;
}
p{
margin: 0px;
margin-bottom: 2px;
}
</style>
<div class="header">
<div class="estadocss">{estado}</div>

<table autosize="2" border="0" cellpadding="0" cellspacing="0" style="border-bottom:1px solid #d9e8ed;" width="100%">
    <tbody><tr><td align="left" valign="middle" width="60%"><img src="images/logofactura.png" style="width:auto;height:70px" /></td><td style="padding-right:5px;" width="50%">
        <table border="0" width="100%">
            <tbody><tr><td align="right">
                <h3>FACTURA # {nfactura}</h3>
                </td></tr><tr><td align="right">Fecha emisión <b>{emitido}</b></td></tr><tr><td align="right">Fecha vencimiento <b>{vencimiento}</b></td></tr>
            </tbody>
        </table>
        </td></tr>
    </tbody>
</table>

<div class="col border"><b>De</b>

<p class="text mayu">{nombre_empresa}</p>

<p class="text">Ruc {ruc_empresa}</p>

<p class="text">{direccion_empresa}</p>

<p class="text">Teléfono {telefono_empresa}</p>
</div>

<div class="col"><b>Para</b>

<p class="text mayu">{nombre_cliente}</p>

<p class="text">{cedula_cliente}</p>

<p class="text">{direccion_principal_cliente}</p>

<p class="text">Teléfono {telefono_cliente} / {movil_cliente}</p>
</div>
</div>

<div class="invoice-content">
<table autosize="2" class="table-invoice">
    <thead><tr>
        <th>Descripción</th>
        <th width="100px">Precio</th>
        <th width="45px">Imp%</th>
        <th width="25px">Cant.</Th>
        <th width="100px">Total</th>
        </tr>
    </thead>
    <tbody><tr><td>{items}</td></tr>
    </tbody>
</table>

<div class="monto-letras">son: {total_letras}</div>
</div>

<div class="content-total">
<table autosize="2.4" class="table-total">
    <tbody><tr><td align="center"><barcode code="{barcode}" height="3" size="0.75" type="Ean128a"></barcode>

        <div style="font-family: ocrb;font-size:14px">{barcode}</div>
        </td><td align="right" width="215px">
        <table>
            <tbody><tr><td align="right" class="bold" width="105px">subtotal :</td><td align="left" width="100px">{subtotal}</td></tr><tr><td align="right" class="bold" width="95px">impuesto :</td><td align="left" width="100px">{impuesto}</td></tr><tr class="otrosimpuestos1"><td align="right" class="bold" width="95px">otro imp. 1 :</td><td align="left" width="100px">{otro_impuesto_1}</td></tr><tr class="otrosimpuestos2"><td align="right" class="bold" width="95px">otro imp. 2 :</td><td align="left" width="100px">{otro_impuesto_2}</td></tr><tr class="otrosimpuestos3"><td align="right" class="bold" width="95px">otro imp. 3 :</td><td align="left" width="100px">{otro_impuesto_3}</td></tr><tr><td align="right" class="bold" width="95px">DESCUENTO :</td><td align="left" width="100px">{descuento}</td></tr><tr><td align="right" class="bold" width="95px">TOTAL :</td><td align="left" width="100px">{total}</td></tr>
            </tbody>
        </table>
        </td></tr>
    </tbody>
</table>
</div>

<p>{operaciones}</p>
</body>
</html>

Category IT & Programming
Subcategory Web design
What is the scope of the project? Small update to an existing design
Is this a project or a position? Project
I currently have I have specifications
Required availability As needed
Specific need Update a website

Delivery term: Not specified

Skills needed

CSS HTML

Plantilla de Factura A4 a formato de Impresora Termica 80mm

About this project

it-programming / web-design

Open