-
-
Notifications
You must be signed in to change notification settings - Fork 69
/
index-3.html
1433 lines (1288 loc) · 74.8 KB
/
index-3.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
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!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, minimum-scale=1.0, shrink-to-fit=no">
<link href="assets/images/favicon.png" rel="icon" />
<title>Documentation | Your ThemeForest item Name</title>
<meta name="description" content="Your ThemeForest item Name and description">
<meta name="author" content="harnishdesign.net">
<!-- Stylesheet
============================== -->
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="assets/vendor/bootstrap/css/bootstrap.min.css" />
<!-- Font Awesome Icon -->
<link rel="stylesheet" type="text/css" href="assets/vendor/font-awesome/css/all.min.css" />
<!-- Magnific Popup -->
<link rel="stylesheet" type="text/css" href="assets/vendor/magnific-popup/magnific-popup.min.css" />
<!-- Highlight Syntax -->
<link rel="stylesheet" type="text/css" href="assets/vendor/highlight.js/styles/github.css" />
<!-- Custom Stylesheet -->
<link rel="stylesheet" type="text/css" href="assets/css/stylesheet.css" />
</head>
<body data-spy="scroll" data-target=".idocs-navigation" data-offset="125">
<!-- Preloader -->
<div class="preloader">
<div class="lds-ellipsis">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<!-- Preloader End -->
<!-- Document Wrapper
=============================== -->
<div id="main-wrapper">
<!-- Header
============================ -->
<header id="header" class="sticky-top">
<!-- Navbar -->
<nav class="primary-menu navbar navbar-expand-lg bg-dark navbar-text-light navbar-dropdown-dark border-0">
<div class="container-fluid">
<!-- Sidebar Toggler -->
<button id="sidebarCollapse" class="navbar-toggler d-block d-md-none" type="button"><span></span><span class="w-75"></span><span class="w-50"></span></button>
<!-- Logo -->
<a class="logo ml-md-3" href="index.html" title="iDocs Template"> <img src="assets/images/logo-light.png" alt="iDocs Template"/> </a>
<span class="text-2 text-light ml-2">v1.0</span>
<!-- Logo End -->
<!-- Navbar Toggler -->
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#header-nav"><span></span><span></span><span></span></button>
<div id="header-nav" class="collapse navbar-collapse justify-content-end">
<ul class="navbar-nav">
<li class="dropdown"> <a class="dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Dropdown Action</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="index.html">Action</a></li>
<li><a class="dropdown-item" href="feature-header-dark.html">Another Action</a></li>
<li><a class="dropdown-item" href="feature-header-primary.html">Something Else Here</a></li>
<li><a class="dropdown-item" href="index-2.html">Another Link</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#">Another Action</a>
<li><a class="dropdown-item" href="#">Something Else Here</a></li>
</ul>
</li>
<li><a target="_blank" href="https://themeforest.net/user/harnishdesign/portfolio?ref=HarnishDesign">Other Template</a></li>
<li><a target="_blank" href="https://themeforest.net/user/harnishdesign/#contact?ref=HarnishDesign">Support</a></li>
</ul>
</div>
<ul class="social-icons social-icons-sm ml-lg-2 mr-2">
<li class="social-icons-twitter"><a data-toggle="tooltip" href="http://www.twitter.com/harnishdesign/" target="_blank" title="" data-original-title="Twitter"><i class="fab fa-twitter"></i></a></li>
<li class="social-icons-facebook"><a data-toggle="tooltip" href="http://www.facebook.com/harnishdesign/" target="_blank" title="" data-original-title="Facebook"><i class="fab fa-facebook-f"></i></a></li>
<li class="social-icons-dribbble"><a data-toggle="tooltip" href="http://www.dribbble.com/harnishdesign/" target="_blank" title="" data-original-title="Dribbble"><i class="fab fa-dribbble"></i></a></li>
</ul>
</div>
</nav>
<!-- Navbar End -->
</header>
<!-- Header End -->
<!-- Content
============================ -->
<div id="content" role="main">
<!-- Sidebar Navigation
============================ -->
<div class="idocs-navigation bg-light">
<ul class="nav flex-column ">
<li class="nav-item"><a class="nav-link active" href="#idocs_start">Getting Started</a>
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link" href="#idocs_installation">Installation</a></li>
<li class="nav-item"><a class="nav-link" href="#idocs_html_structure">HTML Structure</a></li>
<li class="nav-item"><a class="nav-link" href="#idocs_sass">Sass</a></li>
<li class="nav-item"><a class="nav-link" href="#idocs_color_schemes">Color Schemes</a></li>
<li class="nav-item"><a class="nav-link" href="#idocs_theme_customization">Customization</a></li>
<li class="nav-item"><a class="nav-link" href="#idocs_logo_settings">Logo Settings</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#idocs_layout">Layout</a>
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link" href="#idocs_header">Header</a></li>
<li class="nav-item"><a class="nav-link" href="#idocs_navbar">Navbar</a></li>
<li class="nav-item"><a class="nav-link" href="#idocs_sidebar">Sidebar</a></li>
<li class="nav-item"><a class="nav-link" href="#idocs_footer">Footer</a></li>
<li class="nav-item"><a class="nav-link" href="#idocs_box_layout">Box Layout</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#idocs_content">Content</a>
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link" href="#idocs_typography">Typography</a></li>
<li class="nav-item"><a class="nav-link" href="#idocs_code">Code</a></li>
<li class="nav-item"><a class="nav-link" href="#idocs_table">Table</a></li>
<li class="nav-item"><a class="nav-link" href="#idocs_icons">Icons</a></li>
<li class="nav-item"><a class="nav-link" href="#idocs_image">Image</a></li>
<li class="nav-item"><a class="nav-link" href="#idocs_video">Video</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#idocs_components">Components</a>
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link" href="#idocs_accordion">Accordion</a></li>
<li class="nav-item"><a class="nav-link" href="#idocs_tabs">Tabs</a></li>
<li class="nav-item"><a class="nav-link" href="#idocs_social_icon">Social Icon</a></li>
<li class="nav-item"><a class="nav-link" href="#idocs_helper_classes">Helper Classes</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#idocs_faq">FAQ</a></li>
<li class="nav-item"><a class="nav-link" href="#idocs_source_credits">Source & Credits</a></li>
<li class="nav-item"><a class="nav-link" href="#idocs_support">Support</a></li>
<li class="nav-item"><a class="nav-link" href="#idocs_templates">More Templates</a></li>
<li class="nav-item"><a class="nav-link" href="#idocs_changelog">Changelog</a>
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link" href="#v1-1">v1.1</a></li>
<li class="nav-item"><a class="nav-link" href="#v1-0">v1.0</a></li>
</ul>
</li>
</ul>
</div>
<!-- Docs Content
============================ -->
<div class="idocs-content">
<div class="container">
<!-- Getting Started
============================ -->
<section id="idocs_start">
<h1>Documentation</h1>
<h2>Your ThemeForest Item Name Here</h2>
<p class="lead">Thank you so much for purchasing our item from themeforest.</p>
<hr>
<div class="row">
<div class="col-sm-6 col-lg-4">
<ul class="list-unstyled">
<li><strong>Version:</strong> 1.0</li>
<li><strong>Author:</strong> <a href="http://www.harnishdesign.net" target="_blank">Harnish Design</a></li>
</ul>
</div>
<div class="col-sm-6 col-lg-4">
<ul class="list-unstyled">
<li><strong class="font-weight-700">Created:</strong> 8 April, 2020</li>
<li><strong>Update:</strong> 12 May, 2020</li>
</ul>
</div>
</div>
<p class="alert alert-info">If you have any questions that are beyond the scope of this help file, Please feel free to email via <a target="_blank" href="https://themeforest.net/user/harnishdesign/#contact?ref=HarnishDesign">Item Support Page</a>.</p>
</section>
<hr class="divider">
<!-- Installation
============================ -->
<section id="idocs_installation">
<h2>Installation</h2>
<p class="lead">Follow the steps below to setup your site template:</p>
<ol>
<li>Unzip the downloaded package and open the <strong>/HTML</strong> folder to find all the template files. You will need to upload these files to your hosting web server using FTP or localhost in order to use it on your website.</li>
<li>Below is the folder structure and needs to be uploaded to your website or localhost root directory:
<ul>
<li><code>HTML/assets</code> - Contains all of the assets referenced
<ul>
<li><code>HTML/css</code> - Stylesheet files</li>
<li><code>HTML/images</code> - Images files</li>
<li><code>HTML/js</code> - Javacript files</li>
<li><code>HTML/sass</code> - Sass files</li>
<li><code>HTML/vendor</code> – All external libs.</li>
</ul>
</li>
<li><code>HTML/index.html</code> - Homepage
</ul>
</li>
<li>You should upload all or specific HTML files as per your need.</li>
<li>You are good to go for adding your content now!</li>
</ol>
</section>
<hr class="divider">
<!-- HTML Structure
============================ -->
<section id="idocs_html_structure">
<h2>HTML Structure</h2>
<p>iDocs follows a simple and easy to customize coding structure. Here is the sample for your reference:<br>
The template is based on <a class="ml-1" target="_blank" href="https://getbootstrap.com/"><i class="fas fa-external-link-alt"></i> Bootstrap Framework</a></p>
<pre><code class="html"><!DOCTYPE html>
<html lang="en">
<head>
<!-- Your Title, Description, Stylesheets
============================================= -->
</head>
<body data-spy="scroll" data-target=".idocs-navigation" data-offset="125">
<!-- Document Wrapper
=============================== -->
<div id="main-wrapper">
<!-- Header
============================ -->
<header id="header" class="sticky-top">
......
</header>
<!-- Header End -->
<!-- Content
============================ -->
<div id="content" role="main">
<!-- Sidebar Navigation
============================ -->
<div class="idocs-navigation bg-light">
.....
</div>
<!-- Docs Content
============================ -->
<div class="idocs-content">
<div class="container">
.......
</div>
</div>
</div>
<!-- Content end -->
<!-- Footer -->
<footer id="footer" class="section bg-dark footer-text-light">
<div class="container"> ...... </div>
</footer>
<!-- Footer end -->
</div>
<!-- Document Wrapper end -->
<!-- JavaScript -->
</body>
</html></code></pre>
<p class="alert alert-info">If you need more information, please visit bootstrap site: <a target="_blank" href="https://getbootstrap.com/docs/4.4/layout/grid/">https://getbootstrap.com</a></p>
</section>
<hr class="divider">
<!-- Sass
============================ -->
<section id="idocs_sass">
<h2>Sass</h2>
<p>We have added SASS <code>.scss</code> files in template. If you know how to use SASS you can change sass files and compile the css as well.
You can find sass file here - <code>HTML/assets/sass</code></p>
<p>Open the <code>sass/_variables.scss</code> and Edit the values according to your needs. If you need more Advanced Setup then you can Edit the Respective Files yourself which have been branched inside the same Folder. It is completely at your discretion only to include the Required <code>.scss</code> Files you need to minimize the amount of CSS & including only the Styles of the Blocks you need. This can be setup in your <code>stylesheet.scss</code> File.</p>
</section>
<hr class="divider">
<!-- Color Schemes
============================ -->
<section id="idocs_color_schemes">
<h2>Color Schemes</h2>
<p>You can change your Website's Color Scheme in an instant. We have build <strong>10 Color</strong> css file for change template primary color.</p>
<ul>
<li><code>color-blue.css</code> - Blue Color</li>
<li><code>color-brown.css</code> - Brown Color</li>
<li><code>color-cyan.css</code> - Cyan Color</li>
<li><code>color-green.css</code> - Green Color</li>
<li><code>color-orange.css</code> - Orange Color</li>
<li><code>color-indigo.css</code> - Indigo Color</li>
<li><code>color-purple.css</code> - Purple Color</li>
<li><code>color-red.css</code> - Red Color</li>
<li><code>color-teal.css</code> - Teal Color</li>
<li><code>color-yellow.css</code> - Yellow Color</li>
</ul>
<p>Simply add Color CSS file link it in the Document <code><head></code>.<br>
Make sure you add the <code>css/color-blue.css</code> stylesheet in your head after the <code>css/stylesheet.css</code> file linking from above mentioned 10 color css file.</p>
<p><strong>For Example:</strong></p>
<pre><code class="html"><head>
<!-- Stylesheet
============================== -->
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="assets/vendor/bootstrap/css/bootstrap.min.css" />
<!-- Font Awesome Icon -->
<link rel="stylesheet" type="text/css" href="assets/vendor/font-awesome/css/all.min.css" />
<!-- Magnific Popup -->
<link rel="stylesheet" type="text/css" href="assets/vendor/magnific-popup/magnific-popup.min.css" />
<!-- Highlight Syntax -->
<link rel="stylesheet" type="text/css" href="assets/vendor/highlight.js/styles/github.css" />
<!-- Custom Stylesheet -->
<link rel="stylesheet" type="text/css" href="assets/css/stylesheet.css" />
<!-- Here goes your Colors Css -->
<link rel="stylesheet" type="text/css" href="assets/css/color-orange.css" />
</head></code></pre>
</section>
<hr class="divider">
<!-- Customization
============================ -->
<section id="idocs_theme_customization">
<h2>Theme Customization</h2>
<p>We have include a Custom CSS File in the <code>css</code> Folder so that you can better handle your Customizations for New Styles or
Overwriting Default Theme Styles. Simply add all your Custom CSS Codes in the <code>css/custom.css</code> File and link it in the Document <code><head></code> after the <code>css/stylesheet.css</code> Linking. Also make sure that this is the Last Linked CSS File in the Document <code><head></code> so that your Custom CSS Styles are Overwritten properly.</p>
<pre><code class="html"><head>
<!-- Stylesheet
============================== -->
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="assets/vendor/bootstrap/css/bootstrap.min.css" />
<!-- Font Awesome Icon -->
<link rel="stylesheet" type="text/css" href="assets/vendor/font-awesome/css/all.min.css" />
<!-- Magnific Popup -->
<link rel="stylesheet" type="text/css" href="assets/vendor/magnific-popup/magnific-popup.min.css" />
<!-- Highlight Syntax -->
<link rel="stylesheet" type="text/css" href="assets/vendor/highlight.js/styles/github.css" />
<!-- Custom Stylesheet -->
<link rel="stylesheet" type="text/css" href="assets/css/stylesheet.css" />
<!-- Here goes your custom.css
============================================= -->
<link rel="stylesheet" type="text/css" href="assets/css/custom.css" />
</head></code></pre>
</section>
<hr class="divider">
<!-- Logo Settings
============================ -->
<section id="idocs_logo_settings">
<h2>Logo Settings</h2>
<p>The Logo Container can be found in the Header Container - <code><header></code></p>
<pre><code class="html"><!-- Logo -->
<a class="logo ml-3 ml-md-0" href="index.html" title="iDocs">
<img src="images/logo-light.png" alt="iDocs"/>
</a>
<!-- Logo End -->
</code></pre>
</section>
<hr class="divider">
<!-- Layout
============================ -->
<section id="idocs_layout">
<h2>Layout</h2>
<p class="lead mb-5">Documentation and examples for header, navbar, sidebar, footer</p>
</section>
<!-- Header
============================ -->
<section id="idocs_header">
<h2>Header</h2>
<p>The list of various header types & its descriptions are provided below for your reference:</p>
<h4>Light</h4>
<p>Header with white background Color & Dark text. <span class="text-info">See below image and code for more information.</span></p>
<p><a class="popup-img" href="assets/images/header-light.jpg"><img class="img-fluid border" src="assets/images/header-light.jpg" alt=""></a></p>
<pre><code class="html"><!-- Header
============================ -->
<header id="header" class="sticky-top">
<!-- Navbar -->
<nav class="primary-menu navbar navbar-expand-lg">
<div class="container-fluid">
.....
</div>
</nav>
<!-- Navbar End -->
</header>
<!-- Header End -->
</code></pre>
<h4>Dark</h4>
<p>Header with dark background & Light text. <span class="text-info">See below image and code for more information.</span></p>
<p><a class="popup-img" href="assets/images/header-dark.jpg"><img class="img-fluid border" src="assets/images/header-dark.jpg" alt=""></a></p>
<p>Add the <code>.bg-dark</code> and <code>.navbar-text-light</code> Class to the <code><nav></code> Tag to display a Dark Header.</p>
<pre><code class="html"><!-- Header
============================ -->
<header id="header" class="sticky-top">
<!-- Navbar -->
<nav class="primary-menu navbar navbar-expand-lg bg-dark navbar-text-light">
<div class="container-fluid">
.....
</div>
</nav>
<!-- Navbar End -->
</header>
<!-- Header End -->
</code></pre>
</section>
<hr class="divider">
<!-- Navbar
============================ -->
<section id="idocs_navbar">
<h2>Navbar</h2>
<p class="lead">Documentation and examples for powerful responsive navigation header</p>
<h4 class="mt-5">Left align</h4>
<p>Header with Navigation alligned Left. <span class="text-info">See below image and code for more information.</span></p>
<p><a class="popup-img" href="assets/images/navbar-left.jpg"><img class="img-fluid border" src="assets/images/navbar-left.jpg" alt=""></a></p>
<p>Add the <code>.justify-content-left</code> class to the element of collapse to display a align left navbar.</p>
<pre><code class="html"><div id="header-nav" class="collapse navbar-collapse justify-content-start">
<ul class="navbar-nav">
.......
</ul>
</div>
</code></pre>
<h4 class="mt-5">Right align</h4>
<p>Header with Navigation alligned Right. <span class="text-info">See below image and code for more information.</span></p>
<p><a class="popup-img" href="assets/images/navbar-right.jpg"><img class="img-fluid border" src="assets/images/navbar-left.jpg" alt=""></a></p>
<p>Add the <code>.justify-content-end</code> class to the element of collapse to display a align right navbar.</p>
<pre><code class="html"><div id="header-nav" class="collapse navbar-collapse justify-content-end">
<ul class="navbar-nav">
.......
</ul>
</div>
</code></pre>
<h4 class="mt-5">Center Align</h4>
<p>Header with Navigation alligned Center. <span class="text-info">See below image and code for more information.</span></p>
<p><img class="img-fluid border" src="assets/images/navbar-center.jpg" alt=""></p>
<p>Add the <code>.justify-content-center</code> class to the element of collapse to display a align center navbar.</p>
<pre><code class="html"><div id="header-nav" class="collapse navbar-collapse justify-content-center">
<ul class="navbar-nav">
.......
</ul>
</div>
</code></pre>
</section>
<hr class="divider">
<!-- Sidebar
============================ -->
<section id="idocs_sidebar">
<h2>Sidebar</h2>
<p class="lead">We have built fixed sidebar navigation with <a target="_blank" href="https://getbootstrap.com/docs/4.4/components/scrollspy/">bootstrap scrollspy</a> function for docs layout. which is automatically update navigation based on scroll position to indicate which link is currently active in the viewport.</p>
<p>The example below sidebar vertical navigation with bootstrap <a target="_blank" href="https://getbootstrap.com/docs/4.4/components/navs/">navs</a> and <a target="_blank" href="https://getbootstrap.com/docs/4.4/components/scrollspy/">scrollspy</a> components and section of docs content.</p>
<pre class="pre-scrollable"><code class="html"><!-- Sidebar Navigation
============================ -->
<div class="idocs-navigation bg-light">
<ul class="nav flex-column ">
<li class="nav-item"><a class="nav-link active" href="#item_1">Item 1</a>
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link" href="#item_1_1">Sub Item 1.1</a></li>
<li class="nav-item"><a class="nav-link" href="#item_1_2">Sub Item 1.2</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#item_2">Item 2</a>
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link" href="#item_2_1">Sub Item 2.1</a></li>
<li class="nav-item"><a class="nav-link" href="#item_2_2">Sub Item 2.2</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#item_3">Item 3</a></li>
<li class="nav-item"><a class="nav-link" href="#item_4">Item 4</a></li>
</ul>
</div>
<!-- Docs Content
============================ -->
<div class="idocs-content">
<div class="container">
<!-- Item 1 -->
<section id="item_1">
<h2>Item 1</h2>
<p>...</p>
</section>
<hr class="divider">
<!-- Item 1.1 -->
<section id="item_1_1">
<h2>Item 1.1</h2>
<p>...</p>
</section>
<hr class="divider">
<!-- Item 1.2 -->
<section id="item_1_2">
<h2>Item 1.2</h2>
<p>...</p>
</section>
<hr class="divider">
<!-- Item 2 -->
<section id="item_2">
<h2>Item 2</h2>
<p>...</p>
</section>
<hr class="divider">
<!-- Item 2.1 -->
<section id="item_2_1">
<h2>Item 2.1</h2>
<p>...</p>
</section>
<hr class="divider">
<!-- Item 2.2 -->
<section id="item_2_2">
<h2>Item 2.2</h2>
<p>...</p>
</section>
<hr class="divider">
<!-- Item 3 -->
<section id="item_3">
<h2>Item 3</h2>
<p>...</p>
</section>
<hr class="divider">
<!-- Item 4 -->
<section id="item_4">
<h2>Item 4</h2>
<p>...</p>
</section>
</div>
</div>
</code></pre>
<h4>Light Sidebar:</h4>
<p>Light background Color & Dark text for light sidebar. See below image and code for more information.</p>
<div class="row">
<div class="col-lg-6">
<p><a class="popup-img" href="assets/images/sidebar-light.jpg"><img class="img-fluid border" src="assets/images/sidebar-light.jpg" alt=""></a></p>
</div>
</div>
<p>Add the <code>.bg-light</code> class to the main sidebar navigation div element to display a light sidebar.</p>
<pre><code><!-- Sidebar Navigation
============================ -->
<div class="idocs-navigation bg-light">
....
</div></code></pre>
<h4>Dark Sidebar:</h4>
<p>Dark background Color & Light text for dark sidebar. See below image and code for more information.</p>
<div class="row">
<div class="col-lg-6">
<p><a class="popup-img" href="assets/images/sidebar-dark.jpg"><img class="img-fluid border" src="assets/images/sidebar-dark.jpg" alt=""></a></p>
</div>
</div>
<p>Add the <code>.bg-dark</code> and <code>.docs-navigation-dark</code> class to the main sidebar navigation div element to display a dark sidebar.</p>
<pre><code><!-- Sidebar Navigation
============================ -->
<div class="idocs-navigation bg-dark docs-navigation-dark">
....
</div></code></pre>
</section>
<hr class="divider">
<!-- Footer
============================ -->
<section id="idocs_footer">
<h2>Footer</h2>
<p>The list of various footer types & its descriptions are provided below for your reference:</p>
<h4>Light Footer</h4>
<p>Footer with white background Color & Dark text. See below code for more information.</p>
<pre><code class="html"><!-- Footer
============================================= -->
<footer id="footer" class="section bg-light">
<div class="container">
..........
</div>
</footer>
<!-- Footer end --></code></pre>
<h4>Dark Footer</h4>
<p>Footer with dark background color & Light text. See below code for more information.</p>
<p>Add the <code>.bg-dark</code> and <code>.footer-text-light</code> Class to the <code>footer</code> Tag to display a Dark footer.</p>
<pre><code class="html"><!-- Footer
============================================= -->
<footer id="footer" class="section bg-dark footer-text-light">
<div class="container">
..........
</div>
</footer>
<!-- Footer end --></code></pre>
</section>
<hr class="divider">
<!-- Box Layout Style
============================ -->
<section id="idocs_box_layout">
<h2>Box Layout Style</h2>
<div>
<p>Default Layout Style is wide. Please add the <code>.box</code> class to the <code><body></code> Tag for box layout.</p>
<pre><code class="html"><body class="box" data-spy="scroll" data-target=".idocs-navigation" data-offset="125"></code></pre>
</div>
</section>
<hr class="divider">
<!-- Content
============================ -->
<section id="idocs_content">
<h2>Content</h2>
<p class="lead mb-5">Documentation and examples for displaying typography, code, table, image and video and more..</p>
</section>
<!-- Typography
============================ -->
<section id="idocs_typography">
<h2>Typography</h2>
<p class="text-4">Documentation and examples for typography, headings, body text, lists, and more.</p>
<h3>Headings</h3>
<table class="table table-bordered">
<thead>
<tr>
<th>Heading</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td><code><h1></h1></code></td>
<td><h1>h1. Heading</h1></td>
</tr>
<tr>
<td><code><h2></h2></code></td>
<td><h2>h2. Heading</h2></td>
</tr>
<tr>
<td><code><h3></h3></code></td>
<td><h3>h3. Heading</h3></td>
</tr>
<tr>
<td><code><h4></h4></code></td>
<td><h4>h4. Heading</h4></td>
</tr>
<tr>
<td><code><h5></h5></code></td>
<td><h5>h5. Heading</h5></td>
</tr>
<tr>
<td><code><h6></h6></code></td>
<td><h6>h6. Heading</h6></td>
</tr>
</tbody>
</table>
<h3 class="mt-5">Lead</h3>
<p>Make a paragraph stand out by adding <code>.lead</code></p>
<p class="lead">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.</p>
<pre><code class="html"><p class="lead">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
</p></code></pre>
<h3 class="mt-5">Inline Text elements</h3>
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
<pre><code class="html"><p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
</code></pre>
</section>
<hr class="divider">
<!-- Code
============================ -->
<section id="idocs_code">
<h2>Code</h2>
<p class="text-4">Documentation and examples for displaying inline and multiline blocks of code</p>
<h3 class="mt-5">Inline code</h3>
<p>Wrap inline snippets of code with <code><code></code>. <span class="text-info">Be sure to escape HTML angle brackets</span>.</p>
<p>For example, <code><section></code> should be wrapped as inline.</p>
<pre><code class="html">For example, <code>&lt;section&gt;</code> should be wrapped as inline.</code></pre>
<h3 class="mt-5">Code blocks</h3>
<p>Use <code><pre></code>s for multiple lines of code. <span class="text-info">Once again, be sure to escape any angle brackets in the code for proper rendering</span>. You may optionally add the <code>.pre-scrollable</code> class, which will set a max-height of 340px and provide a y-axis scrollbar.</p>
<p><strong>For example:</strong></p>
<pre><code class="html"><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
<p><strong>Have to use something like:</strong></p>
<pre><code class="html"><pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</pre></code>
</code></pre>
<h3 class="mt-5">Syntax highlighter</h3>
<p>We use <strong><a target="_blank" href="https://highlightjs.org/">Highlight Js</a></strong> for syntax highlight code snippet.</p>
<p>You can refer more information here: <a class="btn btn-primary" target="_blank" href="https://highlightjs.org/usage/"><i class="fas fa-external-link-alt mr-1"></i> How to use highlight.js</a></p>
</section>
<hr class="divider">
<!-- Table
============================ -->
<section id="idocs_table">
<h2>Table</h2>
<p class="text-4">Documentation and examples for opt-in styling of tables.</p>
<p>iDocs is based on Bootstrap 4, so you can easily use Bootstrap's table classes to style your table. <a class="ml-1" target="_blank" href="https://getbootstrap.com/docs/4.4/content/tables/"><i class="fas fa-external-link-alt"></i> Bootstrap Documentation</a></p>
<h3 class="mt-5">Bordered</h3>
<pre><code class="html"><table class="table table-bordered">
.......
</table></code></pre>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<h3 class="mt-5">Striped</h3>
<pre><code class="html"><table class="table table-bordered table-striped">
.......
</table></code></pre>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<p><span class="badge badge-danger text-uppercase mr-2">Note</span>You can refer more information in Bootstrap Documentation here: <a class="btn btn-primary" target="_blank" href="https://getbootstrap.com/docs/4.4/content/tables/"><i class="fas fa-external-link-alt mr-1"></i> Bootstrap Documentation</a></p>
</section>
<hr class="divider">
<!-- Icons
============================ -->
<section id="idocs_icons">
<h2>Icons</h2>
<p><strong>Font Awesome</strong> icon sets are used in iDocs.</p>
<pre><code class="html"><i class="fas fa-mobile-alt"></i>
<i class="fab fa-twitter"></i>
<i class="fas fa-credit-card"></i>
<i class="fab fa-facebook-f"></i>
</code></pre>
<p><span class="badge badge-danger text-uppercase mr-2">Note</span>Please go to their official documentation pages for a full list of icons: <a class="btn btn-primary" target="_blank" href="https://fontawesome.com/icons"><i class="fas fa-external-link-alt mr-1"></i> Font Awesome</a></p>
</section>
<hr class="divider">
<!-- Image
============================ -->
<section id="idocs_image">
<h2>Image</h2>
<p class="text-4">Documentation and examples for opting images into responsive behavior and add lightweight styles to them—all via classes.</p>
<h3 class="mt-5">Responsive Images</h3>
<p>Images in Bootstrap are made responsive with <code>.img-fluid.</code> <code>max-width: 100%;</code> and <code>height: auto;</code> are applied to the image so that it scales with the parent element.</p>
<p><img src="assets/images/screenshot.jpg" class="img-fluid" alt="Responsive image"></p>
<pre><code class="html"><img src="assets/images/screenshot.jpg" class="img-fluid" alt="Responsive image"></code></pre>
<h3 class="mt-5">Image lightbox</h3>
<p>Show image popup when click on image:</p>
<p><a class="popup-img" href="assets/images/screenshot.jpg"><img src="assets/images/screenshot-thumb.jpg" class="img-fluid img-thumbnail" alt="image"></a></p>
<pre><code class="html"><a class="popup-img" href="assets/images/screenshot.jpg">
<img src="assets/images/screenshot-thumb.jpg" class="img-fluid img-thumbnail" alt="image">
</a></code></pre>
<h3 class="mt-5">Image Lightbox with Link</h3>
<p>Show image popup when click on link: <a class="popup-img" href="assets/images/screenshot.jpg">Click Here for Popup Image</a></p>
<pre><code class="html"><a class="popup-img" href="assets/images/screenshot.jpg">Click Here for Popup Image</a></code></pre>
<h3 class="mt-5">Image lightbox with Button</h3>
<p>Show image popup when click on button: <a class="btn btn-primary popup-img" href="assets/images/screenshot.jpg">Click Here for Popup Image</a></p>
<pre><code class="html"><a class="btn btn-primary popup-img" href="assets/images/screenshot.jpg">Click Here for Popup Image</a></code></pre>
</section>
<hr class="divider">
<!-- Video
============================ -->
<section id="idocs_video">
<h2>Video</h2>
<p class="text-4">Create responsive video embeds based on the width of the parent by creating an intrinsic ratio that scales on any device.</p>
<h3 class="mt-5">Embedded Video</h3>
<p>Wrap any embed like an <code><iframe></code> in a parent element with <code>.embed-responsive</code> and an aspect ratio. The <code>.embed-responsive-item</code> isn’t strictly required, but we encourage it.</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/7e90gBu4pas" allowfullscreen></iframe>
</div>
<pre><code class="html"><div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/7e90gBu4pas" allowfullscreen></iframe>
</div></code></pre>
<p><span class="badge badge-danger text-uppercase mr-2">Note</span>Please go to official bootstrap documentation for a full information of embed video: <a class="btn btn-primary" target="_blank" href="https://getbootstrap.com/docs/4.4/utilities/embed/"><i class="fas fa-external-link-alt mr-1"></i> Bootstrap Documentation</a></p>
<h3 class="mt-5">Popup with Video</h3>
<p>Show <strong>Youtube</strong> and <strong>Vimeo</strong> video popup when click on link:</p>
<p><a class="popup-youtube" href="http://www.youtube.com/watch?v=7e90gBu4pas">Open Popup YouTube Video </a></p>
<pre><code class="html"><a class="popup-youtube" href="http://www.youtube.com/watch?v=7e90gBu4pas">Open Popup YouTube Video </a></code></pre>
<p><a class="popup-vimeo" href="https://vimeo.com/45830194">Open Popup Vimeo video</a></p>
<pre><code class="html"><a class="popup-vimeo" href="https://vimeo.com/45830194">Open Popup Vimeo video</a></code></pre>
</section>
<hr class="divider">
<!-- Components
============================ -->
<section id="idocs_components">
<h2>Components</h2>
<p class="mb-5">Setting up components is very easy. Here is the Some of shortcodes describe. also, <strong>iDocs</strong> is based on Bootstrap 4, so you can easily use Bootstrap's components: <a class="ml-1" target="_blank" href="https://getbootstrap.com/docs/4.4/components/"><i class="fas fa-external-link-alt"></i> Bootstrap Documentation</a></p>
</section>
<!-- Accordion
============================ -->
<section id="idocs_accordion">
<h2>Accordion</h2>
<p>You can extend the default collapse behavior to create an accordion. To properly achieve the accordion style, be sure to use <code>.accordion</code> as a wrapper.</p>
<p>See below image and code for more information.</p>
<p><a class="popup-img" href="assets/images/accordion.jpg"><img class="img-fluid border" src="assets/images/accordion.jpg" alt=""></a></p>
<pre><code class="html"><div class="accordion" id="accordionDefault">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0"> <a href="#" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Accordion Title</a> </h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionDefault">
<div class="card-body">This is Accordion Content</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0"> <a href="#" class="collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Accordion Title</a> </h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionDefault">
<div class="card-body">This is Accordion Content</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0"> <a href="#" class="collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Accordion Title</a> </h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionDefault">
<div class="card-body">This is Accordion Content</div>
</div>
</div>
</div>
</code></pre>
<h4>Options:</h4>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Type Class</th>
<th>Features</th>
<th>Code Example</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.accordion-alternate</code></td>
<td>Alternate Minimal Style for the accordions.</td>
<td><pre class="mb-0"><code><div class="accordion accordion-alternate" id="accordionDefault">
.......
</div></code></pre></td>
</tr>
<tr>
<td><code>.arrow-right</code></td>
<td>For set arrow in right side in accordions</td>
<td><pre class="mb-0"><code><div class="accordion arrow-right" id="accordionDefault">
.......
</div></code></pre></td>
</tr>
</tbody>
</table>
</div>
</section>
<hr class="divider">
<!-- Tabs
============================ -->
<section id="idocs_tabs">
<h2>Tabs</h2>
<p class="text-4">Default <a href="https://getbootstrap.com/docs/4.4/components/navs/#javascript-behavior">Bootstrap Nav</a> component combined with iDocs for unique tabs.</p>
<p>See below image and code for more information.</p>
<p><a class="popup-img" href="assets/images/tabs.jpg"><img class="img-fluid border" src="assets/images/tabs.jpg" alt=""></a></p>
<pre><code class="html"><ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content my-3" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">This is Tab Content Home</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">This is Tab Content Profile</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">This is Tab Content Contact</div>
</div></code></pre>
<h4>Options:</h4>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Type Class</th>
<th>Features</th>