-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
340 lines (320 loc) · 21.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
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
<!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>Skilline - Educational Website</title>
<!-- google font link -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- custom css file -->
<link rel="stylesheet" href="css/style.css">
<!-- bootstrap icon link -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>
<body>
<!-- navbar starts -->
<header>
<nav class="navbar bg-cream">
<div class="logo">
<div class="square"></div>
<h4>Skilline</h4>
</div>
<ul class="nav-list">
<li><a href="">Home</a></li>
<li><a href="">Careers</a></li>
<li><a href="">Blog</a></li>
<li><a href="">About Us</a></li>
<button class="login">Login</button>
<button class="signup">Sign Up</button>
</ul>
<div class="hamburger">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line lin2-3"></div>
</div>
</nav>
</header>
<!-- hero section starts -->
<section class="hero bg-cream">
<div class="main">
<div class="hero-content">
<h2><span>Studying</span> Online is <br> now much easier</h2>
<p>Skilline is an interesting platform that will teach you in more an interactive way</p>
<div class="buttons">
<button>Join For Free</button>
<div class="play">
<i class="bi bi-play-fill"></i>
<a href="">Watch How it works</a>
</div>
</div>
</div>
<div class="img">
<img src="images/girl.png" alt="">
</div>
</div>
</section>
<!-- partner section starts -->
<section class="partner">
<p>Trusted by 5,000+ Companies Worldwide</p>
<div class="img">
<img src="images/google.svg" alt="">
<img src="images/netflix.svg" alt="">
<img src="images/airbnb.svg" alt="">
<img src="images/amazon.svg" alt="">
<img src="images/facebook.svg" alt="">
<img src="images/grab.svg" alt="">
</div>
</section>
<!-- feature section starts -->
<section class="feature mt-4">
<div class="heading">
<h4>All-In-One <span>Cloud Software</span>.</h4>
<p>Skilline is one powerful online software suite that combines all the tools <br> needed to run a successful school or office.</p>
</div>
<div class="feature-card">
<div class="card">
<svg viewBox="0 0 33 46" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-white"><path d="M24.75 23H8.25V28.75H24.75V23ZM32.3984 9.43359L23.9852 0.628906C23.5984 0.224609 23.0742 0 22.5242 0H22V11.5H33V10.952C33 10.3859 32.7852 9.83789 32.3984 9.43359ZM19.25 12.2188V0H2.0625C0.919531 0 0 0.961328 0 2.15625V43.8438C0 45.0387 0.919531 46 2.0625 46H30.9375C32.0805 46 33 45.0387 33 43.8438V14.375H21.3125C20.1781 14.375 19.25 13.4047 19.25 12.2188ZM5.5 6.46875C5.5 6.07164 5.80766 5.75 6.1875 5.75H13.0625C13.4423 5.75 13.75 6.07164 13.75 6.46875V7.90625C13.75 8.30336 13.4423 8.625 13.0625 8.625H6.1875C5.80766 8.625 5.5 8.30336 5.5 7.90625V6.46875ZM5.5 12.2188C5.5 11.8216 5.80766 11.5 6.1875 11.5H13.0625C13.4423 11.5 13.75 11.8216 13.75 12.2188V13.6562C13.75 14.0534 13.4423 14.375 13.0625 14.375H6.1875C5.80766 14.375 5.5 14.0534 5.5 13.6562V12.2188ZM27.5 39.5312C27.5 39.9284 27.1923 40.25 26.8125 40.25H19.9375C19.5577 40.25 19.25 39.9284 19.25 39.5312V38.0938C19.25 37.6966 19.5577 37.375 19.9375 37.375H26.8125C27.1923 37.375 27.5 37.6966 27.5 38.0938V39.5312ZM27.5 21.5625V30.1875C27.5 30.9817 26.8847 31.625 26.125 31.625H6.875C6.11531 31.625 5.5 30.9817 5.5 30.1875V21.5625C5.5 20.7683 6.11531 20.125 6.875 20.125H26.125C26.8847 20.125 27.5 20.7683 27.5 21.5625Z" fill="white"></path></svg>
<h4>Online Billing, Invoicing, & Contracts</h4>
<p>Simple and secure control of your organization’s financial and legal transactions. Send customized invoices and contracts</p>
</div>
<div class="card">
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-white"><path d="M12 0C11.0532 0 10.2857 0.767511 10.2857 1.71432V5.14285H13.7142V1.71432C13.7142 0.767511 12.9467 0 12 0Z" fill="white"></path><path d="M36 0C35.0532 0 34.2856 0.767511 34.2856 1.71432V5.14285H37.7142V1.71432C37.7143 0.767511 36.9468 0 36 0Z" fill="white"></path><path d="M42.8571 5.14282H37.7143V12C37.7143 12.9468 36.9468 13.7143 36 13.7143C35.0532 13.7143 34.2857 12.9468 34.2857 12V5.14282H13.7142V12C13.7142 12.9468 12.9467 13.7143 11.9999 13.7143C11.0531 13.7143 10.2856 12.9468 10.2856 12V5.14282H5.14285C2.30253 5.14282 0 7.44535 0 10.2857V42.8571C0 45.6974 2.30253 48 5.14285 48H42.8571C45.6975 48 48 45.6974 48 42.8571V10.2857C48 7.44535 45.6975 5.14282 42.8571 5.14282ZM44.5714 42.8571C44.5714 43.8039 43.8039 44.5714 42.857 44.5714H5.14285C4.19605 44.5714 3.42854 43.8039 3.42854 42.8571V20.5714H44.5714V42.8571Z" fill="white"></path><path d="M13.7142 23.9999H10.2857C9.33889 23.9999 8.57138 24.7674 8.57138 25.7142C8.57138 26.661 9.33889 27.4285 10.2857 27.4285H13.7142C14.661 27.4285 15.4285 26.661 15.4285 25.7142C15.4285 24.7674 14.661 23.9999 13.7142 23.9999Z" fill="white"></path><path d="M25.7143 23.9999H22.2857C21.3389 23.9999 20.5714 24.7674 20.5714 25.7142C20.5714 26.661 21.3389 27.4285 22.2857 27.4285H25.7143C26.6611 27.4285 27.4286 26.661 27.4286 25.7142C27.4286 24.7674 26.6611 23.9999 25.7143 23.9999Z" fill="white"></path><path d="M37.7143 23.9999H34.2857C33.3389 23.9999 32.5714 24.7674 32.5714 25.7142C32.5714 26.661 33.3389 27.4285 34.2857 27.4285H37.7143C38.6611 27.4285 39.4286 26.661 39.4286 25.7142C39.4286 24.7674 38.661 23.9999 37.7143 23.9999Z" fill="white"></path><path d="M13.7142 30.8571H10.2857C9.33889 30.8571 8.57138 31.6246 8.57138 32.5714C8.57138 33.5182 9.33889 34.2857 10.2857 34.2857H13.7142C14.661 34.2857 15.4285 33.5182 15.4285 32.5714C15.4285 31.6246 14.661 30.8571 13.7142 30.8571Z" fill="white"></path><path d="M25.7143 30.8571H22.2857C21.3389 30.8571 20.5714 31.6246 20.5714 32.5714C20.5714 33.5182 21.3389 34.2857 22.2857 34.2857H25.7143C26.6611 34.2857 27.4286 33.5182 27.4286 32.5714C27.4286 31.6246 26.6611 30.8571 25.7143 30.8571Z" fill="white"></path><path d="M37.7143 30.8571H34.2857C33.3389 30.8571 32.5714 31.6246 32.5714 32.5714C32.5714 33.5182 33.3389 34.2857 34.2857 34.2857H37.7143C38.6611 34.2857 39.4286 33.5182 39.4286 32.5714C39.4285 31.6246 38.661 30.8571 37.7143 30.8571Z" fill="white"></path><path d="M13.7142 37.7142H10.2857C9.33889 37.7142 8.57138 38.4817 8.57138 39.4286C8.57138 40.3754 9.33889 41.1428 10.2857 41.1428H13.7142C14.661 41.1428 15.4285 40.3753 15.4285 39.4284C15.4285 38.4816 14.661 37.7142 13.7142 37.7142Z" fill="white"></path><path d="M25.7143 37.7142H22.2857C21.3389 37.7142 20.5714 38.4817 20.5714 39.4285C20.5714 40.3754 21.3389 41.1429 22.2857 41.1429H25.7143C26.6611 41.1429 27.4286 40.3754 27.4286 39.4285C27.4286 38.4817 26.6611 37.7142 25.7143 37.7142Z" fill="white"></path><path d="M37.7143 37.7142H34.2857C33.3389 37.7142 32.5714 38.4817 32.5714 39.4285C32.5714 40.3754 33.3389 41.1429 34.2857 41.1429H37.7143C38.6611 41.1429 39.4286 40.3754 39.4286 39.4285C39.4286 38.4817 38.661 37.7142 37.7143 37.7142Z" fill="white"></path></svg>
<h4>Easy Scheduling & Attendance Tracking</h4>
<p>Schedule and reserve classrooms at one campus or multiple campuses. Keep detailed records of student attendance</p>
</div>
<div class="card">
<svg viewBox="0 0 55 44" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-white"><path d="M8.25 19.25C11.2836 19.25 13.75 16.7836 13.75 13.75C13.75 10.7164 11.2836 8.25 8.25 8.25C5.21641 8.25 2.75 10.7164 2.75 13.75C2.75 16.7836 5.21641 19.25 8.25 19.25ZM46.75 19.25C49.7836 19.25 52.25 16.7836 52.25 13.75C52.25 10.7164 49.7836 8.25 46.75 8.25C43.7164 8.25 41.25 10.7164 41.25 13.75C41.25 16.7836 43.7164 19.25 46.75 19.25ZM49.5 22H44C42.4875 22 41.1211 22.6102 40.1242 23.5984C43.5875 25.4977 46.0453 28.9266 46.5781 33H52.25C53.7711 33 55 31.7711 55 30.25V27.5C55 24.4664 52.5336 22 49.5 22ZM27.5 22C32.8195 22 37.125 17.6945 37.125 12.375C37.125 7.05547 32.8195 2.75 27.5 2.75C22.1805 2.75 17.875 7.05547 17.875 12.375C17.875 17.6945 22.1805 22 27.5 22ZM34.1 24.75H33.3867C31.5992 25.6094 29.6141 26.125 27.5 26.125C25.3859 26.125 23.4094 25.6094 21.6133 24.75H20.9C15.4344 24.75 11 29.1844 11 34.65V37.125C11 39.4023 12.8477 41.25 15.125 41.25H39.875C42.1523 41.25 44 39.4023 44 37.125V34.65C44 29.1844 39.5656 24.75 34.1 24.75ZM14.8758 23.5984C13.8789 22.6102 12.5125 22 11 22H5.5C2.46641 22 0 24.4664 0 27.5V30.25C0 31.7711 1.22891 33 2.75 33H8.41328C8.95469 28.9266 11.4125 25.4977 14.8758 23.5984Z" fill="white"></path></svg>
<h4>Customer Tracking</h4>
<p>Automate and track emails to individuals or groups. Skilline’s built-in system helps organize your organization</p>
</div>
</div>
</section>
<!-- intro section starts -->
<section class="intro mt-5">
<div class="heading">
<h4>What is <span>Skilline?</span></h4>
<p>Skilline is a platform that allows educators to create online classes whereby they can store the course materials online; manage assignments, quizzes and exams; monitor due dates; grade results and provide students with feedback all in one place.</p>
</div>
<div class="container">
<div class="instructor platform">
<h4>FOR INSTRUCTORS</h4>
<button>Start a class today</button>
</div>
<div class="student platform">
<h4>FOR STUDENT</h4>
<button>Enter Access code</button>
</div>
</div>
</section>
<!-- everything section starts -->
<section class="everything mt-6">
<div class="main">
<div class="content">
<div class="orange-circle"></div>
<h4>Everything you can do in a physical classroom, <span>you can do with Skilline</span></h4>
<p>Skilline’s school management software helps traditional and online schools manage scheduling, attendance, payments and virtual classrooms all in one secure cloud-based system.</p>
<a href="">Learn More</a>
</div>
<div class="img">
<div class="blue"></div>
<div class="orange"></div>
<img src="images/teacher-explaining.png" alt="">
<div class="play">
<i class="bi bi-play-fill"></i>
</div>
</div>
</div>
</section>
<!-- ui section starts -->
<section class="user-interface">
<div class="main">
<div class="img">
<img src="images/vcall.png" class="vcall" alt="">
<div class="green"></div>
<div class="blue"></div>
</div>
<div class="content">
<h4>A <span> user interface</span> designed for the classroom</h4>
<ul class="list">
<li>
<svg viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4"><rect width="11.8182" height="11.8182" rx="2" fill="#2F327D"></rect><rect y="14.1816" width="11.8182" height="11.8182" rx="2" fill="#2F327D"></rect><rect x="14.7727" width="11.8182" height="11.8182" rx="2" fill="#2F327D"></rect><rect x="14.7727" y="14.1816" width="11.8182" height="11.8182" rx="2" fill="#F48C06"></rect></svg>
<p>Teachers don’t get lost in the grid view and have a dedicated Podium space.</p>
</li>
<li>
<svg viewBox="0 0 28 26" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4"><rect x="8" y="6" width="20" height="20" rx="2" fill="#2F327D"></rect><rect width="21.2245" height="21.2245" rx="2" fill="#F48C06"></rect></svg>
<p>TA’s and presenters can be moved to the front of the class.</p>
</li>
<li>
<svg viewBox="0 0 30 26" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4"><path d="M4.5 11.375C6.15469 11.375 7.5 9.91758 7.5 8.125C7.5 6.33242 6.15469 4.875 4.5 4.875C2.84531 4.875 1.5 6.33242 1.5 8.125C1.5 9.91758 2.84531 11.375 4.5 11.375ZM25.5 11.375C27.1547 11.375 28.5 9.91758 28.5 8.125C28.5 6.33242 27.1547 4.875 25.5 4.875C23.8453 4.875 22.5 6.33242 22.5 8.125C22.5 9.91758 23.8453 11.375 25.5 11.375ZM27 13H24C23.175 13 22.4297 13.3605 21.8859 13.9445C23.775 15.0668 25.1156 17.093 25.4062 19.5H28.5C29.3297 19.5 30 18.7738 30 17.875V16.25C30 14.4574 28.6547 13 27 13ZM15 13C17.9016 13 20.25 10.4559 20.25 7.3125C20.25 4.16914 17.9016 1.625 15 1.625C12.0984 1.625 9.75 4.16914 9.75 7.3125C9.75 10.4559 12.0984 13 15 13ZM18.6 14.625H18.2109C17.2359 15.1328 16.1531 15.4375 15 15.4375C13.8469 15.4375 12.7688 15.1328 11.7891 14.625H11.4C8.41875 14.625 6 17.2453 6 20.475V21.9375C6 23.2832 7.00781 24.375 8.25 24.375H21.75C22.9922 24.375 24 23.2832 24 21.9375V20.475C24 17.2453 21.5812 14.625 18.6 14.625ZM8.11406 13.9445C7.57031 13.3605 6.825 13 6 13H3C1.34531 13 0 14.4574 0 16.25V17.875C0 18.7738 0.670312 19.5 1.5 19.5H4.58906C4.88438 17.093 6.225 15.0668 8.11406 13.9445Z" fill="#2F327D"></path></svg>
<p>Teachers can easily see all students and class data at one time.</p>
</li>
</ul>
</div>
</div>
</section>
<!-- tool section starts -->
<section class="tool mt-5">
<div class="main">
<div class="content">
<h4><span>Tools</span> For Teachers And Learners</h4>
<p>Class has a dynamic set of teaching tools built to be deployed and used during class. Teachers can handout assignments in real-time for students to complete and submit.</p>
</div>
<div class="img">
<img src="images/girl-with-books.png" alt="">
</div>
</div>
</section>
<!-- test section starts -->
<section class="test mt-6">
<div class="main">
<div class="img">
<img src="images/true-false.png" alt="">
</div>
<div class="content">
<h4>Assessments, <span>Quizzes</span>, Tests</h4>
<p>Easily launch live assignments, quizzes, and tests. Student results are automatically entered in the online gradebook.</p>
</div>
</div>
</section>
<!-- management section starts -->
<section class="management mt-5">
<div class="main">
<div class="content">
<h4><span>Class Management</span> Tools for Educators</h4>
<p>Class provides tools to help run and manage the class such as Class Roster, Attendance, and more. With the Gradebook, teachers can review and grade tests and quizzes in real-time.</p>
</div>
<div class="img">
<img src="images/gradebook.png" alt="">
</div>
</div>
</section>
<!-- discussion section starts -->
<section class="discussion mt-5">
<div class="main">
<div class="img">
<img src="images/discussion.png" alt="">
</div>
<div class="content">
<h4>One-on-One<span> Discussions</span></h4>
<p>Teachers and teacher assistants can talk with students privately without leaving the Zoom environment.</p>
</div>
</div>
</section>
<div class="btn mt-2">
<button class="more">See more features</button>
</div>
<!-- integration section starts -->
<section class="integration mt-6">
<div class="main">
<div class="img">
<img src="images/integrations.png" alt="">
</div>
<div class="content">
<small><div class="line"></div> INTEGRATION</small>
<h4>200+ educational tools and platform<span>integrations</span></h4>
<p>Schoology has every tool your classroom needs and comes pre-integrated with more than 200+ tools, student information systems (SIS), and education platforms.</p>
<button>See All Integrations</button>
</div>
</div>
</section>
<!-- testimonial section starts -->
<section class="testimonial mt-6">
<div class="main">
<div class="content">
<small><div class="line"></div> TESTIMONIAL</small>
<h4>What They Say?</h4>
<p>Skilline has got more than 100k positive ratings from our users around the world.</p>
<p>Some of the students and teachers were greatly helped by the Skilline.</p>
<p>Are you too? Please give your assessment</p>
<button>Write your assessment<i class="bi bi-arrow-right"></i> </button>
</div>
<div class="img">
<img src="images/testimonials.png" alt="">
</div>
</div>
</section>
<!-- blog section starts -->
<section class="blog mt-5">
<div class="heading">
<h4>Latest News and Resources</h4>
<p>See the developments that have occurred to Skillines in the world</p>
</div>
<div class="blog-container">
<div class="main-blog">
<div class="blog-img">
<img src="images/laptop-news.png" alt="">
</div>
<div class="blog-content">
<h4>Class adds $30 million to its balance sheet for a Zoom-friendly edtech solution</h4>
<p>Class, launched less than a year ago by Blackboard co-founder Michael Chasen, integrates exclusively...</p>
<a href="">Read More</a>
</div>
</div>
<div class="blog-post">
<div class="post">
<div class="img">
<img src="images/children-laptop.png" alt="">
</div>
<div class="blog-content">
<h4>Class Technologies Inc. Closes $30 Million Series A Financing to Meet High Demand</h4>
<p>Class Technologies Inc., the company that created Class,...</p>
</div>
</div>
<div class="post">
<div class="img">
<img src="images/girl-laptop.png" alt="">
</div>
<div class="blog-content">
<h4>Zoom’s earliest investors are betting millions on a better Zoom for schools</h4>
<p>Zoom was never created to be a consumer product. Nonetheless, the...</p>
</div>
</div>
<div class="post">
<div class="img">
<img src="images/cat-laptop.png" alt="">
</div>
<div class="blog-content">
<h4>Former Blackboard CEO Raises $16M to Bring LMS Features to Zoom Classrooms</h4>
<p>This year, investors have reaped big financial returns from betting on Zoom...</p>
</div>
</div>
</div>
</div>
</section>
<!-- footer section starts -->
<footer class="mt-6">
<div class="edu-logo">
<div class="logo">
<h4>Skilline</h4>
<div class="square"></div>
</div>
<div class="v-line"></div>
<span>Virtual Class for Zoom</span>
</div>
<div class="subscribe-letter mt-4">
<h5>Subscribe to get our Newsletter</h5>
<div class="form">
<input type="text" placeholder="Your Email">
<button>Subscribe</button>
</div>
</div>
<div class="links mt-4">
<a href="">Careers</a>
<a href="">Privacy</a>
<a href="">Terms & Condition</a>
</div>
<div class="copyright">
<p>© 2021 Class Technologies Inc.</p>
</div>
</footer>
<script>
let hamburgerbtn = document.querySelector(".hamburger");
let nav_list = document.querySelector(".nav-list");
hamburgerbtn.addEventListener("click", () => {
hamburgerbtn.classList.toggle("active");
nav_list.classList.toggle("active");
});
</script>
</body>
</html>