-
Notifications
You must be signed in to change notification settings - Fork 18
/
Copy pathindex.html
352 lines (297 loc) · 16.8 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
341
342
343
344
345
346
347
348
349
350
351
352
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Packapeer | Home</title>
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/icons.css">
<link rel="stylesheet" href="css/responsee.css">
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="owl-carousel/owl.theme.css">
<link rel="stylesheet" href="css/template-style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha256-L/W5Wfqfa0sdBNIKN9cG6QA5F2qx4qICmU2VgLruv9Y=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap-grid.min.css" integrity="sha256-UQsknf/mQPLQ3ybNMD/V2mKe4JGc7KuYUxOhjQW0P18=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap-reboot.min.css" integrity="sha256-pTFzHsh1e+rz97pjNUpygMbwPzZM3iI3jPd9k4PBTko=" crossorigin="anonymous" />
<link href='https://fonts.googleapis.com/css?family=Playfair+Display&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700,800&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<style>
.btn {
border-width: 2px;
letter-spacing: 1px;
white-space: normal;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
padding: .5rem 3rem;
border-radius: 3px;
display: inline-flex;
align-items: center;
justify-content: center;
word-break: break-word;
}
.mbr-form .btn {
margin: .4rem 0;
}
@media (max-width: 767px) {
.btn {
font-size: .75rem !important;
}
.btn .mbr-iconfont {
font-size: 1rem !important;
}
}
.btn-form {
border-radius: 0;
}
.btn-black-outline,
.btn-black-outline:active {
background: none;
border-color: #FFFFFF;
color: #FFFFFF;
}
.btn-black-outline:hover,
.btn-black-outline:focus,
.btn-black-outline.focus,
.btn-black-outline.active {
color: #ffffff;
background-color: #333333;
border-color: #333333;
}
.top-left {
position: absolute;
top: 16px;
left: 16px;
}
/* form style custom*/
/* Style inputs */
input[type=text],input[type=email],input[type=tel], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
background-color: #cccccc;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
/* input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
cursor: pointer;
}*/
input[type=submit]:hover {
background-color: #45a049;
}
/* Style the container/contact section */
.containerx {
border-radius: 5px;
padding: 10px;
}
/* Create two columns that float next to eachother */
.xcolumn {
float: left;
width: 50%;
margin-top: 6px;
padding: 20px;
}
/* Clear floats after the columns */
.rowx:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other*/
@media screen and (max-width: 600px) {
.xcolumn, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
/* form style custom End*/
</style>
</head>
<body class="size-1140">
<!-- MAIN -->
<main role="main">
<!-- Main Header -->
<header>
<div class="carousel-default owl-carousel carousel-main carousel-nav-white background-dark text-center">
<div class="item">
<div class="s-12">
<img src="img/header.jpg" alt="">
<div class="top-left">
<img src="img/whitelogo.png" style="width: 50%;height: auto;">
</div>
<div class="carousel-content">
<div class="content-center-vertical line">
<div class="margin-top-bottom-80">
<!-- Title -->
<h1 class="text-white margin-bottom-30 text-size-60 text-m-size-30 text-line-height-1">Packapeer</h1>
<div class="s-12 m-10 l-8 center"><p class="text-white text-size-14 margin-bottom-40">With an aim to change the way each student learns and turn around the lives of millions of people all over the world by teaching them how to learn for themselves. </p></div>
<div class="line">
<div class="s-12 m-12 l-3 center">
<a class="button button-white-stroke s-12" href="#">Get Started Now</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Section 1 -->
<section class="section-small-padding background-white text-center">
<div class="line">
<h2 class="text-size-50 text-m-size-40 text-center">Programs</h2>
<hr class="break-small background-primary break-center">
</div>
<div class="line">
<div class="margin">
<div class="s-12 m-12 l-6 margin-m-bottom">
<div class="padding-2x block-bordered">
<!--i class="icon-sli-shield icon3x text-dark center margin-bottom-30">icon or image</i-->
<h2 class="text-thin">SPS</h2>
<p class="margin-bottom-30 " style="text-align: justify;">School of Practical Studies or SPS is the brand name under which Packapeer Academy conducts its technical training.</p>
<p class="margin-bottom-30" style="text-align: justify;">SPS offers hands on industry relevant technical skill training for more than 12 domains in the field of Information Technology. The pillars on which the SPS is built are 1. Self Learning 2. Peer to Peer Learning coupled with the ever changing and constantly evolving syllabus and project based learning our students are at par with the top notch students of the top universities around the world.</p>
<a class="button button-dark-stroke text-size-12" href="https://spsonline.in/">GET MORE INFO</a>
</div>
</div>
<div class="s-12 m-12 l-6 margin-m-bottom">
<div class="padding-2x block-bordered">
<!--i class="icon-sli-umbrella icon3x text-dark center margin-bottom-30"> icon or image</i-->
<h2 class="text-thin">Crossroads</h2>
<p class="margin-bottom-30" style="text-align: justify;">Everyone comes to the crossroads of their life and our mission is to help the students to choose the right path when they are stuck in the crossroads of their career.</p>
<p class="margin-bottom-30" style="text-align: justify;">Crossroads is a YouTube channel where we constantly broadcast useful and informative content related to technology and career building. Crossroads has crossed ten thousand plus subscribers and eight thousand plus watch hours on YouTube.</p>
<p class="margin-bottom-30" style="text-align: justify;">Crossroads frequently come up with exciting initiatives like 100K Coding Challenge — aims to teach computer programming to 1 lakh students across Kerala, RoadMap — a Q&A platform where students can ask their career related doubts and expert will address their questions and concerns and several other initiatives as time demands.</p>
<a class="button button-dark-stroke text-size-12" href="https://www.youtube.com/crossroadstalk">GET MORE INFO</a>
</div>
</div>
</div>
</div>
</section>
<!-- Section 1 -->
<section class="section">
<div class="line">
<h2 class="text-size-50 text-m-size-40 text-center">About Us</h2>
<hr class="break-small background-primary break-center">
</div>
<div class="line">
<div class="margin">
<div class="s-12 m-12 l-6">
<p class="text-size-14 margin-m-bottom-30 text-dark" style="text-align: justify">Packapeer Academy is founded in 2019 by Nikhil Kilivayil with an aim to help millions of students across the globe to improve their standards of living by educating them with industry relevant skills. </p>
</div>
<div class="s-12 m-12 l-6" style="text-align: justify">
<p class="text-size-14 text-dark">The Academy has started in a small district of Calicut with less than 12 students and has grown into a reputable institution in the hearts of millions of people across Kerala. Packapeer Academy has operations in 3 major cities of Kerala i.e Calicut, Kochi and Trivandrum and has impacted hundreds of students as of now.
</p>
</div>
</div>
</div>
</section>
<hr class="break margin-top-bottom-0">
<!--section class="section-small-padding background-white text-center">
<div class="line">
<h2 class="text-size-50 text-m-size-40 text-center">Our Team</h2>
<hr class="break-small background-primary break-center">
</div>
<div class="line">
<div class="margin">
<div class="s-12 m-12 l-4 margin-m-bottom">
<div class="padding-2x block-bordered">
<i class="icon-sli-user icon3x text-dark center margin-bottom-30"></i>
<h2 class="text-thin">Nikhil Kilivayil</h2>
<p class="margin-bottom-10" style="text-align: justify;" >Co-founder and Chief Executive Officer</p>
<p class="margin-bottom-10" style="text-align: justify;" >9+ years of experience in the IT Industry as developer, project lead, and entrepreneur</p>
<p class="margin-bottom-10" style="text-align: justify;">5+ years of experience in technical training</p>
</div>
</div>
<div class="s-12 m-12 l-4 margin-m-bottom">
<div class="padding-2x block-bordered">
<i class="icon-sli-user icon3x text-dark center margin-bottom-30"></i>
<h2 class="text-thin">Sibi Kilivayil</h2>
<p class="margin-bottom-10" style="text-align: justify;" >Co-founder and Chief Technical Officer</p>
<p class="margin-bottom-10" style="text-align: justify;">6+ years of experience in the IT industry as developer and project lead</p>
<p class="margin-bottom-10" style="text-align: justify;">3+ years of experience in technical training</p>
</div>
</div>
<div class="s-12 m-12 l-4 margin-m-bottom">
<div class="padding-2x block-bordered">
<i class="icon-sli-user icon3x text-dark center margin-bottom-30"></i>
<h2 class="text-thin">Muhammad Faizal</h2>
<p class="margin-bottom-10" style="text-align: justify;">Head of Marketing and Strategy</p>
<p class="margin-bottom-10" style="text-align: justify;">3+ years of experience in the IT industry</p>
</div>
</div>
</div>
<div class="margin margin-top-30">
<div class="s-12 m-12 l-4 margin-m-bottom">
<div class="padding-2x block-bordered">
<i class="icon-sli-user-female icon3x text-dark center margin-bottom-30"></i>
<h2 class="text-thin">Shimna Aswin</h2>
<p class="margin-bottom-10" style="text-align: justify;">Chief Project Co-ordinator</p>
<p class="margin-bottom-10" style="text-align: justify;">2+ years of experience in the IT industry</p>
</div>
</div>
<div class="s-12 m-12 l-4 margin-m-bottom">
<div class="padding-2x block-bordered">
<i class="icon-sli-user icon3x text-dark center margin-bottom-30"></i>
<h2 class="text-thin">Sonu Gopal</h2>
<p class="margin-bottom-10" style="text-align: justify;">Full-stack Developer</p>
<p class="margin-bottom-10" style="text-align: justify;">2+ years of experience in web technologies</p>
</div>
</div>
<div class="s-12 m-12 l-4 margin-m-bottom">
<div class="padding-2x block-bordered">
<i class="icon-sli-user icon3x text-dark center margin-bottom-30"></i>
<h2 class="text-thin">Dilshad Ahmed</h2>
<p class="margin-bottom-10" style="text-align: justify;">Creative Director</p>
</div>
</div>
</div>
</div>
</section-->
</main>
<!-- FOOTER -->
<footer >
<section class="background-dark" style="background-color: #9bdd42;">
<div class="container containerx">
<div style="text-align:center">
<h2 style="padding-top: 1em">Contact Us</h2>
<p>Any quires please write to [email protected] or
<br>Fill in the form below:</p>
</div>
<div class="row rowx">
<form action="mailto:[email protected]" method="post" enctype="text/plain">
<div class="xcolumn">
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Your name.." required>
<label for="email">Email</label>
<input type="email" id="email" name="Email" placeholder="Your Email Address.." required>
<label for="phone">Phone number</label>
<input type="tel" id="phone" name="phone" placeholder="Your Phone Number" pattern="[0-9]{10}" required>
</div>
<div class="xcolumn column">
<label for="messsage">Message</label>
<textarea id="messsage" name="messsage" placeholder="Write something.." style="height:184px" required></textarea>
<input type="submit" class="btn btn-form btn-black-outline display-4" value="Send Message" style="width:100%">
</div>
</form>
</div>
</div>
</section>
<section class="padding background-dark full-width" >
<div class="s-12 " >
<p class="text-center" style="padding-top: 20px; margin-bottom: 0px;">All rights reserved @ Packapeer Academy Pvt Ltd <script>document.write(new Date().getFullYear());</script></p>
</div>
</section>
</footer>
<script type="text/javascript" src="js/responsee.js"></script>
<script type="text/javascript" src="owl-carousel/owl.carousel.js"></script>
<script type="text/javascript" src="js/template-scripts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha256-WqU1JavFxSAMcLP2WIOI+GB2zWmShMI82mTpLDcqFUg=" crossorigin="anonymous"></script>
</body>
</html>