-
Notifications
You must be signed in to change notification settings - Fork 0
/
indexNW.html
402 lines (354 loc) · 19 KB
/
indexNW.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
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-IN">
<head prefix="og: https://ogp.me/ns# ">
<!-- Required meta tags -->
<title>:: SKWebs | Touch Responsive Sidebar Drawer ::</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="This is a touch responsive sidebar drawer that can open and close on finger movement direction as like android app sidebar drawer." />
<meta name="keywords" content="Touch responsive Sidebar drawer, Open and close sidebar on finger movement tester," />
<meta name="theme-color" content="#0c5ca2">
<!--<meta name="theme-color" content="#0d123d">-->
<!-- Required og tags -->
<meta property="og:title" content=":: SKWebs | Touch Responsive Sidebar Drawer ::">
<meta property="og:description" content="This is a touch responsive sidebar drawer that can open and close on finger movement gester as like android app sidebar drawer.">
<meta name="keywords" content="Sidebar, Bootstrap 4 Sidebar, Sidebar Drawer, Touch Responsive Sidebar Drawer" />
<meta property="og:locale" content="en_UK">
<!-- Required og:image tags -->
<meta property="og:image" content="./assets/img/icons/icon-460x460-68.92k.png">
<meta property="og:image:url" content="https://cdn.jsdelivr.net/gh/skwebs/skwebs.github.io@master/assets/img/icons/icon-460x460-68.92k.png">
<meta property="og:image:type" content="image/png" />
<meta property="og:image:alt" content="skwebs-logo">
<meta property="og:image:width" content="460" />
<meta property="og:image:height" content="460" />
<meta name="msapplication-TileColor" content="#0275d8">
<meta name="msapplication-TileImage" content="./assets/img/skwebs-3-88.png">
<link rel="apple-touch-icon" sizes="64x64" href="./assets/img/icons/skwebs-64x64-3.88k.png">
<!-- Required favicon -->
<link rel="icon" type="image/png" href="./assets/img/skwebs-3-88.png" sizes="16x16,32x32,64x64">
<!-- manifest -->
<link rel="manifest" href="manifest.json">
<!-- all css vendors file-->
<link href="./assets/vendor/fonts/panton/panton.min2.css" rel="stylesheet">
<link href="./assets/vendor/font-awesome/4.7.0/css/font-awesome.min2.css" rel="stylesheet">
<link href="./assets/vendor/bootstrap/4.5.0/bootstrap.min.css" rel="stylesheet">
<link href="./assets/vendor/animate-css/4.1.0/animate.min.css" rel="stylesheet">
<link href="./assets/vendor/slick/1.8.1/slick.min2.css" rel="stylesheet">
<link href="./assets/vendor/waves/0.7.6/waves.min2.css" rel="stylesheet">
<link href="./assets/vendor/universal-parallax/1.3.2/universal-parallax.min.css" rel="stylesheet">
<!-- all css file-->
<link href="./assets/css/style.css" rel="stylesheet">
<link href="./assets/css/nav.css?v1" rel="stylesheet">
<link href="./assets/css/slider-1.css" rel="stylesheet">
<link href="./assets/css/footerContact.css" rel="stylesheet">
<link href="./assets/css/footer.css" rel="stylesheet">
<link href="./assets/css/preloader.css" rel="stylesheet">
<link href="./assets/css/sidebar.css?v1" rel="stylesheet">
<link href="./assets/css/process.css" rel="stylesheet">
<!--<link href="./assets/css/responsive.css?v1" rel="stylesheet">
-->
<link href="./assets/css/parallax.css?v1" rel="stylesheet">
<link href="./assets/css/vendorSlider.css?v1" rel="stylesheet">
<!-- all vendors js file-->
<script src="./assets/vendor/jquery/3.5.1/jquery.min.js"></script>
<script src="./assets/vendor/bootstrap/4.5.0/bootstrap.bundle.min.js"></script>
<script src="./assets/vendor/slick/1.8.1/slick.min.js"></script>
<script src="./assets/vendor/jquery-sticky/1.0.4/jquery.sticky.min.js"></script>
<script src="./assets/vendor/waves/0.7.6/waves.min2.js"></script>
<script src="./assets/vendor/universal-parallax/1.3.2/universal-parallax.min.js"></script>
<script src="./assets/vendor/wow-js/1.1.2/wow.min.js"></script>
<script src="./assets/vendor/waves/0.7.6/waves.min.js"></script>
<!-- all page css -->
<style type="text/css">
.cta {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5), 50%), url("https://anshumemorial.in/test/m/assets/img/web/laptop1.jpg") fixed center 100%/cover
}
</style>
</head>
<body>
<!--overflow hidden of whole page -->
<div class="page__wrapper vis-hid">
<nav id="ama-nav" class=" navbar navbar-expand-md fixed-top navbar-light bg-white py-0">
<div class="container">
<a class="navbar-brand" href="#">
<img class="animate__animated animate__animate__fadeInUp" src="./assets/img/icons/skwebs-64x64-3.88k.png">
</a>
<button class=" hamburger flat-box hamburger--arrowalt navbar-toggler" type="button" aria-controls="menuContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<div class="menuContent collapse navbar-collapse collapse navbar-collapse " id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active"> <a class="nav-link" href="./">Home <span class="sr-only">(current)</span></a></li>
<li class="nav-item">
<a class="nav-link" href="#"> Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Link 2 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Link 3 </a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown Menu</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Dropdown 1</a>
<a class="dropdown-item" href="#">Dropdown 2</a>
<a class="dropdown-item" href="#">Dropdown 3</a>
</div>
</li>
<li class="nav-item"> <a class="nav-link" href="#" disabled="disabled">Sitemap</a></li>
</ul>
</div>
</div>
</nav>
<section class="imp_notice">
<div class="m-0 rounded-0 p-3 alert bg-darkblue text-center text-light alert-dismissible fade show" role="alert">
<p class="h2">Important Message</p>
<marquee onmouseover="this.stop()" onmouseout="this.start()">
<p class="h4">
This is dismissible scrolling message.
</p>
</marquee>
<a href="" class="btn bg-light rounded text-darkblue">Go to Github</a>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</section>
<main>
<!-- welcome parallax -->
<section class="pl__container vh-100 flat-box">
<div style="position:relative;" class="content container wow animate__fadeInUp float-box-light">
<h1 class="h1 wow animate__fadeInLeft" data-wow-delay=".6s">Welcome to SKWebs. </h1>
<p class="text-justify wow animate__fadeInRight" data-wow-delay=".9s">Here you get some ideas with code and their example based on my creative idea for beginners that can you use in your project. And you also get some selected useful plugin that make your project unique. </p>
<p class="m-0 py-2 bg-primary wow animate__fadeInUp" data-wow-delay=".9s"><a class="text-light d-block " href="https://skwebs.github.io">Read more...</a></p>
</div>
<div class="parallax" data-parallax-image="./assets/img/web/sea-bank.jpg">
</section>
<!-- /welcome parallax -->
<!--
<section class="bg-dar pt-3">
<h2 class="py-3 mb-3 text-center text-purple">Our Feature Slide</h2>
<div class="slider__1-wrapper bg-primary">
<div class="slider__1">
<div class="slider__1-slide">
<div class="slider__1-layer">
<h1 class="sl__1">Welcome in</h1>
<h3 class="sl__2"></h3>
<p class="d-none sl__3">Bhatha Chowk, Bhatha Dasi, Rajapakar, Vaishali, Bihar</p>
</div>
</div>
<div class="slider__1-slide">
<div class="slider__1-layer">
<h3 class="sl__1">An English Medium School</h3>
<p class="d-none sl__3">We understand current education phenomena.</p>
</div>
</div>
<div class="slider__1-slide">
<div class="slider__1-layer">
<h1 class="sl__1">Based on</h1>
<h3 class="sl__2">New CBSE Pattern</h3>
<p class="d-none sl__3">We understand your children needs.</p>
</div>
</div>
<div class="slider__1-slide">
<div class="slider__1-layer">
<h1 class="sl__1">From Std. Play</h1>
<h1 class="sl__2">To Standard 8th</h1>
<p class="d-none sl__3">Bhatha Chowk, Bhatha Dasi, Rajapakar, Vaishali, Bihar</p>
</div>
</div>
</div>
<div class="slider__1-progress">
<div class="slider__1-progressbar"></div>
</div>
</section>
-->
<!-- about project section-->
<section class="about__project flat-box">
<div class="container px-4 px-md-5 py-5">
<h1 class="h1 p-2 wow animate__fadeInUp mt-5">About this project.</h1>
<p class="text-justify wow animate__fadeInUp"> I always want to create something new, unique and creative web app that has following features and I tried to achieve it in this project.</p>
<br>
<p class="h2 wow animate__fadeInUp">Features:</p>
<br>
<h4 class="h4 wow animate__fadeInLeft"> 1. Touch responsive sidebar.</h4>
<p class="wow animate__fadeInUp text-justify mb-5" data-wow-delay=".3s">
I tried to make touch responsive sidebar that allows to open & close sidebar drawer with your finger moving direction as like android application sidebar drawer.
<br> You can open sidebar by swiping finger from the end of left side. Sidebar will be open or, close with your finger moving direction.
</p>
<br>
<br>
</div>
</section>
<!-- /about project -->
<!-- plugin parallax -->
<section class="plugin__parallax pl__container py-5 flat-box">
<div class="content wow animate__fadeInUp my-5 flat-box-light">
<h1 class="h1 wow animate__fadeInUp" data-wow-delay=".9s">Used Plugins. </h1>
<hr class="mt-0 wow animate__fadeInRight bg-white delay-2s">
<div class="plugins text-left pl-5 wow animate__fadeInUp" data-wow-delay=".9s">
1. jQuery<a href="#"> Link</a>
<br> 2. Bootstrap 4<a href="#"> Link</a>
<br> 3. Animate.css<a href="#"> Link</a>
<br> 4. wow.js<a href="#"> Link</a> or,
<br>     AOS</a><a href="#"> Link</a>
<br> 5. universal-parallax<a href="#"> Link</a>
<br> 6. Wave<a href="#"> Link.js</a>
<br>
</div>
</div>
<div class="parallax" data-parallax-image="./assets/img/web/laptop-typing.jpg">
</section>
<!-- /plugin parallax -->
<!-- about developer -->
<section class="about__dev float-box">
<div style='background-image:url("./assets/img/web/white-paper.jpg"); font-weight:bold' class="py-5 px-4">
<h3 class="mt-5 border border-primary rounded text-light bg-primary text-center p-3 wow animate__fadeInUp">About Us</h3>
<p class="text-primary p-3 text-justify wow animate__fadeInUp">
<i>Hi, I am Satish. I have knowledge and experience of front-end language
as like <b>html, CSS, JavaScript</b> and back-end script <b>php, MySQL</b> with <b>Object
Oriented Programme (OPP)</b> Concept and also have knowledge of frameworks as like <b>Bootstrap, jQuery</b> and another useful
<b>PHP Libraries</b>. I like to create something new and I always curious about learn and use new things.<br><br>
</i>
</p>
</div>
</section>
<!-- /about developer -->
<!-- vendor credit slider -->
<section class="vendor__credit p-3 pb-0 flat-box" style="background:url('assets/img/web/grey-paper.jpg');">
<h4 class="text-primary">We use:</h4>
<div class="vendor__slider">
<div class="vendor__slider_item"><img src="./assets/img/brands/jquery.jpg" alt="jquery symbol image"></div>
<div class="vendor__slider_item"><img src="./assets/img/brands/bootstrap.jpg" alt="bootstrap symbol image"></div>
<div class="vendor__slider_item"><img src="./assets/img/brands/font-awesome.jpg" alt="font-awesome symbol image"></div>
<div class="vendor__slider_item"><img src="./assets/img/brands/animate-css.jpg" alt="animate-css symbol image"></div>
<div class="vendor__slider_item"><img src="./assets/img/brands/wow-js.jpg" alt="wow-js symbol image"></div>
<div class="vendor__slider_item"><img src="./assets/img/brands/slick.png" alt="slick symbol image"></div>
<div class="vendor__slider_item"><img src="./assets/img/brands/aos.jpg" alt="aos symbol image"></div>
<div class="vendor__slider_item"><img src="./assets/img/brands/waves.png" alt="waves symbol image"></div>
<div class="vendor__slider_item"><img src="./assets/img/brands/universal-parallax.jpg" alt="universal-parallax symbol image"></div>
</div>
</section>
<!-- /vender credit slider -->
<!-- connect us section -->
<section style="background:linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)),url('./assets/img/web/laptop-typing.jpg') no-repeat center center/cover;" class="connect__us float-box-light p-5">
<div class="row">
<div class="col-md-6 mx-auto my-3">
<div class="text-center mx-auto">
<p class="p-2 mb-4 border text-light h3 text-center wow animate__fadeInUp">Connect with Us</p>
<a class="text-light wow animate__fadeInLeft " href="mailto:[email protected]"><i class="fa fa-envelope "></i> : [email protected]</a>
<br>
<a class="text-light wow animate__fadeInRight" href="https://facebook.com/skwebserv"><i class="fa fa-facebook-square "></i> : https://fb.com/skwebserv</a>
</div>
<form class="pt-5 wow animate__fadeIn" id="contact-form" method="post">
<div id="name-group" class="form-group">
<input name="name" id="name" class="form-control" type="text" placeholder="Full Name">
</div>
<div id="mob-group" class="form-group">
<input name="mob" id="mob" class="form-control" type="tel" placeholder="Mobile Number">
</div>
<div id="email-group" class="form-group">
<input name="email" id="email" class="form-control" type="email" placeholder="Email">
</div>
<div id="sub-group" class="form-group">
<input name="sub" id="sub" class="form-control" type="text" placeholder="Subject">
</div>
<div id="msg-group" class="form-group" placeholder="You message to be here.">
<textarea class="form-control" name="msg" id="msg" placeholder="Your Message"></textarea>
</div>
<div>
<input class="btn btn-success py-2 px-4" type="submit" name="submit" id="submit" value="Send Message">
<input class="btn btn-secondary py-2 px-4 mr-4" type="reset" value="Reset">
</div>
</form>
</div>
</div>
</section>
<!-- /connect us -->
</main>
<footer class="bg-dark footer">
<!-- footer social icons section -->
<section class="footer__social py-1 bg-primary">
<div class="footer__social_icon container text-light d-flex justify-content-center align-items-center">
<ul class="d-none d-md-flex">
<li>Follow us on :</li>
</ul>
<ul>
<li class="fb wow animate__fadeInLeftBig" data-wow-delay=".3s"><a href="https://fb.com/skwebsofficial/"><i class="fa fa-facebook"></i></a></li>
<li class="tw wow animate__fadeInLeftBig" data-wow-delay="0"><a href="https://twitter.com/SatishKmrSharma/"><i class="fa fa-twitter"></i></a></li>
<li class="ig wow animate__fadeInRightBig" data-wow-delay="0"><a href="https://instagram.com/satishkmrsharma/"><i class="fa fa-instagram"></i></a></li>
<li class="yt wow animate__fadeInRightBig" data-wow-delay="0.3s"><a href="https://www.youtube.com/channel/UC-Y-AzTd9CCYbbUqAthmHVg"><i class="fa fa-youtube"></i></a></li>
</ul>
</div>
</section>
<!-- // footer social icons section -->
<!-- copyright section -->
<section class="copyright my-auto py-4 text-center ">
©
<script>
document.write(new Date().getFullYear())
</script> <a class="text-lightgrey" href="./"><strong>SKWebs.Github.IO</strong>. </a><span class="d-none d-md-inline"> All Right Reserved. </span>
<hr class="bg-indigo w-50 w-md-25 mx-auto">
<span class="d-block d-md-inline"> Designed & Developed by <a href="https://skwebs.github.io">SKWebs</a></span>
</section>
<!-- // copyright section -->
</footer>
</div>
<!--/overflow hidden of whole page -->
<div class="preloader">
<img class="preloader__img " src="./assets/img/ama/ama-old-512x512.png" alt="Anshu Memorial Academy Logo">
<div class="rounder"></div>
</div>
<div class="sidebar-overlay"></div>
<section class="sidebar bg-light">
<div class="sidebar-header p-2">
<div class="text-light p-3">
<h2>SKWebs</h2>
<p><a class="text-light" href="mailto:[email protected]">[email protected]</a></p>
</div>
</div>
<div class="clearfix"></div>
<div class="sidebar-menu">
<ul class="navbar"></ul>
<div class="sidebar-social d-flex justify-content-center"> <a class="sb-fb" href="https://facebook.com/AnshuMemorialAcademy"><i class="fa fa-facebook"></i></a> <a class="sb-tw" href="https://mobile.twitter.com/AnshuMemorial"><i class="fa fa-twitter"></i></a> <a class="sb-insta" href="https://www.instagram.com/anshumemorial/"><i class="fa fa-instagram"></i></a> <a class="sb-yt" href="https://www.youtube.com/channel/UC-Y-AzTd9CCYbbUqAthmHVg"><i class="fa fa-youtube"></i></a></div>
</div>
</section>
<div class="process">
<i class="fa fa-cog fa-spin fa-4x fa-fw"></i> <span class="sr-only">Loading...</span>
<br>
<p class="process-msg text-center">Message</p>
</div>
<div class="modal fade" id="verifyOTPModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">OTP Verification!</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button>
</div>
<div class="modal-body">
<form id="otpForm">
<div class="form-group">
<label for="otp" class="col-form-label">Enter OTP:</label>
<input type="number" name="otp" class="form-control" id="otp" min="6" maxlength="6"> <small id="otpExpMsg" class="text-muted">Your OTP will be expire in 60s.</small></div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button id="resend-otp" class="btn btn-outline-primary" type="button" disabled="disabled"> <span class="spinner-border spinner-border-sm " role="status" aria-hidden="true"></span> Resend OTP </button>
<button id="verify-otp" type="button" class="btn btn-primary">Verify OTP</button>
</div>
</div>
</div>
</div>
<script defer src="./assets/js/script.js"></script>
<script defer src="./assets/js/slider-1.js"></script>
<script defer src="./assets/js/sidebar-min-beautify.js?v2"></script>
<script defer src="./assets/js/otp-ajax.js"></script>
<script defer src="./assets/js/init.js"></script>
<script defer src="./assets/js/vendorSlider.js"></script>
</body>
</html>