-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
286 lines (244 loc) · 12.2 KB
/
index.html
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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
<!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">
<title>Toggl Track: Time Tracking Software for Any Workflow </title>
<link rel="icon" type="image/png" href="./track/icon.png" sizes="32x32">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./track/track.css">
<link rel="stylesheet" href="./Components/css.css">
<style>
.grid_box {
display: grid;
grid-template-columns: repeat(2, 1fr);
margin: auto;
margin-top: 50px;
justify-content: center;
width: 80%;
gap: 1.9rem;
}
.grid_box>div {
padding: 25px;
border-radius: 10px;
height: 500px;
display: flex;
flex-direction: column;
gap: 60px;
}
.grid_box img {
width: 100%;
}
#third {
background-color: rgb(44, 19, 56);
padding-top: 100px;
}
#third>h1 {
text-align: center;
color: #FFF3ED;
font-size: 36px;
}
#second_list>h1 {
color: #FFF3ED;
}
</style>
</head>
<body>
<header></header>
<nav></nav>
<div id="container">
<div id="form_parent">
<h1 id="heading">Simple time tracking to save <br> you <em>time</em> and <em>money</em>.</h1>
<div id="form">
<div>
<p class="first">Bill accurately, measure profitability, manage workloads — and spend less time
on
it all.</p>
<div id="log_form">
<div> <input type="email" placeholder="Email"></div>
<div id="wrapper">
<div id="password_alert">
<th class="thead">
<p>Please make sure that your password includes:</p>
<li id="policy-length">8 or more characters</li>
<li id="policy-uppercase">lowercase and uppercase</li>
<li id="policy-number">at least one number</li>
</th>
</div>
<input type="password" id="password" placeholder="A strong password">
<span id="eye">
<i class="fa fa-eye" id="hide1" style="font-size:36px" onclick="toggle()"></i>
<i class="fa fa-eye-slash" id="hide2" style="display: none; font-size:36px "
onclick="toggle()"></i>
</span>
</div>
<div id="button">
<div> <button id="Sign_up_btn">Sign up with email</button> </div>
<div>
<p>Or sign up with:</p>
<button class="google_btn"><i class="gg-google"></i></button>
<button class="google_btn" style="padding: 7px 10px;"><i class="fa fa-apple"
style="font-size:1.7rem"></i></button>
</div>
</div>
</div>
<p class="end">By signing up, you agree to our <a href="#">terms of service</a>, <a
href="#">privacy
policy</a> and to receiving marketing
communication from Toggl Track. You can opt out anytime.</p>
</div>
<div id="timer">
<div id="tilt_parent">
<div id="tilt" data-tilt>
<div>
<p class="animation_text">
Stand-up meeting
</p>
</div>
<div>
<div id="stop_watch">00:00:00</div>
<div id="icon">
<i class="fa fa-play-circle" id="play"></i>
<i class="fa fa-stop-circle" id="stop"></i>
</div>
</div>
</div>
<div>
<img id="hand" src="./track/toggl-hand.png" alt="">
</div>
</div>
<div id="timer_p">
<h4>
“I love the ease of just clocking in and out with <em> just one click!</em>”
<br>
</h4>
<p>– Quelani P.</p>
</div>
</div>
</div>
<div>
<p>TRUSTED BY OVER 6 MILLION USERS ACROSS 120 COUNTRIES</p>
<img src="./track/brands-mixed-desktop-light.avif">
</div>
</div>
<div id="second">
<div>
<div class="Wrapper2">
<h2 id="heading2">Time tracking for all your
productivity and profitability needs
</h2>
<div id="button">
<button class=""><em>Employee time tracking</em></button>
<button>
<p>Billing & invoicing</p>
</button>
<button>
<p>Project budgeting</p>
</button>
<button>
<p>Reporting</p>
</button>
<button>
<p>Payroll</p>
</button>
</div>
<div id="img_parent">
<div>
<div id="second_list">
<h1 id="timesheets">Make timesheets history.</h1>
<ul>
<li>Get the data you need without disrupting your team's workflow. Track's
one-click
time tracking syncs across multiple platforms.</li>
<li>Get employee buy-in with a tool designed to empower teams with knowledge,
not
micromanage them.</li>
</ul>
<div><a href="#">Learn more</a>
<a caretdirection="right" color="#FFF3ED" href="#">Or sign up for free</a>
</div>
</div>
<div>
<div>
<img style="object-fit: contain; opacity: 1;"
sizes="(min-width: 759px) 759px, 100vw"
src="./track/employee-time-tracking-short.png">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="third">
<h1>Why do teams love Toggl Track?</h1>
<div class="grid_box">
<div style="background-color: #f7d8f3;">
<h4>Users report up to 25% increase in
billable hours with accurate time tracking that accounts for every minute spent on
client work.
<!-- --><a href="#">Learn more</a>
</h4>
<img src="./track/feature-increasebillables.avif" alt="">
</div>
<div style="background-color: #FCE5D8;">
<h4>Speed up team adoption with an anti-surveillance platform that gets a "yes" from every
employee.
<!-- --><a href="#">Learn more</a>
</h4>
<img src="./track//feature-trustemployee.avif" alt="">
<div class="css-4tj34t-MiniCTA et001ls22">
<p color="#6B5A74" class="css-1bl7hqx-P2 e6bq8xs6">Toggl Track stands against surveillance.
</p><a href="#">Read about it here</a>
</div>
</div>
<div style="background-color: #FCE5D8;">
<h4>No training necessary. Get started right away with intuitive and welcoming features.
<!-- --><a href="#">Learn more</a>
</h4>
<img src="./track/feature-intuitive.avif" alt="">
<div>
<p><strong>“The acceptance from all users is very high. I
have seen a 40+ year employee move from their Excel-based tracking they have used
forever, to this tool without any issue.”</strong></p>
<div><img style="width: 30%;" src="./track/star.svg">5/5 stars on G2.com
<!-- -->
</div>
<p>— Chris B, Systems Application Lead in an
enterprise team</p>
</div>
</div>
<div style="background-color: #FFF2D3;">
<h4>Make time tracking and reporting a breeze with a beautifully-designed app experience.
<!-- --><a href="#">Learn more</a>
</h4>
<img src="./track//feature-onetrack.avif" alt="">
<div>
<p><strong>“The acceptance from all users is very high. I
have seen a 40+ year employee move from their Excel-based tracking they have used
forever, to this tool without any issue.”</strong></p>
<div><img style="width: 30%;" src="./track/star.svg">5/5 stars on G2.com
<!-- -->
</div>
<p>— Chris B, Systems Application Lead in an
enterprise team</p>
</div>
</div>
</div>
<div></div>
</div>
</div>
<footer></footer>
</body>
</html>
<script src="./track//track.js"></script>
<script type="module">
import { navbar, navbar2, footer } from './Components/nav_footer.js'
document.querySelector("header").innerHTML = navbar();
document.querySelector("footer").innerHTML = footer();
document.querySelector("nav").innerHTML = navbar2();
</script>
<!-- Load vanilla-tilt first -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.2/vanilla-tilt.min.js"></script>