LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Pick a theme color:

FreeAgent Central
One Edinburgh Quay
133 Fountainbridge
Edinburgh
EH3 9QG

Medianode
111 Smanks Drive
London
EC1 2AB

INV 0001
02 June 2017

Due by 01 July 2017

Quantity
Description
Unit Price (£)
VAT
Net Subtotal (£)
10 hours
Scale robust e-services
60.00
20%
600.00
10 hours
Envisioneer next-generation action items
60.00
20%
600.00
Net Subtotal
1,200.00
VAT
240.00
GBP Total
£1,440.00

Bank Sort Code: 12-34-56

Bank Account Number: 22446688

Company Registration Number: 22446688

Thank you for your prompt payment.

CSS
@charset "UTF-8";
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  background-color: #ebeeef;
  font-family: "Source Sans Pro", Helvetica;
  font-size: 1rem;
  line-height: 150%;
}

h1,
h2,
h3,
h4,
h5 {
  line-height: 150%;
}

p:not(:last-child) {
  margin: 0 0 8px;
}

b {
  font-weight: bold;
}

button {
  font-family: "Source Sans Pro";
  font-size: 1rem;
  line-height: 150%;
}

.InvoiceThemer {
  background-color: #fff;
  border-radius: 2px;
  -webkit-box-shadow: 0 2px 4px rgba(0, 2, 3, 0.15);
          box-shadow: 0 2px 4px rgba(0, 2, 3, 0.15);
  display: block;
  margin: 2rem auto;
  overflow: hidden;
  padding: 12px 16px;
  position: relative;
  width: 46rem;
}

.InvoiceThemer-label {
  float: left;
  line-height: 32px;
  margin-right: 8px;
}

.ColorSwatch {
  border-radius: 4px;
  cursor: pointer;
  display: block;
  float: left;
  height: 32px;
  margin-right: 8px;
  position: relative;
  width: 32px;
}

.ColorSwatch:hover::after {
  background-color: rgba(0, 0, 0, 0.1);
  bottom: 0;
  content: "";
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.Amber {
  background-color: #f5a300;
}

.Blue {
  background-color: #007abf;
}

.Orange {
  background-color: #fd5127;
}

.Grey {
  background-color: #d8dde0;
}

.is-active {
  -webkit-box-shadow: inset 0 0 0 2px #004a7f;
          box-shadow: inset 0 0 0 2px #004a7f;
}

.Invoice {
  background-color: #fff;
  -webkit-box-shadow: 0 2px 4px rgba(0, 2, 3, 0.15);
          box-shadow: 0 2px 4px rgba(0, 2, 3, 0.15);
  display: block;
  margin: 2rem auto;
  min-height: 8rem;
  overflow: hidden;
  padding: 3.5rem 0;
  position: relative;
  width: 46rem;
}

.Invoice-border {
  background-color: #d8dde0;
  bottom: 0;
  display: block;
  position: absolute;
  top: 0;
  width: 24px;
}

.Invoice-sender {
  display: grid;
  grid-column-gap: 1.5rem;
  grid-template-columns: 8fr 4fr;
  margin: 0 4.5rem;
  padding-bottom: 1.5rem;
}

.Invoice-sender-logo {
  font-size: 1.5rem;
  font-weight: 800;
  grid-column: 1 / 2;
}

.Invoice-sender-logo > img {
  max-height: 4.5rem;
  max-width: 20rem;
}

.Invoice-sender-address {
  grid-column: 2 / 3;
  padding: 0;
  text-align: right;
}

.Invoice-details {
  display: grid;
  grid-column-gap: 1.5rem;
  grid-template-columns: 7fr 5fr;
  margin: 0 4.5rem 1.5rem;
}

.Invoice-recipient-address {
  border-top: 1px solid #b4bcc1;
  grid-column: 1 / 2;
  padding-top: 1.5rem;
}

.Invoice-reference {
  border-top: 1px solid #B4BCC1;
  grid-column: 2 / 3;
  padding: 1.5rem 0 0;
  text-align: right;
}

.Invoice-items-headings {
  border-bottom: 1px solid #b4bcc1;
  color: #5c686f;
  display: grid;
  grid-column-gap: 1rem;
  grid-template-columns: 5rem 1fr 5.5rem 2.5rem 7rem;
  margin: 0 4.5rem;
  padding: .75rem .5rem;
}

.Invoice-item {
  border-bottom: 1px solid #ebeeef;
  display: grid;
  grid-column-gap: 1rem;
  grid-template-columns: 5rem 1fr 5.5rem 2.5rem 7rem;
  margin: 0 4.5rem;
  padding: .75rem .5rem;
  position: relative;
}

.Invoice-item:focus,
.Invoice-item:hover {
  background-color: #f3f9fd;
  border-bottom: 1px solid #007abf;
  cursor: pointer;
}

.Invoice-item:focus::before,
.Invoice-item:hover::before {
  background-color: #f3f9fd;
  border-bottom: 1px solid #007abf;
  bottom: -1px;
  color: #007abf;
  content: "✎";
  font-size: 1.25rem;
  padding: .75rem .5rem;
  position: absolute;
  right: 100%;
  top: 0;
}

.Invoice-item-controls {
  bottom: -1px;
  display: block;
  left: 100%;
  padding: .25rem;
  position: absolute;
  top: 0;
}

.Invoice-item-controls > .Button {
  font-size: 1.25rem;
}

.Invoice-items-heading:nth-child(1),
.Invoice-item-detail:nth-child(1) {
  grid-column: 1 / 2;
}

.Invoice-items-heading:nth-child(2),
.Invoice-item-detail:nth-child(2) {
  grid-column: 2 / 3;
}

.Invoice-items-heading:nth-child(3),
.Invoice-item-detail:nth-child(3) {
  grid-column: 3 / 4;
  text-align: right;
}

.Invoice-items-heading:nth-child(4),
.Invoice-item-detail:nth-child(4) {
  grid-column: 4 / 5;
  text-align: right;
}

.Invoice-items-heading:nth-child(5),
.Invoice-item-detail:nth-child(5) {
  grid-column: 5 / 6;
  text-align: right;
}

.Invoice-addNewItem {
  margin: .875rem 4.5rem;
  position: absolute;
}

.Invoice-itemTotals {
  text-align: right;
  margin-bottom: 3rem;
}

.Invoice-itemTotals-subtotals {
  border-bottom: 1px solid #ebeeef;
  color: #5c686f;
  display: grid;
  grid-column-gap: 1rem;
  grid-template-columns: 1fr 8.5rem 7rem;
  margin: 0 4.5rem;
  padding: 0.75rem 0.5rem;
}

.Invoice-itemTotals-invoiceTotal {
  display: grid;
  font-size: 1.25rem;
  font-weight: 700;
  grid-column-gap: 1rem;
  grid-template-columns: 1fr 8.5rem 7rem;
  margin: 0 4.5rem;
  padding: 0.75rem 0.5rem;
}

.Invoice-itemTotals-label {
  grid-column: 2 / 3;
}

.Invoice-itemTotals-value {
  grid-column: 3 / 4;
}

.Invoice-extraStuff {
  display: grid;
  grid-column-gap: 1.5rem;
  grid-template-columns: 7fr 5fr;
  margin: 0 4.5rem;
  padding-bottom: 1.5rem;
}

.Invoice-extraStuff-paymentInfo {
  border-top: 1px solid #b4bcc1;
  grid-column: 1 / 2;
  padding-top: 1.5rem;
}

.Invoice-extraStuff-companyInfo {
  border-top: 1px solid #b4bcc1;
  color: #5c686f;
  grid-column: 2 / 3;
  padding-top: 1.5rem;
}

.Invoice-extraStuff-additionalText {
  color: #5c686f;
  grid-column: 1 / 2;
  padding-top: 1.5rem;
}

.Button {
  background-color: #f5f6f7;
  border: 1px solid #d8dde0;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 2, 3, 0.15);
          box-shadow: 0 1px 2px rgba(0, 2, 3, 0.15);
  color: #007abf;
  cursor: pointer;
  display: inline-block;
  font-family: "Source Sans Pro", Helvetica;
  font-weight: 600;
  margin-right: 0.5rem;
  min-height: 44px;
  min-width: 44px;
  padding: .25rem .5rem;
  text-align: center;
}

.Button:last-child {
  margin: 0;
}

.Button:hover {
  background-color: #ebeeef;
  border-color: #b4bcc1;
}

.Button--ghost {
  background-color: transparent;
  border: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.Button--ghost:hover {
  background-color: #f5f6f7;
}

.Button--primary {
  background-color: #5ba138;
  border-color: #37861d;
  color: white;
}

.Button--primary:hover {
  background-color: #48922a;
  border-color: #37861d;
  color: white;
}

.Button--large {
  padding: .5rem 1rem;
}
JS
$(".js-color-picker-option").click( function() {
  var color = $(this).css("backgroundColor");
  $(".is-active").removeClass("is-active");
  $(this).addClass("is-active");
  $(".Invoice-border").css("backgroundColor", color);
});
Term
Wed, 12/27/2017 - 06:58

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv