KINGDOCS - Documentation Template

KINGDOCS is a responsive Bootstrap 4 Documentation Template built for web, apps, frameworks, software, themes and templates documentation, which helps you to create your next documentation much faster then before. KINGDOCS comes with a simple and elegant design with focus on content and readability. This template was built using SASS for faster and easier customizations.

Features

 
aspect_ratio
Fully Responsive

Built on the latest Bootstrap version 4

visibility
Retina Ready

It looks great on retina displays

code
HTML5 / CSS3

Built on the latest technologies

description
Well Documented

Easy to follow documentation

style
SASS Files

Fast and easy customizations

email
24/7 Support

Fast & friendly email support

Files

 
  • folder assets - this folder contains all assets
    • folder css - this folder contains all stylesheet files
      • insert_drive_file animate.css
      • insert_drive_file bootstrap.min.css
      • insert_drive_file bootstrap.min.css.map
      • insert_drive_file doc-style.css
      • insert_drive_file prism.css
    • folder images - this folder contains all image files
      • insert_drive_file favicon.png
      • insert_drive_file logo.png
      • insert_drive_file menu.png
      • insert_drive_file menu-inverse.png
      • insert_drive_file preview.png
    • folder js - this folder contains all javascript files
      • insert_drive_file bootstrap.min.js
      • insert_drive_file contact-form-validator.min.js
      • insert_drive_file contact-form.js
      • insert_drive_file jquery.easing.min.js
      • insert_drive_file jquery.min.js
      • insert_drive_file prism.js
      • insert_drive_file smooth-scroll.js
    • folder php - this folder contains the contact-form process file
      • insert_drive_file contact-form.php
    • folder scss - this folder contains all sass files
      • insert_drive_file _components.scss
      • insert_drive_file _custom.scss
      • insert_drive_file _doc-media-screens.scss
      • insert_drive_file _doc-mixins.scss
      • insert_drive_file _documentation.scss
      • insert_drive_file _typography.scss
      • insert_drive_file _variables.scss
      • insert_drive_file doc-styles.scss
  • insert_drive_file index.html - right nav demo
  • insert_drive_file index2.html - left nav demo
  • insert_drive_file index3.html - right nav full-width
  • insert_drive_file index4.html - left nav full-width
  • insert_drive_file index5.html - right nav with banner
  • insert_drive_file index6.html - left nav with banner
  • insert_drive_file contact.html - contact page
  • insert_drive_file faq.html - FAQ page

Typography

 

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading

Large Paragraph (lead). Vivamus sollicitudin ligula ut ante bibendum, et sollicitudin sem ultricies. Interdum et malesuada fames.

Regular Paragraph. Vivamus sollicitudin ligula ut ante bibendum, et sollicitudin sem ultricies. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Small Paragraph. Vivamus sollicitudin ligula ut ante bibendum, et sollicitudin sem ultricies. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Extra Small Paragraph. Vivamus sollicitudin ligula ut ante bibendum, et sollicitudin sem ultricies. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec tempus luctus tempus.


  1. Aliquam molestie quam in tincidunt
  2. Morbi quis neque non nisl egestas
  3. Vestibulum nisi nibh, pulvinar amet
  4. Mauris pretium elit ac facilisis mollis
  5. Mauris vitae magna in dolor porta

Primary. Morbi quis neque non nisl egestas laoreet

Muted. Aliquam molestie quam in tincidunt

Success. Vestibulum nisi nibh, pulvinar sit amet lacinia

Info. Mauris pretium elit ac facilisis mollis posuere

Warning. Mauris vitae magna in dolor porta aliquam

Danger. Mauris vitae magna in dolor porta aliquam


Quisque tincidunt dolor diam, malesuada pellentesque lectus finibus pretium. Curabitur a nibh.

Someone famous in Source Title

Quisque tincidunt dolor diam, malesuada pellentesque lectus finibus pretium. Curabitur a nibh.

Someone famous in Source Title
<h1>H1 Heading</h1>
<h2>H2 Heading</h2>
<h3>H3 Heading</h3>
<h4>H4 Heading</h4>
<h5>H6 Heading</h5>
<h6>H6 Heading</h6>

<p class="lead"><strong>Large Paragraph (lead)</strong>. Vivamus sollicitudin ligula ut ante bibendum, et sollicitudin sem ultricies. Interdum et malesuada fames.</p>
<p><strong>Regular Paragraph</strong>. Vivamus sollicitudin ligula ut ante bibendum, et sollicitudin sem ultricies. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
<p class="text-sm"><strong>Small Paragraph</strong>. Vivamus sollicitudin ligula ut ante bibendum, et sollicitudin sem ultricies. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
<p class="text-xs"><strong>Extra Small Paragraph</strong>. Vivamus sollicitudin ligula ut ante bibendum, et sollicitudin sem ultricies. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec tempus luctus tempus.</p>

<ul class="list-featured space-bottom-20">
    <li>Aliquam molestie quam in tincidunt</li>
    <li>Morbi quis neque non nisl egestas</li>
    <li>Vestibulum nisi nibh, pulvinar sit amet</li>
    <li>Mauris pretium elit ac facilisis mollis</li>
    <li>Mauris vitae magna in dolor porta</li>
</ul>
<ol>
    <li>Aliquam molestie quam in tincidunt</li>
    <li>Morbi quis neque non nisl egestas</li>
    <li>Vestibulum nisi nibh, pulvinar amet</li>
    <li>Mauris pretium elit ac facilisis mollis</li>
    <li>Mauris vitae magna in dolor porta</li>
</ol>

<p class="text-primary"><strong>Primary</strong>. Morbi quis neque non nisl egestas laoreet</p>
<p class="text-muted"><strong>Muted</strong>. Aliquam molestie quam in tincidunt</p>
<p class="text-success"><strong>Success</strong>. Vestibulum nisi nibh, pulvinar sit amet lacinia</p>
<p class="text-info"><strong>Info</strong>. Mauris pretium elit ac facilisis mollis posuere</p>
<p class="text-warning"><strong>Warning</strong>. Mauris vitae magna in dolor porta aliquam</p>
<p class="text-danger"><strong>Danger</strong>. Mauris vitae magna in dolor porta aliquam</p>

<blockquote class="blockquote">
    <p class="mb-0">Quisque tincidunt dolor diam, malesuada pellentesque lectus finibus pretium. Curabitur a nibh.</p>
    <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

<blockquote class="blockquote blockquote-reverse">
    <p class="mb-0">Quisque tincidunt dolor diam, malesuada pellentesque lectus finibus pretium. Curabitur a nibh.</p>
    <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Alerts

 
<div class="alert alert-success alert-dismissible fade show" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">×</span>
    </button>
    <i class="md-icon dp18 alert-icon mr-3">check_circle</i><strong>Well done!</strong> You successfully read this important alert message.
</div><!-- / alert -->

<div class="alert alert-info alert-dismissible fade show" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">×</span>
    </button>
    <i class="md-icon dp18 alert-icon mr-3">info</i><strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div><!-- / alert -->

<div class="alert alert-warning alert-dismissible fade show" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">×</span>
    </button>
    <i class="md-icon dp18 alert-icon mr-3">warning</i><strong>Warning!</strong> Better check yourself, you're not looking too good.
</div><!-- / alert -->

<div class="alert alert-danger alert-dismissible fade show" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">×</span>
    </button>
    <i class="md-icon dp18 alert-icon mr-3">error</i><strong>Oh snap! </strong>Change a few things up and try submitting again.
</div><!-- / alert -->

Badges

 

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Default Primary Success Info Warning Danger
<h1>Example heading <span class="badge badge-default mb-2">New</span></h1>
<h2>Example heading <span class="badge badge-primary mb-2">New</span></h2>
<h3>Example heading <span class="badge badge-success m-2">New</span></h3>
<h4>Example heading <span class="badge badge-info mb-2">New</span></h4>
<h5>Example heading <span class="badge badge-warning mb-2">New</span></h5>
<h6>Example heading <span class="badge badge-danger mb-2">New</span></h6>

<span class="badge badge-default">Default</span>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-danger">Danger</span>

Buttons

 


<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-secondary">Secondary Button</button>
<button type="button" class="btn btn-success">Success Button</button>
<button type="button" class="btn btn-info">Button</button>
<button type="button" class="btn btn-warning">Warning Button</button>
<button type="button" class="btn btn-danger">Danger Button</button>

<button type="button" class="btn btn-outline-primary">Outline Button</button>
<button type="button" class="btn btn-outline-secondary">Outline Button</button>
<button type="button" class="btn btn-outline-success">Outline Button</button>
<button type="button" class="btn btn-outline-info">Outline Button</button>
<button type="button" class="btn btn-outline-warning">Outline Button</button>
<button type="button" class="btn btn-outline-danger">Outline Button</button>

Cards

 
This is some text and button within a card block.Button

Card title

Left-aligned content. Example text to build on the card title and make up the bulk of the card's content.

Button
Text Aligned-center

Card Title

With supporting text below as a natural lead-in to additional content.

Button
<div class="card">
    <div class="card-body">
        This is some text and button within a card block.<a href="#x" class="btn btn-xs btn-primary ml-2">Button</a>
    </div>
</div><!-- / card -->

<div class="card">
    <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">Left-aligned content. Example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#x" class="btn btn-primary">Button</a>
    </div><!-- / card-body -->
</div><!-- / card -->

<div class="card text-center">
    <div class="card-header">
        Text Aligned-center
    </div><!-- / card-header -->
    <div class="card-body">
        <h4 class="card-title">Card Title</h4>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#x" class="btn btn-primary">Button</a>
    </div><!-- / card-body -->
    <div class="card-footer text-muted">
        card-footer
    </div><!-- / card-footer -->
</div><!-- / card -->

Modals

 
<div class="example-modal">
    <div class="modal" tabindex="-1">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Modal Example</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div><!-- / modal-header -->
                <div class="modal-body">
                    <p>Modal body text goes here.</p>
                </div><!-- / modal-body -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div><!-- / modal-footer -->
            </div><!-- / modal-content -->
        </div><!-- / modal-dialog -->
    </div><!-- / modal -->
</div><!-- / example-modal -->

<!-- small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".small-modal-example">Small Modal</button>

<div class="modal fade small-modal-example" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal Example</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div><!-- / modal-header -->
            <div class="modal-body">
                <p>Modal body text goes here.</p>
            </div><!-- / modal-body -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div><!-- / modal-footer -->
        </div><!-- / modal-content -->
    </div><!-- / modal-dialog -->
</div><!-- / modal -->
<!-- / small modal -->

<!-- medium modal -->
<button type="button" class="btn btn-primary mr-1" data-toggle="modal" data-target=".medium-modal-example">Medium Modal</button>

<div class="modal fade medium-modal-example" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal Example</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div><!-- / modal-header -->
            <div class="modal-body">
                <p>Modal body text goes here.</p>
            </div><!-- / modal-body -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div><!-- / modal-footer -->
        </div><!-- / modal-content -->
    </div><!-- modal-dialog -->
</div><!-- / modal -->
<!-- / medium modal -->

<!-- large modal -->
<button type="button" class="btn btn-primary mr-1" data-toggle="modal" data-target=".large-modal-example">Large Modal</button>

<div class="modal fade large-modal-example" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal Example</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div><!-- / modal-header -->
            <div class="modal-body">
                <p>Modal body text goes here.</p>
            </div><!-- / modal-body -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div><!-- / modal-footer -->
        </div><!-- / modal-content -->
    </div><!-- modal-dialog -->
</div><!-- / modal -->
<!-- / large modal -->

Progress

 
25%
40%
55%
70%
85%



<div class="progress">
    <div class="progress-bar animated fadeInLeft" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div><!-- / progress -->

<div class="progress">
    <div class="progress-bar bg-success animated fadeInLeft" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">40%</div>
</div><!-- / progress -->

<div class="progress">
    <div class="progress-bar bg-info animated fadeInLeft" role="progressbar" style="width: 55%" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100">55%</div>
</div><!-- / progress -->

<div class="progress">
    <div class="progress-bar bg-warning animated fadeInLeft" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">70%</div>
</div><!-- / progress -->

<div class="progress">
    <div class="progress-bar bg-danger animated fadeInLeft" role="progressbar" style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">85%</div>
</div><!-- / progress -->


<div class="progress">
    <div class="progress-bar progress-bar-striped animated fadeInLeft" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div><!-- / progress -->

<div class="progress">
    <div class="progress-bar progress-bar-striped bg-success animated fadeInLeft" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div><!-- / progress -->

<div class="progress">
    <div class="progress-bar progress-bar-striped bg-info animated fadeInLeft" role="progressbar" style="width: 55%" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
</div><!-- / progress -->

<div class="progress">
    <div class="progress-bar progress-bar-striped bg-warning animated fadeInLeft" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
</div><!-- / progress -->

<div class="progress">
    <div class="progress-bar progress-bar-striped bg-danger animated fadeInLeft" role="progressbar" style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
</div><!-- / progress -->


<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div><!-- / progress -->


<div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div><!-- / progress -->

Tables

 
# Style Class Color Code
1 Active table-active #ebebeb
2 Default none transparent
3 Primary table-primary #c1996b
4 Default none transparent
5 Success table-success #8ac148
6 Default none transparent
7 Info table-info #00a9f4
8 Default none transparent
9 Warning table-warning #ff9800
10 Default none transparent
11 Danger table-danger #e53635

# Style Class Color Code
1 Active table-active #222222
2 Default none #333333
3 Primary table-primary #c1996b
4 Default none #333333
5 Success table-success #8ac148
6 Default none #333333
7 Info table-info #00a9f4
8 Default none #333333
9 Warning table-warning #ff9800
10 Default none #333333
11 Danger table-danger #e53635
<table class="table table-hover">
    <thead>
        <tr>
            <th>#</th>
            <th>Style</th>
            <th>Class</th>
            <th>Color Code</th>
        </tr>
    </thead>
    <tbody>
        <tr class="table-active">
            <th scope="row">1</th>
            <td>Active</td>
            <td>table-active</td>
            <td>#ebebeb</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Default</td>
            <td>none</td>
            <td>transparent</td>
        </tr>
        <tr class="table-primary text-white">
            <th scope="row">3</th>
            <td>Primary</td>
            <td>table-primary</td>
            <td>#c1996b</td>
        </tr>
        <tr>
            <th scope="row">4</th>
            <td>Default</td>
            <td>none</td>
            <td>transparent</td>
        </tr>
        <tr class="table-success text-white">
            <th scope="row">5</th>
            <td>Success</td>
            <td>table-success</td>
            <td>#8ac148</td>
        </tr>
        <tr>
            <th scope="row">6</th>
            <td>Default</td>
            <td>none</td>
            <td>transparent</td>
        </tr>
        <tr class="table-info text-white">
            <th scope="row">7</th>
            <td>Info</td>
            <td>table-info</td>
            <td>#00a9f4</td>
        </tr>
        <tr>
            <th scope="row">8</th>
            <td>Default</td>
            <td>none</td>
            <td>transparent</td>
        </tr>
        <tr class="table-warning text-white">
            <th scope="row">9</th>
            <td>Warning</td>
            <td>table-warning</td>
            <td>#ff9800</td>
        </tr>
        <tr>
            <th scope="row">10</th>
            <td>Default</td>
            <td>none</td>
            <td>transparent</td>
        </tr>
        <tr class="table-danger text-white">
            <th scope="row">11</th>
            <td>Danger</td>
            <td>table-danger</td>
            <td>#e53635</td>
        </tr>
    </tbody>
</table><!-- / table -->

<table class="table table-hover table-inverse">
    <thead>
        <tr>
            <th>#</th>
            <th>Style</th>
            <th>Class</th>
            <th>Color Code</th>
        </tr>
    </thead>
    <tbody>
        <tr class="table-active">
            <th scope="row">1</th>
            <td>Active</td>
            <td>table-active</td>
            <td>#222222</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Default</td>
            <td>none</td>
            <td>#333333</td>
        </tr>
        <tr class="table-primary text-white">
            <th scope="row">3</th>
            <td>Primary</td>
            <td>table-primary</td>
            <td>#c1996b</td>
        </tr>
        <tr>
            <th scope="row">4</th>
            <td>Default</td>
            <td>none</td>
            <td>#333333</td>
        </tr>
        <tr class="table-success text-white">
            <th scope="row">5</th>
            <td>Success</td>
            <td>table-success</td>
            <td>#8ac148</td>
        </tr>
        <tr>
            <th scope="row">6</th>
            <td>Default</td>
            <td>none</td>
            <td>#333333</td>
        </tr>
        <tr class="table-info text-white">
            <th scope="row">7</th>
            <td>Info</td>
            <td>table-info</td>
            <td>#00a9f4</td>
        </tr>
        <tr>
            <th scope="row">8</th>
            <td>Default</td>
            <td>none</td>
            <td>#333333</td>
        </tr>
        <tr class="table-warning text-white">
            <th scope="row">9</th>
            <td>Warning</td>
            <td>table-warning</td>
            <td>#ff9800</td>
        </tr>
        <tr>
            <th scope="row">10</th>
            <td>Default</td>
            <td>none</td>
            <td>#333333</td>
        </tr>
        <tr class="table-danger text-white">
            <th scope="row">11</th>
            <td>Danger</td>
            <td>table-danger</td>
            <td>#e53635</td>
        </tr>
    </tbody>
</table><!-- / table-inverse -->

Getting Started

 

Edit colors & styles

You can change the theme's colors and styles using SASS in assets / scss folder. In order to use SASS you must install a SASS processor app like Scout. All of the theme colors and fonts can be changed in _variables.scss:

// Typography

$primary-font: 'Rubik', sans-serif;
$regular: 400;
$bold: 500;
$letter-spacing: 0.03rem;
$letter-spacing-2x: 0.06rem;
$letter-spacing-big: 0.1rem;

// Color Palette

$primary: #c1996b;
$primary-hover: #ad8b60;
$primary-transparent: rgba(195,157,109,0.95);
$primary-transparent-2: rgba(195,157,109,0.75);
$secondary: #efebe8;
$secondary-hover: #d6d1cc;
$success: #8ac148;
$success-hover: #599014;
$info: #00a9f4;
$info-hover: #007ac1;
$warning: #ff9800;
$warning-hover: #c66900;
$danger: #e53635;
$danger-hover: #ab000e;
$title-color: #222;
$text-color: #666;
$light-bg-color: #f7f7f7;
$dark-bg-color: #222;
$body-bg: #fefefe;
$dark-body-bg: #111;
$white: #fff;
$light-grey: #ebebeb;
$grey: #ccc;
$mid-grey: #777;
$dark-grey: #333;
$black: #000;

The components of the template can be modified in _components.scss, the main styles can be modified in _documentation.scss and the theme's media screens / modifications applied to different screen-szies can be modified in _doc-media-screens.scss. If you prefer changing the styles in CSS instead of SCSS, then you can do that in the single doc-style.css, all of the styles, components and media screens are included in that single .css file.

Setting up contact form

To make the contact form to work and send emails to your own email address, then you must add your email in assets / php / contact-form.php file on line 35, in this code:

$EmailTo = "yourmail@yoursite.com";

replace yourmail@yoursite.com with your own email.

Setting up Google Maps

To make your Google Maps to work you must create a Google Maps API KEY and add it to the template's file where you use a Google Maps, there you must have the below javascript called:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script> 

please replace the YOUR_API_KEY text with the API KEY you've created.

Credits

 

Bootstrap

JQuery

JQuery Easing

Animate CSS

Material Icons

Prism