├── .DS_Store ├── LICENSE ├── README.md ├── assets ├── .DS_Store ├── invoice-1-2x.jpg ├── invoice-2-2x.jpg ├── invoice-3-2x.jpg ├── invoice1.zip ├── invoice2.zip ├── invoice3.zip └── style.css ├── index.html ├── invoice1 ├── Acme.png ├── invoice1.css └── invoice1.html ├── invoice2 ├── Acme.png ├── invoice2.css └── invoice2.html └── invoice3 ├── Acme.png ├── invoice3.css └── invoice3.html /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nirajrajgor/html-invoice-templates/b5e867c22b965fb79a8d789f0ab0057b96f0944d/.DS_Store -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Niraj M. Rajgor 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # html-invoice-templates 2 | The clean, modern, responsive html invoice templates based on bootstrap 3. The downloadable zip file content sample logo used, html file and css file. 3 | [View Demo](https://nirajrajgor.github.io/html-invoice-templates/) 4 | 5 | ## Disclaimer 6 | 7 | The content of the invoice template is dummy and does not mean anything. It is used as a placeholder text. Any brand name or price amount added is purely for placeholder purpose. 8 | 9 | ## Author 10 | [Niraj Rajgor](https://nirajrajgor.com/) 11 | 12 | ## License 13 | This project is open source and available under the [MIT License](https://github.com/nirajrajgor/html-invoice-templates/blob/master/LICENSE). 14 | -------------------------------------------------------------------------------- /assets/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nirajrajgor/html-invoice-templates/b5e867c22b965fb79a8d789f0ab0057b96f0944d/assets/.DS_Store -------------------------------------------------------------------------------- /assets/invoice-1-2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nirajrajgor/html-invoice-templates/b5e867c22b965fb79a8d789f0ab0057b96f0944d/assets/invoice-1-2x.jpg -------------------------------------------------------------------------------- /assets/invoice-2-2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nirajrajgor/html-invoice-templates/b5e867c22b965fb79a8d789f0ab0057b96f0944d/assets/invoice-2-2x.jpg -------------------------------------------------------------------------------- /assets/invoice-3-2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nirajrajgor/html-invoice-templates/b5e867c22b965fb79a8d789f0ab0057b96f0944d/assets/invoice-3-2x.jpg -------------------------------------------------------------------------------- /assets/invoice1.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nirajrajgor/html-invoice-templates/b5e867c22b965fb79a8d789f0ab0057b96f0944d/assets/invoice1.zip -------------------------------------------------------------------------------- /assets/invoice2.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nirajrajgor/html-invoice-templates/b5e867c22b965fb79a8d789f0ab0057b96f0944d/assets/invoice2.zip -------------------------------------------------------------------------------- /assets/invoice3.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nirajrajgor/html-invoice-templates/b5e867c22b965fb79a8d789f0ab0057b96f0944d/assets/invoice3.zip -------------------------------------------------------------------------------- /assets/style.css: -------------------------------------------------------------------------------- 1 | h1{ 2 | font-size: 24px; 3 | margin-bottom: 20px; 4 | } 5 | .invoice-item-wrapper{ 6 | text-align: center; 7 | margin-bottom: 25px; 8 | } 9 | .invoice-item-wrapper h2{ 10 | font-size: 20px; 11 | margin-bottom: 20px; 12 | } 13 | .invoice-item-wrapper img{ 14 | box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.10); 15 | margin-bottom: 30px; 16 | } 17 | .invoice-item-wrapper a{ 18 | padding: 10px 20px; 19 | margin-right: 20px; 20 | color: #333; 21 | border: 2px solid #ddd; 22 | border-radius: 20px; 23 | } 24 | .github-btn{ 25 | padding: 10px 20px; 26 | border: 2px solid #ddd; 27 | color: #333; 28 | float: right; 29 | border-radius: 20px; 30 | font-size: 15px; 31 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | HTML Invoice Templates based on Bootstrap 3 10 | 11 | 12 | 18 | 19 | 20 | 21 | 22 | 23 | 27 | 28 | 29 |
30 |
31 |
32 |

33 | A Clean, Responsive HTML Invoice Templates Based on Bootstrap 3. 34 | Github 40 | ✨ Try AI Editor 47 |

48 |
49 |
50 |
51 |

Invoice Sample 1

52 | Invoice sample 1 preview image 57 | View Demo 58 | Download Files 61 |
62 |
63 |
64 |
65 |

Invoice Sample 2

66 | Invoice sample 2 preview image 71 | View Demo 72 | Download Files 75 |
76 |
77 |
78 |
79 |

Invoice Sample 3

80 | Invoice sample 3 preview image 85 | View Demo 86 | Download Files 89 |
90 |
91 |
92 |
104 |

105 | 🚀 Looking for More? 106 |

107 |

108 | Want to expand your collection? Discover a treasure trove of 109 | professional email templates ready to use! 110 |

111 | 129 | 📧 Explore Email Templates → 130 | 131 |
132 |
133 |
134 |
135 | 136 | 137 | 142 | 143 | 144 | 149 | 150 | 151 | -------------------------------------------------------------------------------- /invoice1/Acme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nirajrajgor/html-invoice-templates/b5e867c22b965fb79a8d789f0ab0057b96f0944d/invoice1/Acme.png -------------------------------------------------------------------------------- /invoice1/invoice1.css: -------------------------------------------------------------------------------- 1 | .back{} 2 | .invoice-wrapper{ 3 | margin: 20px auto; 4 | max-width: 700px; 5 | box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); 6 | } 7 | .invoice-top{ 8 | background-color: #fafafa; 9 | padding: 40px 60px; 10 | } 11 | /* 12 | Invoice-top-left refers to the client name & address, service provided 13 | */ 14 | .invoice-top-left{ 15 | margin-top: 60px; 16 | } 17 | .invoice-top-left h2 , .invoice-top-left h6{ 18 | line-height: 1.5; 19 | font-family: 'Montserrat', sans-serif; 20 | } 21 | .invoice-top-left h4{ 22 | margin-top: 30px; 23 | font-family: 'Montserrat', sans-serif; 24 | } 25 | .invoice-top-left h5{ 26 | line-height: 1.4; 27 | font-family: 'Montserrat', sans-serif; 28 | font-weight: 400; 29 | } 30 | .client-company-name{ 31 | font-size: 20px; 32 | font-weight: 600; 33 | margin-bottom: 0; 34 | } 35 | .client-address{ 36 | font-size: 14px; 37 | margin-top: 5px; 38 | color: rgba(0,0,0,0.75); 39 | } 40 | 41 | /* 42 | Invoice-top-right refers to the our name & address, logo and date 43 | */ 44 | .invoice-top-right h2 , .invoice-top-right h6{ 45 | text-align: right; 46 | line-height: 1.5; 47 | font-family: 'Montserrat', sans-serif; 48 | } 49 | .invoice-top-right h5{ 50 | line-height: 1.4; 51 | font-family: 'Montserrat', sans-serif; 52 | font-weight: 400; 53 | text-align: right; 54 | margin-top: 0; 55 | } 56 | .our-company-name{ 57 | font-size: 16px; 58 | font-weight: 600; 59 | margin-bottom: 0; 60 | } 61 | .our-address{ 62 | font-size: 13px; 63 | margin-top: 0; 64 | color: rgba(0,0,0,0.75); 65 | } 66 | .logo-wrapper{ overflow: auto; } 67 | 68 | /* 69 | Invoice-bottom refers to the bottom part of invoice template 70 | */ 71 | .invoice-bottom{ 72 | background-color: #ffffff; 73 | padding: 40px 60px; 74 | position: relative; 75 | } 76 | .title{ 77 | font-size: 30px; 78 | font-family: 'Montserrat', sans-serif; 79 | font-weight: 600; 80 | margin-bottom: 30px; 81 | } 82 | /* 83 | Invoice-bottom-left 84 | */ 85 | .invoice-bottom-left h5, .invoice-bottom-left h4{ 86 | font-family: 'Montserrat', sans-serif; 87 | } 88 | .invoice-bottom-left h4{ 89 | font-weight: 400; 90 | } 91 | .terms{ 92 | font-family: 'Montserrat', sans-serif; 93 | font-size: 14px; 94 | margin-top: 40px; 95 | } 96 | .divider{ 97 | margin-top: 50px; 98 | margin-bottom: 5px; 99 | } 100 | /* 101 | bottom-bar is colored bar located at bottom of invoice-card 102 | */ 103 | .bottom-bar{ 104 | position: absolute; 105 | bottom: 0; 106 | left: 0; 107 | right: 0; 108 | height: 26px; 109 | background-color: #323149; 110 | } -------------------------------------------------------------------------------- /invoice1/invoice1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Invoice1 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 26 | 27 | 28 | 29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |

Google Inc.

39 |
31 Lake Floyd Circle,
Delaware, AC 987869
India
40 |

Reference

41 |
UX Design & Development for
Android App.
42 |
43 |
44 |
45 |
46 |

Acme LLP

47 |
477 Blackwell Street,
Dry Creek, Alaska
India
48 |
49 | 50 |
51 |
06 September 2017
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |

Invoice

60 |
61 |
62 | 63 |
64 |
65 |
Invoice No.
66 |

BJI 009872

67 |
68 |
69 |
70 |
71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 |
QtyDescriptionPrice
1Initial research₹10,000
1UX design₹35,000
1Web app development₹50,000
Total₹95,000
105 |

Terms

106 |
    107 |
  • Invoice to be paid in advance.
    • 108 |
  • Make payment in 2,3 business days.
    • 109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
acme.com
118 |
119 |
120 |
contact@acme.com
121 |
122 |
123 |
+91 8097678988
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | -------------------------------------------------------------------------------- /invoice2/Acme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nirajrajgor/html-invoice-templates/b5e867c22b965fb79a8d789f0ab0057b96f0944d/invoice2/Acme.png -------------------------------------------------------------------------------- /invoice2/invoice2.css: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family: 'Montserrat', sans-serif; 3 | } 4 | .front-invoice-wrapper{ 5 | margin: 20px auto; 6 | max-width: 700px; 7 | box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); 8 | } 9 | .front-invoice-top{ 10 | background-color: #323149; 11 | padding: 40px 60px; 12 | } 13 | .front-invoice-top-left h2, .front-invoice-top-right h2{ 14 | color: #ffffff; 15 | font-size: 22px; 16 | margin-bottom: 4px; 17 | } 18 | .front-invoice-top-left h3, .front-invoice-top-right h3{ 19 | color: rgba(255,255,255,0.7); 20 | font-size: 15px; 21 | font-weight: 400; 22 | margin-top: 0; 23 | margin-bottom: 5px; 24 | } 25 | .front-invoice-top-left h5, .front-invoice-top-right h5{ 26 | color: rgba(255,255,255,0.7); 27 | font-size: 14px; 28 | font-weight: 400; 29 | margin-top: 0; 30 | } 31 | 32 | .front-invoice-top-right{ 33 | text-align: right; 34 | } 35 | 36 | .service-name{ 37 | color: #ffffff; 38 | font-size: 22px; 39 | font-weight: 500; 40 | margin-top: 60px; 41 | } 42 | .date{ 43 | color: rgba(255,255,255,0.8); 44 | font-size: 14px; 45 | } 46 | 47 | .front-invoice-bottom{ 48 | background-color: #ffffff; 49 | padding: 40px 60px; 50 | position: relative; 51 | } 52 | .borderless td, .borderless th { 53 | border: none !important; 54 | } 55 | .custom-table td{ 56 | font-size: 13px; 57 | padding: 6px !important; 58 | font-weight: 500; 59 | } 60 | .description{ 61 | line-height: 1.6; 62 | } 63 | .specs{ 64 | margin-top: 30px; 65 | font-size: 14px; 66 | } 67 | 68 | .back{} 69 | .invoice-wrapper{ 70 | margin: 20px auto; 71 | max-width: 700px; 72 | box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); 73 | } 74 | .invoice-top{ 75 | background: linear-gradient(135deg, #fafafa, #eeeeee); 76 | padding: 60px 60px 80px; 77 | } 78 | .invoice-top-left{ 79 | /*margin-top: 60px;*/ 80 | } 81 | .invoice-top-left h2, .invoice-top-right h2{ 82 | font-size: 22px; 83 | margin-bottom: 4px; 84 | } 85 | .invoice-top-left h3, .invoice-top-right h3{ 86 | font-size: 15px; 87 | font-weight: 400; 88 | margin-top: 0; 89 | margin-bottom: 5px; 90 | } 91 | .invoice-top-left h5, .invoice-top-right h5{ 92 | font-size: 14px; 93 | font-weight: 400; 94 | margin-top: 0; 95 | } 96 | 97 | .invoice-top-left h4{ 98 | margin-top: 40px; 99 | font-size: 22px; 100 | } 101 | .invoice-top-left h6{ 102 | font-size: 14px; 103 | font-weight: 400; 104 | } 105 | 106 | .invoice-top-right h2, .invoice-top-right h3, .invoice-top-right h5{ 107 | text-align: right; 108 | } 109 | 110 | .logo-wrapper{ overflow: auto; } 111 | 112 | 113 | .invoice-bottom{ 114 | background-color: #ffffff; 115 | padding: 40px 60px; 116 | position: relative; 117 | } 118 | 119 | .task-table-wrapper{ 120 | margin-top: -14%; 121 | } 122 | .task-table-wrapper .table > thead > tr> th{ 123 | border: none; 124 | padding-left: 0; 125 | /*padding-bottom: 30px;*/ 126 | } 127 | .task-table-wrapper .table> tbody> tr:first-child > td{ 128 | border-top: 0; 129 | } 130 | .task-table-wrapper .table> tbody> tr> td{ 131 | padding-top: 25px; 132 | padding-left: 0; 133 | } 134 | .task-table-wrapper .table> tbody> tr> td> h4{ 135 | margin-top: 0; 136 | } 137 | .task-table-wrapper .table tbody .desc{ 138 | width:60%; 139 | } 140 | .desc h3{ 141 | margin-top: 0; 142 | font-size: 20px; 143 | } 144 | .desc h5{ 145 | font-weight: 400; 146 | line-height: 1.4; 147 | font-size: 14px; 148 | } 149 | .invoice-bottom-total{ 150 | background-color: #fafafa; 151 | overflow: auto; 152 | margin-top: 50px; 153 | } 154 | .invoice-bottom-total .no-padding{ 155 | padding-left: 0; 156 | padding-right: 0; 157 | } 158 | .invoice-bottom-total .tax-box, .invoice-bottom-total .add-box, .invoice-bottom-total .sub-total-box{ 159 | display: inline-block; 160 | margin-right: 10px; 161 | padding: 10px; 162 | } 163 | .invoice-bottom-total .total-box{ 164 | background-color: #323149; 165 | padding: 10px; 166 | } 167 | .invoice-bottom-total .total-box h6{ 168 | margin-top: 0; 169 | color: #ffffff; 170 | text-align: right; 171 | } 172 | .invoice-bottom-total .total-box h3{ 173 | margin-bottom: 0; 174 | color: #ffffff; 175 | text-align: right; 176 | } 177 | 178 | .divider{ 179 | margin-top: 50px; 180 | margin-bottom: 5px; 181 | } 182 | 183 | .bottom-bar{ 184 | position: absolute; 185 | bottom: 0; 186 | left: 0; 187 | right: 0; 188 | height: 26px; 189 | background-color: #323149; 190 | } -------------------------------------------------------------------------------- /invoice2/invoice2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Invoice2 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 26 | 27 | 28 | 29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |

John Doe

39 |

UI / UX

40 |
Mumbai, India
41 |
42 |
43 |
44 |
45 |

Martin Sen

46 |

Hp Solutions

47 |
Delhi, India
48 |
49 |
50 |
51 |
52 |

Proposal for Web Design & Development

53 |
September 06, 2017
54 |
55 |
56 |
57 |
58 |
59 |
60 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur illo, iure eveniet, iste quidem nihil nemo molestiae! Repellat quidem, saepe, dignissimos dolor soluta nobis similique nemo voluptatem sed omnis velit!

61 |
Specifications are as follows:
62 |
63 |
64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 |
Rate:₹50 / hour
Estimated Time:100 hours
Start Date:August 10, 2017
End Date:September 10, 2017
Files provided:PSD files and front-end markup
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 | 97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |

John Doe

107 |

UI / UX

108 |
Mumbai, India
109 | 110 |

Invoice

111 |
September 06, 2017
112 |
113 |
114 |
115 |
116 |

Martin Sen

117 |

Hp Solutions

118 |
Delhi, India
119 | 120 | 123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 146 | 147 | 148 | 149 | 150 | 151 | 155 | 156 | 157 | 158 | 159 | 160 |
TASK DESCRIPTIONRATEHOURSTOTAL
143 |

Web Design

144 |
Design the wireframes and PSD mockups of website.
145 |

₹50

50

₹2500

152 |

Web Development

153 |
Making the responsive website from the PSD file & hosting on server.
154 |

₹50

50

₹2500

161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
SUBTOTAL
169 |
₹5,000
170 |
171 |
172 |

+

173 |
174 |
175 |
TAXES
176 |
₹586
177 |
178 |
179 |
180 |
181 |
TOTAL
182 |

₹55,866

183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
johndoe.com
193 |
194 |
195 |
contact@johndoe.com
196 |
197 |
198 |
+91 8097678988
199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | -------------------------------------------------------------------------------- /invoice3/Acme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nirajrajgor/html-invoice-templates/b5e867c22b965fb79a8d789f0ab0057b96f0944d/invoice3/Acme.png -------------------------------------------------------------------------------- /invoice3/invoice3.css: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family: 'Montserrat', sans-serif; 3 | } 4 | hr{ 5 | margin-top: 10px; 6 | margin-bottom: 10px; 7 | } 8 | 9 | .invoice{ 10 | position: relative; 11 | background-color: #f5f5f5; 12 | } 13 | .bg-color{ 14 | background-color: #9575CD; 15 | position: absolute; 16 | height: 350px; /* Addition of 100px of invoice-wrapper and min-height of invoice-top */ 17 | top: 0; 18 | left: 0; 19 | right: 0; 20 | } 21 | .invoice-wrapper{ 22 | margin-top: 100px; 23 | margin-bottom: 30px; 24 | margin-left: auto; 25 | margin-right: auto; 26 | max-width: 900px; 27 | box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); 28 | } 29 | 30 | .invoice-top{ 31 | background-color: #f5f5f5; 32 | min-height: 250px; 33 | max-height: 250px; 34 | overflow: hidden; 35 | padding: 40px 60px; 36 | } 37 | 38 | .invoice-top-left .logo{ 39 | width: 190px; 40 | } 41 | .invoice-top-left h1{ 42 | font-size: 24px; 43 | letter-spacing: 1.5px; 44 | } 45 | .invoice-top-left h5{ 46 | font-size: 14px; 47 | color: rgba(0,0,0,0.30); 48 | } 49 | 50 | .invoice-top-right{ 51 | text-align: right; 52 | } 53 | .invoice-top-right h4{ 54 | font-size: 20px; 55 | } 56 | .invoice-top-right h6{ 57 | color: rgba(0,0,0,0.30); 58 | font-size: 14px; 59 | margin-top: 15px; 60 | } 61 | .invoice-top-right h3{ 62 | color: rgba(0,0,0,0.30); 63 | font-size: 14px; 64 | margin-top: 15px; 65 | } 66 | .invoice-top-right .amount{ 67 | color: rgba(0, 200, 83, 0.95); 68 | font-size: 16px; 69 | margin-top: 40px; 70 | } 71 | 72 | .invoice-bottom{ 73 | background-color: #ffffff; 74 | padding: 5px 60px 30px; 75 | } 76 | 77 | .invoice-bottom .service-title{ 78 | font-size: 18px; 79 | } 80 | .invoice-bottom .service-subtitle{ 81 | font-size: 12px; 82 | color: rgba(0,0,0, 0.70); 83 | font-weight: 400; 84 | } 85 | .invoice-bottom .service-price{ 86 | font-size: 16px; 87 | color: rgba(0, 200, 83, 0.55); 88 | text-align: right; 89 | } 90 | .invoice-bottom .price-info{ 91 | font-size: 12px; 92 | color: rgba(0,0,0,0.30); 93 | text-align: right; 94 | } 95 | 96 | .sub-total, .sub-total-price{ 97 | margin-top: 30px !important; 98 | } 99 | .sub-total, .discount{ 100 | text-transform: uppercase; 101 | color: rgba(0,0,0,0.4); 102 | text-align: right; 103 | font-size: 13px; 104 | } 105 | .sub-total-price, .discount-price{ 106 | font-size: 16px; 107 | color: #333; 108 | margin-top: 10px; 109 | text-align: right; 110 | } 111 | .total-due{ 112 | text-align: right; 113 | font-size: 13px; 114 | color: #333; 115 | } 116 | .total-due-price{ 117 | color: rgba(0, 200, 83, 0.95); 118 | font-size: 18px; 119 | text-align: right; 120 | } 121 | 122 | .footer{ 123 | background-color: #fafafa; 124 | padding: 50px 50px; 125 | } 126 | .client-address h6{ 127 | color: rgba(0,0,0,0.3); 128 | font-size: 15px; 129 | } 130 | .client-address h2{ 131 | color: #222; 132 | font-size: 16px; 133 | } 134 | .client-address h4{ 135 | font-size: 13px; 136 | color: rgba(0,0,0,0.4); 137 | line-height: 1.65; 138 | font-weight: 400; 139 | } 140 | 141 | .our-address h6{ 142 | color: rgba(0,0,0,0.3); 143 | font-size: 15px; 144 | } 145 | .our-address h2{ 146 | color: #222; 147 | font-size: 16px; 148 | } 149 | .our-address h4{ 150 | font-size: 13px; 151 | color: rgba(0,0,0,0.4); 152 | line-height: 1.65; 153 | font-weight: 400; 154 | } 155 | 156 | .note h6{ 157 | color: rgba(0,0,0,0.3); 158 | font-size: 15px; 159 | } 160 | .note p{ 161 | color: rgba(0,0,0,0.4); 162 | margin-top: 20px; 163 | } 164 | .payment{ 165 | background-color: #2196F3; 166 | padding: 20px; 167 | } 168 | .payment h3{ 169 | margin: 0; 170 | font-size: 20px; 171 | letter-spacing: 1.5px; 172 | } 173 | .payment h3 a{ color: #fff; } -------------------------------------------------------------------------------- /invoice3/invoice3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Invoice3 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 26 | 27 | 28 | 29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 | 40 |

ACME Design Co.

41 |
Web design for Airbnb homepage
42 |
43 |
44 |
45 |
46 |

INVOICE

47 |
#378928
48 |

Sep 6th, 2017

49 |

₹50,000

50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |

Web Design and UI

58 |
UI design in Photoshop for development.
59 |
60 |
61 |

₹25,000

62 |
63 |
64 |
65 |
66 |
67 |

Website Maintenance

68 |
Long term maintenance of website and bug fixes.
69 |
70 |
71 |

₹25,000

72 |
Recurring Price
73 |
74 |
75 |
76 |
77 |
78 |

SUB TOTAL

79 |
80 |
81 |

₹50,000

82 |
83 |
84 |
85 |

DISCOUNT

86 |
87 |
88 |

-₹2,500

89 |
90 |
91 |
92 |

TOTAL DUE

93 |
94 |
95 |

₹47,500 Rupees

96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
TO
104 |

Airbnb Co.

105 |

106 | 189 Fight Street
107 | Las Vegas, LV 878
108 | United States
109 | contact@airbnb.co 110 |

111 |
112 |
113 |
114 |
115 |
FROM
116 |

Acme Design Co.

117 |

118 | 189 Fight Street
119 | Las Vegas, LV 878
120 | United States
121 | contact@airbnb.co 122 |

123 |
124 |
125 |
126 |
127 |
NOTE
128 |

A special note regarding invoice can be written here, as this is tiny place to notify the client.

129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |

137 | PAY NOW 138 |

139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | --------------------------------------------------------------------------------