fattura by @Benjamin - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

minlengthDetermina il numero minimo di caratteri per un elemento input
<a>Inserisce link e collegamenti ipertestuali
actionDetermina la pagina di destinazione a cui verranno inviati i dati di un form HTML
<h1>Titolo di intestazione di primo livello
<blockquote>Inserisce citazioni in un documento HTML
langSpecifica la lingua del contenuto di un elemento

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Le meraviglie d\\

Orario 5G A.S. 2024 - 2025

Futura Design - Agenzia di Design

Array of Colors

I beneficii di avere un cane

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html>
  <head>
    <title>Titolo Pagina</title>
    <style></style>
    <script></script>
  </head>
  <body>
    <div class= "page">
      <section class = "header">
        <div class = "left">
          <div>
            SARTEUR SRL
          </div>
          <div>
            a socio unico
          </div>
          <div>
            VIA ARNARIA 9 (sede operativa)
          </div>
           <div>
            VIA PURGER 28 (sede legale)
          </div>
          <div>
            39046 ORTISEI (BZ)
          </div>
          <div>
            TEL. 0471 796170 - FAX 0471 797628
          </div>
           <div>
            info@sarteur.com PEC:sarteur@legalmail.it
          </div>
          <div>
            PART.IVA 02896470214
          </div>
          <div>
            COD.FISC -
          </div>
          <div>
            Capitale sociale: €10.000,00 interamente versato
          </div>
          <div>
            Iscritta presso il registro delle imprese di Bolzano
          </div>
        </div>
        <div class = "right">
          <div class = "logo">
		  	<img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/IMG_logo_%282017%29.svg">
		  </div>
        </div>
      </section>
      <!-- INIZIA LA TESTATA DELLA FATTURA -->
      <section class = "testata_documento">
        <div class = "t_title">
          <div>
            F E R R A M E N T A
          </div>
          <div>
            O F F I C I N A &nbsp;&nbsp; R I P A R A Z I O N I
          </div>
          <div>
            C A S A L I N G H I
          </div>
        </div>
        <div class = "t_body">
          <div class = "tb_left">
            <section class = "sec_tb_left">
               <div class = "row">
                <div class = "r_testata">
                  Documento
                </div>
                <div class = "r_corpo">
                  FATTURA &nbsp;ACCOMPAGNATORIA
                </div>
              </div>
              <div class = "multi_row">
                <div class = "row">
                   <div class = "r_testata">
                      Nr.
                    </div>
                    <div class = "r_corpo">
                      198A
                    </div>
                </div>
                <div class = "row">
                  <div class = "r_testata">
                      Data
                    </div>
                    <div class = "r_corpo">
                      20/04/2023
                    </div>
                </div>
                <div class = "row">
                    <div class = "r_testata">
                      Codice cliente
                    </div>
                    <div class = "r_corpo">
                      3717
                    </div>
                </div>
                <div class = "row row_last">
                  <div class = "r_testata">
                      Pagina N°
                    </div>
                    <div class = "r_corpo">
                      1
                    </div>
                </div>
              </div>
              <div class = "row little">
                <div class = "r_testata">
                  Tipo pagamento
                </div>
                <div class = "r_corpo">
                  P A G A T O ! (POS)
                </div>
              </div>
              <div class = "r_contatti">
                <div>
                  Telefono:
                </div>
                <div>
                  Fax:
                </div>
              </div>
            </section>
          </div>
          <div class = "tb_right">
             <section class = "sec_tb_right">
               <div class = "row imp">
                 KOSTNER DAVID
               </div>
               <div class = "row imp">
                 INSTALLAZIONE DI IMPIANTI IDRAULICI
               </div>
               <div class = "row imp">
                 Via Sacun 146
               </div>
               <div class = "row imp">
                 39046 &nbsp; &nbsp;ORTISEI (BZ)
               </div>
               <div class = "row">
                 
               </div>
               <div class = "row">
                 Partita IVA: 02839950215
               </div>
               <div class = "row">
                 Codice fiscale: KSTDVD83A10B160F
               </div>
            </section>
          </div>
        </div>
      </section>
      <!-- INIZIA IL CORPO DELLA FATTURA -->
      <section class = "corpo_documento">
        <div class = "t_corpo_documento">
          <div class = "start cella colonna_descrizione">
            Descrizione
          </div>
          <div class = "mid cella colonna_um">
            U.M.
          </div>
           <div class = "mid cella colonna_quantita">
            Q.tà
          </div>
           <div class = "mid cella colonna_prezzo_un_ie">
            Prezzo Unitario<br>Iva Esclusa
          </div>
           <div class = "start cella colonna_prezzo_un_ii">
            Prezzo Unitario<br>Iva Inclusa
          </div>
          <div class = "mid cella colonna_importo_ii">
            Importo<br>Iva Inclusa
          </div>
           <div class = "end cella colonna_iva">
            IVA
          </div>
        </div>
        <div class = "d_corpo_documento">
          <div class= "cella colonna_descrizione border">
            CUSCINETTO
          </div>
          <div class = "cella colonna_um border">
            PZ
          </div>
           <div class = "cella colonna_quantita border">
            1,00
          </div>
           <div class = "cella colonna_prezzo_un_ie">
            12,295
          </div>
           <div class = "cella colonna_prezzo_un_ii border">
            15,000
          </div>
          <div class = "cella colonna_importo_ii border">
            15,00
          </div>
          <div class = "cella colonna_iva">
            22
          </div>
        </div>
      </section>
      <section class = "footer_documento">
      	<div class = "t_footer_documento">
          <div class = "cella f_colonna_data_scadenza">
            Data scadenza
          </div>
          <div class = "cella f_colonna_imp_tot_scadenza">
            Importo totale scadenza
          </div>
          <div class = "cella f_colonna_cod_iva">
            Cod IVA
          </div>
          <div class = "cella f_colonna_perc_iva">
            Percentuale IVA
          </div>
          <div class = "cella f_colonna_imp">
            Imponibile
          </div>
          <div class = "cella f_colonna_imp_iva">
            Importo IVA
          </div>
          <div class = "cella f_colonna_sp_gest">
            Spese di gestione
          </div>
        </div>
        <div class = "d_footer_documento">
          <div class = "cella f_colonna_dt_imp_tot_scad mod_altezza">
            20/04/2023<br>€    15,01
          </div>
          <div class = "cella f_colonna_cod_iva">
            
          </div>
          <div class = "cella f_colonna_perc_iva">
            IVA 22%
          </div>
          <div class = "cella f_colonna_imp">
            12,30
          </div>
          <div class = "cella f_colonna_imp_iva">
            2,71
          </div>
          <div class = "cella f_colonna_tot_fattura">
            TOTALE FATTURA  &nbsp; &nbsp; €  &nbsp; 15,01
          </div>
        </div>
      </section>
      <section class="sezione_footer_banca">
        <div class="div_footer_banca">
          <div>
            Banca: CASSA DI RISPARMIO
          </div>
          <div>
            <b>IBAN: IT06I0604558680000000707000</b>
          </div>
        </div>
      </section>
    </div>
  </body>
</html>

:root{
  --width: 21cm;
  --height: 29.7cm;
  --margin: 1.5mm 3.5mm 1.5mm 3.5mm;
  --margin_rl: 45mm;
}

 body{
   width: var(--width);
   height: var(--height);
   margin: var(--margin); 
   /* change the margins as you want them to be. */
 } 
.page{
  height: 100%;
  width: 100%;
}
.header{
  width: 100%;
  display: flex;
}
.left{
  width: 100%;
  height: 3.2cm;
  font-size: 11px;
}
.right{
  width: 100%;
  height: 3.2cm;
}
.logo{
  margin-top: 0.5cm;
  width: 100%;
  height:2.2cm;
}
.logo img{
  height:2.2cm;
}

/* TESTATA DOCUMENTO */
.testata_documento{
  margin-top: 0.6cm;
  height: 4.4cm;
  width: 100%;
  margin-bottom: 0.6cm;
}

.t_title{
  padding-left: 5px;
  padding-right: 5px;
  height: 0.55cm;
  border: 1px solid black;
  display: flex;
  justify-content: space-between;
  font-weight: bold;
}
.t_body{
  display:flex;
  width: 100%;
  height:3.7cm;
  margin-top: 0.15cm;
  
}

.tb_left{
  width: 100%;
}
.tb_right{
  width: 100%;
}
.tb_left .row{
  border: 1px solid black;
  height: 1cm;
  padding: 1px;
}

.sec_tb_left{
  width:90%;
}

.sec_tb_right{
	border: 1px solid black;
  height: 3.7cm;
}

.sec_tb_right .row{
	height: 0.5cm;
  font-size:13px;
}

.little{
  height: 0.7cm !important;
  border-top: none !important;
}

.tb_left .row .r_testata{
  font-size: 10px;
}
.tb_left .row .r_corpo{
  font-size: 12px;
  font-weight: bold;
  
}
.multi_row{
  display:flex;
  width: 100%;
  flex-direction: row;
}

.multi_row .row{
	width: 100%;
  border-top: none;
  border-right : none;
}

.multi_row .row_last{
	width: 100%;
  border-top: none;
  border-right : 1px solid black;
}
.multi_row .row .r_corpo{
	text-align: right;
  margin-right: 5px;
  margin-top: 5px;
}

.imp{
	font-weight: bold;
}

.r_contatti{
  margin: 7px;
  font-size: 12px;
}

/* CORPO DOCUMENTO */
.t_corpo_documento .colonna_descrizione{
  width: 8.9cm;
}

.t_corpo_documento .colonna_um{
  width: 1cm;
}

.t_corpo_documento .colonna_quantita{
  width: 1.5cm;
}

.t_corpo_documento .colonna_prezzo_un_ie{
  width: 3cm;
}

.t_corpo_documento .colonna_prezzo_un_ii{
  width: 3cm;
}

.t_corpo_documento .colonna_importo_ii{
  width: 2.4cm;
}

.t_corpo_documento .colonna_iva{
  width: 1cm;
}

.d_corpo_documento .colonna_descrizione{
  width: 8.9cm;
}

.d_corpo_documento .colonna_um{
  width: 1cm;
}

.d_corpo_documento .colonna_quantita{
  width: 1.5cm;
  justify-content: right !important;
}

.d_corpo_documento .colonna_prezzo_un_ie{
  width: 3cm;
  justify-content: right !important;
}

.d_corpo_documento .colonna_prezzo_un_ii{
  width: 3cm;
  justify-content: right !important;
}

.d_corpo_documento .colonna_importo_ii{
  width: 2.4cm;
  justify-content: right !important;
}

.d_corpo_documento .colonna_iva{
  width: 1cm;
  justify-content: center !important;
}

.d_corpo_documento .start_mid{
  width: 1cm;
  justify-content: center !important;
}

.corpo_documento{
  height: 15.25cm;
  border: 1px solid black;
}

.corpo_documento .t_corpo_documento{
  display: flex;
}

.corpo_documento .t_corpo_documento .cella{
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: bold;
  padding: 2px;
}

.corpo_documento .start{
  border-bottom: 1px solid black;
}

.corpo_documento .end{
  border-bottom: 1px solid black;
  border-left: 1px solid black;
}

.corpo_documento .mid{
  border-left: 1px solid black;
  border-bottom: 1px solid black;
}

.corpo_documento .d_corpo_documento{
  display:flex;
}

.corpo_documento .d_corpo_documento .border{
  border-right: 1px solid black;
}

.corpo_documento .d_corpo_documento .cella{
  display: flex;
  text-align: center;
  font-size: 12px;
  padding: 2px;
}

/*SEZIONE FOOTER FATTURA*/
.f_colonna_data_scadenza{
  width: 1.8cm;
}

.f_colonna_imp_tot_scadenza{
  width: 1.8cm;
}

.f_colonna_cod_iva{
  width: 0.7cm;
}

.f_colonna_perc_iva{
  width: 4.3cm;
}

.f_colonna_imp{
  width: 2cm;
}

.f_colonna_imp_iva{
  width: 2cm;
}

.f_colonna_dt_imp_tot_scad{
  width: 3.74cm;
}

.f_colonna_sp_gest{
  width: 7.6cm;
  justify-content: left !important;
  border-right: none !important;
}

.f_colonna_tot_fattura{
  width: 7.6cm;
  font-weight: bold;
  border-right: none !important;
  font-size: 14px !important;
}

.footer_documento{
  border-right: 1px solid black;
  border-left: 1px solid black;
  height: 1.83cm;
}

.footer_documento .t_footer_documento, .footer_documento .d_footer_documento{
  display: flex;
  text-align: center;
}

.footer_documento .t_footer_documento .cella {
  display: flex;
  align-items: center;
  font-size: 10px;
  padding: 2px;
  justify-content: center;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
}

.footer_documento .d_footer_documento .cella{
   display: flex;
  align-items: center;
  font-size: 12px;
  padding: 2px;
  justify-content: center;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
}

.mod_altezza{
  height: 1cm;
}

/*SEZIONE FOOTER BANCA*/
.sezione_footer_banca{
  margin-top: 0.3cm;
  border: 1px solid black;
}

.div_footer_banca{
  display: flex;
  justify-content: space-between;
  height: 1.5cm;
  align-items: center;
  padding: 5px;
  font-size: 14px;
}