Skip to content

Instantly share code, notes, and snippets.

@wildshark
Created April 3, 2019 00:16
Show Gist options
  • Save wildshark/a64d2d20680d13aeb0a2ba4b810ed019 to your computer and use it in GitHub Desktop.
Save wildshark/a64d2d20680d13aeb0a2ba4b810ed019 to your computer and use it in GitHub Desktop.
POS Receipt Template Html Css
<div id="invoice-POS">
<center id="top">
<div class="logo"></div>
<div class="info">
<h2>SBISTechs Inc</h2>
</div><!--End Info-->
</center><!--End InvoiceTop-->
<div id="mid">
<div class="info">
<h2>Contact Info</h2>
<p>
Address : street city, state 0000</br>
Email : JohnDoe@gmail.com</br>
Phone : 555-555-5555</br>
</p>
</div>
</div><!--End Invoice Mid-->
<div id="bot">
<div id="table">
<table>
<tr class="tabletitle">
<td class="item"><h2>Item</h2></td>
<td class="Hours"><h2>Qty</h2></td>
<td class="Rate"><h2>Sub Total</h2></td>
</tr>
<tr class="service">
<td class="tableitem"><p class="itemtext">Communication</p></td>
<td class="tableitem"><p class="itemtext">5</p></td>
<td class="tableitem"><p class="itemtext">$375.00</p></td>
</tr>
<tr class="service">
<td class="tableitem"><p class="itemtext">Asset Gathering</p></td>
<td class="tableitem"><p class="itemtext">3</p></td>
<td class="tableitem"><p class="itemtext">$225.00</p></td>
</tr>
<tr class="service">
<td class="tableitem"><p class="itemtext">Design Development</p></td>
<td class="tableitem"><p class="itemtext">5</p></td>
<td class="tableitem"><p class="itemtext">$375.00</p></td>
</tr>
<tr class="service">
<td class="tableitem"><p class="itemtext">Animation</p></td>
<td class="tableitem"><p class="itemtext">20</p></td>
<td class="tableitem"><p class="itemtext">$1500.00</p></td>
</tr>
<tr class="service">
<td class="tableitem"><p class="itemtext">Animation Revisions</p></td>
<td class="tableitem"><p class="itemtext">10</p></td>
<td class="tableitem"><p class="itemtext">$750.00</p></td>
</tr>
<tr class="tabletitle">
<td></td>
<td class="Rate"><h2>tax</h2></td>
<td class="payment"><h2>$419.25</h2></td>
</tr>
<tr class="tabletitle">
<td></td>
<td class="Rate"><h2>Total</h2></td>
<td class="payment"><h2>$3,644.25</h2></td>
</tr>
</table>
</div><!--End Table-->
<div id="legalcopy">
<p class="legal"><strong>Thank you for your business!</strong>  Payment is expected within 31 days; please process this invoice within that time. There will be a 5% interest charge per month on late invoices.
</p>
</div>
</div><!--End InvoiceBot-->
</div><!--End Invoice-->
#invoice-POS{
box-shadow: 0 0 1in -0.25in rgba(0, 0, 0, 0.5);
padding:2mm;
margin: 0 auto;
width: 44mm;
background: #FFF;
::selection {background: #f31544; color: #FFF;}
::moz-selection {background: #f31544; color: #FFF;}
h1{
font-size: 1.5em;
color: #222;
}
h2{font-size: .9em;}
h3{
font-size: 1.2em;
font-weight: 300;
line-height: 2em;
}
p{
font-size: .7em;
color: #666;
line-height: 1.2em;
}
#top, #mid,#bot{ /* Targets all id with 'col-' */
border-bottom: 1px solid #EEE;
}
#top{min-height: 100px;}
#mid{min-height: 80px;}
#bot{ min-height: 50px;}
#top .logo{
//float: left;
height: 60px;
width: 60px;
background: url(http://michaeltruong.ca/images/logo1.png) no-repeat;
background-size: 60px 60px;
}
.clientlogo{
float: left;
height: 60px;
width: 60px;
background: url(http://michaeltruong.ca/images/client.jpg) no-repeat;
background-size: 60px 60px;
border-radius: 50px;
}
.info{
display: block;
//float:left;
margin-left: 0;
}
.title{
float: right;
}
.title p{text-align: right;}
table{
width: 100%;
border-collapse: collapse;
}
td{
//padding: 5px 0 5px 15px;
//border: 1px solid #EEE
}
.tabletitle{
//padding: 5px;
font-size: .5em;
background: #EEE;
}
.service{border-bottom: 1px solid #EEE;}
.item{width: 24mm;}
.itemtext{font-size: .5em;}
#legalcopy{
margin-top: 5mm;
}
}
@ibiafrica
Copy link

the preview has an arror or it was my laptop which are wrong??

@juanjzb
Copy link

juanjzb commented Jan 12, 2022

### Fixed CSS. There was an error on closing bracket for #invoice-POS.

#invoice-POS{
box-shadow: 0 0 1in -0.25in rgba(0, 0, 0, 0.5);
padding:2mm;
margin: 0 auto;
width: 44mm;
background: #FFF;
}

::selection {background: #f31544; color: #FFF;}
::moz-selection {background: #f31544; color: #FFF;}
h1{
font-size: 1.5em;
color: #222;
}
h2{font-size: .9em;}
h3{
font-size: 1.2em;
font-weight: 300;
line-height: 2em;
}
p{
font-size: .7em;
color: #666;
line-height: 1.2em;
}

#top, #mid,#bot{ /* Targets all id with 'col-' */
border-bottom: 1px solid #EEE;
}

#top{min-height: 100px;}
#mid{min-height: 80px;}
#bot{ min-height: 50px;}

#top .logo{
//float: left;
height: 60px;
width: 60px;
background: url(http://michaeltruong.ca/images/logo1.png) no-repeat;
background-size: 60px 60px;
}
.clientlogo{
float: left;
height: 60px;
width: 60px;
background: url(http://michaeltruong.ca/images/client.jpg) no-repeat;
background-size: 60px 60px;
border-radius: 50px;
}
.info{
display: block;
//float:left;
margin-left: 0;
}
.title{
float: right;
}
.title p{text-align: right;}
table{
width: 100%;
border-collapse: collapse;
}
td{
//padding: 5px 0 5px 15px;
//border: 1px solid #EEE
}
.tabletitle{
//padding: 5px;
font-size: .5em;
background: #EEE;
}
.service{border-bottom: 1px solid #EEE;}
.item{width: 24mm;}
.itemtext{font-size: .5em;}

#legalcopy{
margin-top: 5mm;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment