# Black scheme

## How To Start New Page?

The design for the blank page is shown below:

![](https://2744120822-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4TuOJbH6fevdwDEJ2u%2F-M4TuRpnVefLKP77JKOd%2F-M4Tu_7ocSULccxr-TUM%2Fadmire45.png?generation=1586435355063036\&alt=media)

It has the following Structure:

```
 <html>
      <body>
          <div class="bg-dark" id="wrap">

              <========== Start of Top Bar ============>

              <div id="top">
                   <nav class="navbar navbar-static-top">

                       ........It contains Top bar  ..........      

                   </nav>
              </div>

              <========== End of Top Bar ============>

              <========== Start of Leftside Bar ============>

              <div id="left">

                   <div class="media user-media bg-dark dker">

                           ......It contains user details.........

                   </div>

                   <ul id="menu" class="bg-blue dker">

                         ...........It contains left menu list...............

                   </ul>    
              </div>

              <========== End of Leftside Bar ============>

              <========== Start of Main Content ============>

             <div id="content" class="bg-container">

                  <header class="head">

                       ......It contains Page Header (Breadcrumb)........

                  </header>

                 <div class="outer">

                      <div class="inner bg-light lter bg-container">

                      ....... It contains the Main content of the page ....... 

                      </div>
                  </div>

               </div>

               <========== End of Main Content ============>

               <========== Start of Rightside Bar ============>

               <div id="right">
                    <div class="right_content">

                    .............It contains Right side bar..............

                    </div>
               </div>  

               <========== End of Rightside Bar ============>  
         </div>     
      </body>
 </html>
```

## i) Boxed Layout

The design for the blank page is shown below:

![](https://2744120822-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4TuOJbH6fevdwDEJ2u%2F-M4TuRpnVefLKP77JKOd%2F-M4Tu_7svqEpgQ0sx6UZ%2Fadmire46.png?generation=1586435355158400\&alt=media)

It has the following Structure:

```
<html>
    <body class="boxed">

       <div class="bg-dark" id="wrap">

            <========== Start of Top Bar ============>

            <div id="top">
                <nav class="navbar navbar-static-top">

                    ........It contains Top bar ..........

                </nav>
            </div>

            <========== End of Top Bar ============>

            <div class="wrapper">

            <========== Start of Leftside Bar ============>

            <div id="left">

                <div class="media user-media bg-dark dker">

                     ......It contains user details.........

                </div>

                <ul id="menu" class="bg-blue dker">

                    ...........It contains left menu list...............
                </ul>

            </div>

           <========== End of Leftside Bar ============>

           <========== Start of Main Content ============>

           <div id="content" class="bg-container">

                <header class="head">

                 ......It contains Page Header (Breadcrumb)........

                </header>

                <div class="outer">

                    <div class="inner bg-light lter bg-container">

                     ....... It contains the Main content of the page .......

                    </div>
                </div>

           </div>

          <========== End of Main Content ============>

        </div>


          <========== Start of Rightside Bar ============>

           <div id="right">
                <div class="right_content">

                .............It contains Right side bar..............

                </div>
           </div>

           <========== End of Rightside Bar ============>
     </div>
  </body>
</html>
```

## ii) Boxed & Fixed Header

The design for the blank page is shown below:

![](https://2744120822-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4TuOJbH6fevdwDEJ2u%2F-M4TuRpnVefLKP77JKOd%2F-M4Tu_7wdbA6hpEcoBvs%2Fadmire48.png?generation=1586435355033877\&alt=media)

It has the following Structure

```
<html>
    <body class="boxed">

       <div class="bg-dark" id="wrap">

            <========== Start of Top Bar ============>

            <div id="top">
                <nav class="navbar navbar-static-top navbar-fixed-top">

                    ........It contains Top bar ..........

                </nav>
            </div>

            <========== End of Top Bar ============>

           <div class="wrapper">

            <========== Start of Leftside Bar ============>


            <div id="left">

                <div class="media user-media bg-dark dker">

                     ......It contains user details.........

                </div>

                <ul id="menu" class="bg-blue dker">

                    ...........It contains left menu list...............
                </ul>

            </div>

           <========== End of Leftside Bar ============>

           <========== Start of Main Content ============>

           <div id="content" class="bg-container">

                <header class="head">

                 ......It contains Page Header (Breadcrumb)........

                </header>

                <div class="outer">

                    <div class="inner bg-light lter bg-container">

                     ....... It contains the Main content of the page .......

                    </div>
                </div>

           </div>

          <========== End of Main Content ============>

          </div>

          <========== Start of Rightside Bar ============>

           <div id="right">
                <div class="right_content">

                .............It contains Right side bar..............

                </div>
           </div>

           <========== End of Rightside Bar ============>
     </div>
  </body>
</html>
```

## iii) Fixed Header & Menu

The design for the blank page is shown below:

![](https://2744120822-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4TuOJbH6fevdwDEJ2u%2F-M4TuRpnVefLKP77JKOd%2F-M4Tu_7yzKXJwZHPbE5E%2Fadmire47.png?generation=1586435355422314\&alt=media)

It has the following Structure:

```
<html>
    <body>

       <div class="bg-dark" id="wrap">

            <========== Start of Top Bar ============>

            <div id="top">
                <nav class="navbar navbar-static-top navbar-fixed-top">

                    ........It contains Top bar ..........

                </nav>
            </div>

            <========== End of Top Bar ============>

           <div class="wrapper">

            <========== Start of Leftside Bar ============>


            <div id="left"  class="fixed-header_menu">

                <div class="media user-media bg-dark dker">

                     ......It contains user details.........

                </div>

                <ul id="menu" class="bg-blue dker">

                    ...........It contains left menu list...............
                </ul>

            </div>

           <========== End of Leftside Bar ============>

           <========== Start of Main Content ============>

           <div id="content" class="bg-container">

                <header class="head">

                 ......It contains Page Header (Breadcrumb)........

                </header>

                <div class="outer">

                    <div class="inner bg-light lter bg-container">

                     ....... It contains the Main content of the page .......

                    </div>
                </div>

           </div>

          <========== End of Main Content ============>

          </div>

          <========== Start of Rightside Bar ============>

           <div id="right">
                <div class="right_content">

                .............It contains Right side bar..............

                </div>
           </div>

           <========== End of Rightside Bar ============>
     </div>
  </body>
</html>
```

## iv) Fixed Header

The design for the blank page is shown below:

![](https://2744120822-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4TuOJbH6fevdwDEJ2u%2F-M4TuRpnVefLKP77JKOd%2F-M4Tu_8-5GmMkYn1bOc8%2Fadmire49.png?generation=1586435355706060\&alt=media)

It has the following structure :

```
<html>
    <body>

       <div class="bg-dark" id="wrap">

            <========== Start of Top Bar ============>

            <div id="top">
                <nav class="navbar navbar-static-top navbar-fixed-top">

                    ........It contains Top bar ..........

                </nav>
            </div>

            <========== End of Top Bar ============>

           <div class="wrapper">

            <========== Start of Leftside Bar ============>


            <div id="left">

                <div class="media user-media bg-dark dker">

                     ......It contains user details.........

                </div>

                <ul id="menu" class="bg-blue dker">

                    ...........It contains left menu list...............
                </ul>

            </div>

           <========== End of Leftside Bar ============>

           <========== Start of Main Content ============>

           <div id="content" class="bg-container">

                <header class="head">

                 ......It contains Page Header (Breadcrumb)........

                </header>

                <div class="outer">

                    <div class="inner bg-light lter bg-container">

                     ....... It contains the Main content of the page .......

                    </div>
                </div>

           </div>

          <========== End of Main Content ============>

          </div>

          <========== Start of Rightside Bar ============>

           <div id="right">
                <div class="right_content">

                .............It contains Right side bar..............

                </div>
           </div>

           <========== End of Rightside Bar ============>
     </div>
  </body>
</html>
```

## v) Boxed & Fixed Menu

The design for the blank page is shown below:

![](https://2744120822-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4TuOJbH6fevdwDEJ2u%2F-M4TuRpnVefLKP77JKOd%2F-M4Tu_859xbEtUkmiH52%2Fadmire50.png?generation=1586435355543861\&alt=media)

It has the following Structure:

```
<html>
    <body class="boxed">

       <div class="bg-dark" id="wrap">

            <========== Start of Top Bar ============>

            <div id="top">
                <nav class="navbar navbar-static-top">

                    ........It contains Top bar ..........

                </nav>
            </div>

            <========== End of Top Bar ============>

           <div class="wrapper">

            <========== Start of Leftside Bar ============>


            <div id="left" class="fixed_menu">

                <div class="media user-media bg-dark dker">

                     ......It contains user details.........

                </div>

                <ul id="menu" class="bg-blue dker">

                    ...........It contains left menu list...............
                </ul>

            </div>

           <========== End of Leftside Bar ============>

           <========== Start of Main Content ============>

           <div id="content" class="bg-container">

                <header class="head">

                 ......It contains Page Header (Breadcrumb)........

                </header>

                <div class="outer">

                    <div class="inner bg-light lter bg-container">

                     ....... It contains the Main content of the page .......

                    </div>
                </div>

           </div>

          <========== End of Main Content ============>

          </div>

          <========== Start of Rightside Bar ============>

           <div id="right">
                <div class="right_content">

                .............It contains Right side bar..............

                </div>
           </div>

           <========== End of Rightside Bar ============>
     </div>
  </body>
</html>
```

## vi) Fixed Menu

The design for the blank page is shown below:

![](https://2744120822-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4TuOJbH6fevdwDEJ2u%2F-M4TuRpnVefLKP77JKOd%2F-M4Tu_88Qk7hqQ86KvvZ%2Fadmire51.png?generation=1586435355748474\&alt=media)

It has the following Structure:

```
<html>
    <body>

       <div class="bg-dark" id="wrap">

            <========== Start of Top Bar ============>

            <div id="top">
                <nav class="navbar navbar-static-top">

                    ........It contains Top bar ..........

                </nav>
            </div>

            <========== End of Top Bar ============>

           <div class="wrapper">

            <========== Start of Leftside Bar ============>


            <div id="left" class="fixed_menu">

                <div class="media user-media bg-dark dker">

                     ......It contains user details.........

                </div>

                <ul id="menu" class="bg-blue dker">

                    ...........It contains left menu list...............
                </ul>

            </div>

           <========== End of Leftside Bar ============>

           <========== Start of Main Content ============>

           <div id="content" class="bg-container">

                <header class="head">

                 ......It contains Page Header (Breadcrumb)........

                </header>

                <div class="outer">

                    <div class="inner bg-light lter bg-container">

                     ....... It contains the Main content of the page .......

                    </div>
                </div>

           </div>

          <========== End of Main Content ============>

          </div>

          <========== Start of Rightside Bar ============>

           <div id="right">
                <div class="right_content">

                .............It contains Right side bar..............

                </div>
           </div>

           <========== End of Rightside Bar ============>
     </div>
  </body>
</html>
```

## vii) No Header

The design for the blank page is shown below:

![](https://2744120822-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4TuOJbH6fevdwDEJ2u%2F-M4TuRpnVefLKP77JKOd%2F-M4Tu_8NhUW3BAVomplG%2Fadmire52.png?generation=1586435355682714\&alt=media)

It has the following Structure:

```
<html>
<body>
      <div class="bg-dark" id="wrap">

       <========== Start of Leftside Bar ============>

      <div id="left">

          <div class="media user-media bg-dark dker">

               ......It contains user details.........

           </div>

           <ul id="menu" class="bg-blue dker">

              ...........It contains left menu list...............

           </ul>
       </div>

       <========== End of Leftside Bar ============>

        <========== Start of Main Content ============>

        <div id="content" class="bg-container">

       <header class="head">

           ......It contains Page Header (Breadcrumb)........

       </header>

        <div class="outer">

            <div class="inner bg-light lter bg-container">

                ....... It contains the Main content of the page .......

            </div>
        </div>

    </div>

<========== End of Main Content ============>

<========== Start of Rightside Bar ============>

    <div id="right">
         <div class="right_content">

         ............It contains Right side bar..............

         </div>
    </div>

<========== End of Rightside Bar ============>
    </div>
  </body>
</html>
```

**viii) No Left Sidebar**

The design for the blank page is shown below:

![](https://2744120822-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4TuOJbH6fevdwDEJ2u%2F-M4TuRpnVefLKP77JKOd%2F-M4Tu_8PqVXvyJp8k91X%2Fadmire53.png?generation=1586435355299050\&alt=media)

It has the following Structure:

```
<html>
    <body>

       <div class="bg-dark" id="wrap">

            <========== Start of Top Bar ============>

            <div id="top">
                <nav class="navbar navbar-static-top">

                    ........It contains Top bar ..........

                </nav>
            </div>

            <========== End of Top Bar ============>

           <div class="wrapper">

            <========== Start of Leftside Bar ============>


            <div id="left" class="fixed_menu">

                <div class="media user-media bg-dark dker">

                     ......It contains user details.........

                </div>

                <ul id="menu" class="bg-blue dker">

                    ...........It contains left menu list...............
                </ul>

            </div>

           <========== End of Leftside Bar ============>

           <========== Start of Main Content ============>

           <div id="content" class="bg-container">

                <header class="head">

                 ......It contains Page Header (Breadcrumb)........

                </header>

                <div class="outer">

                    <div class="inner bg-light lter bg-container">

                     ....... It contains the Main content of the page .......

                    </div>
                </div>

           </div>

          <========== End of Main Content ============>

          </div>

          <========== Start of Rightside Bar ============>

           <div id="right">
                <div class="right_content">

                .............It contains Right side bar..............

                </div>
           </div>

           <========== End of Rightside Bar ============>
     </div>
  </body>
</html>
```
