-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
155 lines (150 loc) · 8.12 KB
/
index.html
File metadata and controls
155 lines (150 loc) · 8.12 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="shortcut icon" href="./assets/images/favicon (3).ico" type="image/profile">
<title>Invoice Genie</title>
</head>
<body>
<!-- Navbar -->
<nav class="navbar fixed-top navbar-expand-lg">
<div class="container-fluid">
<a class="navbar-brand mx-4" href="#home"><img src="./assets/images/logo2.png" alt="Logo" width="220" height="50" class="d-inline-block align-text-top logo-img"></a>
<!-- <a class="navbar-brand mx-4 my-2" href="#home"><h4>Invoice<span>Genie</span></h4></a> -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<!-- <span class="navbar-toggler-icon"></span> -->
<i class="bi bi-columns-gap"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link mx-4" aria-current="page" href="#home">Home</a>
<a class="nav-link mx-4" href="#features">Features</a>
<a class="nav-link mx-4" href="#steps">Steps</a>
<a class="nav-link mx-4" href="#templates">Templates</a>
</div>
<a href="#templates" class="btn btn-primary mx-4">Create Invoice</a>
</div>
</div>
</nav>
<!-- /Navbar -->
<!-- Home -->
<div class="container-fluid home-section" id="home">
<div class="row row-cols-1 row-cols-lg-2 my-0 mx-4 justify-content-around mt-5">
<div class="col mx-4 my-4 py-4 ">
<h1 class="heading display-4 h1 ">Online invoicing made easy</h1>
<p class="homeText pt-4">Businesses of all sizes use invoices don't let your business stuck behind.<br> Our simple and easy to use app let's you create a modern <br>looking invoice in just 3 steps.</p>
<a href="#templates" class="btn btn-primary my-4">Create invoice now</a>
<div class="verfied my-1"><i class="bi bi-patch-check-fill"></i><small class="my-1 text-center">No Sign up required</small></div>
</div>
<div class="col headImage d-flex justify-content-center"><img src="./assets/images/Invoice-amico.svg" alt=""></div>
</div>
</div>
<!-- /Home -->
<hr>
<!-- Features Section -->
<div class="container text-center features-section" id="features">
<div class="row justify-content-center">
<div class="features-heading">
<h1 class="heading display-5 h1">Explore Features</h1>
</div>
</div>
<div class="cards">
<div class="logo-container1 logoContainer mt-5"><i class="bi bi-3-circle-fill"></i></div>
<h5 class="mt-4">Just 3 Steps</h5>
<p>Generate & download your invoice in 3 steps.</p>
</div>
<div class="cards">
<div class="logo-container2 logoContainer mt-5"><i class="bi bi-receipt"></i></div>
<h5 class="mt-4">Invoice Templates</h5>
<p>Choose from verity of invoice templates.</p>
</div>
<div class="cards">
<div class="logo-container3 logoContainer mt-5"><i class="bi bi-emoji-smile-fill"></i></div>
<h5 class="mt-4">Free to use</h5>
<p>Download your invoices from anywhere for free.</p>
</div>
</div>
<!-- /Features Section -->
<hr>
<!-- Invoice steps -->
<div class="container-fluid Invoice-steps-section" id="steps">
<div class="row row-cols-1 row-cols-lg-2 my-0 mx-4 justify-content-around">
<div class="col ms-4">
<div class="steps-container d-none d-md-block justify-content-center">
<div class="steps py-3">
<!-- <i class="bi bi-1-circle me-3"></i> -->
<i class="bi bi-collection me-3"></i>
<h4>Select template</h4>
</div>
<div class="steps py-3">
<!-- <i class="bi bi-2-circle me-3"></i> -->
<i class="bi bi-file-text me-3"></i>
<h4>Fill the invoice</h4>
</div>
<div class="steps py-3">
<!-- <i class="bi bi-3-circle me-3"></i> -->
<i class="bi bi-cloud-arrow-down me-3"></i>
<h4>Download</h4>
</div>
</div>
</div>
<div class="col headImage gy-5">
<div class="row">
<h1 class="heading display-5 h1">The easiest invoicing app you'll ever use</h1>
<p class="homeText pt-4">Make professional looking invoice in just 3 steps. You'll never go back to excel again to create invoices. Just give it a try!</p>
<div class="col">
<a href="#templates" class="btn btn-primary my-4">Create invoice now</a>
</div>
</div>
</div>
</div>
</div>
<!-- /Invoice steps -->
<hr>
<!-- Templates -->
<div class="container text-center features-section" id="templates">
<div class="row justify-content-center">
<div class="features-heading">
<h1 class="heading display-5 h1">Browse our collection of Invoice Templates</h1>
<small>You can start creating your Invoice by clicking on any of the below template.</small>
</div>
</div>
<a href="./templates/fill_invoice.html"><img src="./assets/images/template1.png" class="template" id="template1" alt=""></a>
<a href="./templates/fill_invoice.html"><img src="./assets/images/template2.png" class="template" id="template2" alt=""></a>
<a href="./templates/fill_invoice.html"><img src="./assets/images/template3.png" class="template" id="template3" alt=""></a>
<a href="./templates/fill_invoice.html"><img src="./assets/images/template4.png" class="template" id="template4" alt=""></a>
<a href="./templates/fill_invoice.html"><img src="./assets/images/template5.png" class="template" id="template5" alt=""></a>
<a href="./templates/fill_invoice.html"><img src="./assets/images/template6.png" class="template" id="template6" alt=""></a>
</div>
<!-- /Templates -->
<hr>
<!-- try button -->
<div class="container-fluid ready-section text-center">
<div class="text">
<h1 class="heading heading1 display-5 h1">
Ready to give it a try?
</h1>
<p class="homeText pt-1 pt-4 h5">Create a free invoice on the go and share it with your customers!</p>
<a href="#templates" class="btn btn-primary my-4">Create invoice now</a>
</div>
</div>
<!-- /try button -->
<hr>
<!-- footer -->
<div class="container-fluid footer-section text-center">
<div>
<a class="navbar-brand mx-4 my-2" href="#home"><img src="./assets/images/logo2.png" alt="Logo" width="220" height="50" class="d-inline-block align-text-top logo-img"></a>
</div>
<!-- <a class="navbar-brand mx-4 my-2 footer-logo" href="#home"><h3 class="footer-logo-text">Invoice<span>Genie</span>™</h3></a> -->
<a href="https://github.com/OmkarShinde1996/invoice-genie" target="_blank"><i class="bi bi-github"></i></a>
</div>
<!-- /footer -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<script src="./assets/js/templateDeciding.js"></script>
</body>
</html>