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

<head>
  <meta charset="UTF-8" />
  <title>Dore jQuery Admin Template</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="font/iconsmind-s/css/iconsminds.css" />
  <link rel="stylesheet" href="font/simple-line-icons/css/simple-line-icons.css" />
  <link rel="stylesheet" href="css/vendor/bootstrap-stars.css" />
  <link rel="stylesheet" href="css/vendor/bootstrap.min.css" />
  <link rel="stylesheet" href="css/vendor/owl.carousel.min.css" />
  <link rel="stylesheet" href="css/vendor/bootstrap-stars.css" />
  <link rel="stylesheet" href="css/vendor/video-js.css" />
  <link rel="stylesheet" href="css/dore.light.bluenavy.min.css" />
  <link rel="stylesheet" href="css/main.css" />
</head>

<body class="show-spinner no-footer">
  <div class="landing-page">
    <div class="mobile-menu">
      <a href="#home" class="logo-mobile scrollTo">
        <span></span>
      </a>
      <ul class="navbar-nav">
        <li class="nav-item"><a href="#features" class="scrollTo">FEATURES</a></li>
        <li class="nav-item"><a href="#layouts" class="scrollTo">LAYOUTS</a></li>
        <li class="nav-item"><a href="#components" class="scrollTo">COMPONENTS</a></li>
        <li class="nav-item"><a href="#apps" class="scrollTo">APPS</a></li>
        <li class="nav-item"><a href="#themes" class="scrollTo">THEMES</a></li>
        <li class="nav-item">
          <div class="separator"></div>
        </li>
        <li class="nav-item pl-4">
          <a class="btn btn-outline-semi-light btn-sm pr-4 pl-4" target="_top"
            href="https://1.envato.market/5kAb">BUY</a>
        </li>
      </ul>
    </div>

    <div class="main-container">
      <nav class="landing-page-nav">
        <div class="container d-flex align-items-center justify-content-between">
          <a class="navbar-logo pull-left scrollTo" href="#home">
            <span class="white"></span>
            <span class="dark"></span>
          </a>
          <ul class="navbar-nav d-none d-lg-flex flex-row">
            <li class="nav-item"><a href="#features" class="scrollTo">FEATURES</a></li>
            <li class="nav-item"><a href="#layouts" class="scrollTo">LAYOUTS</a></li>
            <li class="nav-item"><a href="#components" class="scrollTo">COMPONENTS</a></li>
            <li class="nav-item"><a href="#apps" class="scrollTo">APPS</a></li>
            <li class="nav-item"><a href="#themes" class="scrollTo">THEMES</a></li>
            <li class="nav-item pl-4">
              <a class="btn btn-outline-semi-light btn-sm pr-4 pl-4" target="_top"
                href="https://1.envato.market/5kAb">BUY</a>
            </li>
          </ul>
          <a href="#" class="mobile-menu-button">
            <i class="simple-icon-menu"></i>
          </a>
        </div>
      </nav>

      <div class="content-container" id="home">
        <div class="section home">
          <div class="container">
            <div class="row home-row">
              <div class="col-12 d-block d-md-none">
                <a target="_blank" href="/Dashboard.Default.html">
                  <img alt="mobile hero" class="mobile-hero" src="img/landing-page/home-hero-mobile.png" />
                </a>
              </div>

              <div class="col-12 col-xl-4 col-lg-5 col-md-6">
                <div class="home-text">
                  <div class="display-1">MAGIC IS IN <br />THE DETAILS</div>
                  <p class="white mb-5">
                    Dore is the combination of good design, quality code and attention for details.<br />

                    <br />
                    We used same design language for components, layouts, apps
                    and other parts of the template. <br />
                    <br />
                    Hope you enjoy it!
                  </p>
                  <a class="btn btn-secondary btn-xl mr-2 mb-2" target="_blank" href="/Dashboard.Default.html">VIEW NOW <i
                      class="simple-icon-arrow-right"></i></a>

                </div>
              </div>
              <div class="col-12 col-xl-7 offset-xl-1 col-lg-7 col-md-6  d-none d-md-block">
                <a target="_blank" href="/Dashboard.Default.html">
                  <img alt="hero" src="img/landing-page/home-hero.png" />
                </a>
              </div>
            </div>

            <div class="row">
              <div class="col-12 p-0">
                <div class="owl-container">
                  <div class="owl-carousel home-carousel">
                    <div class="card">
                      <div class="card-body text-center">
                        <div>
                          <i class="iconsminds-mouse-3 large-icon"></i>
                          <h5 class="mb-3 font-weight-semibold">
                            Right Click Menu
                          </h5>
                        </div>
                        <div>
                          <p class="detail-text">
                            Increases overall usability of the project by providing additional actions menu.
                          </p>
                        </div>
                      </div>
                    </div>

                    <div class="card">
                      <div class="card-body text-center">
                        <div>
                          <i class="iconsminds-electric-guitar large-icon"></i>
                          <h5 class="mb-3 font-weight-semibold">
                            Video Player
                          </h5>
                        </div>
                        <div>
                          <p class="detail-text">
                            Carefully themed multimedia players powered by Video.js library with Youtube support.
                          </p>
                        </div>
                      </div>
                    </div>

                    <div class="card">
                      <div class="card-body text-center">
                        <div>
                          <i class="iconsminds-keyboard large-icon"></i>
                          <h5 class="mb-3 font-weight-semibold">
                            Keyboard Shortcuts
                          </h5>
                        </div>
                        <div>
                          <p class="detail-text">
                            Easily configurable keyboard shortcuts plugin that highly improves user experience.
                          </p>
                        </div>
                      </div>
                    </div>
                    <div class="card">
                      <div class="card-body text-center">
                        <div>
                          <i class="iconsminds-three-arrow-fork large-icon"></i>
                          <h5 class="mb-3 font-weight-semibold">
                            Two Panels Menu
                          </h5>
                        </div>
                        <div>
                          <p class="detail-text">
                            Three states two panels icon menu that looks good, auto resizes and does the job well.
                          </p>
                        </div>
                      </div>
                    </div>

                    <div class="card">
                      <div class="card-body text-center">
                        <div>
                          <i class="iconsminds-deer large-icon"></i>
                          <h5 class="mb-3 font-weight-semibold">
                            Icons Mind
                          </h5>
                        </div>
                        <div>
                          <p class="detail-text">
                            1040 icons in 53 different categories, designed pixel perfect and ready for your project.
                          </p>
                        </div>
                      </div>
                    </div>

                    <div class="card">
                      <div class="card-body text-center">
                        <div>
                          <i class="iconsminds-palette large-icon"></i>
                          <h5 class="mb-3 font-weight-semibold">
                            20 Color Schemes
                          </h5>
                        </div>
                        <div>
                          <p class="detail-text">
                            Colors, icons and design harmony that creates excellent themes to cover entire project.
                          </p>
                        </div>
                      </div>
                    </div>

                    <div class="card">
                      <div class="card-body text-center">
                        <div>
                          <i class="iconsminds-air-balloon-1 large-icon"></i>
                          <h5 class="mb-3 font-weight-semibold">
                            4 Applications
                          </h5>
                        </div>
                        <div>
                          <p class="detail-text">
                            Applications that mostly made of components are the way to get started to create something
                            similar.
                          </p>
                        </div>
                      </div>
                    </div>

                    <div class="card">
                      <div class="card-body text-center">
                        <div>
                          <i class="iconsminds-resize large-icon"></i>
                          <h5 class="mb-3 font-weight-semibold">
                            Extra Responsive
                          </h5>
                        </div>
                        <div>
                          <p class="detail-text">
                            Custom Bootstrap 4 xxs & xxl classes delivers better experiences for smaller and larger
                            screens.
                          </p>
                        </div>
                      </div>
                    </div>


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

            <div class="row">

              <a class="btn btn-circle btn-outline-semi-light hero-circle-button scrollTo" href="#features"
                id="homeCircleButton"><i class="simple-icon-arrow-down"></i></a>
            </div>

          </div>

        </div>

        <div class="section">
          <div class="container" id="features">
            <div class="row">
              <div class="col-12 offset-0 col-lg-8 offset-lg-2 text-center">
                <h1>Features At a Glance</h1>
                <p>
                  We tried to create an admin theme that we would like to use ourselves so we listed our priorities. We
                  would like to have a theme that is not over complicated to use, does the job well, contains must have
                  components and looks really nice.
                </p>
              </div>
            </div>

            <div class="row feature-row">
              <div class="col-12 col-md-6 col-lg-5 d-flex align-items-center">
                <div class="d-flex">
                  <div class="feature-icon-container">
                    <div class="icon-background">
                      <i class="fas fa-fw fa-ban"></i>
                    </div>
                  </div>
                  <div class="feature-text-container">
                    <h2>Pleasant Design</h2>
                    <p>
                      As a web developer we enjoy to work on something looks
                      nice. It is not an absolute necessity but it really
                      motivates us that final product will look good for user
                      point of view. <br />
                      <br />
                      So we put a lot of work into colors, icons, composition
                      and design harmony. Themed components and layouts with
                      same design language. <br />
                      <br />
                      We kept user experience principles always at the heart
                      of the design process.
                    </p>
                  </div>
                </div>
              </div>
              <div class="col-12 col-md-6 col-lg-6 offset-lg-1 offset-md-0 position-relative">
                <div class="background-item-1"></div>
                <img alt="feature" class="feature-image-right feature-image-charts position-relative"
                  src="img/landing-page/features/plesant-design.png" />
              </div>
            </div>

            <div class="row feature-row">
              <div class="col-12 col-md-6 col-lg-6 order-2 order-md-1">
                <img alt="feature" class="feature-image-left feature-image-charts"
                  src="img/landing-page/features/extra-responsive.png" />
              </div>

              <div
                class="col-12 col-md-6 offset-md-0 col-lg-5 offset-lg-1 d-flex align-items-center order-1 order-md-2">
                <div class="d-flex">
                  <div class="feature-icon-container">
                    <div class="icon-background">
                      <i class="fas fa-fw fa-ban"></i>
                    </div>
                  </div>
                  <div class="feature-text-container">
                    <h2>Extra Responsive</h2>
                    <p>
                      Xxs breakpoint is for smaller screens that has a resolution lower than 420px. Xs works between
                      576px and 420px. Xxl breakpoint is for larger screens that has a resolution higher than 1440px. Xl
                      works between 1200px and 1440px.
                      <br>
                      <br>
                      With this approach we were able to create better experiences for smaller and larger screens.

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

            <div class="row feature-row">
              <div class="col-12 col-md-6 col-lg-5 d-flex align-items-center">
                <div class="d-flex">
                  <div class="feature-icon-container">
                    <div class="icon-background">
                      <i class="fas fa-fw fa-ban"></i>
                    </div>
                  </div>
                  <div class="feature-text-container">
                    <h2>Superfine Charts</h2>
                    <p>
                      Using charts is a good way to visualize data but they
                      often look ugly and break the rhythm of design. <br />
                      <br />
                      We concentrated on a single chart library and tried to
                      create charts that look good with color, opacity,
                      border and shadow. <br />
                      <br />
                      Used certain plugins and created some to make charts
                      even more useful and beautiful.
                    </p>
                  </div>
                </div>
              </div>
              <div class="col-12 col-md-6 col-lg-6 offset-lg-1 offset-md-0 ">
                <img alt="feature" class="feature-image-right feature-image-charts"
                  src="img/landing-page/features/superfine-charts.png" />
              </div>
            </div>


            <div class="row feature-row">
              <div class="col-12 col-md-6 col-lg-6 order-2 order-md-1">
                <img alt="feature" class="feature-image-left feature-image-charts"
                  src="img/landing-page/features/layouts-for-the-job.png" />
              </div>

              <div
                class="col-12 col-md-6 offset-md-0 col-lg-5 offset-lg-1 d-flex align-items-center order-1 order-md-2">
                <div class="d-flex">
                  <div class="feature-icon-container">
                    <div class="icon-background">
                      <i class="fas fa-fw fa-ban"></i>
                    </div>
                  </div>
                  <div class="feature-text-container">
                    <h2>Layouts for the Job</h2>
                    <p>
                      Layouts are the real thing, they need to be accurate and
                      right for the job. They should be functional for both
                      user and developer. <br />
                      <br />
                      We created lots of different layouts for different jobs.
                      <br />
                      <br />
                      Listing pages with view mode changing capabilities,
                      shift select and select all functionality, application
                      layouts with an additional menu, authentication and
                      error layouts which has a different design than the
                      other pages were our main focus. We also created details
                      page with tabs that can hold many components.
                    </p>
                  </div>
                </div>
              </div>
            </div>



            <div class="row feature-row">
              <div class="col-12 col-md-6 col-lg-5 d-flex align-items-center">
                <div class="d-flex">
                  <div class="feature-icon-container">
                    <div class="icon-background">
                      <i class="fas fa-fw fa-ban"></i>
                    </div>
                  </div>
                  <div class="feature-text-container">
                    <h2>Smart Menu</h2>
                    <p>
                      Instead of good old single panel menus with accordion structure that looks over complicated, we
                      created 2 panels and categorized pages accordingly.
                      <br>
                      <br>
                      The default menu auto hides sub panel when resolution is under some breakpoint to open some space.
                      You may also hide menu completely or use only main panel open only.

                    </p>
                  </div>
                </div>
              </div>
              <div class="col-12 col-md-6 col-lg-6 offset-lg-1 offset-md-0 ">
                <img alt="feature" class="feature-image-right feature-image-charts"
                  src="img/landing-page/features/smart-menu.png" />
              </div>
            </div>














          </div>
        </div>

        <div class="section background">
          <div class="container" id="layouts">
            <div class="row">
              <div class="col-12 offset-0 col-lg-8 offset-lg-2 text-center">
                <h1>Structures & Layouts</h1>
                <p>
                  We did our best to create layouts for various needs that developers might have and best experience
                  for users.
                  <br>
                  They are clean and slick. They function well and look good at the same time.

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

            <div class="row pt-5">

              <div class="col-12 col-xs-6 col-sm-6 col-md-4 col-lg-3 mb-5">
                <img class="img-fluid border-radius depth-2 mb-3 semi-rounded" src="img/landing-page/layouts/menu-default.jpg">
                <h4 class="text-center">Menu Default</h4>
              </div>

              <div class="col-12 col-xs-6 col-sm-6 col-md-4 col-lg-3 mb-5">
                <img class="img-fluid border-radius depth-2 mb-3 semi-rounded" src="img/landing-page/layouts/menu-subhidden.jpg">
                <h4 class="text-center">Menu Subhidden</h4>
              </div>

              <div class="col-12 col-xs-6 col-sm-6 col-md-4 col-lg-3 mb-5">
                <img class="img-fluid border-radius depth-2 mb-3 semi-rounded" src="img/landing-page/layouts/menu-hidden.jpg">
                <h4 class="text-center">Menu Hidden</h4>
              </div>

              <div class="col-12 col-xs-6 col-sm-6 col-md-4 col-lg-3 mb-5">
                <img class="img-fluid border-radius depth-2 mb-3 semi-rounded" src="img/landing-page/layouts/image-list.jpg">
                <h4 class="text-center">Image List</h4>
              </div>

              <div class="col-12 col-xs-6 col-sm-6 col-md-4 col-lg-3 mb-5">
                <img class="img-fluid border-radius depth-2 mb-3 semi-rounded" src="img/landing-page/layouts/thumb-list.jpg">
                <h4 class="text-center">Thumb List</h4>
              </div>

              <div class="col-12 col-xs-6 col-sm-6 col-md-4 col-lg-3 mb-5">
                <img class="img-fluid border-radius depth-2 mb-3 semi-rounded" src="img/landing-page/layouts/data-list.jpg">
                <h4 class="text-center">Data List</h4>
              </div>

              <div class="col-12 col-xs-6 col-sm-6 col-md-4 col-lg-3 mb-5">
                <img class="img-fluid border-radius depth-2 mb-3 semi-rounded" src="img/landing-page/layouts/details.jpg">
                <h4 class="text-center">Details</h4>
              </div>

              <div class="col-12 col-xs-6 col-sm-6 col-md-4 col-lg-3 mb-5 semi-rounded">
                <img class="img-fluid border-radius depth-2 mb-3 semi-rounded" src="img/landing-page/layouts/authentication.jpg">
                <h4 class="text-center">Authentication</h4>
              </div>

              <div class="col-12 col-xs-6 col-sm-6 col-md-4 col-lg-3 mb-5">
                <img class="img-fluid border-radius depth-2 mb-3 semi-rounded" src="img/landing-page/layouts/search-result.jpg">
                <h4 class="text-center">Search Results</h4>
              </div>

              <div class="col-12 col-xs-6 col-sm-6 col-md-4 col-lg-3 mb-5">
                <img class="img-fluid border-radius depth-2 mb-3 semi-rounded" src="img/landing-page/layouts/spa.jpg">
                <h4 class="text-center">Single Page Application</h4>
              </div>

              <div class="col-12 col-xs-6 col-sm-6 col-md-4 col-lg-3 mb-5">
                <img class="img-fluid border-radius depth-2 mb-3 semi-rounded" src="img/landing-page/layouts/data-list-app-menu-hidden.jpg">
                <h4 class="text-center">Data List App Menu Hidden</h4>
              </div>

              <div class="col-12 col-xs-6 col-sm-6 col-md-4 col-lg-3 mb-5">
                <img class="img-fluid border-radius depth-2 mb-3 semi-rounded " src="img/landing-page/layouts/tabs.jpg">
                <h4 class="text-center">Tabs</h4>
              </div>

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

        <div class="section mb-0">
          <div class="container" id="components">

            <div class="row mb-5">
              <div class="col-12 offset-0 col-lg-8 offset-lg-2 text-center">
                <h1>Components</h1>
                <p>
                  We used most popular and well managed open source components with bootstrap components. Combined them
                  into even more useful ones. Themed them with same design principles and created a design harmony
                  between components and layouts.
                  <br>
                  <br>
                  From carousels to charts, switches to list we tried to provide components that we like to use on our
                  development processes.
                </p>
              </div>
            </div>
          </div>
          <img class="components-image mb-5 pb-5" src="img/landing-page/components.jpg">
        </div>


        <div class="section background">
          <div class="container" id="apps">
            <div class="row">
              <div class="col-12 offset-0 col-lg-8 offset-lg-2 text-center mb-4">
                <h1>Applications</h1>

                <p class="section-text">
                  With the help of components and layouts, we created four different applications.
                  They
                  are a good way to get you started
                  if you want to build something similar.
                  <br>

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

            <div class="row screenshots">
              <div class="col-12 text-center mb-4">
                <ul class="nav nav-tabs justify-content-center mb-4" role="tablist">
                  <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#library" role="tab">
                      <p>Library</p>
                    </a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#survey" role="tab">
                      <p>Survey</p>
                    </a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#chat" role="tab">
                      <p>Chat</p>
                    </a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#todo" role="tab">
                      <p>Todo</p>
                    </a>
                  </li>
                </ul>
                <div class="tab-content">
                  <div class="tab-pane fade show active justify-content-center" id="library" role="tabpanel">
                    <a target="_blank" href="/Apps.MediaLibrary.html">
                      <img alt="app image" class="app-image" src="img/landing-page/applications/library.jpg">
                    </a>
                  </div>
                  <div class="tab-pane fade justify-content-center" id="survey" role="tabpanel">
                    <a target="_blank" href="/Apps.Survey.List.html">
                      <img alt="app image" class="app-image" src="img/landing-page/applications/survey.jpg">
                    </a>
                  </div>
                  <div class="tab-pane fade justify-content-center" id="chat" role="tabpanel">
                    <a target="_blank" href="/Apps.Chat.html">
                      <img alt="app image" class="app-image" src="img/landing-page/applications/chat.jpg">
                    </a>
                  </div>
                  <div class="tab-pane fade justify-content-center" id="todo" role="tabpanel">
                    <a target="_blank" href="/Apps.Todo.List.html">
                      <img alt="app image" class="app-image" src="img/landing-page/applications/todo.jpg">
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>



        <div class="section mb-0">
          <div class="container" id="themes">

            <div class="row mb-5">
              <div class="col-12 offset-0 col-lg-8 offset-lg-2 text-center">
                <h1>Themes</h1>
                <p>
                  We carefully choosed colors and created 10 different themes with dark and light versions. You may also
                  create your own themes easily since all the theme related styling is managed by Sass variables.
                </p>
              </div>
            </div>

            <div class="row pt-3">

              <div class="col-12 text-center mb-3">
                <h4 class="text-center">Navy Blue</h4>
              </div>
              <div class="col-12 col-md-6 col-lg-4 offset-lg-2 mb-3">
                <div class="depth-2 color-container">
                  <div class="color-left bluenavy-light-1"></div>
                  <div class="color-center bluenavy-light-2"></div>
                  <div class="color-right bluenavy-light-3"></div>
                </div>
              </div>
              <div class="col-12 col-md-6 col-lg-4 mb-3">
                <div class="depth-2 color-container">
                  <div class="color-left bluenavy-dark-1"></div>
                  <div class="color-center bluenavy-dark-2"></div>
                  <div class="color-right bluenavy-dark-3"></div>
                </div>
              </div>
              <div class="col-12 mb-5">
              </div>

              <div class="col-12 text-center mb-3">
                <h4 class="text-center">Olympic Blue</h4>
              </div>
              <div class="col-12 col-md-6 col-lg-4 offset-lg-2 mb-3">
                <div class="depth-2 color-container">
                  <div class="color-left blueolympic-light-1"></div>
                  <div class="color-center blueolympic-light-2"></div>
                  <div class="color-right blueolympic-light-3"></div>
                </div>
              </div>
              <div class="col-12 col-md-6 col-lg-4 mb-3">
                <div class="depth-2 color-container">
                  <div class="color-left blueolympic-dark-1"></div>
                  <div class="color-center blueolympic-dark-2"></div>
                  <div class="color-right blueolympic-dark-3"></div>
                </div>
              </div>
              <div class="col-12 mb-5">
              </div>

              <div class="col-12 text-center mb-3">
                <h4 class="text-center">Yale Blue</h4>
              </div>
              <div class="col-12 col-md-6 col-lg-4 offset-lg-2 mb-3">
                <div class="depth-2 color-container">
                  <div class="color-left blueyale-light-1"></div>
                  <div class="color-center blueyale-light-2"></div>
                  <div class="color-right blueyale-light-3"></div>
                </div>
              </div>
              <div class="col-12 col-md-6 col-lg-4 mb-3">
                <div class="depth-2 color-container">
                  <div class="color-left blueyale-dark-1"></div>
                  <div class="color-center blueyale-dark-2"></div>
                  <div class="color-right blueyale-dark-3"></div>
                </div>
              </div>
              <div class="col-12 mb-5">
              </div>

              <div class="col-12 text-center mb-3">
                <h4 class="text-center">Moss Green</h4>
              </div>
              <div class="col-12 col-md-6 col-lg-4 offset-lg-2 mb-3">
                <div class="depth-2 color-container">
                  <div class="color-left greenmoss-light-1"></div>
                  <div class="color-center greenmoss-light-2"></div>
                  <div class="color-right greenmoss-light-3"></div>
                </div>
              </div>
              <div class="col-12 col-md-6 col-lg-4 mb-3">
                <div class="depth-2 color-container">
                  <div class="color-left greenmoss-dark-1"></div>
                  <div class="color-center greenmoss-dark-2"></div>
                  <div class="color-right greenmoss-dark-3"></div>
                </div>
              </div>
              <div class="col-12 mb-5">
              </div>

              <div class="col-12 text-center mb-3">
                <h4 class="text-center">Lime Green</h4>
              </div>
              <div class="col-12 col-md-6 col-lg-4 offset-lg-2 mb-3">
                <div class="depth-2 color-container">
                  <div class="color-left greenlime-light-1"></div>
                  <div class="color-center greenlime-light-2"></div>
                  <div class="color-right greenlime-light-3"></div>
                </div>
              </div>
              <div class="col-12 col-md-6 col-lg-4 mb-3">
                <div class="depth-2 color-container">
                  <div class="color-left greenlime-dark-1"></div>
                  <div class="color-center greenlime-dark-2"></div>
                  <div class="color-right greenlime-dark-3"></div>
                </div>
              </div>
              <div class="col-12 mb-5">
              </div>

              <div class="col-12 text-center mb-3">
                <h4 class="text-center">Carrot Orange</h4>
              </div>
              <div class="col-12 col-md-6 col-lg-4 offset-lg-2 mb-3">
                <div class="depth-2 color-container">
                  <div class="color-left carrotorange-light-1"></div>
                  <div class="color-center carrotorange-light-2"></div>
                  <div class="color-right carrotorange-light-3"></div>
                </div>
              </div>
              <div class="col-12 col-md-6 col-lg-4 mb-3">
                <div class="depth-2 color-container">
                  <div class="color-left carrotorange-dark-1"></div>
                  <div class="color-center carrotorange-dark-2"></div>
                  <div class="color-right carrotorange-dark-3"></div>
                </div>
              </div>
              <div class="col-12 mb-5">
              </div>

              <div class="col-12 text-center mb-3">
                <h4 class="text-center">Ruby Red</h4>
              </div>
              <div class="col-12 col-md-6 col-lg-4 offset-lg-2 mb-3">
                <div class="depth-2 color-container">
                  <div class="color-left rubyred-light-1"></div>
                  <div class="color-center rubyred-light-2"></div>
                  <div class="color-right rubyred-light-3"></div>
                </div>
              </div>
              <div class="col-12 col-md-6 col-lg-4 mb-3">
                <div class="depth-2 color-container">
                  <div class="color-left rubyred-dark-1"></div>
                  <div class="color-center rubyred-dark-2"></div>
                  <div class="color-right rubyred-dark-3"></div>
                </div>
              </div>
              <div class="col-12 mb-5">
              </div>

              <div class="col-12 text-center mb-3">
                <h4 class="text-center">Monster Purple</h4>
              </div>
              <div class="col-12 col-md-6 col-lg-4 offset-lg-2 mb-3">
                <div class="depth-2 color-container">
                  <div class="color-left monsterpurple-light-1"></div>
                  <div class="color-center monsterpurple-light-2"></div>
                  <div class="color-right monsterpurple-light-3"></div>
                </div>
              </div>
              <div class="col-12 col-md-6 col-lg-4 mb-3">
                <div class="depth-2 color-container">
                  <div class="color-left monsterpurple-dark-1"></div>
                  <div class="color-center monsterpurple-dark-2"></div>
                  <div class="color-right monsterpurple-dark-3"></div>
                </div>
              </div>
              <div class="col-12 mb-5">
              </div>

              <div class="col-12 text-center mb-3">
                <h4 class="text-center">Steel Grey</h4>
              </div>
              <div class="col-12 col-md-6 col-lg-4 offset-lg-2 mb-3">
                <div class="depth-2 color-container">
                  <div class="color-left steelgrey-light-1"></div>
                  <div class="color-center steelgrey-light-2"></div>
                  <div class="color-right steelgrey-light-3"></div>
                </div>
              </div>
              <div class="col-12 col-md-6 col-lg-4 mb-3">
                <div class="depth-2 color-container">
                  <div class="color-left steelgrey-dark-1"></div>
                  <div class="color-center steelgrey-dark-2"></div>
                  <div class="color-right steelgrey-dark-3"></div>
                </div>
              </div>
              <div class="col-12 mb-5">
              </div>

              <div class="col-12 text-center mb-3">
                <h4 class="text-center">Granola Yellow</h4>
              </div>
              <div class="col-12 col-md-6 col-lg-4 offset-lg-2 mb-3">
                <div class="depth-2 color-container">
                  <div class="color-left granolayellow-light-1"></div>
                  <div class="color-center granolayellow-light-2"></div>
                  <div class="color-right granolayellow-light-3"></div>
                </div>
              </div>
              <div class="col-12 col-md-6 col-lg-4 mb-3">
                <div class="depth-2 color-container">
                  <div class="color-left granolayellow-dark-1"></div>
                  <div class="color-center granolayellow-dark-2"></div>
                  <div class="color-right granolayellow-dark-3"></div>
                </div>
              </div>
              <div class="col-12 mb-5">
              </div>
              <div class="col-12 mb-5">
              </div>


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


        <div class="section background background-no-bottom mb-0 pb-0">
          <div class="container">
            <div class="row">
              <div class="col-12 offset-0 col-lg-8 offset-lg-2 text-center">
                <h1>Enjoying so Far?</h1>
                <p>
                  Purchase Dore to get a fresh start with your new project.
                </p>
              </div>

              <div class="col-12 offset-0 col-lg-6 offset-lg-3 newsletter-input-container">
                <div class="text-center mb-3">
                  <a class="btn btn-secondary btn-xl" target="_top" href="https://1.envato.market/5kAb">BUY NOW</a>
                </div>
              </div>
            </div>
          </div>
        </div>


        <div class="section footer mb-0">
          <div class="container">
            <div class="row footer-row">
              <div class="col-12 text-right">
                <a class="btn btn-circle btn-outline-semi-light footer-circle-button scrollTo" href="#home"
                  id="footerCircleButton"><i class="simple-icon-arrow-up"></i></a>
              </div>
              <div class="col-12 text-center footer-content">
                <a href="#home" class="scrollTo">
                  <img class="footer-logo" alt="footer logo" src="logos/white-full.svg" />
                </a>
              </div>
            </div>
          </div>
          <div class="separator mt-5"></div>
          <div class="container copyright pt-5 pb-5">
            <div class="row">
              <div class="col-12"></div>
              <div class="col-12 text-center">
                <p class="mb-0">2020 © ColoredStrategies</p>
              </div>

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

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

  <script src="js/vendor/jquery-3.3.1.min.js"></script>
  <script src="js/vendor/bootstrap.bundle.min.js"></script>
  <script src="js/vendor/owl.carousel.min.js"></script>
  <script src="js/vendor/jquery.barrating.min.js"></script>
  <script src="js/vendor/jquery.barrating.min.js"></script>
  <script src="js/vendor/landing-page/headroom.min.js"></script>
  <script src="js/vendor/landing-page/jQuery.headroom.js"></script>
  <script src="js/vendor/landing-page/jquery.scrollTo.min.js"></script>
  <script src="js/vendor/landing-page/jquery.autoellipsis.js"></script>
  <script src="js/dore.scripts.landingpage.js"></script>
  <script src="js/scripts.js"></script>
</body>

</html>