fattura by @Benjamin - Codewith.it

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

References

<canvas>Tag per disegnare grafica dinamica su pagine web.
mutedL'attributo muted viene utilizzato impostare risorse HTML audio e video con volume muto
mediaSpecifica a quale dispositivo/display/documento è ottimizzata una risorsa.
<input>Definisce un area di input per l'invio di dati e informazioni
formmethodDefinisce il metodo di invio dei dati oltre a method
<tfoot>Definisce il footer o sezione inferiore di una tabella.

Users

Log in to search for users

Explore

Find inspiration

textarea select and replace

Tabella esercitazione esame

Esercitazione n. 1

sanchez ximena html 3

Primo esercizio in classe

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!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;
}