# blank template Markup

{% code title="blank.html" %}

```markup
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta property="og:site_name" content="atlas "/>
    <title>Blank Starter</title>
    <link rel="icon" type="image/x-icon" href="assets/img/logo.png"/>
    <link rel="icon" href="assets/img/logo.png" type="image/png" sizes="16x16">
    
    <link rel="stylesheet" href="assets/vendor/pace/pace.css">
    <script src="assets/vendor/pace/pace.min.js"></script>
    <!--vendors-->
    <link rel="stylesheet" type="text/css" href="assets/vendor/bootstrap-datepicker/css/bootstrap-datepicker3.min.css">
    <link rel="stylesheet" type="text/css" href="assets/vendor/jquery-scrollbar/jquery.scrollbar.css">
    <link rel="stylesheet" href="assets/vendor/select2/css/select2.min.css">
    <link rel="stylesheet" href="assets/vendor/jquery-ui/jquery-ui.min.css">
    <link rel="stylesheet" href="assets/vendor/daterangepicker/daterangepicker.css">
    <link rel="stylesheet" href="assets/vendor/timepicker/bootstrap-timepicker.min.css">
    <link href="https://fonts.googleapis.com/css?family=Hind+Vadodara:500,600,700|Roboto:400,500,600,700" rel="stylesheet">
    <!--Material Icons-->
    <link rel="stylesheet" type="text/css" href="assets/fonts/materialdesignicons/materialdesignicons.min.css">
    <!--Bootstrap + Atlas Admin CSS-->
    <link rel="stylesheet" type="text/css" href="assets/css/atlas.min.css">
    <!-- Additional library for page -->
</head>

<!--sidebar Begins-->
<aside class="admin-sidebar">
    <div class="admin-sidebar-brand">
        <!-- begin sidebar branding-->
        <img class="admin-brand-logo" src="assets/img/logo.svg" width="40" alt="atlas Logo">
        <span class="admin-brand-content"><a href="index.html">  atmos</a></span>
        <!-- end sidebar branding-->
        <div class="ml-auto">
            <!-- sidebar pin-->
            <a href="#" class="admin-pin-sidebar btn-ghost btn btn-rounded-circle"></a>
            <!-- sidebar close for mobile device-->
            <a href="#" class="admin-close-sidebar"></a>
        </div>
    </div>
    <div class="admin-sidebar-wrapper js-scrollbar">
        <!-- Menu List Begins-->
        <ul class="menu">
            <!--list item begins-->
            <li class="menu-item active">
                <a href="#" class="menu-link">
                        <span class="menu-label">
                                                 <span class="menu-name">Link
                                                </span>
                                            </span>
                    <span class="menu-icon">
                                                   <span class="icon-badge badge-success badge badge-pill">1</span>

                                                <i class="icon-placeholder mdi mdi-link-variant "></i>
                                            </span>
                </a>

            </li>
            <!--list item ends-->

            <!--list item begins-->
            <li class="menu-item ">
                <a href="#" class="open-dropdown menu-link">
                        <span class="menu-label">
                                                 <span class="menu-name">Menu level 1
                                                    <span class="menu-arrow"></span>
                                                </span>
                                                <span class="menu-info">Contains submenu</span>
                                            </span>
                    <span class="menu-icon">
                                                <i class="icon-placeholder mdi mdi-link-variant "></i>
                                            </span>
                </a>
                <!--submenu-->
                <ul class="sub-menu">
                    <li class="menu-item">
                        <a href="#" class=" menu-link">
                                            <span class="menu-label">
                                                <span class="menu-name">Menu Level 1.1</span>
                                            </span>
                            <span class="menu-icon">
                                                <i class="icon-placeholder  ">
                                                    L
                                                </i>
                                            </span>
                        </a>

                    </li>
                    <li class="menu-item">
                        <a href="#" class=" menu-link">
                                            <span class="menu-label">
                                                <span class="menu-name">Menu Level 1.1</span>
                                            </span>
                            <span class="menu-icon">
                                                <i class="icon-placeholder  ">
                                                    L
                                                </i>
                                            </span>
                        </a>

                    </li>


                </ul>
            </li>
            <!--list item ends-->

            <!--list item begins-->
            <li class="menu-item ">
                <a href="#" class="open-dropdown menu-link">
                        <span class="menu-label">
                                                 <span class="menu-name">Menu Level 2
                                                    <span class="menu-arrow"></span>
                                                </span>
                                                <span class="menu-info">Contains submenu</span>
                                            </span>
                    <span class="menu-icon">
                                                <i class="icon-placeholder mdi mdi-link-variant "></i>
                                            </span>
                </a>
                <!--submenu-->
                <ul class="sub-menu">
                    <li class="menu-item">
                        <a href="#" class=" menu-link">
                                            <span class="menu-label">
                                                <span class="menu-name">Menu Level 1.1</span>
                                            </span>
                            <span class="menu-icon">
                                                <i class="icon-placeholder  ">
                                                    L
                                                </i>
                                            </span>
                        </a>

                    </li>
                    <li class="menu-item">
                        <a href="#" class="open-dropdown menu-link">
                        <span class="menu-label">
                                                 <span class="menu-name">Menu Level 1.1
                                                    <span class="menu-arrow"></span>
                                                </span>
                                            </span>
                            <span class="menu-icon">
                                                <i class="icon-placeholder mdi mdi-link-variant "></i>
                                            </span>
                        </a>
                        <!--submenu-->
                        <ul class="sub-menu">
                            <li class="menu-item">
                                <a href="#" class=" menu-link">
                                            <span class="menu-label">
                                                <span class="menu-name">Menu Level 2.1 </span>
                                            </span>
                                    <span class="menu-icon">
                                                <i class="icon-placeholder  ">
                                                    L
                                                </i>
                                            </span>
                                </a>
                            </li>

                        </ul>
                    </li>

                </ul>
            </li>
            <!--list item ends-->
        </ul>
        <!-- Menu List Ends-->
    </div>

</aside>
<!--sidebar Ends-->


<main class="admin-main">

    <!--site header begins-->
    <header class="admin-header">

        <a href="#" class="sidebar-toggle" data-toggleclass="sidebar-open" data-target="body"> </a>

        <nav class=" mr-auto my-auto">
            <ul class="nav align-items-center">

                <li class="nav-item">
                    <a class="nav-link  " data-target="#siteSearchModal" data-toggle="modal" href="#">
                        <i class=" mdi mdi-magnify mdi-24px align-middle"></i>
                    </a>
                </li>
            </ul>
        </nav>
        <nav class=" ml-auto">
            <ul class="nav align-items-center">

                <li class="nav-item">
                    <div class="dropdown">
                        <a href="#" class="nav-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i
                                class="mdi mdi-24px mdi-bell-outline"></i> </a>

                        <div class="dropdown-menu notification-container dropdown-menu-right">
                            <h6 class="dropdown-header text-center"><span class="mdi mdi-bell-ring"></span> You have 4 New
                                Messages</h6>

                            <div class="notification-events">
                                <div class="list-group list-group-flush">
                                    <a href="#" class="list-group-item list-group-item-action  text-info text-truncate">
                                        <i class="mdi mdi-alert text-info"></i>
                                        5 new members joined today

                                    </a>
                                
                                </div>
                            </div>
                            <a class="dropdown-item text-center" href="#">View All</a>

                        </div>
                    </div>
                </li>
                <li class="nav-item dropdown ">
                    <a class="nav-link dropdown-toggle" href="#" id="" role="button" data-toggle="dropdown"
                       aria-haspopup="true" aria-expanded="false">
                        <div class="avatar avatar-sm avatar-online">
                            <span class="avatar-title rounded-circle bg-accent">V</span>

                        </div>
                    </a>
                    <div class="dropdown-menu  dropdown-menu-right" aria-labelledby="">
                      
                        <a class="dropdown-item" href="#"> Logout</a>
                    </div>
                </li>

            </ul>

        </nav>
    </header>
    <!--site header ends -->    <section class="admin-content">
    <!-- BEGIN PlACE PAGE CONTENT HERE -->
    <!--  container or container-fluid as per your need           -->
    <div class="container">
        
    </div>
    <!-- END PLACE PAGE CONTENT HERE -->
</section>
</main>


<div class="modal slide-left  fade" id="siteSearchModal" tabindex="-1" role="dialog" aria-labelledby="siteSearchModal"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">

            <div class="modal-body p-all-0" id="site-search">
                <button type="button" class="close light" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <div class="form-dark bg-accent text-white p-t-60 p-b-20 bg-dots" >
                    <h3 class="text-uppercase    text-center  fw-300 "> Search</h3>

                    <div class="container-fluid">
                        <div class="col-md-10 p-t-10 m-auto">
                            <input type="search" placeholder="Search Something"
                                   class=" search form-control form-control-lg">

                        </div>
                    </div>
                </div>
                <div class="">
                    <div class="bg-accent text-muted container-fluid p-b-10 text-center text-overline">
                        results
                    </div>
                    <ul class="list-group list  ">


                        <div class="list-group-item d-flex  align-items-center">
                            <div class="m-r-20">
                                <div class="avatar avatar-sm "><img class="avatar-img rounded-circle"
                                                                    src="assets/img/users/user-3.jpg"></div>
                            </div>
                            <div class="">
                                <div class="name">Eric Chen</div>
                                <div class="text-muted">Developer</div>
                            </div>


                        </div>
                    
                    </ul>
                </div>

            </div>

        </div>
    </div>
</div>


<script src="assets/vendor/jquery/jquery.min.js" type="text/javascript"></script>
<script src="assets/vendor/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
<script src="assets/vendor/popper/popper.js" type="text/javascript"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/vendor/select2/js/select2.full.min.js" type="text/javascript"></script>
<script src="assets/vendor/jquery-scrollbar/jquery.scrollbar.min.js" type="text/javascript"></script>
<script src="assets/vendor/listjs/listjs.min.js" type="text/javascript"></script>
<script src="assets/vendor/moment/moment.min.js"></script>
<script src="assets/vendor/daterangepicker/daterangepicker.js"></script>
<script src="assets/vendor/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<script src="assets/vendor/bootstrap-notify/bootstrap-notify.min.js" type="text/javascript"></script>
<script src="assets/js/atmos.min.js"></script>
<!--page specific scripts for demo-->
</body>
</html>
```

{% endcode %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.atomui.com/starter-template/blank.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
