Getting Started

Introduction
preview

Suspendisse molestie pellentesque nisi, a fermentum ligula pulvinar nec. Proin ornare varius risus. Aliquam id ante odio. Aliquam at dui sit amet quam accumsan gravida vel vulputate arcu. Mauris sed rutrum ligula.

Quisque in tortor dolor. In hac habitasse platea dictumst. Vivamus dictum, libero vel hendrerit iaculis, nunc eros posuere diam, id tempus velit nibh eget nisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus mauris iaculis ullamcorper venenatis urna vel aliquet.

Vivamus arcu lectus, vehicula sed molestie euismod, vestibulum et arcu. Aliquam mollis gravida tristique. Phasellus id diam odio. Proin id fermentum leo, nec finibus tortor. Ut in lacus quis sem commodo rhoncus a id eros. Phasellus ac iaculis quam. Vestibulum pharetra dignissim libero, ut aliquam augue. Nulla facilisi. Mauris sed sollicitudin ex. Praesent non ornare velit. Aenean sollicitudin enim sit amet erat molestie semper.

 
Quick Start

Mauris vitae risus sed neque interdum ultrices. Etiam ac purus dignissim, tristique urna vel, elementum ante. Proin ac felis erat. Nulla sem tortor, mollis in mauris vel, dictum porta nunc. Nam sagittis, eros eget cursus.

Quisque massa arcu, placerat ut eros ac, luctus bibendum metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus aliquet purus vel enim malesuada, quis commodo sapien maximus. Integer mattis ligula eget nisl imperdiet malesuada quis molestie sem enim aliquet sit amet.

 
Typography

Documentation and examples for typography, including global settings, headings, body text, lists and more. Set your font-family by including the font's @import code into the style.scss or style.css file:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600&display=swap');

After embedding the font-family code, the font-family must be specified in CSS, in the theme's assets / scss / _variables.scss file:

$title-font: 'Poppins', sans-serif;
$primary-font: 'Poppins', sans-serif;
$secondary-font: 'Poppins', sans-serif;
 
File Structure

*Click on the folder () icons to open / close them.

assets

  • index.html
  • documentation.html
  • knowledgebase.html
 
Starter Template

To get started with all of the basic files and scripts, with basic header and footer layout included in the starter template, please copy the below code:

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="eDocs - Documentation Template">
    <meta name="author" content="erikathemes.com">
    <!-- Favicon -->
    <link rel="icon" href="assets/images/favicon.ico">
    <!-- Site Title -->
    <title>eDocs - Documentation Template</title>
    <!-- Bootstrap 5 Core CSS -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom Styles -->
    <link rel="stylesheet" href="assets/css/animate.min.css">
    <link rel="stylesheet" href="assets/css/aos.css">
    <link rel="stylesheet" href="assets/css/style.css">
</head>

<body>

    <div id="loader-wrapper">
        <div id="loader"></div>
        <div class="loader-section section-left"></div>
        <div class="loader-section section-right"></div>
    </div>

    <div id="#top"></div>

    <nav class="navbar navbar-expand-lg navbar-inverse bg-primary absolute top-0 left-auto right-auto w-100">
        <div class="container">
            <a class="navbar-brand" href="index.html"><img src="assets/images/logo-travlinq.png" alt=""></a>
            <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-toggle" aria-controls="navbar-toggle" aria-expanded="false" aria-label="Toggle navigation">
                <span class="icon-bar top-bar"></span>
                <span class="icon-bar middle-bar"></span>
                <span class="icon-bar bottom-bar"></span>
                <span class="sr-only">Toggle navigation</span>
            </button><!-- / navbar-toggler -->

            <div class="collapse navbar-collapse" id="navbar-toggle">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#x" id="dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="bi bi-file-earmark-text mr-5 fs-14 va-middle"></i> <span class="va-middle">Docs</span></a>
                        <div class="dropdown-menu mega-menu drop-to-center two-columns" aria-labelledby="dropdown">
                            <div class="row">
                                <div class="col-lg-6 sub-menu">
                                    <a class="dropdown-item" href="help-center.html"><i class="bi bi-life-preserver mr-5"></i> <span>Help Center</span></a>
                                    <a class="dropdown-item" href="help-center2.html"><i class="bi bi-headset mr-5"></i> <span>Help Center 2</span></a>
                                    <a class="dropdown-item" href="documentation.html"><i class="bi bi-layout-text-window-reverse mr-5"></i> <span>Doc Layout 1</span></a>
                                </div><!-- / sub-menu -->

                                <div class="col-lg-6 sub-menu">
                                    <a class="dropdown-item" href="doc-layout2.html"><i class="bi bi-layout-text-window mr-5"></i> <span>Doc Layout 2</span></a>
                                    <a class="dropdown-item" href="doc-layout3.html"><i class="bi bi-window mr-5"></i> <span>Doc Layout 3</span></a>
                                    <a class="dropdown-item" href="doc-layout4.html"><i class="bi bi-layout-sidebar-inset mr-5"></i> <span>Doc Layout 4</span></a>
                                </div><!-- / sub-menu -->
                            </div><!-- / row -->
                        </div><!-- / dropdown-menu -->
                    </li><!-- / dropdown -->
                    
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#x" id="dropdown-pages" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="bi bi-window-sidebar mr-5 fs-14 va-middle"></i> <span class="va-middle">Pages</span></a>
                        <div class="dropdown-menu mega-menu two-columns drop-to-center" aria-labelledby="dropdown-pages">
                            <div class="row">
                                <div class="col-lg-6 sub-menu">
                                    <a class="dropdown-item" href="support.html"><i class="bi bi-life-preserver mr-5"></i> <span>Support</span></a>
                                    <a class="dropdown-item" href="article.html"><i class="bi bi-file-post mr-5"></i> <span>Article</span></a>
                                    <a class="dropdown-item" href="knowledgebase.html"><i class="bi bi-lightbulb mr-5"></i> <span>Knowledge</span></a>
                                </div><!-- / sub-menu -->

                                <div class="col-lg-6 sub-menu">
                                    <a class="dropdown-item active" href="faq.html"><i class="bi bi-question-circle mr-5"></i> <span>FAQ</span></a>
                                    <a class="dropdown-item" href="contact.html"><i class="bi bi-envelope-open mr-5"></i> <span>Contact</span></a>
                                    <a class="dropdown-item" href="404.html"><i class="bi bi-calendar2-x mr-5"></i> <span>404 Page</span></a>
                                </div><!-- / sub-menu -->
                            </div><!-- / row -->
                        </div><!-- / dropdown-menu -->
                    </li><!-- / dropdown -->

                    <li class="nav-item">
                        <a class="nav-link opc-100" href="" data-bs-toggle="modal" data-bs-target=".login-modal"><i class="bi bi-person-circle mr-5 fs-14 va-middle bl-1 border-white pl-50"></i> <span class="va-middle">Sign In</span></a>
                    </li><!-- / nav-item -->
                </ul><!-- / navbar-nav -->

                <ul class="navbar-button p-0 m-0 ml-5">
                    <li class="nav-item">
                        <a href="support.html" class="btn btn-sm btn-white"><i class="bi bi-life-preserver fs-14 mr-5 text-primary va-middle"></i> <span>Support</span></a>
                    </li>
                </ul>
            </div><!-- / navbar-collapse -->
        </div><!-- / container-fluid -->
    </nav><!-- / navbar -->

    <header class="page-header bg-primary dark">
        <div class="container">
            <h1 class="page-title mb-15" data-aos="fade-down">Title</h1>
        </div><!-- / container -->
    </header>

    <div class="main-container">
        <div class="container">
                
        </div><!-- / container -->
    </div><!-- / main-container -->

    <div class="footer-wrapper bg-primary dark">
        <div class="footer-widget-area bg-transparent">
            <div class="container p-y-50">
                <div class="row v-center">
                    <div class="col-lg-8 tablet-lg-text-center tablet-lg-top-30">
                        <h3>Couldn't find an answer?</h3>
                    </div><!-- / column -->

                    <div class="col-lg-4 text-right tablet-lg-text-center">
                        <a href="knowledgebase.html" class="btn btn-white"><i class="bi bi-lightbulb text-primary mr-5"></i> <span>Browse Articles</span></a>
                    </div><!-- / column -->
                </div><!-- / row -->
            </div><!-- / container -->
        </div><!-- / footer-widget-area -->

        <footer class="bg-transparent relative">
            <div class="container">
                <div class="row v-center mobile-center">
                    <div class="col-lg-4 tablet-lg-text-center tablet-lg-top-30">
                        <img src="assets/images/logo-travlinq.png" class="footer-logo" alt="">
                    </div><!-- / footer-left-area -->
                    <div class="col-lg-4 footer-center-area text-center tablet-lg-top">
                        <a href="#top" class="btn btn-lg btn-icon btn-white btn-circle btn-back-top"><i class="bi bi-chevron-up"></i></a>
                        <p>© 2021 eDocs by <a href="https://erikathemes.com" target="_blank">ErikaThemes</a></p>
                    </div><!-- / footer-center-area -->
                    <div class="col-lg-4 tablet-lg-text-center text-right">
                        <p>
                            <a href="index.html" class="text-link mr-30">Home</a>
                            <a href="components/all-components.html" class="text-link mr-30">Components</a>
                            <a href="index.html#demos" class="text-link">Demos</a>
                        </p>
                    </div><!-- / footer-right-area -->
                </div><!-- / row -->
            </div><!-- / container -->
        </footer>
    </div><!-- / footer-wrapper -->

    <!-- login-modal -->
    <div class="modal fade login-modal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-dialog-centered modal-sm">
            <div class="modal-content">
                <div class="modal-header pt-40">
                    <h6 class="modal-title text-center w-100"><i class="bi bi-person-circle text-primary fs-100"></i> <span class="hidden">User</span></h6>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div><!-- / modal-header -->
                <div class="modal-body p-y-40">
                    <form class="needs-validation" id="login-form3" novalidate="novalidate">
                        <div class="form-group">
                            <input type="text" class="form-control" name="usernameLogin" placeholder="Username or Email" required="">
                        </div><!-- / form-group -->

                        <div class="form-group mb-10">
                            <input type="password" class="form-control" name="passwordLogin" placeholder="Password" required="">
                        </div><!-- / form-group -->

                        <div class="mb-15">
                            <a href="#x">Forgot Password?</a>
                        </div>

                        <div class="row v-center mt-20">
                            <div class="col-12 mb-25">
                                <div class="checkbox checkbox-primary ml-10">
                                    <label class="hidden"><input type="checkbox"></label>
                                    <input id="checkbox-login2" type="checkbox">
                                    <label for="checkbox-login2"><span>Remember Me</span></label>
                                </div><!-- / checkbox -->
                            </div><!-- / column -->
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary btn-block w-100">Sign In <i class="bi bi-arrow-right fs-14 ml-5 va-middle"></i> </button>
                            </div><!-- / column -->
                        </div><!-- / row -->
                    </form>
                </div><!-- / modal-body -->
                <div class="modal-footer text-center pb-40">
                    <p class="mb-0 w-100">Don't have an account? <a href="#x">Sign Up</a></p>
                </div><!-- / modal-footer -->
            </div><!-- / modal-content -->
        </div><!-- / modal-dialog -->
    </div><!-- / modal -->
    <!-- / login-modal -->

    <!-- Core JavaScript -->
    <script src="assets/js/bootstrap.bundle.min.js"></script>
    <script src="assets/js/theme.js"></script>

    <!-- aos -->
    <script src="assets/js/aos.js"></script>
    <script>
        AOS.init({
          duration: 1200,
        })
    </script>
    <!-- / aos -->

</body>
 
Was this article helpful?
Yes No
Popular Articles
 
Get Support

Can't find an answer to your question? Please submit a ticket via support forum.

Support

Couldn't find an answer?

Get Support