-
Notifications
You must be signed in to change notification settings - Fork 1
/
demo.html
238 lines (201 loc) · 10.4 KB
/
demo.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
<!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>DeskTime demo: get a tour of our features | DeskTime</title>
<!-- add icon on title link -->
<link rel = "icon" href ="https://desktime.com/favicon/safari-pinned-tab.svg" type = "image/x-icon">
<link rel="stylesheet" href="./style/demo.css">
<link rel="stylesheet" href="./style/footer.css">
<link rel="stylesheet" href="./style/navbar.css">
</head>
<body>
<!-- import navbar here -->
<div id="navbar"></div>
<!-- page body -->
<!-- this div is for control hole element of demo page -->
<div id="main">
<!-- this div for control first part of demo page -->
<div id="first">
<!-- this div "detail" which containt all the elemnt in first part -->
<div class="detail">
<h2>Get a <b>super quick</b> in-depth demo of DeskTime</h2>
<p>What’s the best way to find out if DeskTime works for you? Try it yourself! We’ll give you a personalized 1:1 DeskTime demo and answer any questions you might have.</p>
<!-- for button adjust the thing's -->
<div class="btn">
<button>BOOK A DEMO</button>
<button>START A FREE TRIAL</button>
</div>
</div>
<!-- this div created to get the help flex the property and do as similar like real web-site -->
<div class="pic-1">
<img src="https://desktime.com/assets/img/demo/raivis.png" alt="image_error">
</div>
</div>
<!-- this is for main div where my secon part all element store inside -->
<div id="second-1">
<!-- div-1 -->
<div>
<img src="https://desktime.com/assets/img/demo/demo-account.svg?v2" alt="">
<h2>Demo account</h2>
<p>Learn how DeskTime tracks time, explore the dashboard and try all the available features in this self-guided DeskTime demo.</p>
<button>EXPLORE THE DEMO ACCOUNT</button>
</div>
<!-- div-2 -->
<div>
<img src="https://desktime.com/assets/img/demo/live-demo.svg?v2" alt="">
<h2>Live demo
</h2>
<p>Sign up for a 1:1 demo call with our product expert, take a personalized all tour and get answers to any questions you might have.</p>
<button>BOOK DEMO</button>
</div>
<!-- div-3 -->
<div>
<img src="https://desktime.com/assets/img/demo/webinars.svg?v2" alt="">
<h2>Webinars</h2>
<p>Watch on-demand webinars and tutorials to make sure and there will be's in you are get the most out of all the features DeskTime has to offer.</p>
<button>WATCH NOW</button>
</div>
<!-- div-4 -->
<div>
<img src="https://desktime.com/assets/img/demo/sign-up.svg?v2" alt="">
<h2>Sign Up</h2>
<p>Find out what time tracking means, add team members, and test on the project feature for effective workflow management.</p>
<button>START A FREE TRAIL</button>
</div>
</div>
<!-- this is the middel part of the web page and in this two are there -->
<div id="middle">
<!-- div on if detaile -->
<div class="one">
<h1>DeskTime for Teams</h1>
<p class="same-1">Watch this tutorial to learn how to keep track of your employees' work with the Admin features of DeskTime, find out how to add team members, manage work schedules, create invoices and reports, and more.</p>
<p class="same-1"> DeskTime you can plan and create shifts, manage absences and use the Project tracking feature to see who is working on what and for how long.</p>
<p class="same-2"><img src="https://desktime.com/assets/img/icons/bullet-point-check.svg"></img> Keep track of processes and goals.</p>
<p class="same-2"><img src="https://desktime.com/assets/img/icons/bullet-point-check.svg"></img> Set Automatic time & project tracking.</p>
<p class="same-2"><img src="https://desktime.com/assets/img/icons/bullet-point-check.svg"></img> Grasp shift and absence scheduling.</p>
<!-- div btn-2 -->
<div class="btn-08">
<button>START A FREE TRAIL</button>
<button>BOOK DEMO</button>
</div>
</div>
<!-- div 2 for youtube video -->
<div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/pl3kbM9mC08" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<!-- this id for second middle page -->
<div id="middle-page">
<!-- youtube -->
<div class="video-2">
<iframe width="560" height="315" src="https://www.youtube.com/embed/dXNTGAttl6Y" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!-- this is for details class is "middle-2"-->
<div class="middle-2">
<h1>DeskTime FOR EMPLOYEES</h1>
<p>If you're working in a company that tracks your work hours with DeskTime, this video guide is for you.
Learn what DeskTime’s time tracking app is, how to navigate it, use its features, such as Projects, Work Schedules, Absence calendar, Reports, and more.</p>
<!-- this is for second p tag class is "sec-p" -->
<div class="sec-p">
<p><img src="https://desktime.com/assets/img/icons/bullet-point-check.svg"></img>
Identify your computer usage habits.
</p>
<p><img src="https://desktime.com/assets/img/icons/bullet-point-check.svg"></img>
Improve upon work plan & execution.
</p>
<p><img src="https://desktime.com/assets/img/icons/bullet-point-check.svg"></img>
See what's causing constraints in your day.
</p>
</div>
<!-- this div for btn class is "btn-mid"-->
<div class="btn-mid">
<button>START A FREE TRAIL </button>
<button>BOOK A DEMO</button>
</div>
</div>
</div>
<!-- middle-page div end -->
<!-- Freelancers div or you call part id free-1 -->
<div id="free-1">
<!-- in this we take div to fill detail of freelancer -->
<div class="deat-1">
<h1>DeskTime for Freelancers</h1>
<p>
This guide explores the main features of DeskTime for freelancers and shows how to manage projects, create reports, and change the settings specific to you.
Using DeskTime is a great way to never again get underpaid for the time invested in your clients' projects.
</p>
<!-- this for p with ticke -->
<div class="third-p">
<p><img src="https://desktime.com/assets/img/icons/bullet-point-check.svg">
Track time spent on specific projects.
</p>
<p><img src="https://desktime.com/assets/img/icons/bullet-point-check.svg">
Use the Cost calculation and Invoicing features.
</p>
<p><img src="https://desktime.com/assets/img/icons/bullet-point-check.svg">
Boost productivity to raise your income.
</p>
</div>
<!-- this is for the button -->
<div class="btn-3">
<button>START A FREE TRAIL</button>
<button>BOOK NOW</button>
</div>
</div>
<!-- video-3 -->
<div class="video-3">
<iframe width="560" height="315" src="https://www.youtube.com/embed/pl3kbM9mC08" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<!-- freelancer part end -->
<!-- middel navbar type -->
<div id="middle-nav">
<div>
<img src="https://desktime.com/assets/img/bs4/ratings/capterra.svg?v2" alt="">
</div>
<div>
<img src="https://desktime.com/assets/img/bs4/ratings/g2-crowd.svg?v2" alt="">
</div>
<div>
<img src="https://desktime.com/assets/img/bs4/ratings/software-advice.svg?v2" alt="">
</div>
</div>
<!-- middle nav bar end -->
<!-- Demo account part -->
<div id="demo-acct">
<div class="image">
<img src="https://desktime.com/assets/img/demo/notebook.png" alt="">
</div>
<div class="info-2">
<h1>Not convinced yet?
Check out our self-guided demo</h1>
<p>If you want the full scope of what you’re getting once you sign up, visit our demo account. You can try out all the features DeskTime has to offer.</p>
<button>DEMO ACCOUNT</button>
</div>
</div>
<!-- end demo account part -->
<!-- last nav past start -->
<!-- <div id="last-nav">
<h1>Join 400,000+ users already managing their time with the DeskTime app</h1>
<div class="btn-inp">
<input type="email" placeholder="Enter Your Email">
<button>GET STARTED</button>
</div>
<p>Try free for 14 days. No credit card required.
By signing up, you agree to our <a href="https://desktime.com/terms"> terms </a> and <a href="https://desktime.com/privacy"> privacy policy</a>.</p>
</div> -->
<!-- end of the last nav part -->
</div>
<!-- main div end -->
<div id="footer"></div>
</body>
<script src="./script/navbar.js"></script>
<script src="./script/pricing.js" type="module"></script>
<script type="module">
import {Subscribe} from "./script/demo.js"
document.querySelector("#subscribeBtn").addEventListener("click", Subscribe);
</script>
</html>