Factura

factura html

by Emmanuel Garcia

HTML

<div id="wrapper">
    <div id="header1"><p><font face="Tahoma" size="2"/g><img src="[600]" alt="Logo"></font></p></div>
    <div id="header2"><p><span class="tittle">[407]</span><strong><br>R.F.C.</strong> [408] <br>Domicilio<br>[415], [416], C.P.[417]</p></div>
    <div id="header3"><h2>FACTURA</h2><p>[1]</p><br><p>[2] [406]</p></div>
</div>
<br>


<div id="wrapper2">
<div id="receptor1"><p><span class="tittle">[5]</span><br><strong>R.F.C.</strong> [96]<br>Domicilio<br><br></p><p>
<strong>Folio Fiscal:</strong>[606]<br> 
<strong>Efecto del Comprobante:</strong> I Ingreso<br>
<strong>Certificado del Sello Digital:</strong> [404]
</p></div>
    <div id="receptor2"><p><strong>Régimen Fiscal:</strong> [612]<br>
<strong>Método de Pago:</strong> [610]<br>
<strong>Forma de Pago:</strong> [611]<br>
<strong>Moneda:</strong> [603]<br>
<strong>Tipo de Cambio:</strong> [20]<br>
<strong>Uso del CFDI:</strong> [635]<br></p></div>
</div>

<br>
<table width="100%" border="0" style="background-color: #dddddd">
<tr style="color:#FFFFFF; font-weight: bold;">
  <td align="left" valign="middle" bgcolor="#555555">Cantidad</td>
  <td align="left" valign="middle" bgcolor="#555555">Descripción</td>
  <td align="left" valign="middle" bgcolor="#555555">Clave Pro/Serv.</td>
  <td align="left" valign="middle" bgcolor="#555555">Unidad</td>
  <td align="left" valign="middle" bgcolor="#555555">P.Unitario</td>
  <td align="left" valign="middle" bgcolor="#555555">Importe</td>
  <td align="left" valign="middle" bgcolor="#555555">3% S/Hosp.</td>
  <td align="left" valign="middle" bgcolor="#555555">IVA</td>
</tr>
<tr style="background-color: #eeeeee">
			<td align="left" valign="middle"><font face="Tahoma" size="1"/g></font></td>
			<td align="left" valign="middle"><font face="Tahoma" size="1"/g></font></td>
			<td align="left" valign="middle"><font face="Tahoma" size="1"/g></font></td>
			<td align="left" valign="middle"><font face="Tahoma" size="1"/g></font></td>
			<td align="left"...

CSS

P{margin:5px;}
body {color:#323232; font-family:helvetica; font-size:12px; font-weight: 300;}
.line{height:2px; width:100%; background-color:#323232; margin-bottom:7px; margin-top:7px; }
.tittle{ font-size:20px; font-weight:bold; }

#wrapper { overflow:hidden; }
#header1 { width: 20%; float:left; }
#header2 { width: 50%; float:left;  }
#header3 { width: 30%; float:left; background-color: #bbbbbb; text-align:center;   }
#header3 H1{ display: inline-block; vertical-align: top;  }

#wrapper2 { border: 2px solid #323232; overflow:hidden; background-color: #eeeeee; }
#receptor1 { width: 50%; float:left;  }
#receptor2 { width: 50%; float:left;  }
#receptor3 H1{ display: inline-block; vertical-align: top;  }



#wrapper3 { border: 0px solid grey;overflow:hidden; }
#sellos1 { width: 20%; float:left;   }
#sellos2 { width: 80%; float:left; background-color: #eeeeee; }


#wrapper4 { border: 0px solid grey;overflow:hidden; background-color: #eeeeee; }
#terminos1 { width: 80%; float:left;   text-align:left; font-size:10px;  }
#terminos2 { width: 20%; float:left;  text-align:center; }


#wrapper5 { border: 0px solid grey;overflow:hidden; background-color: #eeeeee; }
#leyenda1 { width: 100%; float:left;   text-align:left; }

#wrapper6 { border: 2px solid #323232; overflow:hidden; background-color: #eeeeee; }
#totales1 { width: 60%; float:left;   text-align:left;  }
#totales2 { width: 40%; float:left;   text-align:right; }