diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..b341808 --- /dev/null +++ b/.gitignore @@ -0,0 +1,15 @@ +*.pyc +*.DS_Store +*.egg* +/dist/ +/.idea +/docs/_build/ +/node_modules/ +build/ +env +/staticfiles/ + +#src +*.sqlite* + +.env diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..45594f7 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,99 @@ +# Change Log + +## [2.0.3] 2023-03-22 +### Changes + +- Bump UI: [Django Theme Material Kit](https://github.com/app-generator/django-theme-material-kit) `v1.0.18` +- DOCS Update (readme). New sections: + - `How to customize the theme` + - Render deployment +- Configure the project to use `home/templates` +- Added `custom-index` sample +- `Fix Docker` Execution + - `Update Settings`: ALLOWED_HOSTS, CSRF_TRUSTED_ORIGINS `sections` + +## [2.0.2] 2022-06-06 +### Improvements + +- Use generated version + - Timestamp: `2022-06-06 13:47` + - Build ID: `295d18b1-ccb5-49b1-bb79-8833ab377dd9` + +## [2.0.1] 2022-06-06 + +- Tag latest `manual` coded version + +## [2.0.0] 2022-01-17 +### Improvements + +- Dependencies update (all packages) + - Django==4.0.1 +- Settings update for Django 4.x + - `New Parameter`: CSRF_TRUSTED_ORIGINS + - [Origin header checking isn`t performed in older versions](https://docs.djangoproject.com/en/4.0/ref/settings/#csrf-trusted-origins) + +## [1.0.7] 2021-12-08 +### Improvements (Minor) + +- Gulp Scripts: Update the call of `gulp-sass` + +## [1.0.6] 2021-09-15 +### Improvements + +- Codebase update + - `assets` & `templates` moved to `apps` folder + - `apps/base` renamed to `apps/home` + +## [1.0.5] 2021-09-10 +### Improvements, Bug fixing + +- Dependencies update (all packages) + - Django==3.2.6 (latest stable version) +- Codebase: + - Better Code formatting + - Improved Files organization + - Optimize imports + - Docker Scripts Update +- UI: Pixel Lite v4.0.0 +- Tooling: Added Gulp SCSS compilation scripts + - Help can be found on README -> `Recompile CSS` section +- Fixes: + - Patch 500 Error when authenticated users access `admin` path (no slash at the end) + - Patch [#16](https://github.com/app-generator/boilerplate-code-django-dashboard/issues/16): Minor issue in Docker + +## [1.0.4] 2021-01-04 +### Bug fixing + +- Read properly the `.env` variables. Impacted file(s): + - Impacted file: **core/settings.py** + +## [1.0.3] 2021-01-01 +### Bug fixing, Improvements + +- 2021-01-01 - Improvements + - Update login form label + - Inject the current page name in view (segment variable) + +- 2020-06-28 - Update the UI Kit + - Quick UI KIt by Webpixels + +- Patch #3 - Whitenoise Fix - Wrong positioning in 'core/settings.py' + - WhiteNoiseMiddleware must be positioned right after SecurityMiddleware + - Impacted file: **core/settings.py** / MIDDLEWARE section + +## [1.0.2] 2020-06-18 +### Bug fixing, Improvements + +- Patch #1 - Error when access `admin` path (no trailing slash) +- Update Sample UI Kit - [Neumorphism UI](https://themesberg.com/product/ui-kits/neumorphism-ui) by Themesberg + +## [1.0.1] 2020-05-30 +### Bug fixing, Improvements + +- Add CHANGELOG.md to track all changes +- Patch Error-404.html not used in all contexts +- Rename error pages: error-40X become page-40X +- Update LICENSE file - added more information regarding the app usage + +## [1.0.0] 2020-02-07 +### Initial Release diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..253fafb --- /dev/null +++ b/Dockerfile @@ -0,0 +1,18 @@ +FROM python:3.9 + +# set environment variables +ENV PYTHONDONTWRITEBYTECODE 1 +ENV PYTHONUNBUFFERED 1 + +COPY requirements.txt . +# install python dependencies +RUN pip install --upgrade pip +RUN pip install --no-cache-dir -r requirements.txt + +COPY . . + +# running migrations +RUN python manage.py migrate + +# gunicorn +CMD ["gunicorn", "--config", "gunicorn-cfg.py", "core.wsgi"] diff --git a/LICENSE.md b/LICENSE.md new file mode 100644 index 0000000..5012dd9 --- /dev/null +++ b/LICENSE.md @@ -0,0 +1,32 @@ +# MIT License + +Copyright (c) 2019 - present [AppSeed](http://appseed.us/) + +
+ +## Licensing Information + +
+ +| Item | - | +| ---------------------------------- | --- | +| License Type | MIT | +| Use for print | **YES** | +| Create single personal website/app | **YES** | +| Create single website/app for client | **YES** | +| Create multiple website/apps for clients | **YES** | +| Create multiple SaaS applications | **YES** | +| End-product paying users | **YES** | +| Product sale | **YES** | +| Remove footer credits | **YES** | +| --- | --- | +| Remove copyright mentions from source code | NO | +| Production deployment assistance | NO | +| Create HTML/CSS template for sale | NO | +| Create Theme/Template for CMS for sale | NO | +| Separate sale of our UI Elements | NO | + +
+ +--- +For more information regarding licensing, please contact the AppSeed Service < *support@appseed.us* > diff --git a/README.md b/README.md index 572807a..1b6c955 100644 --- a/README.md +++ b/README.md @@ -1 +1,192 @@ -# boilerplate-code-django \ No newline at end of file +# [Django Boilerplate](https://appseed.us/boilerplate-code/django-boilerplate/) + +Reference codebase used by `AppSeed` in all Django [Apps](https://appseed.us/apps/django/) and [Dashboard](https://appseed.us/admin-dashboards/django/) starters - the product uses an amazing design crafted by `Creative-Tim`. + +- πŸ‘‰ [Django Boilerplate](https://appseed.us/boilerplate-code/django-boilerplate/) - `Product page` +- πŸ‘‰ [Django Boilerplate](https://django-material-kit.appseed-srv1.com/) - `LIVE Demo` +- πŸ‘‰ Free [Support](https://appseed.us/support/) via `Email` & `Discord` + +
+ +> Features: + +- βœ… `Up-to-date Dependencies` +- βœ… Theme: [Django Theme Material Kit](https://github.com/app-generator/django-theme-material-kit), **designed by [Creative-Tim](https://www.creative-tim.com/product/material-kit?AFFILIATE=128200)** +- βœ… **Authentication**: `Django.contrib.AUTH`, Registration +- πŸš€ `Deployment` + - `CI/CD` flow via `Render` + +
+ +![Material Kit - Starter generated by AppSeed.](https://user-images.githubusercontent.com/51070104/167396765-c88b7a95-155f-4236-8691-7b80fa2d9cd9.png) + +
+ +## Start with `Docker` + +> πŸ‘‰ **Step 1** - Download the code from the GH repository (using `GIT`) + +```bash +$ git clone https://github.com/app-generator/boilerplate-code-django.git +$ cd boilerplate-code-django +``` + +
+ +> πŸ‘‰ **Step 2** - Start the APP in `Docker` + +```bash +$ docker-compose up --build +``` + +Visit `http://localhost:5085` in your browser. The app should be up & running. + +
+ +## Manual Build + +> πŸ‘‰ Download the code + +```bash +$ git clone https://github.com/app-generator/boilerplate-code-django.git +$ cd boilerplate-code-django +``` + +
+ +> πŸ‘‰ Install modules via `VENV` + +```bash +$ virtualenv env +$ source env/bin/activate +$ pip install -r requirements.txt +``` + +
+ +> πŸ‘‰ Set Up Database + +```bash +$ python manage.py makemigrations +$ python manage.py migrate +``` + +
+ +> πŸ‘‰ Create the Superuser + +```bash +$ python manage.py createsuperuser +``` + +
+ +> πŸ‘‰ Start the app + +```bash +$ python manage.py runserver +``` + +At this point, the app runs at `http://127.0.0.1:8000/`. + +
+ +## Codebase structure + +The project is coded using a simple and intuitive structure presented below: + +```bash +< PROJECT ROOT > + | + |-- core/ + | |-- settings.py # Project Configuration + | |-- urls.py # Project Routing + | + |-- home/ + | |-- views.py # APP Views + | |-- urls.py # APP Routing + | |-- models.py # APP Models + | |-- tests.py # Tests + | |-- templates/ # Theme Customisation + | |-- pages # + | |-- custom-index.html # Custom Footer + | + |-- requirements.txt # Project Dependencies + | + |-- env.sample # ENV Configuration (default values) + |-- manage.py # Start the app - Django default start script + | + |-- ************************************************************************ +``` + +
+ +## How to Customize + +When a template file is loaded, `Django` scans all template directories starting from the ones defined by the user, and returns the first match or an error in case the template is not found. +The theme used to style this starter provides the following files: + +```bash +# This exists in ENV: LIB/theme_material_kit +< UI_LIBRARY_ROOT > + | + |-- templates/ # Root Templates Folder + | | + | |-- accounts/ + | | |-- sign-in.html # Sign IN Page + | | |-- sign-up.html # Sign UP Page + | | + | |-- includes/ + | | |-- footer.html # Footer component + | | |-- navigation.html # Navigation Bar + | | |-- scripts.html # Scripts Component + | | + | |-- layouts/ + | | |-- base.html # Masterpage + | | + | |-- pages/ + | |-- index.html # Dashboard Page + | |-- author.html # Profile Page + | |-- *.html # All other pages + | + |-- ************************************************************************ +``` + +When the project requires customization, we need to copy the original file that needs an update (from the virtual environment) and place it in the template folder using the same path. + +> For instance, if we want to **customize the index.html** these are the steps: + +- βœ… `Step 1`: create the `templates` DIRECTORY inside the `home` app +- βœ… `Step 2`: configure the project to use this new template directory + - `core/settings.py` TEMPLATES section +- βœ… `Step 3`: copy the `index.html` from the original location (inside your ENV) and save it to the `home/templates` DIR + - Source PATH: `/LIB/theme_material_kit/template/pages/index.html` + - Destination PATH: `home/templates/pages/index.html` + +> To speed up all these steps, the **codebase is already configured** (`Steps 1, and 2`) and a `custom index` can be found at this location: + +`home/templates/pages/custom-index.html` + +By default, this file is unused because the `theme` expects `index.html` (without the `custom-` prefix). + +In order to use it, simply rename it to `index.html`. Like this, the default version shipped in the library is ignored by Django. + +In a similar way, all other files and components can be customized easily. + +
+ +## Deploy on [Render](https://render.com/) + +- Create a Blueprint instance + - Go to https://dashboard.render.com/blueprints this link. +- Click `New Blueprint Instance` button. +- Connect your `repo` which you want to deploy. +- Fill the `Service Group Name` and click on `Update Existing Resources` button. +- After that your deployment will start automatically. + +At this point, the product should be LIVE. + +
+ +--- +[Django Boilerplate](https://appseed.us/boilerplate-code/django-boilerplate/) - **Django** Starter provided by **[AppSeed](https://appseed.us/)** diff --git a/README_deploy.md b/README_deploy.md new file mode 100644 index 0000000..a1ac7e5 --- /dev/null +++ b/README_deploy.md @@ -0,0 +1,24 @@ +# How to deploy on `Render` + +> This document should contains all the steps to deploy the app on render without much effort, using PostgreSQL + +https://render.com/docs/deploy-django + +## ALL STEPS below + +
+ +### πŸ‘‰ Create `PostgreSQL` database on render + - Go to https://dashboard.render.com/new/database this link. + - Database name should be `berry`. + - Keep the Database, User and Datadog API Key as it is. + - If you want to change database name anything else then you have to change your `render.yaml` file database name too. + +
+ +### πŸ‘‰ Create a Blueprint instance + - Go to https://dashboard.render.com/blueprints this link. + - Click `New Blueprint Instance` button. + - Connect your `repo` which you want to deploy. + - Fill the `Service Group Name` and click on `Update Existing Resources` button. + - After that your deployment will start automatically. \ No newline at end of file diff --git a/build.sh b/build.sh new file mode 100644 index 0000000..475c139 --- /dev/null +++ b/build.sh @@ -0,0 +1,10 @@ +#!/usr/bin/env bash +# exit on error +set -o errexit + +python -m pip install --upgrade pip + +pip install -r requirements.txt + +python manage.py collectstatic --no-input +python manage.py migrate diff --git a/core/__init__.py b/core/__init__.py new file mode 100644 index 0000000..e69de29 diff --git a/core/asgi.py b/core/asgi.py new file mode 100644 index 0000000..26a5940 --- /dev/null +++ b/core/asgi.py @@ -0,0 +1,16 @@ +""" +ASGI config for core project. + +It exposes the ASGI callable as a module-level variable named ``application``. + +For more information on this file, see +https://docs.djangoproject.com/en/4.1/howto/deployment/asgi/ +""" + +import os + +from django.core.asgi import get_asgi_application + +os.environ.setdefault("DJANGO_SETTINGS_MODULE", "core.settings") + +application = get_asgi_application() diff --git a/core/settings.py b/core/settings.py new file mode 100644 index 0000000..fb48318 --- /dev/null +++ b/core/settings.py @@ -0,0 +1,166 @@ +""" +Django settings for core project. + +Generated by 'django-admin startproject' using Django 4.1.2. + +For more information on this file, see +https://docs.djangoproject.com/en/4.1/topics/settings/ + +For the full list of settings and their values, see +https://docs.djangoproject.com/en/4.1/ref/settings/ +""" + +import os, random, string +from pathlib import Path +from dotenv import load_dotenv + +load_dotenv() # take environment variables from .env. + +# Build paths inside the project like this: BASE_DIR / 'subdir'. +BASE_DIR = Path(__file__).resolve().parent.parent + +# Quick-start development settings - unsuitable for production +# See https://docs.djangoproject.com/en/4.1/howto/deployment/checklist/ + +# SECURITY WARNING: keep the secret key used in production secret! +SECRET_KEY = os.environ.get('SECRET_KEY') +if not SECRET_KEY: + SECRET_KEY = ''.join(random.choice( string.ascii_lowercase ) for i in range( 32 )) + +# Render Deployment Code +DEBUG = 'RENDER' not in os.environ + +# Docker HOST +ALLOWED_HOSTS = ['localhost'] + +# Add here your deployment HOSTS +CSRF_TRUSTED_ORIGINS = ['http://localhost:8000', 'http://localhost:5085'] + +RENDER_EXTERNAL_HOSTNAME = os.environ.get('RENDER_EXTERNAL_HOSTNAME') +if RENDER_EXTERNAL_HOSTNAME: + ALLOWED_HOSTS.append(RENDER_EXTERNAL_HOSTNAME) + +# Application definition + +INSTALLED_APPS = [ + "django.contrib.admin", + "django.contrib.auth", + "django.contrib.contenttypes", + "django.contrib.sessions", + "django.contrib.messages", + "django.contrib.staticfiles", + + 'theme_material_kit', + "home", +] + +MIDDLEWARE = [ + "django.middleware.security.SecurityMiddleware", + "whitenoise.middleware.WhiteNoiseMiddleware", + "django.contrib.sessions.middleware.SessionMiddleware", + "django.middleware.common.CommonMiddleware", + "django.middleware.csrf.CsrfViewMiddleware", + "django.contrib.auth.middleware.AuthenticationMiddleware", + "django.contrib.messages.middleware.MessageMiddleware", + "django.middleware.clickjacking.XFrameOptionsMiddleware", +] + +ROOT_URLCONF = "core.urls" + +HOME_TEMPLATES = os.path.join(BASE_DIR, 'home', 'templates') + +TEMPLATES = [ + { + "BACKEND": "django.template.backends.django.DjangoTemplates", + "DIRS": [HOME_TEMPLATES], + "APP_DIRS": True, + "OPTIONS": { + "context_processors": [ + "django.template.context_processors.debug", + "django.template.context_processors.request", + "django.contrib.auth.context_processors.auth", + "django.contrib.messages.context_processors.messages", + ], + }, + }, +] + +WSGI_APPLICATION = "core.wsgi.application" + + +# Database +# https://docs.djangoproject.com/en/4.1/ref/settings/#databases + +DB_ENGINE = os.getenv('DB_ENGINE' , None) +DB_USERNAME = os.getenv('DB_USERNAME' , None) +DB_PASS = os.getenv('DB_PASS' , None) +DB_HOST = os.getenv('DB_HOST' , None) +DB_PORT = os.getenv('DB_PORT' , None) +DB_NAME = os.getenv('DB_NAME' , None) + +if DB_ENGINE and DB_NAME and DB_USERNAME: + DATABASES = { + 'default': { + 'ENGINE' : 'django.db.backends.' + DB_ENGINE, + 'NAME' : DB_NAME, + 'USER' : DB_USERNAME, + 'PASSWORD': DB_PASS, + 'HOST' : DB_HOST, + 'PORT' : DB_PORT, + }, + } +else: + DATABASES = { + 'default': { + 'ENGINE': 'django.db.backends.sqlite3', + 'NAME': 'db.sqlite3', + } + } + +# Password validation +# https://docs.djangoproject.com/en/4.1/ref/settings/#auth-password-validators + +AUTH_PASSWORD_VALIDATORS = [ + { + "NAME": "django.contrib.auth.password_validation.UserAttributeSimilarityValidator", + }, + { + "NAME": "django.contrib.auth.password_validation.MinimumLengthValidator", + }, + { + "NAME": "django.contrib.auth.password_validation.CommonPasswordValidator", + }, + { + "NAME": "django.contrib.auth.password_validation.NumericPasswordValidator", + }, +] + + +# Internationalization +# https://docs.djangoproject.com/en/4.1/topics/i18n/ + +LANGUAGE_CODE = "en-us" + +TIME_ZONE = "UTC" + +USE_I18N = True + +USE_TZ = True + + +# Static files (CSS, JavaScript, Images) +# https://docs.djangoproject.com/en/4.1/howto/static-files/ + +STATIC_URL = '/static/' +STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles') + +#if not DEBUG: +# STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage' + +# Default primary key field type +# https://docs.djangoproject.com/en/4.1/ref/settings/#default-auto-field + +DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField" + +LOGIN_REDIRECT_URL = '/' +EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend' diff --git a/core/urls.py b/core/urls.py new file mode 100644 index 0000000..d7559e1 --- /dev/null +++ b/core/urls.py @@ -0,0 +1,23 @@ +"""core URL Configuration + +The `urlpatterns` list routes URLs to views. For more information please see: + https://docs.djangoproject.com/en/4.1/topics/http/urls/ +Examples: +Function views + 1. Add an import: from my_app import views + 2. Add a URL to urlpatterns: path('', views.home, name='home') +Class-based views + 1. Add an import: from other_app.views import Home + 2. Add a URL to urlpatterns: path('', Home.as_view(), name='home') +Including another URLconf + 1. Import the include() function: from django.urls import include, path + 2. Add a URL to urlpatterns: path('blog/', include('blog.urls')) +""" +from django.contrib import admin +from django.urls import include, path + +urlpatterns = [ + path('', include('home.urls')), + path("admin/", admin.site.urls), + path("", include('theme_material_kit.urls')) +] diff --git a/core/wsgi.py b/core/wsgi.py new file mode 100644 index 0000000..e9b9d8a --- /dev/null +++ b/core/wsgi.py @@ -0,0 +1,16 @@ +""" +WSGI config for core project. + +It exposes the WSGI callable as a module-level variable named ``application``. + +For more information on this file, see +https://docs.djangoproject.com/en/4.1/howto/deployment/wsgi/ +""" + +import os + +from django.core.wsgi import get_wsgi_application + +os.environ.setdefault("DJANGO_SETTINGS_MODULE", "core.settings") + +application = get_wsgi_application() diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 0000000..d8a7514 --- /dev/null +++ b/docker-compose.yml @@ -0,0 +1,27 @@ +version: '3.8' +services: + appseed-app: + container_name: appseed_app + restart: always + build: . + networks: + - db_network + - web_network + nginx: + container_name: nginx + restart: always + image: "nginx:latest" + ports: + - "5085:5085" + volumes: + - ./nginx:/etc/nginx/conf.d + networks: + - web_network + depends_on: + - appseed-app +networks: + db_network: + driver: bridge + web_network: + driver: bridge + \ No newline at end of file diff --git a/env.sample b/env.sample new file mode 100644 index 0000000..731756c --- /dev/null +++ b/env.sample @@ -0,0 +1,11 @@ +# True for development, False for production +DEBUG=True + +SECRET_KEY= + +# DB_ENGINE=mysql +# DB_HOST=localhost +# DB_NAME=appseed_db +# DB_USERNAME=appseed_db_usr +# DB_PASS=pass +# DB_PORT=3306 \ No newline at end of file diff --git a/gunicorn-cfg.py b/gunicorn-cfg.py new file mode 100644 index 0000000..3acce75 --- /dev/null +++ b/gunicorn-cfg.py @@ -0,0 +1,11 @@ +# -*- encoding: utf-8 -*- +""" +Copyright (c) 2019 - present AppSeed.us +""" + +bind = '0.0.0.0:5005' +workers = 1 +accesslog = '-' +loglevel = 'debug' +capture_output = True +enable_stdio_inheritance = True diff --git a/home/__init__.py b/home/__init__.py new file mode 100644 index 0000000..e69de29 diff --git a/home/admin.py b/home/admin.py new file mode 100644 index 0000000..8c38f3f --- /dev/null +++ b/home/admin.py @@ -0,0 +1,3 @@ +from django.contrib import admin + +# Register your models here. diff --git a/home/apps.py b/home/apps.py new file mode 100644 index 0000000..e7d1c7e --- /dev/null +++ b/home/apps.py @@ -0,0 +1,6 @@ +from django.apps import AppConfig + + +class HomeConfig(AppConfig): + default_auto_field = "django.db.models.BigAutoField" + name = "home" diff --git a/home/migrations/__init__.py b/home/migrations/__init__.py new file mode 100644 index 0000000..e69de29 diff --git a/home/models.py b/home/models.py new file mode 100644 index 0000000..71a8362 --- /dev/null +++ b/home/models.py @@ -0,0 +1,3 @@ +from django.db import models + +# Create your models here. diff --git a/home/templates/pages/custom-index.html b/home/templates/pages/custom-index.html new file mode 100644 index 0000000..a9aa90e --- /dev/null +++ b/home/templates/pages/custom-index.html @@ -0,0 +1,7170 @@ +{% extends 'layouts/base_background.html' %} +{% load static %} + +{% block title %} Material Kit 2 by Creative Tim {% endblock title %} + +{% block body %} class="index-page bg-gray-200" {% endblock body %} + +{% block content %} + + +
+ +
+ +
+ +
+
+
+
+
+
+
+

0+

+
Coded Elements
+

From buttons, to inputs, navbars, alerts or cards, you are covered

+
+
+
+
+
+

0+

+
Design Blocks
+

Mix the sections, change the colors and unleash your creativity

+
+
+
+
+
+

0

+
Pages
+

Save 3-4 weeks of work when you use our pre-made pages for your website

+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+ touch_app +

Feel the
Material Kit

+

All the Bootstrap components that you need in a development have been re-design with the new look.

+
+
+
+
+

Discover More

+

You will save a lot of time going from prototyping to full-functional code because all elements are implemented.

+ Start with Headers +
+
+
+
+
+
+
+
+
+ content_copy +
Full Documentation
+

Built by developers for developers. Check the foundation and you will find everything inside our documentation.

+
+
+
+
+ flip_to_front +
Bootstrap 5 Ready
+

The world’s most popular front-end open source toolkit, featuring Sass variables and mixins.

+
+
+
+
+
+ price_change +
Save Time & Money
+

Creating your design from scratch with dedicated designers can be very expensive. Start with our Design System.

+
+
+
+ devices +
Fully Responsive
+

Regardless of the screen size, the website content will naturally fit the given resolution.

+
+
+
+
+
+
+
+ + +
+
+
+
+
+ Infinite combinations +

Huge collection of sections

+

We have created multiple options for you to put together and customise into pixel perfect pages.

+
+
+
+
+
+
+
+
+

Elements

+
70+ carefully crafted small elements that come with multiple colors and shapes. These are only a few of them.
+
+
+ +
+
+ +
+
+
+
+
+

Buttons color

+
+
+ +
+
+
+
+
+ +
+
+
+ Copy +
  <div class="row text-center py-3 mt-3">
+  <div class="col-12 mx-auto">
+    
+    <button type="button" class="btn btn-primary w-auto me-1 mb-0">Primary</button>
+    
+    <button type="button" class="btn btn-secondary w-auto me-1 mb-0">Secondary</button>
+    
+    <button type="button" class="btn btn-info w-auto me-1 mb-0">Info</button>
+    
+    <button type="button" class="btn btn-success w-auto me-1 mb-0">Success</button>
+    
+    <button type="button" class="btn btn-warning w-auto me-1 mb-0">Warning</button>
+    
+    <button type="button" class="btn btn-danger w-auto me-1 mb-0">Danger</button>
+    
+    <button type="button" class="btn btn-light w-auto me-1 mb-0">Light</button>
+    
+    <button type="button" class="btn btn-dark w-auto me-1 mb-0">Dark</button>
+    
+    <button type="button" class="btn btn-white w-auto me-1 mb-0">White</button>
+    
+  </div>
+</div>
+
+  
+
+
+
+
+
+ + +
+
+
+
+
+

Buttons gradient

+
+
+ +
+
+
+
+
+ +
+
+
+ Copy +
  <div class="row text-center py-3 mt-3">
+  <div class="col-12 mx-auto">
+    
+    <button type="button" class="btn bg-gradient-primary w-auto me-1 mb-0">Primary</button>
+    
+    <button type="button" class="btn bg-gradient-secondary w-auto me-1 mb-0">Secondary</button>
+    
+    <button type="button" class="btn bg-gradient-info w-auto me-1 mb-0">Info</button>
+    
+    <button type="button" class="btn bg-gradient-success w-auto me-1 mb-0">Success</button>
+    
+    <button type="button" class="btn bg-gradient-warning w-auto me-1 mb-0">Warning</button>
+    
+    <button type="button" class="btn bg-gradient-danger w-auto me-1 mb-0">Danger</button>
+    
+    <button type="button" class="btn bg-gradient-light w-auto me-1 mb-0">Light</button>
+    
+    <button type="button" class="btn bg-gradient-dark w-auto me-1 mb-0">Dark</button>
+    
+    <button type="button" class="btn bg-gradient-white w-auto me-1 mb-0">White</button>
+    
+  </div>
+</div>
+
+  
+
+
+
+
+
+ + +
+
+
+
+
+

Buttons outline

+
+
+ +
+
+
+
+
+ +
+
+
+ Copy +
  <div class="row text-center py-3 mt-3">
+  <div class="col-12 mx-auto">
+    
+    <button type="button" class="btn btn-outline-primary mb-0">Primary</button>
+    
+    <button type="button" class="btn btn-outline-secondary mb-0">Secondary</button>
+    
+    <button type="button" class="btn btn-outline-info mb-0">Info</button>
+    
+    <button type="button" class="btn btn-outline-success mb-0">Success</button>
+    
+    <button type="button" class="btn btn-outline-warning mb-0">Warning</button>
+    
+    <button type="button" class="btn btn-outline-danger mb-0">Danger</button>
+    
+    <button type="button" class="btn btn-outline-light mb-0">Light</button>
+    
+    <button type="button" class="btn btn-outline-dark mb-0">Dark</button>
+    
+    <button type="button" class="btn btn-outline-white mb-0">White</button>
+    
+  </div>
+</div>
+
+  
+
+
+
+
+
+ + +
+
+
+
+
+

Buttons sizes

+
+
+ +
+
+
+
+
+ +
+
+
+ Copy +
  <div class="row text-center py-2 mt-3">
+  <div class="col-12 mx-auto">
+    <button type="button" class="btn bg-gradient-primary btn-sm me-2">Small</button>
+    <button type="button" class="btn bg-gradient-primary w-auto me-2">Default</button>
+    <button type="button" class="btn bg-gradient-primary btn-lg">Large</button>
+  </div>
+</div>
+
+  
+
+
+
+
+
+ + +
+
+
+
+
+

Buttons icons

+
+
+ +
+
+
+
+
+ +
+
+
+ Copy +
  <div class="row text-center py-2 mt-3">
+  <div class="col-12 mx-auto">
+    <button class="btn bg-gradient-primary btn-icon btn-sm" type="button">
+      <div class="d-flex align-items-center">
+        <i class="material-icons me-2" aria-hidden="true">favorite</i>
+        Small
+      </div>
+    </button>
+
+    <button class="btn bg-gradient-primary btn-icon" type="button">
+      <div class="d-flex align-items-center">
+        <i class="material-icons me-2" aria-hidden="true">favorite</i>
+        Default
+      </div>
+    </button>
+
+    <button class="btn bg-gradient-primary btn-icon btn-lg" type="button">
+      <div class="d-flex align-items-center">
+        <i class="material-icons me-2" aria-hidden="true">favorite</i>
+        Large
+      </div>
+    </button>
+  </div>
+</div>
+
+  
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+

Checkbox

+
+
+ +
+
+
+
+
+ +
+
+
+ Copy +
  <div class="row text-center py-2 mt-3">
+  <div class="col-3 mx-auto text-start">
+    <div class="form-check">
+      <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
+      <label class="form-check-label" for="flexCheckDefault">
+        Default checkbox
+      </label>
+    </div>
+    <div class="form-check">
+      <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
+      <label class="form-check-label" for="flexCheckChecked">
+        Checked checkbox
+      </label>
+    </div>
+  </div>
+</div>
+
+  
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+

Radios

+
+
+ +
+
+
+
+
+ +
+
+
+ Copy +
  <div class="row text-center py-2 mt-3">
+  <div class="col-3 mx-auto text-start">
+    <div class="form-check">
+      <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
+      <label class="form-check-label" for="flexRadioDefault1">
+        Default radio
+      </label>
+    </div>
+    <div class="form-check">
+      <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
+      <label class="form-check-label" for="flexRadioDefault2">
+        Default checked radio
+      </label>
+    </div>
+  </div>
+</div>
+
+  
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+

Toggle

+
+
+ +
+
+
+
+
+ +
+
+
+ Copy +
  <div class="container py-3 mt-3">
+  <div class="row">
+    <div class="col-4 mx-auto">
+      <div class="form-check form-switch ps-0">
+        <input class="form-check-input ms-auto mt-1" type="checkbox" id="flexSwitchCheckDefault">
+        <label class="form-check-label ms-2" for="flexSwitchCheckDefault">Remember me</label>
+      </div>
+    </div>
+  </div>
+</div>
+
+  
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+

Badges

+
+
+ +
+
+
+
+
+ +
+
+
+ Copy +
  <div class="container">
+  <div class="row text-center py-3 mt-3">
+    <div class="col-12">
+      <span class="badge bg-gradient-primary">Primary</span>
+      <span class="badge bg-gradient-secondary">Secondary</span>
+      <span class="badge bg-gradient-success">Success</span>
+      <span class="badge bg-gradient-danger">Danger</span>
+      <span class="badge bg-gradient-warning">Warning</span>
+      <span class="badge bg-gradient-info">Info</span>
+      <span class="badge bg-gradient-light text-dark">Light</span>
+      <span class="badge bg-gradient-dark">Dark</span>
+    </div>
+  </div>
+</div>
+
+  
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+

Avatars

+
+
+ +
+
+
+
+
+ +
+
+
+ Copy +
  <div class="row text-center py-3 mt-3">
+  <div class="col-12">
+    <div class="avatar-group">
+      <a href="javascript:;" class="avatar avatar-lg rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Ryan Tompson">
+        <img alt="Image placeholder" src="{% static 'img/team-1.jpg' %}">
+      </a>
+      <a href="javascript:;" class="avatar avatar-lg rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Romina Hadid">
+        <img alt="Image placeholder" src="{% static 'img/team-2.jpg' %}">
+      </a>
+      <a href="javascript:;" class="avatar avatar-lg rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Alexander Smith">
+        <img alt="Image placeholder" src="{% static 'img/team-3.jpg' %}">
+      </a>
+      <a href="javascript:;" class="avatar avatar-lg rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Jessica Doe">
+        <img alt="Image placeholder" src="{% static 'img/team-4.jpg' %}">
+      </a>
+    </div>
+  </div>
+</div>
+
+  
+
+
+
+
+
+ + +
+
+
+
+
+

Avatar sizes

+
+
+ +
+
+
+
+
+ +
+
+
+ Copy +
  <div class="row text-center py-3 mt-3">
+  <div class="col-12">
+    <a href="javascript:;" class="avatar avatar-xs rounded-circle">
+      <img alt="Image placeholder" src="{% static 'img/team-4.jpg' %}">
+    </a>
+    <a href="javascript:;" class="avatar avatar-sm rounded-circle">
+      <img alt="Image placeholder" src="{% static 'img/team-4.jpg' %}">
+    </a>
+    <a href="javascript:;" class="avatar rounded-circle">
+      <img alt="Image placeholder" src="{% static 'img/team-4.jpg' %}">
+    </a>
+    <a href="javascript:;" class="avatar avatar-lg rounded-circle">
+      <img alt="Image placeholder" src="{% static 'img/team-4.jpg' %}">
+    </a>
+    <a href="javascript:;" class="avatar avatar-xl rounded-circle">
+      <img alt="Image placeholder" src="{% static 'img/team-4.jpg' %}">
+    </a>
+  </div>
+</div>
+
+  
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+

Breadcrumbs

+
+
+ +
+
+
+
+
+ +
+
+
+ Copy +
  <div class="container py-2 mt-2">
+  <div class="row">
+    <div class="col-8 mx-auto">
+      <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+          <li class="breadcrumb-item active" aria-current="page">Home</li>
+        </ol>
+      </nav>
+      <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+          <li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
+          <li class="breadcrumb-item active" aria-current="page">Portfolio</li>
+        </ol>
+      </nav>
+      <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+          <li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
+          <li class="breadcrumb-item"><a href="javascript:;">Portfolio</a></li>
+          <li class="breadcrumb-item active" aria-current="page">Articles</li>
+        </ol>
+      </nav>
+    </div>
+
+  </div>
+</div>
+
+  
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+

Progress bars

+
+
+ +
+
+
+
+
+ +
+
+
+ Copy +
  <div class="container">
+  <div class="row py-3 mt-4">
+    <div class="col-8 mx-auto">
+      <div class="progress mb-3">
+        <div class="progress-bar bg-primary" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+      </div>
+      <div class="progress mb-3">
+        <div class="progress-bar bg-secondary" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+      </div>
+      <div class="progress mb-3">
+        <div class="progress-bar bg-success" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+      </div>
+      <div class="progress mb-3">
+        <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+      </div>
+      <div class="progress mb-3">
+        <div class="progress-bar bg-warning" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+      </div>
+      <div class="progress mb-3">
+        <div class="progress-bar bg-danger" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+      </div>
+      <div class="progress mb-3">
+        <div class="progress-bar bg-dark" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+  
+
+
+
+
+
+ +
+
+
+
+
+
+

Typography

+
6+ elements that you need for text manipulation and insertion
+
+
+
+
+ +
+
+
+
+
+

Font Family Serif

+
+
+ +
+
+
+
+
+ +
+
+
+ Copy +
  
+<div class="container-fluid text-sans-serif">
+  <div class="row py-3 align-items-center">
+    <div class="col-sm-3">
+      <small class="text-uppercase font-weight-bold">Heading 1</small>
+    </div>
+
+    <div class="col-sm-9">
+      <h1 class="mb-0">H1 Material Kit</h1>
+    </div>
+  </div>
+
+  <div class="row py-3 align-items-center">
+    <div class="col-sm-3">
+      <small class="text-uppercase font-weight-bold">Heading 2</small>
+    </div>
+
+    <div class="col-sm-9">
+      <h2 class="mb-0">H2 Material Kit</h2>
+    </div>
+  </div>
+
+  <div class="row py-3 align-items-center">
+    <div class="col-sm-3">
+      <small class="text-uppercase font-weight-bold">Heading 3</small>
+    </div>
+
+    <div class="col-sm-9">
+      <h3 class="mb-0">H3 Material Kit</h3>
+    </div>
+  </div>
+
+  <div class="row py-3 align-items-center">
+    <div class="col-sm-3">
+      <small class="text-uppercase font-weight-bold">Heading 4</small>
+    </div>
+
+    <div class="col-sm-9">
+      <h4 class="mb-0">H4 Material Kit</h4>
+    </div>
+  </div>
+
+  <div class="row py-3 align-items-center">
+    <div class="col-sm-3">
+      <small class="text-uppercase font-weight-bold">Heading 5</small>
+    </div>
+
+    <div class="col-sm-9">
+      <h5 class="mb-0">H5 Material Kit</h5>
+    </div>
+  </div>
+
+  <div class="row py-3 align-items-center">
+    <div class="col-sm-3">
+      <small class="text-uppercase font-weight-bold">Heading 6</small>
+    </div>
+
+    <div class="col-sm-9">
+      <h6 class="mb-0">H6 Material Kit</h6>
+    </div>
+  </div>
+
+  <div class="row py-3 align-items-center">
+    <div class="col-sm-3">
+      <small class="text-uppercase font-weight-bold">Paragraph</small>
+    </div>
+
+    <div class="col-sm-9">
+      <p class="mb-0">
+        I will be the leader of a company that ends up being worth
+        billions of dollars, because I got the answers. I understand
+        culture. I am the nucleus. I think that&#39;s a responsibility that I
+        have, to push possibilities, to show people, this is the level
+        that things could be at.
+      </p>
+    </div>
+  </div>
+
+  <div class="row py-3 align-items-center">
+    <div class="col-sm-3">
+      <small class="text-uppercase font-weight-bold">Lead text</small>
+    </div>
+
+    <div class="col-sm-9">
+      <p class="lead mb-0">
+        I will be the leader of a company that ends up being worth
+        billions of dollars, because I got the answers. I understand
+        culture. I am the nucleus. I think that&#39;s a responsibility that I
+        have, to push possibilities, to show people, this is the level
+        that things could be at.
+      </p>
+    </div>
+  </div>
+
+  <div class="row py-3 align-items-center">
+    <div class="col-sm-3">
+      <small class="text-uppercase font-weight-bold">Small</small>
+    </div>
+
+    <div class="col-sm-9">
+      <p class="text-sm mb-0">
+        I will be the leader of a company that ends up being worth
+        billions of dollars, because I got the answers. I understand
+        culture. I am the nucleus. I think that&#39;s a responsibility that I
+        have, to push possibilities, to show people, this is the level
+        that things could be at.
+      </p>
+    </div>
+  </div>
+
+  <div class="row py-3 align-items-center">
+    <div class="col-sm-3">
+      <small class="text-uppercase font-weight-bold">Tiny</small>
+    </div>
+
+    <div class="col-sm-9">
+      <p class="text-xs mb-0">
+        I will be the leader of a company that ends up being worth
+        billions of dollars, because I got the answers. I understand
+        culture. I am the nucleus. I think that&#39;s a responsibility that I
+        have, to push possibilities, to show people, this is the level
+        that things could be at.
+      </p>
+    </div>
+  </div>
+</div>
+
+  
+
+
+
+
+
+ +
+
+
+
+
+
+

Attention Catchers

+
4+ Fully coded components that popup from different places of the screen
+
+
+
+
+ +
+
+
+
+
+

Alerts

+
+
+ +
+
+
+
+
+ +
+
+
+ Copy +
  <div class="container">
+  <div class="row py-3">
+    <div class="alert alert-primary text-white font-weight-bold" role="alert">
+      A simple primary alertβ€”check it out!
+    </div>
+    <div class="alert alert-secondary text-white font-weight-bold" role="alert">
+      A simple secondary alertβ€”check it out!
+    </div>
+    <div class="alert alert-success text-white font-weight-bold" role="alert">
+      A simple success alertβ€”check it out!
+    </div>
+    <div class="alert alert-danger text-white font-weight-bold" role="alert">
+      A simple danger alertβ€”check it out!
+    </div>
+    <div class="alert alert-warning text-white font-weight-bold" role="alert">
+      A simple warning alertβ€”check it out!
+    </div>
+    <div class="alert alert-info text-white font-weight-bold" role="alert">
+      A simple info alertβ€”check it out!
+    </div>
+    <div class="alert alert-light text-white font-weight-bold" role="alert">
+      A simple light alertβ€”check it out!
+    </div>
+    <div class="alert alert-dark text-white font-weight-bold" role="alert">
+      A simple dark alertβ€”check it out!
+    </div>
+  </div>
+</div>
+
+  
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+

Tooltips

+
+
+ +
+
+
+
+
+ +
+
+
+ Copy +
  <div class="container">
+  <div class="row py-5 mt-3 text-center">
+    <div>
+      <button type="button" class="btn bg-gradient-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
+        Tooltip on top
+      </button>
+      <button type="button" class="btn bg-gradient-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
+        Tooltip on right
+      </button>
+      <button type="button" class="btn bg-gradient-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
+        Tooltip on bottom
+      </button>
+      <button type="button" class="btn bg-gradient-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
+        Tooltip on left
+      </button>
+    </div>
+  </div>
+</div>
+
+
+  <!-- initialization script -->
+  <script>
+    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
+    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+      return new bootstrap.Tooltip(tooltipTriggerEl)
+    })
+  </script>
+  
+
+
+
+
+ + +
+
+
+
+

Popovers

+
+
+ +
+
+
+
+
+ +
+
+
+ Copy +
  <div class="container">
+  <div class="row py-7 mt-2 text-center">
+    <div>
+      <button type="button" class="btn bg-gradient-secondary mb-0" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="That’s the main thing people are controlled by! Thoughts- their perception of themselves!">
+        Popover on top
+      </button>
+
+      <button type="button" class="btn bg-gradient-secondary mb-0" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="We’re not always in the position that we want to be at.">
+        Popover on right
+      </button>
+
+      <button type="button" class="btn bg-gradient-secondary mb-0" data-bs-container="body" title="Popover with title" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="A lot of people don’t appreciate the moment until it’s passed.">
+        Popover on bottom
+      </button>
+
+      <button type="button" class="btn bg-gradient-secondary mb-0" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="It really matters and then like it really doesn’t matter. What matters is the people who are sparked by it.">
+        Popover on left
+      </button>
+    </div>
+  </div>
+</div>
+
+  <!-- initialization script -->
+  <script>
+    var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
+    var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
+      return new bootstrap.Popover(popoverTriggerEl)
+    })
+  </script>
+  
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+

Modal

+
+
+ +
+
+
+
+
+ +
+
+
+ Copy +
  <div class="container py-7">
+  <div class="row mt-3">
+    <div class="col-sm-4 col-6 mx-auto">
+      <!-- Button trigger modal -->
+      <button type="button" class="btn bg-gradient-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
+        Launch demo modal
+      </button>
+
+      <!-- Modal -->
+      <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+        <div class="modal-dialog">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h5 class="modal-title" id="exampleModalLabel">Your modal title</h5>
+              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+              Society has put up so many boundaries, so many limitations on what’s right and wrong that it’s almost impossible to get a pure thought out.
+              <br><br>
+              It’s like a little kid, a little boy, looking at colors, and no one told him what colors are good, before somebody tells you you shouldn’t like pink because that’s for girls, or you’d instantly become a gay two-year-old.
+            </div>
+            <div class="modal-footer justify-content-between">
+              <button type="button" class="btn bg-gradient-dark" data-bs-dismiss="modal">Close</button>
+              <button type="button" class="btn bg-gradient-primary">Save changes</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+  
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+

Datepicker

+
+
+ +
+
+
+
+
+ +
+
+
+ Copy +
  <!--  Datepicker -->
+<div class="row py-3">
+  <div class="col-md-6 mx-auto">
+    <div class="row">
+      <div class="col-lg-6 mx-auto col-md-8 col-sm-5">
+        <div class="input-group input-group-static">
+          <span class="input-group-text"><i class="fas fa-calendar"></i></span>
+          <input class="form-control datepicker" placeholder="Please select date" type="text" >
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+  <!-- initialization script -->
+<script>
+  if (document.querySelector(".datepicker")) {
+     flatpickr(".datepicker", {});
+  }
+</script>
+
+  
+
+
+
+
+
+ +
+
+
+ +
+
+
+

Navigation

+
6+ components that will help go through the pages
+
+
+
+
+ +
+
+
+
+
+

Navbar light

+
+
+ +
+
+
+
+
+ +
+
+
+ Copy +
  <!-- Navbar Light -->
+<nav class="navbar navbar-expand-lg navbar-light bg-white py-3">
+  <div class="container">
+    <a class="navbar-brand" href="https://demos.creative-tim.com/material-kit/presentation" rel="tooltip" title="Designed and Coded by Creative Tim" data-placement="bottom" target="_blank">
+      Material Kit 2
+    </a>
+    <button class="navbar-toggler shadow-none ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon mt-2">
+        <span class="navbar-toggler-bar bar1"></span>
+        <span class="navbar-toggler-bar bar2"></span>
+        <span class="navbar-toggler-bar bar3"></span>
+      </span>
+    </button>
+    <div class="collapse navbar-collapse w-100 pt-3 pb-2 py-lg-0 ms-lg-12 ps-lg-5" id="navigation">
+      <ul class="navbar-nav navbar-nav-hover w-100">
+        <li class="nav-item dropdown dropdown-hover mx-2 ms-lg-5">
+          <a class="nav-link ps-2 cursor-pointer d-flex align-items-center" id="dropdownMenuPages1" data-bs-toggle="dropdown" aria-expanded="false">
+            <i class="material-icons opacity-6 me-2 text-md">dashboard</i>
+            Pages
+            <img src="{% static 'img/down-arrow-dark.svg' %}" alt="down-arrow" class="arrow ms-auto ms-md-2">
+          </a>
+          <div class="dropdown-menu dropdown-menu-animation ms-n3 dropdown-md p-3 border-radius-lg mt-0 mt-lg-3" aria-labelledby="dropdownMenuPages1">
+            <div class="d-none d-lg-block">
+  <a href="javascript:;" class="dropdown-item border-radius-md">
+    About Us
+  </a>
+  <a href="javascript:;" class="dropdown-item border-radius-md">
+    Contact Us
+  </a>
+  <a href="javascript:;" class="dropdown-item border-radius-md">
+    Author
+  </a>
+  <a href="javascript:;" class="dropdown-item border-radius-md">
+    Sign In
+  </a>
+</div>
+
+<div class="d-lg-none">
+  <a href="javascript:;" class="dropdown-item border-radius-md">
+    About Us
+  </a>
+  <a href="javascript:;" class="dropdown-item border-radius-md">
+    Contact Us
+  </a>
+  <a href="javascript:;" class="dropdown-item border-radius-md">
+    Author
+  </a>
+  <a href="javascript:;" class="dropdown-item border-radius-md">
+    Sign In
+  </a>
+</div>
+
+          </div>
+        </li>
+
+        <li class="nav-item dropdown dropdown-hover mx-2">
+          <a class="nav-link ps-2 d-flex cursor-pointer align-items-center" id="dropdownMenuBlocks" data-bs-toggle="dropdown" aria-expanded="false">
+            <i class="material-icons opacity-6 me-2 text-md">view_day</i>
+            Sections
+            <img src="{% static 'img/down-arrow-dark.svg' %}" alt="down-arrow" class="arrow ms-auto ms-md-2">
+          </a>
+          <ul class="dropdown-menu dropdown-menu-animation dropdown-lg dropdown-lg-responsive p-3 border-radius-lg mt-0 mt-lg-3" aria-labelledby="dropdownMenuBlocks">
+            <div class="d-none d-lg-block">
+  <li class="nav-item dropdown dropdown-hover dropdown-subitem">
+    <a class="dropdown-item py-2 ps-3 border-radius-md" href="./presentation.html">
+      <div class="d-flex">
+        <div class="icon h-10 me-3 d-flex mt-1">
+          <i class="ni ni-single-copy-04 text-gradient text-primary"></i>
+        </div>
+        <div class="w-100 d-flex align-items-center justify-content-between">
+          <div>
+            <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Page Sections</h6>
+            <span class="text-sm">See all 109 sections</span>
+          </div>
+
+          <img src="{% static 'img/down-arrow.svg' %}" alt="down-arrow" class="arrow">
+        </div>
+      </div>
+    </a>
+    <div class="dropdown-menu mt-0 py-3 px-2 mt-3" aria-labelledby="pageSections">
+      <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+        Page Headers
+      </a>
+      <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+        Features
+      </a>
+      <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+        Pricing
+      </a>
+      <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+        FAQ
+      </a>
+      <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+        Blog Posts
+      </a>
+      <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+        Testimonials
+      </a>
+      <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+        Teams
+      </a>
+      <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+        Stats
+      </a>
+      <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+        Call to Actions
+      </a>
+      <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+        Logo Areas
+      </a>
+    </div>
+  </li>
+</div>
+
+<div class="row d-lg-none">
+  <div class="col-md-12">
+    <div class="d-flex mb-2">
+      <div class="icon h-10 me-3 d-flex mt-1">
+        <i class="ni ni-single-copy-04 text-gradient text-primary"></i>
+      </div>
+      <div class="w-100 d-flex align-items-center justify-content-between">
+        <div>
+          <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Page Sections</h6>
+        </div>
+      </div>
+    </div>
+    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+      Page Headers
+    </a>
+    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+      Features
+    </a>
+    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+      Pricing
+    </a>
+    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+      FAQ
+    </a>
+    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+      Blog Posts
+    </a>
+    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+      Testimonials
+    </a>
+    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+      Teams
+    </a>
+    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+      Stats
+    </a>
+    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+      Call to Actions
+    </a>
+    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+      Applications
+    </a>
+  </div>
+</div>
+
+          </ul>
+        </li>
+
+        <li class="nav-item dropdown dropdown-hover mx-2">
+          <a class="nav-link ps-2 d-flex cursor-pointer align-items-center" id="dropdownMenuDocs" data-bs-toggle="dropdown" aria-expanded="false">
+            <i class="material-icons opacity-6 me-2 text-md">article</i>
+            Docs
+            <img src="{% static 'img/down-arrow-dark.svg' %}" alt="down-arrow" class="arrow ms-auto ms-md-2">
+          </a>
+          <ul class="dropdown-menu dropdown-menu-animation dropdown-lg mt-0 mt-lg-3 p-3 border-radius-lg" aria-labelledby="dropdownMenuDocs">
+            <div class="d-none d-lg-block">
+  <li class="nav-item ">
+    <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
+      <div class="d-flex">
+        <div class="icon h-10 me-3 d-flex mt-1">
+          <svg class="text-secondary" width="16px" height="16px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <title>spaceship</title>
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                  <g transform="translate(-1720.000000, -592.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                      <g transform="translate(1716.000000, 291.000000)">
+                          <g transform="translate(4.000000, 301.000000)">
+                              <path class="color-background" d="M39.3,0.706666667 C38.9660984,0.370464027 38.5048767,0.192278529 38.0316667,0.216666667 C14.6516667,1.43666667 6.015,22.2633333 5.93166667,22.4733333 C5.68236407,23.0926189 5.82664679,23.8009159 6.29833333,24.2733333 L15.7266667,33.7016667 C16.2013871,34.1756798 16.9140329,34.3188658 17.535,34.065 C17.7433333,33.98 38.4583333,25.2466667 39.7816667,1.97666667 C39.8087196,1.50414529 39.6335979,1.04240574 39.3,0.706666667 Z M25.69,19.0233333 C24.7367525,19.9768687 23.3029475,20.2622391 22.0572426,19.7463614 C20.8115377,19.2304837 19.9992882,18.0149658 19.9992882,16.6666667 C19.9992882,15.3183676 20.8115377,14.1028496 22.0572426,13.5869719 C23.3029475,13.0710943 24.7367525,13.3564646 25.69,14.31 C26.9912731,15.6116662 26.9912731,17.7216672 25.69,19.0233333 L25.69,19.0233333 Z"></path>
+                              <path class="color-background" d="M1.855,31.4066667 C3.05106558,30.2024182 4.79973884,29.7296005 6.43969145,30.1670277 C8.07964407,30.6044549 9.36054508,31.8853559 9.7979723,33.5253085 C10.2353995,35.1652612 9.76258177,36.9139344 8.55833333,38.11 C6.70666667,39.9616667 0,40 0,40 C0,40 0,33.2566667 1.855,31.4066667 Z"></path>
+                              <path class="color-background" d="M17.2616667,3.90166667 C12.4943643,3.07192755 7.62174065,4.61673894 4.20333333,8.04166667 C3.31200265,8.94126033 2.53706177,9.94913142 1.89666667,11.0416667 C1.5109569,11.6966059 1.61721591,12.5295394 2.155,13.0666667 L5.47,16.3833333 C8.55036617,11.4946947 12.5559074,7.25476565 17.2616667,3.90166667 L17.2616667,3.90166667 Z" opacity="0.598539807"></path>
+                              <path class="color-background" d="M36.0983333,22.7383333 C36.9280725,27.5056357 35.3832611,32.3782594 31.9583333,35.7966667 C31.0587397,36.6879974 30.0508686,37.4629382 28.9583333,38.1033333 C28.3033941,38.4890431 27.4704606,38.3827841 26.9333333,37.845 L23.6166667,34.53 C28.5053053,31.4496338 32.7452344,27.4440926 36.0983333,22.7383333 L36.0983333,22.7383333 Z" opacity="0.598539807"></path>
+                          </g>
+                      </g>
+                  </g>
+              </g>
+          </svg>
+        </div>
+        <div>
+          <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Getting Started</h6>
+          <span class="text-sm">All about overview, quick start, license and contents</span>
+        </div>
+      </div>
+    </a>
+  </li>
+  <li class="nav-item ">
+    <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
+      <div class="d-flex">
+        <div class="icon h-10 me-3 d-flex mt-1">
+          <svg class="text-secondary" width="16px" height="16px" viewBox="0 0 40 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <title>document</title>
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                  <g transform="translate(-1870.000000, -591.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                      <g transform="translate(1716.000000, 291.000000)">
+                          <g id="document" transform="translate(154.000000, 300.000000)">
+                              <path class="color-background" d="M40,40 L36.3636364,40 L36.3636364,3.63636364 L5.45454545,3.63636364 L5.45454545,0 L38.1818182,0 C39.1854545,0 40,0.814545455 40,1.81818182 L40,40 Z" opacity="0.603585379"></path>
+                              <path class="color-background" d="M30.9090909,7.27272727 L1.81818182,7.27272727 C0.814545455,7.27272727 0,8.08727273 0,9.09090909 L0,41.8181818 C0,42.8218182 0.814545455,43.6363636 1.81818182,43.6363636 L30.9090909,43.6363636 C31.9127273,43.6363636 32.7272727,42.8218182 32.7272727,41.8181818 L32.7272727,9.09090909 C32.7272727,8.08727273 31.9127273,7.27272727 30.9090909,7.27272727 Z M18.1818182,34.5454545 L7.27272727,34.5454545 L7.27272727,30.9090909 L18.1818182,30.9090909 L18.1818182,34.5454545 Z M25.4545455,27.2727273 L7.27272727,27.2727273 L7.27272727,23.6363636 L25.4545455,23.6363636 L25.4545455,27.2727273 Z M25.4545455,20 L7.27272727,20 L7.27272727,16.3636364 L25.4545455,16.3636364 L25.4545455,20 Z"></path>
+                          </g>
+                      </g>
+                  </g>
+              </g>
+          </svg>
+        </div>
+        <div>
+          <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Foundation</h6>
+          <span class="text-sm">See our colors, icons and typography</span>
+        </div>
+      </div>
+    </a>
+  </li>
+  <li class="nav-item ">
+    <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
+      <div class="d-flex">
+        <div class="icon h-10 me-3 d-flex mt-1">
+          <svg class="text-secondary" width="16px" height="16px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <title>box-3d-50</title>
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                  <g transform="translate(-2319.000000, -291.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                      <g transform="translate(1716.000000, 291.000000)">
+                          <g id="box-3d-50" transform="translate(603.000000, 0.000000)">
+                              <path class="color-background" d="M22.7597136,19.3090182 L38.8987031,11.2395234 C39.3926816,10.9925342 39.592906,10.3918611 39.3459167,9.89788265 C39.249157,9.70436312 39.0922432,9.5474453 38.8987261,9.45068056 L20.2741875,0.1378125 L20.2741875,0.1378125 C19.905375,-0.04725 19.469625,-0.04725 19.0995,0.1378125 L3.1011696,8.13815822 C2.60720568,8.38517662 2.40701679,8.98586148 2.6540352,9.4798254 C2.75080129,9.67332903 2.90771305,9.83023153 3.10122239,9.9269862 L21.8652864,19.3090182 C22.1468139,19.4497819 22.4781861,19.4497819 22.7597136,19.3090182 Z"></path>
+                              <path class="color-background" d="M23.625,22.429159 L23.625,39.8805372 C23.625,40.4328219 24.0727153,40.8805372 24.625,40.8805372 C24.7802551,40.8805372 24.9333778,40.8443874 25.0722402,40.7749511 L41.2741875,32.673375 L41.2741875,32.673375 C41.719125,32.4515625 42,31.9974375 42,31.5 L42,14.241659 C42,13.6893742 41.5522847,13.241659 41,13.241659 C40.8447549,13.241659 40.6916418,13.2778041 40.5527864,13.3472318 L24.1777864,21.5347318 C23.8390024,21.7041238 23.625,22.0503869 23.625,22.429159 Z" opacity="0.7"></path>
+                              <path class="color-background" d="M20.4472136,21.5347318 L1.4472136,12.0347318 C0.953235098,11.7877425 0.352562058,11.9879669 0.105572809,12.4819454 C0.0361450918,12.6208008 6.47121774e-16,12.7739139 0,12.929159 L0,30.1875 L0,30.1875 C0,30.6849375 0.280875,31.1390625 0.7258125,31.3621875 L19.5528096,40.7750766 C20.0467945,41.0220531 20.6474623,40.8218132 20.8944388,40.3278283 C20.963859,40.1889789 21,40.0358742 21,39.8806379 L21,22.429159 C21,22.0503869 20.7859976,21.7041238 20.4472136,21.5347318 Z" opacity="0.7"></path>
+                          </g>
+                      </g>
+                  </g>
+              </g>
+          </svg>
+        </div>
+        <div>
+          <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Components</h6>
+          <span class="text-sm">Explore our collection of fully designed components</span>
+        </div>
+      </div>
+    </a>
+  </li>
+  <li class="nav-item ">
+    <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
+      <div class="d-flex">
+        <div class="icon h-10 me-3 d-flex mt-1">
+          <svg class="text-secondary" width="16px" height="16px" viewBox="0 0 40 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <title>switches</title>
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                  <g transform="translate(-1870.000000, -440.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                      <g transform="translate(1716.000000, 291.000000)">
+                          <g transform="translate(154.000000, 149.000000)">
+                              <path class="color-background" d="M10,20 L30,20 C35.4545455,20 40,15.4545455 40,10 C40,4.54545455 35.4545455,0 30,0 L10,0 C4.54545455,0 0,4.54545455 0,10 C0,15.4545455 4.54545455,20 10,20 Z M10,3.63636364 C13.4545455,3.63636364 16.3636364,6.54545455 16.3636364,10 C16.3636364,13.4545455 13.4545455,16.3636364 10,16.3636364 C6.54545455,16.3636364 3.63636364,13.4545455 3.63636364,10 C3.63636364,6.54545455 6.54545455,3.63636364 10,3.63636364 Z" opacity="0.6"></path>
+                              <path class="color-background" d="M30,23.6363636 L10,23.6363636 C4.54545455,23.6363636 0,28.1818182 0,33.6363636 C0,39.0909091 4.54545455,43.6363636 10,43.6363636 L30,43.6363636 C35.4545455,43.6363636 40,39.0909091 40,33.6363636 C40,28.1818182 35.4545455,23.6363636 30,23.6363636 Z M30,40 C26.5454545,40 23.6363636,37.0909091 23.6363636,33.6363636 C23.6363636,30.1818182 26.5454545,27.2727273 30,27.2727273 C33.4545455,27.2727273 36.3636364,30.1818182 36.3636364,33.6363636 C36.3636364,37.0909091 33.4545455,40 30,40 Z"></path>
+                          </g>
+                      </g>
+                  </g>
+              </g>
+          </svg>
+        </div>
+        <div>
+          <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Plugins</h6>
+          <span class="text-sm">Check how you can integrate our plugins</span>
+        </div>
+      </div>
+    </a>
+  </li>
+  <li class="nav-item ">
+    <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
+      <div class="d-flex">
+        <div class="icon h-10 me-3 d-flex mt-1">
+          <svg class="text-secondary" width="16px" height="16px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <title>settings</title>
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                  <g transform="translate(-2020.000000, -442.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                      <g transform="translate(1716.000000, 291.000000)">
+                          <g transform="translate(304.000000, 151.000000)">
+                              <polygon class="color-background" opacity="0.596981957" points="18.0883333 15.7316667 11.1783333 8.82166667 13.3333333 6.66666667 6.66666667 0 0 6.66666667 6.66666667 13.3333333 8.82166667 11.1783333 15.315 17.6716667"></polygon>
+                              <path class="color-background" d="M31.5666667,23.2333333 C31.0516667,23.2933333 30.53,23.3333333 30,23.3333333 C29.4916667,23.3333333 28.9866667,23.3033333 28.48,23.245 L22.4116667,30.7433333 L29.9416667,38.2733333 C32.2433333,40.575 35.9733333,40.575 38.275,38.2733333 L38.275,38.2733333 C40.5766667,35.9716667 40.5766667,32.2416667 38.275,29.94 L31.5666667,23.2333333 Z" opacity="0.596981957"></path>
+                              <path class="color-background" d="M33.785,11.285 L28.715,6.215 L34.0616667,0.868333333 C32.82,0.315 31.4483333,0 30,0 C24.4766667,0 20,4.47666667 20,10 C20,10.99 20.1483333,11.9433333 20.4166667,12.8466667 L2.435,27.3966667 C0.95,28.7083333 0.0633333333,30.595 0.00333333333,32.5733333 C-0.0583333333,34.5533333 0.71,36.4916667 2.11,37.89 C3.47,39.2516667 5.27833333,40 7.20166667,40 C9.26666667,40 11.2366667,39.1133333 12.6033333,37.565 L27.1533333,19.5833333 C28.0566667,19.8516667 29.01,20 30,20 C35.5233333,20 40,15.5233333 40,10 C40,8.55166667 39.685,7.18 39.1316667,5.93666667 L33.785,11.285 Z"></path>
+                          </g>
+                      </g>
+                  </g>
+              </g>
+          </svg>
+        </div>
+        <div>
+          <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Utility Classes</h6>
+          <span class="text-sm">For those who want flexibility, use our utility classes</span>
+        </div>
+      </div>
+    </a>
+  </li>
+</div>
+
+<div class="row d-lg-none">
+  <div class="col-md-12 g-0">
+    <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
+      <div class="d-flex">
+        <div class="icon h-10 me-3 d-flex mt-1">
+          <svg class="text-secondary" width="16px" height="16px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <title>spaceship</title>
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                <g transform="translate(-1720.000000, -592.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                  <g transform="translate(1716.000000, 291.000000)">
+                    <g transform="translate(4.000000, 301.000000)">
+                      <path class="color-background" d="M39.3,0.706666667 C38.9660984,0.370464027 38.5048767,0.192278529 38.0316667,0.216666667 C14.6516667,1.43666667 6.015,22.2633333 5.93166667,22.4733333 C5.68236407,23.0926189 5.82664679,23.8009159 6.29833333,24.2733333 L15.7266667,33.7016667 C16.2013871,34.1756798 16.9140329,34.3188658 17.535,34.065 C17.7433333,33.98 38.4583333,25.2466667 39.7816667,1.97666667 C39.8087196,1.50414529 39.6335979,1.04240574 39.3,0.706666667 Z M25.69,19.0233333 C24.7367525,19.9768687 23.3029475,20.2622391 22.0572426,19.7463614 C20.8115377,19.2304837 19.9992882,18.0149658 19.9992882,16.6666667 C19.9992882,15.3183676 20.8115377,14.1028496 22.0572426,13.5869719 C23.3029475,13.0710943 24.7367525,13.3564646 25.69,14.31 C26.9912731,15.6116662 26.9912731,17.7216672 25.69,19.0233333 L25.69,19.0233333 Z"></path>
+                      <path class="color-background" d="M1.855,31.4066667 C3.05106558,30.2024182 4.79973884,29.7296005 6.43969145,30.1670277 C8.07964407,30.6044549 9.36054508,31.8853559 9.7979723,33.5253085 C10.2353995,35.1652612 9.76258177,36.9139344 8.55833333,38.11 C6.70666667,39.9616667 0,40 0,40 C0,40 0,33.2566667 1.855,31.4066667 Z"></path>
+                      <path class="color-background" d="M17.2616667,3.90166667 C12.4943643,3.07192755 7.62174065,4.61673894 4.20333333,8.04166667 C3.31200265,8.94126033 2.53706177,9.94913142 1.89666667,11.0416667 C1.5109569,11.6966059 1.61721591,12.5295394 2.155,13.0666667 L5.47,16.3833333 C8.55036617,11.4946947 12.5559074,7.25476565 17.2616667,3.90166667 L17.2616667,3.90166667 Z" opacity="0.598539807"></path>
+                      <path class="color-background" d="M36.0983333,22.7383333 C36.9280725,27.5056357 35.3832611,32.3782594 31.9583333,35.7966667 C31.0587397,36.6879974 30.0508686,37.4629382 28.9583333,38.1033333 C28.3033941,38.4890431 27.4704606,38.3827841 26.9333333,37.845 L23.6166667,34.53 C28.5053053,31.4496338 32.7452344,27.4440926 36.0983333,22.7383333 L36.0983333,22.7383333 Z" opacity="0.598539807"></path>
+                    </g>
+                  </g>
+                </g>
+              </g>
+            </svg>
+          </div>
+        <div>
+          <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Getting Started</h6>
+          <span class="text-sm">All about overview, quick start, license and contents</span>
+        </div>
+      </div>
+    </a>
+
+    <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
+      <div class="d-flex">
+        <div class="icon h-10 me-3 d-flex mt-1">
+          <svg class="text-secondary" width="16px" height="16px" viewBox="0 0 40 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+            <title>document</title>
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                <g transform="translate(-1870.000000, -591.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                  <g transform="translate(1716.000000, 291.000000)">
+                    <g transform="translate(154.000000, 300.000000)">
+                      <path class="color-background" d="M40,40 L36.3636364,40 L36.3636364,3.63636364 L5.45454545,3.63636364 L5.45454545,0 L38.1818182,0 C39.1854545,0 40,0.814545455 40,1.81818182 L40,40 Z" opacity="0.603585379"></path>
+                      <path class="color-background" d="M30.9090909,7.27272727 L1.81818182,7.27272727 C0.814545455,7.27272727 0,8.08727273 0,9.09090909 L0,41.8181818 C0,42.8218182 0.814545455,43.6363636 1.81818182,43.6363636 L30.9090909,43.6363636 C31.9127273,43.6363636 32.7272727,42.8218182 32.7272727,41.8181818 L32.7272727,9.09090909 C32.7272727,8.08727273 31.9127273,7.27272727 30.9090909,7.27272727 Z M18.1818182,34.5454545 L7.27272727,34.5454545 L7.27272727,30.9090909 L18.1818182,30.9090909 L18.1818182,34.5454545 Z M25.4545455,27.2727273 L7.27272727,27.2727273 L7.27272727,23.6363636 L25.4545455,23.6363636 L25.4545455,27.2727273 Z M25.4545455,20 L7.27272727,20 L7.27272727,16.3636364 L25.4545455,16.3636364 L25.4545455,20 Z"></path>
+                    </g>
+                  </g>
+                </g>
+              </g>
+            </svg>
+          </div>
+        <div>
+          <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Foundation</h6>
+          <span class="text-sm">See our colors, icons and typography</span>
+        </div>
+      </div>
+    </a>
+
+    <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
+      <div class="d-flex">
+        <div class="icon h-10 me-3 d-flex mt-1">
+          <svg class="text-secondary" width="16px" height="16px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <title>box-3d-50</title>
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                  <g transform="translate(-2319.000000, -291.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                      <g transform="translate(1716.000000, 291.000000)">
+                          <g transform="translate(603.000000, 0.000000)">
+                              <path class="color-background" d="M22.7597136,19.3090182 L38.8987031,11.2395234 C39.3926816,10.9925342 39.592906,10.3918611 39.3459167,9.89788265 C39.249157,9.70436312 39.0922432,9.5474453 38.8987261,9.45068056 L20.2741875,0.1378125 L20.2741875,0.1378125 C19.905375,-0.04725 19.469625,-0.04725 19.0995,0.1378125 L3.1011696,8.13815822 C2.60720568,8.38517662 2.40701679,8.98586148 2.6540352,9.4798254 C2.75080129,9.67332903 2.90771305,9.83023153 3.10122239,9.9269862 L21.8652864,19.3090182 C22.1468139,19.4497819 22.4781861,19.4497819 22.7597136,19.3090182 Z"></path>
+                              <path class="color-background" d="M23.625,22.429159 L23.625,39.8805372 C23.625,40.4328219 24.0727153,40.8805372 24.625,40.8805372 C24.7802551,40.8805372 24.9333778,40.8443874 25.0722402,40.7749511 L41.2741875,32.673375 L41.2741875,32.673375 C41.719125,32.4515625 42,31.9974375 42,31.5 L42,14.241659 C42,13.6893742 41.5522847,13.241659 41,13.241659 C40.8447549,13.241659 40.6916418,13.2778041 40.5527864,13.3472318 L24.1777864,21.5347318 C23.8390024,21.7041238 23.625,22.0503869 23.625,22.429159 Z" opacity="0.7"></path>
+                              <path class="color-background" d="M20.4472136,21.5347318 L1.4472136,12.0347318 C0.953235098,11.7877425 0.352562058,11.9879669 0.105572809,12.4819454 C0.0361450918,12.6208008 6.47121774e-16,12.7739139 0,12.929159 L0,30.1875 L0,30.1875 C0,30.6849375 0.280875,31.1390625 0.7258125,31.3621875 L19.5528096,40.7750766 C20.0467945,41.0220531 20.6474623,40.8218132 20.8944388,40.3278283 C20.963859,40.1889789 21,40.0358742 21,39.8806379 L21,22.429159 C21,22.0503869 20.7859976,21.7041238 20.4472136,21.5347318 Z" opacity="0.7"></path>
+                          </g>
+                      </g>
+                  </g>
+              </g>
+          </svg>
+        </div>
+        <div>
+          <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Components</h6>
+          <span class="text-sm">Explore our collection of fully designed components</span>
+        </div>
+      </div>
+    </a>
+
+    <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
+      <div class="d-flex">
+        <div class="icon h-10 me-3 d-flex mt-1">
+          <svg class="text-secondary" width="16px" height="16px" viewBox="0 0 40 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <title>switches</title>
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                  <g transform="translate(-1870.000000, -440.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                      <g transform="translate(1716.000000, 291.000000)">
+                          <g transform="translate(154.000000, 149.000000)">
+                              <path class="color-background" d="M10,20 L30,20 C35.4545455,20 40,15.4545455 40,10 C40,4.54545455 35.4545455,0 30,0 L10,0 C4.54545455,0 0,4.54545455 0,10 C0,15.4545455 4.54545455,20 10,20 Z M10,3.63636364 C13.4545455,3.63636364 16.3636364,6.54545455 16.3636364,10 C16.3636364,13.4545455 13.4545455,16.3636364 10,16.3636364 C6.54545455,16.3636364 3.63636364,13.4545455 3.63636364,10 C3.63636364,6.54545455 6.54545455,3.63636364 10,3.63636364 Z" opacity="0.6"></path>
+                              <path class="color-background" d="M30,23.6363636 L10,23.6363636 C4.54545455,23.6363636 0,28.1818182 0,33.6363636 C0,39.0909091 4.54545455,43.6363636 10,43.6363636 L30,43.6363636 C35.4545455,43.6363636 40,39.0909091 40,33.6363636 C40,28.1818182 35.4545455,23.6363636 30,23.6363636 Z M30,40 C26.5454545,40 23.6363636,37.0909091 23.6363636,33.6363636 C23.6363636,30.1818182 26.5454545,27.2727273 30,27.2727273 C33.4545455,27.2727273 36.3636364,30.1818182 36.3636364,33.6363636 C36.3636364,37.0909091 33.4545455,40 30,40 Z"></path>
+                          </g>
+                      </g>
+                  </g>
+              </g>
+          </svg>
+        </div>
+        <div>
+          <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Plugins</h6>
+          <span class="text-sm">Check how you can integrate our plugins</span>
+        </div>
+      </div>
+    </a>
+
+    <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
+      <div class="d-flex">
+        <div class="icon h-10 me-3 d-flex mt-1">
+          <svg class="text-secondary" width="16px" height="16px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <title>settings</title>
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                  <g transform="translate(-2020.000000, -442.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                      <g transform="translate(1716.000000, 291.000000)">
+                          <g transform="translate(304.000000, 151.000000)">
+                              <polygon class="color-background" opacity="0.596981957" points="18.0883333 15.7316667 11.1783333 8.82166667 13.3333333 6.66666667 6.66666667 0 0 6.66666667 6.66666667 13.3333333 8.82166667 11.1783333 15.315 17.6716667"></polygon>
+                              <path class="color-background" d="M31.5666667,23.2333333 C31.0516667,23.2933333 30.53,23.3333333 30,23.3333333 C29.4916667,23.3333333 28.9866667,23.3033333 28.48,23.245 L22.4116667,30.7433333 L29.9416667,38.2733333 C32.2433333,40.575 35.9733333,40.575 38.275,38.2733333 L38.275,38.2733333 C40.5766667,35.9716667 40.5766667,32.2416667 38.275,29.94 L31.5666667,23.2333333 Z" opacity="0.596981957"></path>
+                              <path class="color-background" d="M33.785,11.285 L28.715,6.215 L34.0616667,0.868333333 C32.82,0.315 31.4483333,0 30,0 C24.4766667,0 20,4.47666667 20,10 C20,10.99 20.1483333,11.9433333 20.4166667,12.8466667 L2.435,27.3966667 C0.95,28.7083333 0.0633333333,30.595 0.00333333333,32.5733333 C-0.0583333333,34.5533333 0.71,36.4916667 2.11,37.89 C3.47,39.2516667 5.27833333,40 7.20166667,40 C9.26666667,40 11.2366667,39.1133333 12.6033333,37.565 L27.1533333,19.5833333 C28.0566667,19.8516667 29.01,20 30,20 C35.5233333,20 40,15.5233333 40,10 C40,8.55166667 39.685,7.18 39.1316667,5.93666667 L33.785,11.285 Z"></path>
+                          </g>
+                      </g>
+                  </g>
+              </g>
+          </svg>
+        </div>
+        <div>
+          <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Utility Classes</h6>
+          <span class="text-sm">All about overview, quick start, license and contents</span>
+        </div>
+      </div>
+    </a>
+  </div>
+</div>
+
+          </ul>
+        </li>
+        <li class="nav-item ms-lg-auto my-auto ms-3 ms-lg-0 mt-2 mt-lg-0">
+          <a href="https://appseed.us/product/material-kit2-pro/django/" class="btn btn-sm  bg-gradient-primary  mb-0 me-1 mt-2 mt-md-0">Upgrade to Pro</a></li>
+      </ul>
+    </div>
+  </div>
+</nav>
+<!-- End Navbar -->
+
+  
+
+
+
+
+
+ + +
+
+
+
+
+

Navbar dark

+
+
+ +
+
+
+
+
+ +
+
+
+ Copy +
  <!-- Navbar Dark -->
+<nav class="navbar navbar-expand-lg navbar-dark bg-gradient-dark z-index-3 py-3">
+  <div class="container">
+    <a class="navbar-brand text-white" href="https://demos.creative-tim.com/material-kit/presentation" rel="tooltip" title="Designed and Coded by Creative Tim" data-placement="bottom" target="_blank">
+      Material Kit 2
+    </a>
+    <button class="navbar-toggler shadow-none ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon mt-2">
+        <span class="navbar-toggler-bar bar1"></span>
+        <span class="navbar-toggler-bar bar2"></span>
+        <span class="navbar-toggler-bar bar3"></span>
+      </span>
+    </button>
+    <div class="collapse navbar-collapse w-100 pt-3 pb-2 py-lg-0" id="navigation">
+      <ul class="navbar-nav navbar-nav-hover mx-auto">
+        <li class="nav-item dropdown dropdown-hover mx-2">
+          <a class="nav-link ps-2 d-flex cursor-pointer align-items-center" id="dropdownMenuPages0" data-bs-toggle="dropdown" aria-expanded="false">
+            <i class="material-icons opacity-6 me-2 text-md">dashboard</i>
+            Pages
+            <img src="{% static 'img/down-arrow-white.svg' %}" alt="down-arrow" class="arrow ms-auto ms-md-2">
+          </a>
+          <div class="dropdown-menu dropdown-menu-animation dropdown-xl p-3 border-radius-xl mt-0 mt-lg-3" aria-labelledby="dropdownMenuPages0">
+            <div class="d-none d-lg-block">
+  <a href="javascript:;" class="dropdown-item border-radius-md">
+    About Us
+  </a>
+  <a href="javascript:;" class="dropdown-item border-radius-md">
+    Contact Us
+  </a>
+  <a href="javascript:;" class="dropdown-item border-radius-md">
+    Author
+  </a>
+  <a href="javascript:;" class="dropdown-item border-radius-md">
+    Sign In
+  </a>
+</div>
+
+<div class="d-lg-none">
+  <a href="javascript:;" class="dropdown-item border-radius-md">
+    About Us
+  </a>
+  <a href="javascript:;" class="dropdown-item border-radius-md">
+    Contact Us
+  </a>
+  <a href="javascript:;" class="dropdown-item border-radius-md">
+    Author
+  </a>
+  <a href="javascript:;" class="dropdown-item border-radius-md">
+    Sign In
+  </a>
+</div>
+
+          </div>
+        </li>
+
+        <li class="nav-item dropdown dropdown-hover mx-2">
+          <a class="nav-link ps-2 d-flex cursor-pointer align-items-center" id="dropdownMenuBlocks" data-bs-toggle="dropdown" aria-expanded="false">
+            <i class="material-icons opacity-6 me-2 text-md">view_day</i>
+            Sections
+            <img src="{% static 'img/down-arrow-white.svg' %}" alt="down-arrow" class="arrow ms-auto ms-md-2">
+          </a>
+          <ul class="dropdown-menu dropdown-menu-animation dropdown-menu-end dropdown-md dropdown-md-responsive p-3 border-radius-lg mt-0 mt-lg-3" aria-labelledby="dropdownMenuBlocks">
+            <div class="d-none d-lg-block">
+  <li class="nav-item dropdown dropdown-hover dropdown-subitem">
+    <a class="dropdown-item py-2 ps-3 border-radius-md" href="./presentation.html">
+      <div class="d-flex">
+        <div class="icon h-10 me-3 d-flex mt-1">
+          <i class="ni ni-single-copy-04 text-gradient text-primary"></i>
+        </div>
+        <div class="w-100 d-flex align-items-center justify-content-between">
+          <div>
+            <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Page Sections</h6>
+            <span class="text-sm">See all 109 sections</span>
+          </div>
+
+          <img src="{% static 'img/down-arrow.svg' %}" alt="down-arrow" class="arrow">
+        </div>
+      </div>
+    </a>
+    <div class="dropdown-menu mt-0 py-3 px-2 mt-3" aria-labelledby="pageSections">
+      <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+        Page Headers
+      </a>
+      <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+        Features
+      </a>
+      <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+        Pricing
+      </a>
+      <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+        FAQ
+      </a>
+      <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+        Blog Posts
+      </a>
+      <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+        Testimonials
+      </a>
+      <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+        Teams
+      </a>
+      <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+        Stats
+      </a>
+      <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+        Call to Actions
+      </a>
+      <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+        Logo Areas
+      </a>
+    </div>
+  </li>
+</div>
+
+<div class="row d-lg-none">
+  <div class="col-md-12">
+    <div class="d-flex mb-2">
+      <div class="icon h-10 me-3 d-flex mt-1">
+        <i class="ni ni-single-copy-04 text-gradient text-primary"></i>
+      </div>
+      <div class="w-100 d-flex align-items-center justify-content-between">
+        <div>
+          <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Page Sections</h6>
+        </div>
+      </div>
+    </div>
+    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+      Page Headers
+    </a>
+    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+      Features
+    </a>
+    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+      Pricing
+    </a>
+    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+      FAQ
+    </a>
+    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+      Blog Posts
+    </a>
+    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+      Testimonials
+    </a>
+    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+      Teams
+    </a>
+    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+      Stats
+    </a>
+    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+      Call to Actions
+    </a>
+    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+      Applications
+    </a>
+  </div>
+</div>
+
+          </ul>
+        </li>
+
+        <li class="nav-item dropdown dropdown-hover mx-2">
+          <a class="nav-link ps-2 d-flex cursor-pointer align-items-center" id="dropdownMenuDocs" data-bs-toggle="dropdown" aria-expanded="false">
+            <i class="material-icons opacity-6 me-2 text-md">article</i>
+            Docs
+            <img src="{% static 'img/down-arrow-white.svg' %}" alt="down-arrow" class="arrow ms-auto ms-md-2">
+          </a>
+          <ul class="dropdown-menu dropdown-menu-animation dropdown-menu-end dropdown-md dropdown-md-responsive mt-0 mt-lg-3 p-3 border-radius-lg" aria-labelledby="dropdownMenuDocs">
+            <div class="d-none d-lg-block">
+  <li class="nav-item ">
+    <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
+      <div class="d-flex">
+        <div class="icon h-10 me-3 d-flex mt-1">
+          <svg class="text-secondary" width="16px" height="16px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <title>spaceship</title>
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                  <g transform="translate(-1720.000000, -592.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                      <g transform="translate(1716.000000, 291.000000)">
+                          <g transform="translate(4.000000, 301.000000)">
+                              <path class="color-background" d="M39.3,0.706666667 C38.9660984,0.370464027 38.5048767,0.192278529 38.0316667,0.216666667 C14.6516667,1.43666667 6.015,22.2633333 5.93166667,22.4733333 C5.68236407,23.0926189 5.82664679,23.8009159 6.29833333,24.2733333 L15.7266667,33.7016667 C16.2013871,34.1756798 16.9140329,34.3188658 17.535,34.065 C17.7433333,33.98 38.4583333,25.2466667 39.7816667,1.97666667 C39.8087196,1.50414529 39.6335979,1.04240574 39.3,0.706666667 Z M25.69,19.0233333 C24.7367525,19.9768687 23.3029475,20.2622391 22.0572426,19.7463614 C20.8115377,19.2304837 19.9992882,18.0149658 19.9992882,16.6666667 C19.9992882,15.3183676 20.8115377,14.1028496 22.0572426,13.5869719 C23.3029475,13.0710943 24.7367525,13.3564646 25.69,14.31 C26.9912731,15.6116662 26.9912731,17.7216672 25.69,19.0233333 L25.69,19.0233333 Z"></path>
+                              <path class="color-background" d="M1.855,31.4066667 C3.05106558,30.2024182 4.79973884,29.7296005 6.43969145,30.1670277 C8.07964407,30.6044549 9.36054508,31.8853559 9.7979723,33.5253085 C10.2353995,35.1652612 9.76258177,36.9139344 8.55833333,38.11 C6.70666667,39.9616667 0,40 0,40 C0,40 0,33.2566667 1.855,31.4066667 Z"></path>
+                              <path class="color-background" d="M17.2616667,3.90166667 C12.4943643,3.07192755 7.62174065,4.61673894 4.20333333,8.04166667 C3.31200265,8.94126033 2.53706177,9.94913142 1.89666667,11.0416667 C1.5109569,11.6966059 1.61721591,12.5295394 2.155,13.0666667 L5.47,16.3833333 C8.55036617,11.4946947 12.5559074,7.25476565 17.2616667,3.90166667 L17.2616667,3.90166667 Z" opacity="0.598539807"></path>
+                              <path class="color-background" d="M36.0983333,22.7383333 C36.9280725,27.5056357 35.3832611,32.3782594 31.9583333,35.7966667 C31.0587397,36.6879974 30.0508686,37.4629382 28.9583333,38.1033333 C28.3033941,38.4890431 27.4704606,38.3827841 26.9333333,37.845 L23.6166667,34.53 C28.5053053,31.4496338 32.7452344,27.4440926 36.0983333,22.7383333 L36.0983333,22.7383333 Z" opacity="0.598539807"></path>
+                          </g>
+                      </g>
+                  </g>
+              </g>
+          </svg>
+        </div>
+        <div>
+          <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Getting Started</h6>
+          <span class="text-sm">All about overview, quick start, license and contents</span>
+        </div>
+      </div>
+    </a>
+  </li>
+  <li class="nav-item ">
+    <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
+      <div class="d-flex">
+        <div class="icon h-10 me-3 d-flex mt-1">
+          <svg class="text-secondary" width="16px" height="16px" viewBox="0 0 40 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <title>document</title>
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                  <g transform="translate(-1870.000000, -591.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                      <g transform="translate(1716.000000, 291.000000)">
+                          <g id="document" transform="translate(154.000000, 300.000000)">
+                              <path class="color-background" d="M40,40 L36.3636364,40 L36.3636364,3.63636364 L5.45454545,3.63636364 L5.45454545,0 L38.1818182,0 C39.1854545,0 40,0.814545455 40,1.81818182 L40,40 Z" opacity="0.603585379"></path>
+                              <path class="color-background" d="M30.9090909,7.27272727 L1.81818182,7.27272727 C0.814545455,7.27272727 0,8.08727273 0,9.09090909 L0,41.8181818 C0,42.8218182 0.814545455,43.6363636 1.81818182,43.6363636 L30.9090909,43.6363636 C31.9127273,43.6363636 32.7272727,42.8218182 32.7272727,41.8181818 L32.7272727,9.09090909 C32.7272727,8.08727273 31.9127273,7.27272727 30.9090909,7.27272727 Z M18.1818182,34.5454545 L7.27272727,34.5454545 L7.27272727,30.9090909 L18.1818182,30.9090909 L18.1818182,34.5454545 Z M25.4545455,27.2727273 L7.27272727,27.2727273 L7.27272727,23.6363636 L25.4545455,23.6363636 L25.4545455,27.2727273 Z M25.4545455,20 L7.27272727,20 L7.27272727,16.3636364 L25.4545455,16.3636364 L25.4545455,20 Z"></path>
+                          </g>
+                      </g>
+                  </g>
+              </g>
+          </svg>
+        </div>
+        <div>
+          <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Foundation</h6>
+          <span class="text-sm">See our colors, icons and typography</span>
+        </div>
+      </div>
+    </a>
+  </li>
+  <li class="nav-item ">
+    <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
+      <div class="d-flex">
+        <div class="icon h-10 me-3 d-flex mt-1">
+          <svg class="text-secondary" width="16px" height="16px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <title>box-3d-50</title>
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                  <g transform="translate(-2319.000000, -291.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                      <g transform="translate(1716.000000, 291.000000)">
+                          <g id="box-3d-50" transform="translate(603.000000, 0.000000)">
+                              <path class="color-background" d="M22.7597136,19.3090182 L38.8987031,11.2395234 C39.3926816,10.9925342 39.592906,10.3918611 39.3459167,9.89788265 C39.249157,9.70436312 39.0922432,9.5474453 38.8987261,9.45068056 L20.2741875,0.1378125 L20.2741875,0.1378125 C19.905375,-0.04725 19.469625,-0.04725 19.0995,0.1378125 L3.1011696,8.13815822 C2.60720568,8.38517662 2.40701679,8.98586148 2.6540352,9.4798254 C2.75080129,9.67332903 2.90771305,9.83023153 3.10122239,9.9269862 L21.8652864,19.3090182 C22.1468139,19.4497819 22.4781861,19.4497819 22.7597136,19.3090182 Z"></path>
+                              <path class="color-background" d="M23.625,22.429159 L23.625,39.8805372 C23.625,40.4328219 24.0727153,40.8805372 24.625,40.8805372 C24.7802551,40.8805372 24.9333778,40.8443874 25.0722402,40.7749511 L41.2741875,32.673375 L41.2741875,32.673375 C41.719125,32.4515625 42,31.9974375 42,31.5 L42,14.241659 C42,13.6893742 41.5522847,13.241659 41,13.241659 C40.8447549,13.241659 40.6916418,13.2778041 40.5527864,13.3472318 L24.1777864,21.5347318 C23.8390024,21.7041238 23.625,22.0503869 23.625,22.429159 Z" opacity="0.7"></path>
+                              <path class="color-background" d="M20.4472136,21.5347318 L1.4472136,12.0347318 C0.953235098,11.7877425 0.352562058,11.9879669 0.105572809,12.4819454 C0.0361450918,12.6208008 6.47121774e-16,12.7739139 0,12.929159 L0,30.1875 L0,30.1875 C0,30.6849375 0.280875,31.1390625 0.7258125,31.3621875 L19.5528096,40.7750766 C20.0467945,41.0220531 20.6474623,40.8218132 20.8944388,40.3278283 C20.963859,40.1889789 21,40.0358742 21,39.8806379 L21,22.429159 C21,22.0503869 20.7859976,21.7041238 20.4472136,21.5347318 Z" opacity="0.7"></path>
+                          </g>
+                      </g>
+                  </g>
+              </g>
+          </svg>
+        </div>
+        <div>
+          <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Components</h6>
+          <span class="text-sm">Explore our collection of fully designed components</span>
+        </div>
+      </div>
+    </a>
+  </li>
+  <li class="nav-item ">
+    <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
+      <div class="d-flex">
+        <div class="icon h-10 me-3 d-flex mt-1">
+          <svg class="text-secondary" width="16px" height="16px" viewBox="0 0 40 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <title>switches</title>
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                  <g transform="translate(-1870.000000, -440.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                      <g transform="translate(1716.000000, 291.000000)">
+                          <g transform="translate(154.000000, 149.000000)">
+                              <path class="color-background" d="M10,20 L30,20 C35.4545455,20 40,15.4545455 40,10 C40,4.54545455 35.4545455,0 30,0 L10,0 C4.54545455,0 0,4.54545455 0,10 C0,15.4545455 4.54545455,20 10,20 Z M10,3.63636364 C13.4545455,3.63636364 16.3636364,6.54545455 16.3636364,10 C16.3636364,13.4545455 13.4545455,16.3636364 10,16.3636364 C6.54545455,16.3636364 3.63636364,13.4545455 3.63636364,10 C3.63636364,6.54545455 6.54545455,3.63636364 10,3.63636364 Z" opacity="0.6"></path>
+                              <path class="color-background" d="M30,23.6363636 L10,23.6363636 C4.54545455,23.6363636 0,28.1818182 0,33.6363636 C0,39.0909091 4.54545455,43.6363636 10,43.6363636 L30,43.6363636 C35.4545455,43.6363636 40,39.0909091 40,33.6363636 C40,28.1818182 35.4545455,23.6363636 30,23.6363636 Z M30,40 C26.5454545,40 23.6363636,37.0909091 23.6363636,33.6363636 C23.6363636,30.1818182 26.5454545,27.2727273 30,27.2727273 C33.4545455,27.2727273 36.3636364,30.1818182 36.3636364,33.6363636 C36.3636364,37.0909091 33.4545455,40 30,40 Z"></path>
+                          </g>
+                      </g>
+                  </g>
+              </g>
+          </svg>
+        </div>
+        <div>
+          <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Plugins</h6>
+          <span class="text-sm">Check how you can integrate our plugins</span>
+        </div>
+      </div>
+    </a>
+  </li>
+  <li class="nav-item ">
+    <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
+      <div class="d-flex">
+        <div class="icon h-10 me-3 d-flex mt-1">
+          <svg class="text-secondary" width="16px" height="16px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <title>settings</title>
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                  <g transform="translate(-2020.000000, -442.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                      <g transform="translate(1716.000000, 291.000000)">
+                          <g transform="translate(304.000000, 151.000000)">
+                              <polygon class="color-background" opacity="0.596981957" points="18.0883333 15.7316667 11.1783333 8.82166667 13.3333333 6.66666667 6.66666667 0 0 6.66666667 6.66666667 13.3333333 8.82166667 11.1783333 15.315 17.6716667"></polygon>
+                              <path class="color-background" d="M31.5666667,23.2333333 C31.0516667,23.2933333 30.53,23.3333333 30,23.3333333 C29.4916667,23.3333333 28.9866667,23.3033333 28.48,23.245 L22.4116667,30.7433333 L29.9416667,38.2733333 C32.2433333,40.575 35.9733333,40.575 38.275,38.2733333 L38.275,38.2733333 C40.5766667,35.9716667 40.5766667,32.2416667 38.275,29.94 L31.5666667,23.2333333 Z" opacity="0.596981957"></path>
+                              <path class="color-background" d="M33.785,11.285 L28.715,6.215 L34.0616667,0.868333333 C32.82,0.315 31.4483333,0 30,0 C24.4766667,0 20,4.47666667 20,10 C20,10.99 20.1483333,11.9433333 20.4166667,12.8466667 L2.435,27.3966667 C0.95,28.7083333 0.0633333333,30.595 0.00333333333,32.5733333 C-0.0583333333,34.5533333 0.71,36.4916667 2.11,37.89 C3.47,39.2516667 5.27833333,40 7.20166667,40 C9.26666667,40 11.2366667,39.1133333 12.6033333,37.565 L27.1533333,19.5833333 C28.0566667,19.8516667 29.01,20 30,20 C35.5233333,20 40,15.5233333 40,10 C40,8.55166667 39.685,7.18 39.1316667,5.93666667 L33.785,11.285 Z"></path>
+                          </g>
+                      </g>
+                  </g>
+              </g>
+          </svg>
+        </div>
+        <div>
+          <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Utility Classes</h6>
+          <span class="text-sm">For those who want flexibility, use our utility classes</span>
+        </div>
+      </div>
+    </a>
+  </li>
+</div>
+
+<div class="row d-lg-none">
+  <div class="col-md-12 g-0">
+    <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
+      <div class="d-flex">
+        <div class="icon h-10 me-3 d-flex mt-1">
+          <svg class="text-secondary" width="16px" height="16px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <title>spaceship</title>
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                <g transform="translate(-1720.000000, -592.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                  <g transform="translate(1716.000000, 291.000000)">
+                    <g transform="translate(4.000000, 301.000000)">
+                      <path class="color-background" d="M39.3,0.706666667 C38.9660984,0.370464027 38.5048767,0.192278529 38.0316667,0.216666667 C14.6516667,1.43666667 6.015,22.2633333 5.93166667,22.4733333 C5.68236407,23.0926189 5.82664679,23.8009159 6.29833333,24.2733333 L15.7266667,33.7016667 C16.2013871,34.1756798 16.9140329,34.3188658 17.535,34.065 C17.7433333,33.98 38.4583333,25.2466667 39.7816667,1.97666667 C39.8087196,1.50414529 39.6335979,1.04240574 39.3,0.706666667 Z M25.69,19.0233333 C24.7367525,19.9768687 23.3029475,20.2622391 22.0572426,19.7463614 C20.8115377,19.2304837 19.9992882,18.0149658 19.9992882,16.6666667 C19.9992882,15.3183676 20.8115377,14.1028496 22.0572426,13.5869719 C23.3029475,13.0710943 24.7367525,13.3564646 25.69,14.31 C26.9912731,15.6116662 26.9912731,17.7216672 25.69,19.0233333 L25.69,19.0233333 Z"></path>
+                      <path class="color-background" d="M1.855,31.4066667 C3.05106558,30.2024182 4.79973884,29.7296005 6.43969145,30.1670277 C8.07964407,30.6044549 9.36054508,31.8853559 9.7979723,33.5253085 C10.2353995,35.1652612 9.76258177,36.9139344 8.55833333,38.11 C6.70666667,39.9616667 0,40 0,40 C0,40 0,33.2566667 1.855,31.4066667 Z"></path>
+                      <path class="color-background" d="M17.2616667,3.90166667 C12.4943643,3.07192755 7.62174065,4.61673894 4.20333333,8.04166667 C3.31200265,8.94126033 2.53706177,9.94913142 1.89666667,11.0416667 C1.5109569,11.6966059 1.61721591,12.5295394 2.155,13.0666667 L5.47,16.3833333 C8.55036617,11.4946947 12.5559074,7.25476565 17.2616667,3.90166667 L17.2616667,3.90166667 Z" opacity="0.598539807"></path>
+                      <path class="color-background" d="M36.0983333,22.7383333 C36.9280725,27.5056357 35.3832611,32.3782594 31.9583333,35.7966667 C31.0587397,36.6879974 30.0508686,37.4629382 28.9583333,38.1033333 C28.3033941,38.4890431 27.4704606,38.3827841 26.9333333,37.845 L23.6166667,34.53 C28.5053053,31.4496338 32.7452344,27.4440926 36.0983333,22.7383333 L36.0983333,22.7383333 Z" opacity="0.598539807"></path>
+                    </g>
+                  </g>
+                </g>
+              </g>
+            </svg>
+          </div>
+        <div>
+          <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Getting Started</h6>
+          <span class="text-sm">All about overview, quick start, license and contents</span>
+        </div>
+      </div>
+    </a>
+
+    <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
+      <div class="d-flex">
+        <div class="icon h-10 me-3 d-flex mt-1">
+          <svg class="text-secondary" width="16px" height="16px" viewBox="0 0 40 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+            <title>document</title>
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                <g transform="translate(-1870.000000, -591.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                  <g transform="translate(1716.000000, 291.000000)">
+                    <g transform="translate(154.000000, 300.000000)">
+                      <path class="color-background" d="M40,40 L36.3636364,40 L36.3636364,3.63636364 L5.45454545,3.63636364 L5.45454545,0 L38.1818182,0 C39.1854545,0 40,0.814545455 40,1.81818182 L40,40 Z" opacity="0.603585379"></path>
+                      <path class="color-background" d="M30.9090909,7.27272727 L1.81818182,7.27272727 C0.814545455,7.27272727 0,8.08727273 0,9.09090909 L0,41.8181818 C0,42.8218182 0.814545455,43.6363636 1.81818182,43.6363636 L30.9090909,43.6363636 C31.9127273,43.6363636 32.7272727,42.8218182 32.7272727,41.8181818 L32.7272727,9.09090909 C32.7272727,8.08727273 31.9127273,7.27272727 30.9090909,7.27272727 Z M18.1818182,34.5454545 L7.27272727,34.5454545 L7.27272727,30.9090909 L18.1818182,30.9090909 L18.1818182,34.5454545 Z M25.4545455,27.2727273 L7.27272727,27.2727273 L7.27272727,23.6363636 L25.4545455,23.6363636 L25.4545455,27.2727273 Z M25.4545455,20 L7.27272727,20 L7.27272727,16.3636364 L25.4545455,16.3636364 L25.4545455,20 Z"></path>
+                    </g>
+                  </g>
+                </g>
+              </g>
+            </svg>
+          </div>
+        <div>
+          <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Foundation</h6>
+          <span class="text-sm">See our colors, icons and typography</span>
+        </div>
+      </div>
+    </a>
+
+    <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
+      <div class="d-flex">
+        <div class="icon h-10 me-3 d-flex mt-1">
+          <svg class="text-secondary" width="16px" height="16px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <title>box-3d-50</title>
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                  <g transform="translate(-2319.000000, -291.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                      <g transform="translate(1716.000000, 291.000000)">
+                          <g transform="translate(603.000000, 0.000000)">
+                              <path class="color-background" d="M22.7597136,19.3090182 L38.8987031,11.2395234 C39.3926816,10.9925342 39.592906,10.3918611 39.3459167,9.89788265 C39.249157,9.70436312 39.0922432,9.5474453 38.8987261,9.45068056 L20.2741875,0.1378125 L20.2741875,0.1378125 C19.905375,-0.04725 19.469625,-0.04725 19.0995,0.1378125 L3.1011696,8.13815822 C2.60720568,8.38517662 2.40701679,8.98586148 2.6540352,9.4798254 C2.75080129,9.67332903 2.90771305,9.83023153 3.10122239,9.9269862 L21.8652864,19.3090182 C22.1468139,19.4497819 22.4781861,19.4497819 22.7597136,19.3090182 Z"></path>
+                              <path class="color-background" d="M23.625,22.429159 L23.625,39.8805372 C23.625,40.4328219 24.0727153,40.8805372 24.625,40.8805372 C24.7802551,40.8805372 24.9333778,40.8443874 25.0722402,40.7749511 L41.2741875,32.673375 L41.2741875,32.673375 C41.719125,32.4515625 42,31.9974375 42,31.5 L42,14.241659 C42,13.6893742 41.5522847,13.241659 41,13.241659 C40.8447549,13.241659 40.6916418,13.2778041 40.5527864,13.3472318 L24.1777864,21.5347318 C23.8390024,21.7041238 23.625,22.0503869 23.625,22.429159 Z" opacity="0.7"></path>
+                              <path class="color-background" d="M20.4472136,21.5347318 L1.4472136,12.0347318 C0.953235098,11.7877425 0.352562058,11.9879669 0.105572809,12.4819454 C0.0361450918,12.6208008 6.47121774e-16,12.7739139 0,12.929159 L0,30.1875 L0,30.1875 C0,30.6849375 0.280875,31.1390625 0.7258125,31.3621875 L19.5528096,40.7750766 C20.0467945,41.0220531 20.6474623,40.8218132 20.8944388,40.3278283 C20.963859,40.1889789 21,40.0358742 21,39.8806379 L21,22.429159 C21,22.0503869 20.7859976,21.7041238 20.4472136,21.5347318 Z" opacity="0.7"></path>
+                          </g>
+                      </g>
+                  </g>
+              </g>
+          </svg>
+        </div>
+        <div>
+          <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Components</h6>
+          <span class="text-sm">Explore our collection of fully designed components</span>
+        </div>
+      </div>
+    </a>
+
+    <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
+      <div class="d-flex">
+        <div class="icon h-10 me-3 d-flex mt-1">
+          <svg class="text-secondary" width="16px" height="16px" viewBox="0 0 40 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <title>switches</title>
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                  <g transform="translate(-1870.000000, -440.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                      <g transform="translate(1716.000000, 291.000000)">
+                          <g transform="translate(154.000000, 149.000000)">
+                              <path class="color-background" d="M10,20 L30,20 C35.4545455,20 40,15.4545455 40,10 C40,4.54545455 35.4545455,0 30,0 L10,0 C4.54545455,0 0,4.54545455 0,10 C0,15.4545455 4.54545455,20 10,20 Z M10,3.63636364 C13.4545455,3.63636364 16.3636364,6.54545455 16.3636364,10 C16.3636364,13.4545455 13.4545455,16.3636364 10,16.3636364 C6.54545455,16.3636364 3.63636364,13.4545455 3.63636364,10 C3.63636364,6.54545455 6.54545455,3.63636364 10,3.63636364 Z" opacity="0.6"></path>
+                              <path class="color-background" d="M30,23.6363636 L10,23.6363636 C4.54545455,23.6363636 0,28.1818182 0,33.6363636 C0,39.0909091 4.54545455,43.6363636 10,43.6363636 L30,43.6363636 C35.4545455,43.6363636 40,39.0909091 40,33.6363636 C40,28.1818182 35.4545455,23.6363636 30,23.6363636 Z M30,40 C26.5454545,40 23.6363636,37.0909091 23.6363636,33.6363636 C23.6363636,30.1818182 26.5454545,27.2727273 30,27.2727273 C33.4545455,27.2727273 36.3636364,30.1818182 36.3636364,33.6363636 C36.3636364,37.0909091 33.4545455,40 30,40 Z"></path>
+                          </g>
+                      </g>
+                  </g>
+              </g>
+          </svg>
+        </div>
+        <div>
+          <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Plugins</h6>
+          <span class="text-sm">Check how you can integrate our plugins</span>
+        </div>
+      </div>
+    </a>
+
+    <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
+      <div class="d-flex">
+        <div class="icon h-10 me-3 d-flex mt-1">
+          <svg class="text-secondary" width="16px" height="16px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <title>settings</title>
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                  <g transform="translate(-2020.000000, -442.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                      <g transform="translate(1716.000000, 291.000000)">
+                          <g transform="translate(304.000000, 151.000000)">
+                              <polygon class="color-background" opacity="0.596981957" points="18.0883333 15.7316667 11.1783333 8.82166667 13.3333333 6.66666667 6.66666667 0 0 6.66666667 6.66666667 13.3333333 8.82166667 11.1783333 15.315 17.6716667"></polygon>
+                              <path class="color-background" d="M31.5666667,23.2333333 C31.0516667,23.2933333 30.53,23.3333333 30,23.3333333 C29.4916667,23.3333333 28.9866667,23.3033333 28.48,23.245 L22.4116667,30.7433333 L29.9416667,38.2733333 C32.2433333,40.575 35.9733333,40.575 38.275,38.2733333 L38.275,38.2733333 C40.5766667,35.9716667 40.5766667,32.2416667 38.275,29.94 L31.5666667,23.2333333 Z" opacity="0.596981957"></path>
+                              <path class="color-background" d="M33.785,11.285 L28.715,6.215 L34.0616667,0.868333333 C32.82,0.315 31.4483333,0 30,0 C24.4766667,0 20,4.47666667 20,10 C20,10.99 20.1483333,11.9433333 20.4166667,12.8466667 L2.435,27.3966667 C0.95,28.7083333 0.0633333333,30.595 0.00333333333,32.5733333 C-0.0583333333,34.5533333 0.71,36.4916667 2.11,37.89 C3.47,39.2516667 5.27833333,40 7.20166667,40 C9.26666667,40 11.2366667,39.1133333 12.6033333,37.565 L27.1533333,19.5833333 C28.0566667,19.8516667 29.01,20 30,20 C35.5233333,20 40,15.5233333 40,10 C40,8.55166667 39.685,7.18 39.1316667,5.93666667 L33.785,11.285 Z"></path>
+                          </g>
+                      </g>
+                  </g>
+              </g>
+          </svg>
+        </div>
+        <div>
+          <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Utility Classes</h6>
+          <span class="text-sm">All about overview, quick start, license and contents</span>
+        </div>
+      </div>
+    </a>
+  </div>
+</div>
+
+          </ul>
+        </li>
+        <li class="nav-item ms-lg-auto my-auto ms-3 ms-lg-0 mt-2 mt-lg-0">
+          <a href="https://appseed.us/product/material-kit2-pro/django/" class="btn btn-sm  bg-gradient-primary  mb-0 me-1 mt-2 mt-md-0">Upgrade to Pro</a></li>
+      </ul>
+    </div>
+  </div>
+</nav>
+<!-- End Navbar -->
+
+  
+
+
+
+
+
+ + +
+
+
+
+
+

Navbar blur

+
+
+ +
+
+
+
+
+ +
+
+
+ Copy +
  <!-- Navbar -->
+<div class="container position-sticky z-index-sticky top-0"><div class="row"><div class="col-12">
+<nav class="navbar navbar-expand-lg  blur border-radius-xl top-0 z-index-fixed shadow position-absolute my-3 py-2 start-0 end-0 mx-4">
+  <div class="container-fluid">
+    <a class="navbar-brand font-weight-bolder ms-sm-3" href="https://demos.creative-tim.com/material-kit/presentation" rel="tooltip" title="Designed and Coded by Creative Tim" data-placement="bottom" target="_blank">
+      Material Kit 2
+    </a>
+    <button class="navbar-toggler shadow-none ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon mt-2">
+        <span class="navbar-toggler-bar bar1"></span>
+        <span class="navbar-toggler-bar bar2"></span>
+        <span class="navbar-toggler-bar bar3"></span>
+      </span>
+    </button>
+    <div class="collapse navbar-collapse pt-3 pb-2 py-lg-0" id="navigation">
+      <ul class="navbar-nav navbar-nav-hover ms-lg-12 ps-lg-5 w-100">
+        <li class="nav-item dropdown dropdown-hover mx-2">
+          <a class="nav-link ps-2 d-flex cursor-pointer align-items-center" id="dropdownMenuPages" data-bs-toggle="dropdown" aria-expanded="false">
+            <i class="material-icons opacity-6 me-2 text-md">dashboard</i>
+            Pages
+            <img src="{% static 'img/down-arrow-dark.svg' %}" alt="down-arrow" class="arrow ms-auto">
+          </a>
+          <div class="dropdown-menu dropdown-menu-animation ms-n3 dropdown-md p-3 border-radius-lg mt-0 mt-lg-3" aria-labelledby="dropdownMenuPages">
+            <div class="d-none d-lg-block">
+  <a href="javascript:;" class="dropdown-item border-radius-md">
+    About Us
+  </a>
+  <a href="javascript:;" class="dropdown-item border-radius-md">
+    Contact Us
+  </a>
+  <a href="javascript:;" class="dropdown-item border-radius-md">
+    Author
+  </a>
+  <a href="javascript:;" class="dropdown-item border-radius-md">
+    Sign In
+  </a>
+</div>
+
+<div class="d-lg-none">
+  <a href="javascript:;" class="dropdown-item border-radius-md">
+    About Us
+  </a>
+  <a href="javascript:;" class="dropdown-item border-radius-md">
+    Contact Us
+  </a>
+  <a href="javascript:;" class="dropdown-item border-radius-md">
+    Author
+  </a>
+  <a href="javascript:;" class="dropdown-item border-radius-md">
+    Sign In
+  </a>
+</div>
+
+          </div>
+        </li>
+
+        <li class="nav-item dropdown dropdown-hover mx-2">
+          <a class="nav-link ps-2 d-flex cursor-pointer align-items-center" id="dropdownMenuBlocks" data-bs-toggle="dropdown" aria-expanded="false">
+            <i class="material-icons opacity-6 me-2 text-md">view_day</i>
+            Sections
+            <img src="{% static 'img/down-arrow-dark.svg' %}" alt="down-arrow" class="arrow ms-auto">
+          </a>
+          <ul class="dropdown-menu dropdown-menu-animation dropdown-lg dropdown-lg-responsive p-3 border-radius-lg mt-0 mt-lg-3" aria-labelledby="dropdownMenuBlocks">
+            <div class="d-none d-lg-block">
+  <li class="nav-item dropdown dropdown-hover dropdown-subitem">
+    <a class="dropdown-item py-2 ps-3 border-radius-md" href="./presentation.html">
+      <div class="d-flex">
+        <div class="icon h-10 me-3 d-flex mt-1">
+          <i class="ni ni-single-copy-04 text-gradient text-primary"></i>
+        </div>
+        <div class="w-100 d-flex align-items-center justify-content-between">
+          <div>
+            <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Page Sections</h6>
+            <span class="text-sm">See all 109 sections</span>
+          </div>
+
+          <img src="{% static 'img/down-arrow.svg' %}" alt="down-arrow" class="arrow">
+        </div>
+      </div>
+    </a>
+    <div class="dropdown-menu mt-0 py-3 px-2 mt-3" aria-labelledby="pageSections">
+      <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+        Page Headers
+      </a>
+      <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+        Features
+      </a>
+      <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+        Pricing
+      </a>
+      <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+        FAQ
+      </a>
+      <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+        Blog Posts
+      </a>
+      <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+        Testimonials
+      </a>
+      <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+        Teams
+      </a>
+      <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+        Stats
+      </a>
+      <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+        Call to Actions
+      </a>
+      <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+        Logo Areas
+      </a>
+    </div>
+  </li>
+</div>
+
+<div class="row d-lg-none">
+  <div class="col-md-12">
+    <div class="d-flex mb-2">
+      <div class="icon h-10 me-3 d-flex mt-1">
+        <i class="ni ni-single-copy-04 text-gradient text-primary"></i>
+      </div>
+      <div class="w-100 d-flex align-items-center justify-content-between">
+        <div>
+          <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Page Sections</h6>
+        </div>
+      </div>
+    </div>
+    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+      Page Headers
+    </a>
+    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+      Features
+    </a>
+    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+      Pricing
+    </a>
+    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+      FAQ
+    </a>
+    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+      Blog Posts
+    </a>
+    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+      Testimonials
+    </a>
+    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+      Teams
+    </a>
+    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+      Stats
+    </a>
+    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+      Call to Actions
+    </a>
+    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+      Applications
+    </a>
+  </div>
+</div>
+
+          </ul>
+        </li>
+
+        <li class="nav-item dropdown dropdown-hover mx-2">
+          <a class="nav-link ps-2 d-flex cursor-pointer align-items-center" id="dropdownMenuDocs" data-bs-toggle="dropdown" aria-expanded="false">
+            <i class="material-icons opacity-6 me-2 text-md">article</i>
+            Docs
+            <img src="{% static 'img/down-arrow-dark.svg' %}" alt="down-arrow" class="arrow ms-auto">
+          </a>
+          <ul class="dropdown-menu dropdown-menu-animation dropdown-lg mt-0 mt-lg-3 p-3 border-radius-lg" aria-labelledby="dropdownMenuDocs">
+            <div class="d-none d-lg-block">
+  <li class="nav-item ">
+    <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
+      <div class="d-flex">
+        <div class="icon h-10 me-3 d-flex mt-1">
+          <svg class="text-secondary" width="16px" height="16px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <title>spaceship</title>
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                  <g transform="translate(-1720.000000, -592.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                      <g transform="translate(1716.000000, 291.000000)">
+                          <g transform="translate(4.000000, 301.000000)">
+                              <path class="color-background" d="M39.3,0.706666667 C38.9660984,0.370464027 38.5048767,0.192278529 38.0316667,0.216666667 C14.6516667,1.43666667 6.015,22.2633333 5.93166667,22.4733333 C5.68236407,23.0926189 5.82664679,23.8009159 6.29833333,24.2733333 L15.7266667,33.7016667 C16.2013871,34.1756798 16.9140329,34.3188658 17.535,34.065 C17.7433333,33.98 38.4583333,25.2466667 39.7816667,1.97666667 C39.8087196,1.50414529 39.6335979,1.04240574 39.3,0.706666667 Z M25.69,19.0233333 C24.7367525,19.9768687 23.3029475,20.2622391 22.0572426,19.7463614 C20.8115377,19.2304837 19.9992882,18.0149658 19.9992882,16.6666667 C19.9992882,15.3183676 20.8115377,14.1028496 22.0572426,13.5869719 C23.3029475,13.0710943 24.7367525,13.3564646 25.69,14.31 C26.9912731,15.6116662 26.9912731,17.7216672 25.69,19.0233333 L25.69,19.0233333 Z"></path>
+                              <path class="color-background" d="M1.855,31.4066667 C3.05106558,30.2024182 4.79973884,29.7296005 6.43969145,30.1670277 C8.07964407,30.6044549 9.36054508,31.8853559 9.7979723,33.5253085 C10.2353995,35.1652612 9.76258177,36.9139344 8.55833333,38.11 C6.70666667,39.9616667 0,40 0,40 C0,40 0,33.2566667 1.855,31.4066667 Z"></path>
+                              <path class="color-background" d="M17.2616667,3.90166667 C12.4943643,3.07192755 7.62174065,4.61673894 4.20333333,8.04166667 C3.31200265,8.94126033 2.53706177,9.94913142 1.89666667,11.0416667 C1.5109569,11.6966059 1.61721591,12.5295394 2.155,13.0666667 L5.47,16.3833333 C8.55036617,11.4946947 12.5559074,7.25476565 17.2616667,3.90166667 L17.2616667,3.90166667 Z" opacity="0.598539807"></path>
+                              <path class="color-background" d="M36.0983333,22.7383333 C36.9280725,27.5056357 35.3832611,32.3782594 31.9583333,35.7966667 C31.0587397,36.6879974 30.0508686,37.4629382 28.9583333,38.1033333 C28.3033941,38.4890431 27.4704606,38.3827841 26.9333333,37.845 L23.6166667,34.53 C28.5053053,31.4496338 32.7452344,27.4440926 36.0983333,22.7383333 L36.0983333,22.7383333 Z" opacity="0.598539807"></path>
+                          </g>
+                      </g>
+                  </g>
+              </g>
+          </svg>
+        </div>
+        <div>
+          <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Getting Started</h6>
+          <span class="text-sm">All about overview, quick start, license and contents</span>
+        </div>
+      </div>
+    </a>
+  </li>
+  <li class="nav-item ">
+    <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
+      <div class="d-flex">
+        <div class="icon h-10 me-3 d-flex mt-1">
+          <svg class="text-secondary" width="16px" height="16px" viewBox="0 0 40 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <title>document</title>
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                  <g transform="translate(-1870.000000, -591.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                      <g transform="translate(1716.000000, 291.000000)">
+                          <g id="document" transform="translate(154.000000, 300.000000)">
+                              <path class="color-background" d="M40,40 L36.3636364,40 L36.3636364,3.63636364 L5.45454545,3.63636364 L5.45454545,0 L38.1818182,0 C39.1854545,0 40,0.814545455 40,1.81818182 L40,40 Z" opacity="0.603585379"></path>
+                              <path class="color-background" d="M30.9090909,7.27272727 L1.81818182,7.27272727 C0.814545455,7.27272727 0,8.08727273 0,9.09090909 L0,41.8181818 C0,42.8218182 0.814545455,43.6363636 1.81818182,43.6363636 L30.9090909,43.6363636 C31.9127273,43.6363636 32.7272727,42.8218182 32.7272727,41.8181818 L32.7272727,9.09090909 C32.7272727,8.08727273 31.9127273,7.27272727 30.9090909,7.27272727 Z M18.1818182,34.5454545 L7.27272727,34.5454545 L7.27272727,30.9090909 L18.1818182,30.9090909 L18.1818182,34.5454545 Z M25.4545455,27.2727273 L7.27272727,27.2727273 L7.27272727,23.6363636 L25.4545455,23.6363636 L25.4545455,27.2727273 Z M25.4545455,20 L7.27272727,20 L7.27272727,16.3636364 L25.4545455,16.3636364 L25.4545455,20 Z"></path>
+                          </g>
+                      </g>
+                  </g>
+              </g>
+          </svg>
+        </div>
+        <div>
+          <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Foundation</h6>
+          <span class="text-sm">See our colors, icons and typography</span>
+        </div>
+      </div>
+    </a>
+  </li>
+  <li class="nav-item ">
+    <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
+      <div class="d-flex">
+        <div class="icon h-10 me-3 d-flex mt-1">
+          <svg class="text-secondary" width="16px" height="16px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <title>box-3d-50</title>
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                  <g transform="translate(-2319.000000, -291.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                      <g transform="translate(1716.000000, 291.000000)">
+                          <g id="box-3d-50" transform="translate(603.000000, 0.000000)">
+                              <path class="color-background" d="M22.7597136,19.3090182 L38.8987031,11.2395234 C39.3926816,10.9925342 39.592906,10.3918611 39.3459167,9.89788265 C39.249157,9.70436312 39.0922432,9.5474453 38.8987261,9.45068056 L20.2741875,0.1378125 L20.2741875,0.1378125 C19.905375,-0.04725 19.469625,-0.04725 19.0995,0.1378125 L3.1011696,8.13815822 C2.60720568,8.38517662 2.40701679,8.98586148 2.6540352,9.4798254 C2.75080129,9.67332903 2.90771305,9.83023153 3.10122239,9.9269862 L21.8652864,19.3090182 C22.1468139,19.4497819 22.4781861,19.4497819 22.7597136,19.3090182 Z"></path>
+                              <path class="color-background" d="M23.625,22.429159 L23.625,39.8805372 C23.625,40.4328219 24.0727153,40.8805372 24.625,40.8805372 C24.7802551,40.8805372 24.9333778,40.8443874 25.0722402,40.7749511 L41.2741875,32.673375 L41.2741875,32.673375 C41.719125,32.4515625 42,31.9974375 42,31.5 L42,14.241659 C42,13.6893742 41.5522847,13.241659 41,13.241659 C40.8447549,13.241659 40.6916418,13.2778041 40.5527864,13.3472318 L24.1777864,21.5347318 C23.8390024,21.7041238 23.625,22.0503869 23.625,22.429159 Z" opacity="0.7"></path>
+                              <path class="color-background" d="M20.4472136,21.5347318 L1.4472136,12.0347318 C0.953235098,11.7877425 0.352562058,11.9879669 0.105572809,12.4819454 C0.0361450918,12.6208008 6.47121774e-16,12.7739139 0,12.929159 L0,30.1875 L0,30.1875 C0,30.6849375 0.280875,31.1390625 0.7258125,31.3621875 L19.5528096,40.7750766 C20.0467945,41.0220531 20.6474623,40.8218132 20.8944388,40.3278283 C20.963859,40.1889789 21,40.0358742 21,39.8806379 L21,22.429159 C21,22.0503869 20.7859976,21.7041238 20.4472136,21.5347318 Z" opacity="0.7"></path>
+                          </g>
+                      </g>
+                  </g>
+              </g>
+          </svg>
+        </div>
+        <div>
+          <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Components</h6>
+          <span class="text-sm">Explore our collection of fully designed components</span>
+        </div>
+      </div>
+    </a>
+  </li>
+  <li class="nav-item ">
+    <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
+      <div class="d-flex">
+        <div class="icon h-10 me-3 d-flex mt-1">
+          <svg class="text-secondary" width="16px" height="16px" viewBox="0 0 40 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <title>switches</title>
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                  <g transform="translate(-1870.000000, -440.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                      <g transform="translate(1716.000000, 291.000000)">
+                          <g transform="translate(154.000000, 149.000000)">
+                              <path class="color-background" d="M10,20 L30,20 C35.4545455,20 40,15.4545455 40,10 C40,4.54545455 35.4545455,0 30,0 L10,0 C4.54545455,0 0,4.54545455 0,10 C0,15.4545455 4.54545455,20 10,20 Z M10,3.63636364 C13.4545455,3.63636364 16.3636364,6.54545455 16.3636364,10 C16.3636364,13.4545455 13.4545455,16.3636364 10,16.3636364 C6.54545455,16.3636364 3.63636364,13.4545455 3.63636364,10 C3.63636364,6.54545455 6.54545455,3.63636364 10,3.63636364 Z" opacity="0.6"></path>
+                              <path class="color-background" d="M30,23.6363636 L10,23.6363636 C4.54545455,23.6363636 0,28.1818182 0,33.6363636 C0,39.0909091 4.54545455,43.6363636 10,43.6363636 L30,43.6363636 C35.4545455,43.6363636 40,39.0909091 40,33.6363636 C40,28.1818182 35.4545455,23.6363636 30,23.6363636 Z M30,40 C26.5454545,40 23.6363636,37.0909091 23.6363636,33.6363636 C23.6363636,30.1818182 26.5454545,27.2727273 30,27.2727273 C33.4545455,27.2727273 36.3636364,30.1818182 36.3636364,33.6363636 C36.3636364,37.0909091 33.4545455,40 30,40 Z"></path>
+                          </g>
+                      </g>
+                  </g>
+              </g>
+          </svg>
+        </div>
+        <div>
+          <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Plugins</h6>
+          <span class="text-sm">Check how you can integrate our plugins</span>
+        </div>
+      </div>
+    </a>
+  </li>
+  <li class="nav-item ">
+    <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
+      <div class="d-flex">
+        <div class="icon h-10 me-3 d-flex mt-1">
+          <svg class="text-secondary" width="16px" height="16px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <title>settings</title>
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                  <g transform="translate(-2020.000000, -442.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                      <g transform="translate(1716.000000, 291.000000)">
+                          <g transform="translate(304.000000, 151.000000)">
+                              <polygon class="color-background" opacity="0.596981957" points="18.0883333 15.7316667 11.1783333 8.82166667 13.3333333 6.66666667 6.66666667 0 0 6.66666667 6.66666667 13.3333333 8.82166667 11.1783333 15.315 17.6716667"></polygon>
+                              <path class="color-background" d="M31.5666667,23.2333333 C31.0516667,23.2933333 30.53,23.3333333 30,23.3333333 C29.4916667,23.3333333 28.9866667,23.3033333 28.48,23.245 L22.4116667,30.7433333 L29.9416667,38.2733333 C32.2433333,40.575 35.9733333,40.575 38.275,38.2733333 L38.275,38.2733333 C40.5766667,35.9716667 40.5766667,32.2416667 38.275,29.94 L31.5666667,23.2333333 Z" opacity="0.596981957"></path>
+                              <path class="color-background" d="M33.785,11.285 L28.715,6.215 L34.0616667,0.868333333 C32.82,0.315 31.4483333,0 30,0 C24.4766667,0 20,4.47666667 20,10 C20,10.99 20.1483333,11.9433333 20.4166667,12.8466667 L2.435,27.3966667 C0.95,28.7083333 0.0633333333,30.595 0.00333333333,32.5733333 C-0.0583333333,34.5533333 0.71,36.4916667 2.11,37.89 C3.47,39.2516667 5.27833333,40 7.20166667,40 C9.26666667,40 11.2366667,39.1133333 12.6033333,37.565 L27.1533333,19.5833333 C28.0566667,19.8516667 29.01,20 30,20 C35.5233333,20 40,15.5233333 40,10 C40,8.55166667 39.685,7.18 39.1316667,5.93666667 L33.785,11.285 Z"></path>
+                          </g>
+                      </g>
+                  </g>
+              </g>
+          </svg>
+        </div>
+        <div>
+          <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Utility Classes</h6>
+          <span class="text-sm">For those who want flexibility, use our utility classes</span>
+        </div>
+      </div>
+    </a>
+  </li>
+</div>
+
+<div class="row d-lg-none">
+  <div class="col-md-12 g-0">
+    <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
+      <div class="d-flex">
+        <div class="icon h-10 me-3 d-flex mt-1">
+          <svg class="text-secondary" width="16px" height="16px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <title>spaceship</title>
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                <g transform="translate(-1720.000000, -592.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                  <g transform="translate(1716.000000, 291.000000)">
+                    <g transform="translate(4.000000, 301.000000)">
+                      <path class="color-background" d="M39.3,0.706666667 C38.9660984,0.370464027 38.5048767,0.192278529 38.0316667,0.216666667 C14.6516667,1.43666667 6.015,22.2633333 5.93166667,22.4733333 C5.68236407,23.0926189 5.82664679,23.8009159 6.29833333,24.2733333 L15.7266667,33.7016667 C16.2013871,34.1756798 16.9140329,34.3188658 17.535,34.065 C17.7433333,33.98 38.4583333,25.2466667 39.7816667,1.97666667 C39.8087196,1.50414529 39.6335979,1.04240574 39.3,0.706666667 Z M25.69,19.0233333 C24.7367525,19.9768687 23.3029475,20.2622391 22.0572426,19.7463614 C20.8115377,19.2304837 19.9992882,18.0149658 19.9992882,16.6666667 C19.9992882,15.3183676 20.8115377,14.1028496 22.0572426,13.5869719 C23.3029475,13.0710943 24.7367525,13.3564646 25.69,14.31 C26.9912731,15.6116662 26.9912731,17.7216672 25.69,19.0233333 L25.69,19.0233333 Z"></path>
+                      <path class="color-background" d="M1.855,31.4066667 C3.05106558,30.2024182 4.79973884,29.7296005 6.43969145,30.1670277 C8.07964407,30.6044549 9.36054508,31.8853559 9.7979723,33.5253085 C10.2353995,35.1652612 9.76258177,36.9139344 8.55833333,38.11 C6.70666667,39.9616667 0,40 0,40 C0,40 0,33.2566667 1.855,31.4066667 Z"></path>
+                      <path class="color-background" d="M17.2616667,3.90166667 C12.4943643,3.07192755 7.62174065,4.61673894 4.20333333,8.04166667 C3.31200265,8.94126033 2.53706177,9.94913142 1.89666667,11.0416667 C1.5109569,11.6966059 1.61721591,12.5295394 2.155,13.0666667 L5.47,16.3833333 C8.55036617,11.4946947 12.5559074,7.25476565 17.2616667,3.90166667 L17.2616667,3.90166667 Z" opacity="0.598539807"></path>
+                      <path class="color-background" d="M36.0983333,22.7383333 C36.9280725,27.5056357 35.3832611,32.3782594 31.9583333,35.7966667 C31.0587397,36.6879974 30.0508686,37.4629382 28.9583333,38.1033333 C28.3033941,38.4890431 27.4704606,38.3827841 26.9333333,37.845 L23.6166667,34.53 C28.5053053,31.4496338 32.7452344,27.4440926 36.0983333,22.7383333 L36.0983333,22.7383333 Z" opacity="0.598539807"></path>
+                    </g>
+                  </g>
+                </g>
+              </g>
+            </svg>
+          </div>
+        <div>
+          <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Getting Started</h6>
+          <span class="text-sm">All about overview, quick start, license and contents</span>
+        </div>
+      </div>
+    </a>
+
+    <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
+      <div class="d-flex">
+        <div class="icon h-10 me-3 d-flex mt-1">
+          <svg class="text-secondary" width="16px" height="16px" viewBox="0 0 40 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+            <title>document</title>
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                <g transform="translate(-1870.000000, -591.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                  <g transform="translate(1716.000000, 291.000000)">
+                    <g transform="translate(154.000000, 300.000000)">
+                      <path class="color-background" d="M40,40 L36.3636364,40 L36.3636364,3.63636364 L5.45454545,3.63636364 L5.45454545,0 L38.1818182,0 C39.1854545,0 40,0.814545455 40,1.81818182 L40,40 Z" opacity="0.603585379"></path>
+                      <path class="color-background" d="M30.9090909,7.27272727 L1.81818182,7.27272727 C0.814545455,7.27272727 0,8.08727273 0,9.09090909 L0,41.8181818 C0,42.8218182 0.814545455,43.6363636 1.81818182,43.6363636 L30.9090909,43.6363636 C31.9127273,43.6363636 32.7272727,42.8218182 32.7272727,41.8181818 L32.7272727,9.09090909 C32.7272727,8.08727273 31.9127273,7.27272727 30.9090909,7.27272727 Z M18.1818182,34.5454545 L7.27272727,34.5454545 L7.27272727,30.9090909 L18.1818182,30.9090909 L18.1818182,34.5454545 Z M25.4545455,27.2727273 L7.27272727,27.2727273 L7.27272727,23.6363636 L25.4545455,23.6363636 L25.4545455,27.2727273 Z M25.4545455,20 L7.27272727,20 L7.27272727,16.3636364 L25.4545455,16.3636364 L25.4545455,20 Z"></path>
+                    </g>
+                  </g>
+                </g>
+              </g>
+            </svg>
+          </div>
+        <div>
+          <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Foundation</h6>
+          <span class="text-sm">See our colors, icons and typography</span>
+        </div>
+      </div>
+    </a>
+
+    <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
+      <div class="d-flex">
+        <div class="icon h-10 me-3 d-flex mt-1">
+          <svg class="text-secondary" width="16px" height="16px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <title>box-3d-50</title>
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                  <g transform="translate(-2319.000000, -291.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                      <g transform="translate(1716.000000, 291.000000)">
+                          <g transform="translate(603.000000, 0.000000)">
+                              <path class="color-background" d="M22.7597136,19.3090182 L38.8987031,11.2395234 C39.3926816,10.9925342 39.592906,10.3918611 39.3459167,9.89788265 C39.249157,9.70436312 39.0922432,9.5474453 38.8987261,9.45068056 L20.2741875,0.1378125 L20.2741875,0.1378125 C19.905375,-0.04725 19.469625,-0.04725 19.0995,0.1378125 L3.1011696,8.13815822 C2.60720568,8.38517662 2.40701679,8.98586148 2.6540352,9.4798254 C2.75080129,9.67332903 2.90771305,9.83023153 3.10122239,9.9269862 L21.8652864,19.3090182 C22.1468139,19.4497819 22.4781861,19.4497819 22.7597136,19.3090182 Z"></path>
+                              <path class="color-background" d="M23.625,22.429159 L23.625,39.8805372 C23.625,40.4328219 24.0727153,40.8805372 24.625,40.8805372 C24.7802551,40.8805372 24.9333778,40.8443874 25.0722402,40.7749511 L41.2741875,32.673375 L41.2741875,32.673375 C41.719125,32.4515625 42,31.9974375 42,31.5 L42,14.241659 C42,13.6893742 41.5522847,13.241659 41,13.241659 C40.8447549,13.241659 40.6916418,13.2778041 40.5527864,13.3472318 L24.1777864,21.5347318 C23.8390024,21.7041238 23.625,22.0503869 23.625,22.429159 Z" opacity="0.7"></path>
+                              <path class="color-background" d="M20.4472136,21.5347318 L1.4472136,12.0347318 C0.953235098,11.7877425 0.352562058,11.9879669 0.105572809,12.4819454 C0.0361450918,12.6208008 6.47121774e-16,12.7739139 0,12.929159 L0,30.1875 L0,30.1875 C0,30.6849375 0.280875,31.1390625 0.7258125,31.3621875 L19.5528096,40.7750766 C20.0467945,41.0220531 20.6474623,40.8218132 20.8944388,40.3278283 C20.963859,40.1889789 21,40.0358742 21,39.8806379 L21,22.429159 C21,22.0503869 20.7859976,21.7041238 20.4472136,21.5347318 Z" opacity="0.7"></path>
+                          </g>
+                      </g>
+                  </g>
+              </g>
+          </svg>
+        </div>
+        <div>
+          <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Components</h6>
+          <span class="text-sm">Explore our collection of fully designed components</span>
+        </div>
+      </div>
+    </a>
+
+    <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
+      <div class="d-flex">
+        <div class="icon h-10 me-3 d-flex mt-1">
+          <svg class="text-secondary" width="16px" height="16px" viewBox="0 0 40 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <title>switches</title>
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                  <g transform="translate(-1870.000000, -440.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                      <g transform="translate(1716.000000, 291.000000)">
+                          <g transform="translate(154.000000, 149.000000)">
+                              <path class="color-background" d="M10,20 L30,20 C35.4545455,20 40,15.4545455 40,10 C40,4.54545455 35.4545455,0 30,0 L10,0 C4.54545455,0 0,4.54545455 0,10 C0,15.4545455 4.54545455,20 10,20 Z M10,3.63636364 C13.4545455,3.63636364 16.3636364,6.54545455 16.3636364,10 C16.3636364,13.4545455 13.4545455,16.3636364 10,16.3636364 C6.54545455,16.3636364 3.63636364,13.4545455 3.63636364,10 C3.63636364,6.54545455 6.54545455,3.63636364 10,3.63636364 Z" opacity="0.6"></path>
+                              <path class="color-background" d="M30,23.6363636 L10,23.6363636 C4.54545455,23.6363636 0,28.1818182 0,33.6363636 C0,39.0909091 4.54545455,43.6363636 10,43.6363636 L30,43.6363636 C35.4545455,43.6363636 40,39.0909091 40,33.6363636 C40,28.1818182 35.4545455,23.6363636 30,23.6363636 Z M30,40 C26.5454545,40 23.6363636,37.0909091 23.6363636,33.6363636 C23.6363636,30.1818182 26.5454545,27.2727273 30,27.2727273 C33.4545455,27.2727273 36.3636364,30.1818182 36.3636364,33.6363636 C36.3636364,37.0909091 33.4545455,40 30,40 Z"></path>
+                          </g>
+                      </g>
+                  </g>
+              </g>
+          </svg>
+        </div>
+        <div>
+          <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Plugins</h6>
+          <span class="text-sm">Check how you can integrate our plugins</span>
+        </div>
+      </div>
+    </a>
+
+    <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
+      <div class="d-flex">
+        <div class="icon h-10 me-3 d-flex mt-1">
+          <svg class="text-secondary" width="16px" height="16px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <title>settings</title>
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                  <g transform="translate(-2020.000000, -442.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                      <g transform="translate(1716.000000, 291.000000)">
+                          <g transform="translate(304.000000, 151.000000)">
+                              <polygon class="color-background" opacity="0.596981957" points="18.0883333 15.7316667 11.1783333 8.82166667 13.3333333 6.66666667 6.66666667 0 0 6.66666667 6.66666667 13.3333333 8.82166667 11.1783333 15.315 17.6716667"></polygon>
+                              <path class="color-background" d="M31.5666667,23.2333333 C31.0516667,23.2933333 30.53,23.3333333 30,23.3333333 C29.4916667,23.3333333 28.9866667,23.3033333 28.48,23.245 L22.4116667,30.7433333 L29.9416667,38.2733333 C32.2433333,40.575 35.9733333,40.575 38.275,38.2733333 L38.275,38.2733333 C40.5766667,35.9716667 40.5766667,32.2416667 38.275,29.94 L31.5666667,23.2333333 Z" opacity="0.596981957"></path>
+                              <path class="color-background" d="M33.785,11.285 L28.715,6.215 L34.0616667,0.868333333 C32.82,0.315 31.4483333,0 30,0 C24.4766667,0 20,4.47666667 20,10 C20,10.99 20.1483333,11.9433333 20.4166667,12.8466667 L2.435,27.3966667 C0.95,28.7083333 0.0633333333,30.595 0.00333333333,32.5733333 C-0.0583333333,34.5533333 0.71,36.4916667 2.11,37.89 C3.47,39.2516667 5.27833333,40 7.20166667,40 C9.26666667,40 11.2366667,39.1133333 12.6033333,37.565 L27.1533333,19.5833333 C28.0566667,19.8516667 29.01,20 30,20 C35.5233333,20 40,15.5233333 40,10 C40,8.55166667 39.685,7.18 39.1316667,5.93666667 L33.785,11.285 Z"></path>
+                          </g>
+                      </g>
+                  </g>
+              </g>
+          </svg>
+        </div>
+        <div>
+          <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Utility Classes</h6>
+          <span class="text-sm">All about overview, quick start, license and contents</span>
+        </div>
+      </div>
+    </a>
+  </div>
+</div>
+
+          </ul>
+        </li>
+        <li class="nav-item ms-lg-auto my-auto ms-3 ms-lg-0">
+          <a href="https://appseed.us/product/material-kit2-pro/django/" class="btn btn-sm  bg-gradient-primary  mb-0 me-1 mt-2 mt-md-0">Upgrade to Pro</a></li>
+      </ul>
+    </div>
+  </div>
+</nav>
+<!-- End Navbar -->
+</div></div></div>
+
+  
+
+
+
+
+
+ + +
+
+
+
+
+

Navbar transparent

+
+
+ +
+
+
+
+
+ +
+
+
+ Copy +
  <!-- Navbar Transparent -->
+<nav
+  class="navbar navbar-expand-lg position-absolute top-0 z-index-3 w-100 shadow-none my-3 navbar-transparent">
+  <div class="container">
+    <a class="navbar-brand  text-white " href="https://demos.creative-tim.com/material-kit/presentation" rel="tooltip" title="Designed and Coded by Creative Tim" data-placement="bottom" target="_blank">
+      Material Kit 2
+    </a>
+    <button class="navbar-toggler shadow-none ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon mt-2">
+        <span class="navbar-toggler-bar bar1"></span>
+        <span class="navbar-toggler-bar bar2"></span>
+        <span class="navbar-toggler-bar bar3"></span>
+      </span>
+    </button>
+    <div class="collapse navbar-collapse w-100 pt-3 pb-2 py-lg-0 ms-lg-12 ps-lg-5" id="navigation">
+      <ul class="navbar-nav navbar-nav-hover w-100">
+        <li class="nav-item dropdown dropdown-hover mx-2 ms-lg-6">
+          <a class="nav-link ps-2 d-flex cursor-pointer align-items-center" id="dropdownMenuPages2" data-bs-toggle="dropdown" aria-expanded="false">
+            <i class="material-icons opacity-6 me-2 text-md">dashboard</i>
+            Pages
+            <img src="{% static 'img/down-arrow-white.svg' %}" alt="down-arrow" class="arrow ms-auto ms-md-2 d-lg-block d-none">
+            <img src="{% static 'img/down-arrow-dark.svg' %}" alt="down-arrow" class="arrow ms-auto ms-md-2 d-lg-none d-block">
+          </a>
+          <div class="dropdown-menu dropdown-menu-animation dropdown-md p-3 border-radius-lg mt-0 mt-lg-3" aria-labelledby="dropdownMenuPages2">
+            <div class="d-none d-lg-block">
+  <a href="javascript:;" class="dropdown-item border-radius-md">
+    About Us
+  </a>
+  <a href="javascript:;" class="dropdown-item border-radius-md">
+    Contact Us
+  </a>
+  <a href="javascript:;" class="dropdown-item border-radius-md">
+    Author
+  </a>
+  <a href="javascript:;" class="dropdown-item border-radius-md">
+    Sign In
+  </a>
+</div>
+
+<div class="d-lg-none">
+  <a href="javascript:;" class="dropdown-item border-radius-md">
+    About Us
+  </a>
+  <a href="javascript:;" class="dropdown-item border-radius-md">
+    Contact Us
+  </a>
+  <a href="javascript:;" class="dropdown-item border-radius-md">
+    Author
+  </a>
+  <a href="javascript:;" class="dropdown-item border-radius-md">
+    Sign In
+  </a>
+</div>
+
+          </div>
+        </li>
+
+        <li class="nav-item dropdown dropdown-hover mx-2">
+          <a class="nav-link ps-2 d-flex cursor-pointer align-items-center" id="dropdownMenuBlocks" data-bs-toggle="dropdown" aria-expanded="false">
+            <i class="material-icons opacity-6 me-2 text-md">view_day</i>
+            Sections
+            <img src="{% static 'img/down-arrow-white.svg' %}" alt="down-arrow" class="arrow ms-auto ms-md-2 d-lg-block d-none">
+            <img src="{% static 'img/down-arrow-dark.svg' %}" alt="down-arrow" class="arrow ms-auto ms-md-2 d-lg-none d-block">
+          </a>
+          <ul class="dropdown-menu dropdown-menu-animation dropdown-lg dropdown-lg-responsive p-3 border-radius-lg mt-0 mt-lg-3" aria-labelledby="dropdownMenuBlocks">
+            <div class="d-none d-lg-block">
+  <li class="nav-item dropdown dropdown-hover dropdown-subitem">
+    <a class="dropdown-item py-2 ps-3 border-radius-md" href="./presentation.html">
+      <div class="d-flex">
+        <div class="icon h-10 me-3 d-flex mt-1">
+          <i class="ni ni-single-copy-04 text-gradient text-primary"></i>
+        </div>
+        <div class="w-100 d-flex align-items-center justify-content-between">
+          <div>
+            <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Page Sections</h6>
+            <span class="text-sm">See all 109 sections</span>
+          </div>
+
+          <img src="{% static 'img/down-arrow.svg' %}" alt="down-arrow" class="arrow">
+        </div>
+      </div>
+    </a>
+    <div class="dropdown-menu mt-0 py-3 px-2 mt-3" aria-labelledby="pageSections">
+      <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+        Page Headers
+      </a>
+      <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+        Features
+      </a>
+      <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+        Pricing
+      </a>
+      <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+        FAQ
+      </a>
+      <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+        Blog Posts
+      </a>
+      <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+        Testimonials
+      </a>
+      <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+        Teams
+      </a>
+      <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+        Stats
+      </a>
+      <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+        Call to Actions
+      </a>
+      <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+        Logo Areas
+      </a>
+    </div>
+  </li>
+</div>
+
+<div class="row d-lg-none">
+  <div class="col-md-12">
+    <div class="d-flex mb-2">
+      <div class="icon h-10 me-3 d-flex mt-1">
+        <i class="ni ni-single-copy-04 text-gradient text-primary"></i>
+      </div>
+      <div class="w-100 d-flex align-items-center justify-content-between">
+        <div>
+          <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Page Sections</h6>
+        </div>
+      </div>
+    </div>
+    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+      Page Headers
+    </a>
+    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+      Features
+    </a>
+    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+      Pricing
+    </a>
+    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+      FAQ
+    </a>
+    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+      Blog Posts
+    </a>
+    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+      Testimonials
+    </a>
+    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+      Teams
+    </a>
+    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+      Stats
+    </a>
+    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+      Call to Actions
+    </a>
+    <a class="dropdown-item ps-3 border-radius-md mb-1" href="javascript:;">
+      Applications
+    </a>
+  </div>
+</div>
+
+          </ul>
+        </li>
+
+        <li class="nav-item dropdown dropdown-hover mx-2">
+          <a class="nav-link ps-2 d-flex cursor-pointer align-items-center" id="dropdownMenuDocs" data-bs-toggle="dropdown" aria-expanded="false">
+            <i class="material-icons opacity-6 me-2 text-md">article</i>
+            Docs
+            <img src="{% static 'img/down-arrow-white.svg' %}" alt="down-arrow" class="arrow ms-auto ms-md-2 d-lg-block d-none">
+            <img src="{% static 'img/down-arrow-dark.svg' %}" alt="down-arrow" class="arrow ms-auto ms-md-2 d-lg-none d-block">
+          </a>
+          <ul class="dropdown-menu dropdown-menu-animation dropdown-lg mt-0 mt-lg-3 p-3 border-radius-lg" aria-labelledby="dropdownMenuDocs">
+            <div class="d-none d-lg-block">
+  <li class="nav-item ">
+    <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
+      <div class="d-flex">
+        <div class="icon h-10 me-3 d-flex mt-1">
+          <svg class="text-secondary" width="16px" height="16px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <title>spaceship</title>
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                  <g transform="translate(-1720.000000, -592.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                      <g transform="translate(1716.000000, 291.000000)">
+                          <g transform="translate(4.000000, 301.000000)">
+                              <path class="color-background" d="M39.3,0.706666667 C38.9660984,0.370464027 38.5048767,0.192278529 38.0316667,0.216666667 C14.6516667,1.43666667 6.015,22.2633333 5.93166667,22.4733333 C5.68236407,23.0926189 5.82664679,23.8009159 6.29833333,24.2733333 L15.7266667,33.7016667 C16.2013871,34.1756798 16.9140329,34.3188658 17.535,34.065 C17.7433333,33.98 38.4583333,25.2466667 39.7816667,1.97666667 C39.8087196,1.50414529 39.6335979,1.04240574 39.3,0.706666667 Z M25.69,19.0233333 C24.7367525,19.9768687 23.3029475,20.2622391 22.0572426,19.7463614 C20.8115377,19.2304837 19.9992882,18.0149658 19.9992882,16.6666667 C19.9992882,15.3183676 20.8115377,14.1028496 22.0572426,13.5869719 C23.3029475,13.0710943 24.7367525,13.3564646 25.69,14.31 C26.9912731,15.6116662 26.9912731,17.7216672 25.69,19.0233333 L25.69,19.0233333 Z"></path>
+                              <path class="color-background" d="M1.855,31.4066667 C3.05106558,30.2024182 4.79973884,29.7296005 6.43969145,30.1670277 C8.07964407,30.6044549 9.36054508,31.8853559 9.7979723,33.5253085 C10.2353995,35.1652612 9.76258177,36.9139344 8.55833333,38.11 C6.70666667,39.9616667 0,40 0,40 C0,40 0,33.2566667 1.855,31.4066667 Z"></path>
+                              <path class="color-background" d="M17.2616667,3.90166667 C12.4943643,3.07192755 7.62174065,4.61673894 4.20333333,8.04166667 C3.31200265,8.94126033 2.53706177,9.94913142 1.89666667,11.0416667 C1.5109569,11.6966059 1.61721591,12.5295394 2.155,13.0666667 L5.47,16.3833333 C8.55036617,11.4946947 12.5559074,7.25476565 17.2616667,3.90166667 L17.2616667,3.90166667 Z" opacity="0.598539807"></path>
+                              <path class="color-background" d="M36.0983333,22.7383333 C36.9280725,27.5056357 35.3832611,32.3782594 31.9583333,35.7966667 C31.0587397,36.6879974 30.0508686,37.4629382 28.9583333,38.1033333 C28.3033941,38.4890431 27.4704606,38.3827841 26.9333333,37.845 L23.6166667,34.53 C28.5053053,31.4496338 32.7452344,27.4440926 36.0983333,22.7383333 L36.0983333,22.7383333 Z" opacity="0.598539807"></path>
+                          </g>
+                      </g>
+                  </g>
+              </g>
+          </svg>
+        </div>
+        <div>
+          <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Getting Started</h6>
+          <span class="text-sm">All about overview, quick start, license and contents</span>
+        </div>
+      </div>
+    </a>
+  </li>
+  <li class="nav-item ">
+    <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
+      <div class="d-flex">
+        <div class="icon h-10 me-3 d-flex mt-1">
+          <svg class="text-secondary" width="16px" height="16px" viewBox="0 0 40 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <title>document</title>
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                  <g transform="translate(-1870.000000, -591.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                      <g transform="translate(1716.000000, 291.000000)">
+                          <g id="document" transform="translate(154.000000, 300.000000)">
+                              <path class="color-background" d="M40,40 L36.3636364,40 L36.3636364,3.63636364 L5.45454545,3.63636364 L5.45454545,0 L38.1818182,0 C39.1854545,0 40,0.814545455 40,1.81818182 L40,40 Z" opacity="0.603585379"></path>
+                              <path class="color-background" d="M30.9090909,7.27272727 L1.81818182,7.27272727 C0.814545455,7.27272727 0,8.08727273 0,9.09090909 L0,41.8181818 C0,42.8218182 0.814545455,43.6363636 1.81818182,43.6363636 L30.9090909,43.6363636 C31.9127273,43.6363636 32.7272727,42.8218182 32.7272727,41.8181818 L32.7272727,9.09090909 C32.7272727,8.08727273 31.9127273,7.27272727 30.9090909,7.27272727 Z M18.1818182,34.5454545 L7.27272727,34.5454545 L7.27272727,30.9090909 L18.1818182,30.9090909 L18.1818182,34.5454545 Z M25.4545455,27.2727273 L7.27272727,27.2727273 L7.27272727,23.6363636 L25.4545455,23.6363636 L25.4545455,27.2727273 Z M25.4545455,20 L7.27272727,20 L7.27272727,16.3636364 L25.4545455,16.3636364 L25.4545455,20 Z"></path>
+                          </g>
+                      </g>
+                  </g>
+              </g>
+          </svg>
+        </div>
+        <div>
+          <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Foundation</h6>
+          <span class="text-sm">See our colors, icons and typography</span>
+        </div>
+      </div>
+    </a>
+  </li>
+  <li class="nav-item ">
+    <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
+      <div class="d-flex">
+        <div class="icon h-10 me-3 d-flex mt-1">
+          <svg class="text-secondary" width="16px" height="16px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <title>box-3d-50</title>
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                  <g transform="translate(-2319.000000, -291.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                      <g transform="translate(1716.000000, 291.000000)">
+                          <g id="box-3d-50" transform="translate(603.000000, 0.000000)">
+                              <path class="color-background" d="M22.7597136,19.3090182 L38.8987031,11.2395234 C39.3926816,10.9925342 39.592906,10.3918611 39.3459167,9.89788265 C39.249157,9.70436312 39.0922432,9.5474453 38.8987261,9.45068056 L20.2741875,0.1378125 L20.2741875,0.1378125 C19.905375,-0.04725 19.469625,-0.04725 19.0995,0.1378125 L3.1011696,8.13815822 C2.60720568,8.38517662 2.40701679,8.98586148 2.6540352,9.4798254 C2.75080129,9.67332903 2.90771305,9.83023153 3.10122239,9.9269862 L21.8652864,19.3090182 C22.1468139,19.4497819 22.4781861,19.4497819 22.7597136,19.3090182 Z"></path>
+                              <path class="color-background" d="M23.625,22.429159 L23.625,39.8805372 C23.625,40.4328219 24.0727153,40.8805372 24.625,40.8805372 C24.7802551,40.8805372 24.9333778,40.8443874 25.0722402,40.7749511 L41.2741875,32.673375 L41.2741875,32.673375 C41.719125,32.4515625 42,31.9974375 42,31.5 L42,14.241659 C42,13.6893742 41.5522847,13.241659 41,13.241659 C40.8447549,13.241659 40.6916418,13.2778041 40.5527864,13.3472318 L24.1777864,21.5347318 C23.8390024,21.7041238 23.625,22.0503869 23.625,22.429159 Z" opacity="0.7"></path>
+                              <path class="color-background" d="M20.4472136,21.5347318 L1.4472136,12.0347318 C0.953235098,11.7877425 0.352562058,11.9879669 0.105572809,12.4819454 C0.0361450918,12.6208008 6.47121774e-16,12.7739139 0,12.929159 L0,30.1875 L0,30.1875 C0,30.6849375 0.280875,31.1390625 0.7258125,31.3621875 L19.5528096,40.7750766 C20.0467945,41.0220531 20.6474623,40.8218132 20.8944388,40.3278283 C20.963859,40.1889789 21,40.0358742 21,39.8806379 L21,22.429159 C21,22.0503869 20.7859976,21.7041238 20.4472136,21.5347318 Z" opacity="0.7"></path>
+                          </g>
+                      </g>
+                  </g>
+              </g>
+          </svg>
+        </div>
+        <div>
+          <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Components</h6>
+          <span class="text-sm">Explore our collection of fully designed components</span>
+        </div>
+      </div>
+    </a>
+  </li>
+  <li class="nav-item ">
+    <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
+      <div class="d-flex">
+        <div class="icon h-10 me-3 d-flex mt-1">
+          <svg class="text-secondary" width="16px" height="16px" viewBox="0 0 40 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <title>switches</title>
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                  <g transform="translate(-1870.000000, -440.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                      <g transform="translate(1716.000000, 291.000000)">
+                          <g transform="translate(154.000000, 149.000000)">
+                              <path class="color-background" d="M10,20 L30,20 C35.4545455,20 40,15.4545455 40,10 C40,4.54545455 35.4545455,0 30,0 L10,0 C4.54545455,0 0,4.54545455 0,10 C0,15.4545455 4.54545455,20 10,20 Z M10,3.63636364 C13.4545455,3.63636364 16.3636364,6.54545455 16.3636364,10 C16.3636364,13.4545455 13.4545455,16.3636364 10,16.3636364 C6.54545455,16.3636364 3.63636364,13.4545455 3.63636364,10 C3.63636364,6.54545455 6.54545455,3.63636364 10,3.63636364 Z" opacity="0.6"></path>
+                              <path class="color-background" d="M30,23.6363636 L10,23.6363636 C4.54545455,23.6363636 0,28.1818182 0,33.6363636 C0,39.0909091 4.54545455,43.6363636 10,43.6363636 L30,43.6363636 C35.4545455,43.6363636 40,39.0909091 40,33.6363636 C40,28.1818182 35.4545455,23.6363636 30,23.6363636 Z M30,40 C26.5454545,40 23.6363636,37.0909091 23.6363636,33.6363636 C23.6363636,30.1818182 26.5454545,27.2727273 30,27.2727273 C33.4545455,27.2727273 36.3636364,30.1818182 36.3636364,33.6363636 C36.3636364,37.0909091 33.4545455,40 30,40 Z"></path>
+                          </g>
+                      </g>
+                  </g>
+              </g>
+          </svg>
+        </div>
+        <div>
+          <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Plugins</h6>
+          <span class="text-sm">Check how you can integrate our plugins</span>
+        </div>
+      </div>
+    </a>
+  </li>
+  <li class="nav-item ">
+    <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
+      <div class="d-flex">
+        <div class="icon h-10 me-3 d-flex mt-1">
+          <svg class="text-secondary" width="16px" height="16px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <title>settings</title>
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                  <g transform="translate(-2020.000000, -442.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                      <g transform="translate(1716.000000, 291.000000)">
+                          <g transform="translate(304.000000, 151.000000)">
+                              <polygon class="color-background" opacity="0.596981957" points="18.0883333 15.7316667 11.1783333 8.82166667 13.3333333 6.66666667 6.66666667 0 0 6.66666667 6.66666667 13.3333333 8.82166667 11.1783333 15.315 17.6716667"></polygon>
+                              <path class="color-background" d="M31.5666667,23.2333333 C31.0516667,23.2933333 30.53,23.3333333 30,23.3333333 C29.4916667,23.3333333 28.9866667,23.3033333 28.48,23.245 L22.4116667,30.7433333 L29.9416667,38.2733333 C32.2433333,40.575 35.9733333,40.575 38.275,38.2733333 L38.275,38.2733333 C40.5766667,35.9716667 40.5766667,32.2416667 38.275,29.94 L31.5666667,23.2333333 Z" opacity="0.596981957"></path>
+                              <path class="color-background" d="M33.785,11.285 L28.715,6.215 L34.0616667,0.868333333 C32.82,0.315 31.4483333,0 30,0 C24.4766667,0 20,4.47666667 20,10 C20,10.99 20.1483333,11.9433333 20.4166667,12.8466667 L2.435,27.3966667 C0.95,28.7083333 0.0633333333,30.595 0.00333333333,32.5733333 C-0.0583333333,34.5533333 0.71,36.4916667 2.11,37.89 C3.47,39.2516667 5.27833333,40 7.20166667,40 C9.26666667,40 11.2366667,39.1133333 12.6033333,37.565 L27.1533333,19.5833333 C28.0566667,19.8516667 29.01,20 30,20 C35.5233333,20 40,15.5233333 40,10 C40,8.55166667 39.685,7.18 39.1316667,5.93666667 L33.785,11.285 Z"></path>
+                          </g>
+                      </g>
+                  </g>
+              </g>
+          </svg>
+        </div>
+        <div>
+          <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Utility Classes</h6>
+          <span class="text-sm">For those who want flexibility, use our utility classes</span>
+        </div>
+      </div>
+    </a>
+  </li>
+</div>
+
+<div class="row d-lg-none">
+  <div class="col-md-12 g-0">
+    <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
+      <div class="d-flex">
+        <div class="icon h-10 me-3 d-flex mt-1">
+          <svg class="text-secondary" width="16px" height="16px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <title>spaceship</title>
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                <g transform="translate(-1720.000000, -592.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                  <g transform="translate(1716.000000, 291.000000)">
+                    <g transform="translate(4.000000, 301.000000)">
+                      <path class="color-background" d="M39.3,0.706666667 C38.9660984,0.370464027 38.5048767,0.192278529 38.0316667,0.216666667 C14.6516667,1.43666667 6.015,22.2633333 5.93166667,22.4733333 C5.68236407,23.0926189 5.82664679,23.8009159 6.29833333,24.2733333 L15.7266667,33.7016667 C16.2013871,34.1756798 16.9140329,34.3188658 17.535,34.065 C17.7433333,33.98 38.4583333,25.2466667 39.7816667,1.97666667 C39.8087196,1.50414529 39.6335979,1.04240574 39.3,0.706666667 Z M25.69,19.0233333 C24.7367525,19.9768687 23.3029475,20.2622391 22.0572426,19.7463614 C20.8115377,19.2304837 19.9992882,18.0149658 19.9992882,16.6666667 C19.9992882,15.3183676 20.8115377,14.1028496 22.0572426,13.5869719 C23.3029475,13.0710943 24.7367525,13.3564646 25.69,14.31 C26.9912731,15.6116662 26.9912731,17.7216672 25.69,19.0233333 L25.69,19.0233333 Z"></path>
+                      <path class="color-background" d="M1.855,31.4066667 C3.05106558,30.2024182 4.79973884,29.7296005 6.43969145,30.1670277 C8.07964407,30.6044549 9.36054508,31.8853559 9.7979723,33.5253085 C10.2353995,35.1652612 9.76258177,36.9139344 8.55833333,38.11 C6.70666667,39.9616667 0,40 0,40 C0,40 0,33.2566667 1.855,31.4066667 Z"></path>
+                      <path class="color-background" d="M17.2616667,3.90166667 C12.4943643,3.07192755 7.62174065,4.61673894 4.20333333,8.04166667 C3.31200265,8.94126033 2.53706177,9.94913142 1.89666667,11.0416667 C1.5109569,11.6966059 1.61721591,12.5295394 2.155,13.0666667 L5.47,16.3833333 C8.55036617,11.4946947 12.5559074,7.25476565 17.2616667,3.90166667 L17.2616667,3.90166667 Z" opacity="0.598539807"></path>
+                      <path class="color-background" d="M36.0983333,22.7383333 C36.9280725,27.5056357 35.3832611,32.3782594 31.9583333,35.7966667 C31.0587397,36.6879974 30.0508686,37.4629382 28.9583333,38.1033333 C28.3033941,38.4890431 27.4704606,38.3827841 26.9333333,37.845 L23.6166667,34.53 C28.5053053,31.4496338 32.7452344,27.4440926 36.0983333,22.7383333 L36.0983333,22.7383333 Z" opacity="0.598539807"></path>
+                    </g>
+                  </g>
+                </g>
+              </g>
+            </svg>
+          </div>
+        <div>
+          <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Getting Started</h6>
+          <span class="text-sm">All about overview, quick start, license and contents</span>
+        </div>
+      </div>
+    </a>
+
+    <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
+      <div class="d-flex">
+        <div class="icon h-10 me-3 d-flex mt-1">
+          <svg class="text-secondary" width="16px" height="16px" viewBox="0 0 40 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+            <title>document</title>
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                <g transform="translate(-1870.000000, -591.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                  <g transform="translate(1716.000000, 291.000000)">
+                    <g transform="translate(154.000000, 300.000000)">
+                      <path class="color-background" d="M40,40 L36.3636364,40 L36.3636364,3.63636364 L5.45454545,3.63636364 L5.45454545,0 L38.1818182,0 C39.1854545,0 40,0.814545455 40,1.81818182 L40,40 Z" opacity="0.603585379"></path>
+                      <path class="color-background" d="M30.9090909,7.27272727 L1.81818182,7.27272727 C0.814545455,7.27272727 0,8.08727273 0,9.09090909 L0,41.8181818 C0,42.8218182 0.814545455,43.6363636 1.81818182,43.6363636 L30.9090909,43.6363636 C31.9127273,43.6363636 32.7272727,42.8218182 32.7272727,41.8181818 L32.7272727,9.09090909 C32.7272727,8.08727273 31.9127273,7.27272727 30.9090909,7.27272727 Z M18.1818182,34.5454545 L7.27272727,34.5454545 L7.27272727,30.9090909 L18.1818182,30.9090909 L18.1818182,34.5454545 Z M25.4545455,27.2727273 L7.27272727,27.2727273 L7.27272727,23.6363636 L25.4545455,23.6363636 L25.4545455,27.2727273 Z M25.4545455,20 L7.27272727,20 L7.27272727,16.3636364 L25.4545455,16.3636364 L25.4545455,20 Z"></path>
+                    </g>
+                  </g>
+                </g>
+              </g>
+            </svg>
+          </div>
+        <div>
+          <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Foundation</h6>
+          <span class="text-sm">See our colors, icons and typography</span>
+        </div>
+      </div>
+    </a>
+
+    <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
+      <div class="d-flex">
+        <div class="icon h-10 me-3 d-flex mt-1">
+          <svg class="text-secondary" width="16px" height="16px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <title>box-3d-50</title>
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                  <g transform="translate(-2319.000000, -291.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                      <g transform="translate(1716.000000, 291.000000)">
+                          <g transform="translate(603.000000, 0.000000)">
+                              <path class="color-background" d="M22.7597136,19.3090182 L38.8987031,11.2395234 C39.3926816,10.9925342 39.592906,10.3918611 39.3459167,9.89788265 C39.249157,9.70436312 39.0922432,9.5474453 38.8987261,9.45068056 L20.2741875,0.1378125 L20.2741875,0.1378125 C19.905375,-0.04725 19.469625,-0.04725 19.0995,0.1378125 L3.1011696,8.13815822 C2.60720568,8.38517662 2.40701679,8.98586148 2.6540352,9.4798254 C2.75080129,9.67332903 2.90771305,9.83023153 3.10122239,9.9269862 L21.8652864,19.3090182 C22.1468139,19.4497819 22.4781861,19.4497819 22.7597136,19.3090182 Z"></path>
+                              <path class="color-background" d="M23.625,22.429159 L23.625,39.8805372 C23.625,40.4328219 24.0727153,40.8805372 24.625,40.8805372 C24.7802551,40.8805372 24.9333778,40.8443874 25.0722402,40.7749511 L41.2741875,32.673375 L41.2741875,32.673375 C41.719125,32.4515625 42,31.9974375 42,31.5 L42,14.241659 C42,13.6893742 41.5522847,13.241659 41,13.241659 C40.8447549,13.241659 40.6916418,13.2778041 40.5527864,13.3472318 L24.1777864,21.5347318 C23.8390024,21.7041238 23.625,22.0503869 23.625,22.429159 Z" opacity="0.7"></path>
+                              <path class="color-background" d="M20.4472136,21.5347318 L1.4472136,12.0347318 C0.953235098,11.7877425 0.352562058,11.9879669 0.105572809,12.4819454 C0.0361450918,12.6208008 6.47121774e-16,12.7739139 0,12.929159 L0,30.1875 L0,30.1875 C0,30.6849375 0.280875,31.1390625 0.7258125,31.3621875 L19.5528096,40.7750766 C20.0467945,41.0220531 20.6474623,40.8218132 20.8944388,40.3278283 C20.963859,40.1889789 21,40.0358742 21,39.8806379 L21,22.429159 C21,22.0503869 20.7859976,21.7041238 20.4472136,21.5347318 Z" opacity="0.7"></path>
+                          </g>
+                      </g>
+                  </g>
+              </g>
+          </svg>
+        </div>
+        <div>
+          <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Components</h6>
+          <span class="text-sm">Explore our collection of fully designed components</span>
+        </div>
+      </div>
+    </a>
+
+    <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
+      <div class="d-flex">
+        <div class="icon h-10 me-3 d-flex mt-1">
+          <svg class="text-secondary" width="16px" height="16px" viewBox="0 0 40 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <title>switches</title>
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                  <g transform="translate(-1870.000000, -440.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                      <g transform="translate(1716.000000, 291.000000)">
+                          <g transform="translate(154.000000, 149.000000)">
+                              <path class="color-background" d="M10,20 L30,20 C35.4545455,20 40,15.4545455 40,10 C40,4.54545455 35.4545455,0 30,0 L10,0 C4.54545455,0 0,4.54545455 0,10 C0,15.4545455 4.54545455,20 10,20 Z M10,3.63636364 C13.4545455,3.63636364 16.3636364,6.54545455 16.3636364,10 C16.3636364,13.4545455 13.4545455,16.3636364 10,16.3636364 C6.54545455,16.3636364 3.63636364,13.4545455 3.63636364,10 C3.63636364,6.54545455 6.54545455,3.63636364 10,3.63636364 Z" opacity="0.6"></path>
+                              <path class="color-background" d="M30,23.6363636 L10,23.6363636 C4.54545455,23.6363636 0,28.1818182 0,33.6363636 C0,39.0909091 4.54545455,43.6363636 10,43.6363636 L30,43.6363636 C35.4545455,43.6363636 40,39.0909091 40,33.6363636 C40,28.1818182 35.4545455,23.6363636 30,23.6363636 Z M30,40 C26.5454545,40 23.6363636,37.0909091 23.6363636,33.6363636 C23.6363636,30.1818182 26.5454545,27.2727273 30,27.2727273 C33.4545455,27.2727273 36.3636364,30.1818182 36.3636364,33.6363636 C36.3636364,37.0909091 33.4545455,40 30,40 Z"></path>
+                          </g>
+                      </g>
+                  </g>
+              </g>
+          </svg>
+        </div>
+        <div>
+          <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Plugins</h6>
+          <span class="text-sm">Check how you can integrate our plugins</span>
+        </div>
+      </div>
+    </a>
+
+    <a class="dropdown-item py-2 ps-3 border-radius-md" href="javascript:;">
+      <div class="d-flex">
+        <div class="icon h-10 me-3 d-flex mt-1">
+          <svg class="text-secondary" width="16px" height="16px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+              <title>settings</title>
+              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                  <g transform="translate(-2020.000000, -442.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                      <g transform="translate(1716.000000, 291.000000)">
+                          <g transform="translate(304.000000, 151.000000)">
+                              <polygon class="color-background" opacity="0.596981957" points="18.0883333 15.7316667 11.1783333 8.82166667 13.3333333 6.66666667 6.66666667 0 0 6.66666667 6.66666667 13.3333333 8.82166667 11.1783333 15.315 17.6716667"></polygon>
+                              <path class="color-background" d="M31.5666667,23.2333333 C31.0516667,23.2933333 30.53,23.3333333 30,23.3333333 C29.4916667,23.3333333 28.9866667,23.3033333 28.48,23.245 L22.4116667,30.7433333 L29.9416667,38.2733333 C32.2433333,40.575 35.9733333,40.575 38.275,38.2733333 L38.275,38.2733333 C40.5766667,35.9716667 40.5766667,32.2416667 38.275,29.94 L31.5666667,23.2333333 Z" opacity="0.596981957"></path>
+                              <path class="color-background" d="M33.785,11.285 L28.715,6.215 L34.0616667,0.868333333 C32.82,0.315 31.4483333,0 30,0 C24.4766667,0 20,4.47666667 20,10 C20,10.99 20.1483333,11.9433333 20.4166667,12.8466667 L2.435,27.3966667 C0.95,28.7083333 0.0633333333,30.595 0.00333333333,32.5733333 C-0.0583333333,34.5533333 0.71,36.4916667 2.11,37.89 C3.47,39.2516667 5.27833333,40 7.20166667,40 C9.26666667,40 11.2366667,39.1133333 12.6033333,37.565 L27.1533333,19.5833333 C28.0566667,19.8516667 29.01,20 30,20 C35.5233333,20 40,15.5233333 40,10 C40,8.55166667 39.685,7.18 39.1316667,5.93666667 L33.785,11.285 Z"></path>
+                          </g>
+                      </g>
+                  </g>
+              </g>
+          </svg>
+        </div>
+        <div>
+          <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Utility Classes</h6>
+          <span class="text-sm">All about overview, quick start, license and contents</span>
+        </div>
+      </div>
+    </a>
+  </div>
+</div>
+
+          </ul>
+        </li>
+        <li class="nav-item ms-lg-auto my-auto ms-3 ms-lg-0 mt-2 mt-lg-0">
+          <a href="https://appseed.us/product/material-kit2-pro/django/" class="btn btn-sm  bg-gradient-primary  btn-round mb-0 me-1 mt-2 mt-md-0">Upgrade to Pro</a></li>
+      </ul>
+    </div>
+  </div>
+</nav>
+<!-- End Navbar -->
+
+  
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+

Tabs Simple

+
+
+ +
+
+
+
+
+ +
+
+
+ Copy +
  <div class="row text-center py-3 mt-3">
+  <div class="col-4 mx-auto">
+    <div class="nav-wrapper position-relative end-0">
+      <ul class="nav nav-pills nav-fill p-1" role="tablist">
+        <li class="nav-item">
+          <a class="nav-link mb-0 px-0 py-1 active" data-bs-toggle="tab" href="#profile-tabs-simple" role="tab" aria-controls="profile" aria-selected="true">
+            My Profile
+          </a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link mb-0 px-0 py-1" data-bs-toggle="tab" href="#dashboard-tabs-simple" role="tab" aria-controls="dashboard" aria-selected="false">
+            Dashboard
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+
+  
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+

Pagination

+
+
+ +
+
+
+
+
+ +
+
+
+ Copy +
  <div class="row text-center py-2">
+  <div class="col-4 mx-auto">
+    <ul class="pagination pagination-primary m-4">
+      <li class="page-item">
+        <a class="page-link" href="javascript:;" aria-label="Previous">
+          <span aria-hidden="true"><i class="fa fa-angle-double-left" aria-hidden="true"></i></span>
+        </a>
+      </li>
+      <li class="page-item active">
+        <a class="page-link" href="javascript:;">1</a>
+      </li>
+      <li class="page-item">
+        <a class="page-link" href="javascript:;">2</a>
+      </li>
+      <li class="page-item">
+        <a class="page-link" href="javascript:;">3</a>
+      </li>
+      <li class="page-item">
+        <a class="page-link" href="javascript:;">4</a>
+      </li>
+      <li class="page-item">
+        <a class="page-link" href="javascript:;">5</a>
+      </li>
+      <li class="page-item">
+        <a class="page-link" href="javascript:;" aria-label="Next">
+          <span aria-hidden="true"><i class="fa fa-angle-double-right" aria-hidden="true"></i></span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+
+  
+
+
+
+
+
+ +
+
+
+ +
+
+
+

Input Areas

+
6+ elements that you need for text manipulation and insertion
+
+
+
+
+
+ +
+
+
+
+

Input dynamic

+
+
+ +
+
+
+
+
+ +
+
+
+ Copy +
  <div class="row text-center py-3 mt-3">
+  <div class="col-4 mx-auto">
+    <div class="input-group input-group-dynamic">
+      <label class="form-label">Regular</label>
+      <input type="text" class="form-control" >
+    </div>
+  </div>
+</div>
+
+  
+
+
+
+
+ + +
+
+
+
+

Input static

+
+
+ +
+
+
+
+
+ +
+
+
+ Copy +
  <div class="row text-center py-3 mt-3">
+  <div class="col-4 mx-auto">
+    <div class="input-group input-group-static">
+      <label>First Name</label>
+      <input class="form-control" placeholder="eg. Kurt Shelby" type="text" >
+    </div>
+  </div>
+</div>
+
+  
+
+
+
+
+ + +
+
+
+
+

Input outline

+
+
+ +
+
+
+
+
+ +
+
+
+ Copy +
  <div class="row text-center py-3 mt-3">
+  <div class="col-4 mx-auto">
+    <div class="input-group input-group-outline mb-4">
+      <label class="form-label">Outline</label>
+      <input class="form-control" type="text" >
+    </div>
+  </div>
+</div>
+
+  
+
+
+
+
+ + +
+
+
+
+

Input with icon

+
+
+ +
+
+
+
+
+ +
+
+
+ Copy +
  <div class="row text-center py-2 mt-3">
+  <div class="col-4 mx-auto">
+    <div class="input-group input-group-dynamic mb-4">
+      <span class="input-group-text"><i class="fas fa-search" aria-hidden="true"></i></span>
+      <input class="form-control" placeholder="Search" type="text" >
+    </div>
+  </div>
+</div>
+
+  
+
+
+
+
+ + +
+
+
+
+

Input disabled

+
+
+ +
+
+
+
+
+ +
+
+
+ Copy +
  <div class="row text-center py-3 mt-3">
+  <div class="col-4 mx-auto">
+    <input type="text" placeholder="Disabled" class="form-control" disabled>
+  </div>
+</div>
+
+  
+
+
+
+
+ + +
+
+
+
+

Inputs validation

+
+
+ +
+
+
+
+
+ +
+
+
+ Copy +
  <div class="row text-center py-3 mt-3">
+  <div class="col-4 ms-auto">
+    <input type="text" placeholder="Success" class="form-control is-valid" >
+  </div>
+  <div class="col-4 me-auto">
+    <input type="text" placeholder="Error" class="form-control is-invalid" >
+  </div>
+</div>
+
+  
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+

Form simple

+
+
+ +
+
+
+
+
+ +
+
+
+ Copy +
  <section>
+  <div class="container py-4">
+    <div class="row">
+      <div class="col-lg-7 mx-auto d-flex justify-content-center flex-column">
+        <h3 class="text-center">Contact us</h3>
+        <form role="form" id="contact-form" method="post" autocomplete="off">
+          <div class="card-body">
+            <div class="row">
+              <div class="col-md-6">
+                <div class="input-group input-group-dynamic mb-4">
+                  <label class="form-label">First Name</label>
+                  <input class="form-control" aria-label="First Name..." type="text" >
+                </div>
+              </div>
+              <div class="col-md-6 ps-2">
+                <div class="input-group input-group-dynamic">
+                  <label class="form-label">Last Name</label>
+                  <input type="text" class="form-control" placeholder="" aria-label="Last Name..." >
+                </div>
+              </div>
+            </div>
+            <div class="mb-4">
+              <div class="input-group input-group-dynamic">
+                <label class="form-label">Email Address</label>
+                <input type="email" class="form-control">
+              </div>
+            </div>
+            <div class="input-group mb-4 input-group-static">
+              <label>Your message</label>
+              <textarea name="message" class="form-control" id="message" rows="4"></textarea>
+            </div>
+            <div class="row">
+              <div class="col-md-12">
+                <div class="form-check form-switch mb-4 d-flex align-items-center">
+                  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" checked="">
+                  <label class="form-check-label ms-3 mb-0" for="flexSwitchCheckDefault">I agree to the <a href="javascript:;" class="text-dark"><u>Terms and Conditions</u></a>.</label>
+                </div>
+              </div>
+              <div class="col-md-12">
+                <button type="submit" class="btn bg-gradient-dark w-100">Send Message</button>
+              </div>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</section>
+
+  
+
+
+
+
+
+ +
+
+
+ +
+
+
+

Design Blocks

+
A selection of page sections that fit perfectly in any combination
+
+
+
+
+ +
+
+
+
+
+

Header

+
+
+ +
+
+
+
+
+ +
+
+
+ Copy +
  <!-- -------- START HEADER 1 w/ text and image on right ------- -->
+<header>
+  <div class="page-header min-vh-100" style="background-image: url(&#39;https://images.unsplash.com/photo-1520769945061-0a448c463865?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80&#39;);" loading="lazy">
+    <span class="mask bg-gradient-dark opacity-5"></span>
+    <div class="container">
+      <div class="row">
+        <div class="col-lg-6 col-md-7 d-flex justify-content-center flex-column">
+          <h1 class="text-white mb-4">Material Kit</h1>
+          <p class="text-white opacity-8 lead pe-5 me-5">The time is now for it be okay to be great. People in this world shun people for being nice. </p>
+          <div class="buttons">
+            <button type="button" class="btn btn-white mt-4">Get Started</button>
+            <button type="button" class="btn text-white shadow-none mt-4">Read more</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</header>
+<!-- -------- END HEADER 1 w/ text and image on right ------- -->
+
+  
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+

Features

+
+
+ +
+
+
+
+
+ +
+
+
+ Copy +
  <!-- -------- START Features w/ icons and text on left & gradient title and text on right -------- -->
+<div class="container">
+  <div class="row">
+    <div class="col-lg-6 my-auto">
+      <h3 class="mt-5 mt-lg-0">Read More About Us</h3>
+      <p class="pe-5">Pain is what we go through as we become older. We get insulted by others, lose trust for those others. We get back stabbed by friends. It becomes harder for us to give others a hand.</p>
+      <a href="javascript:;" class="text-primary icon-move-right">More about us
+        <i class="fas fa-arrow-right text-sm ms-1"></i>
+      </a>
+    </div>
+    <div class="col-lg-6 mt-lg-0 mt-5 ps-lg-0 ps-0">
+      <div class="p-3 info-horizontal">
+        <div class="icon icon-shape  bg-gradient-primary shadow-primary text-center">
+          <i class="fas fa-ship opacity-10"></i>
+        </div>
+        <div class="description ps-3">
+          <p class="mb-0">It becomes harder for us to give others a hand. <br> We get our heart broken by people we love.</p>
+        </div>
+      </div>
+
+      <div class="p-3 info-horizontal">
+        <div class="icon icon-shape  bg-gradient-primary shadow-primary text-center">
+          <i class="fas fa-handshake opacity-10"></i>
+        </div>
+        <div class="description ps-3">
+          <p class="mb-0">As we live, our hearts turn colder. <br>Cause pain is what we go through as we become older.</p>
+        </div>
+      </div>
+      <div class="p-3 info-horizontal">
+        <div class="icon icon-shape  bg-gradient-primary shadow-primary text-center">
+          <i class="fas fa-hourglass opacity-10"></i>
+        </div>
+        <div class="description ps-3">
+          <p class="mb-0">When we lose family over time. <br> What else could rust the heart more over time? Blackgold.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- -------- END Features w/ icons and text on left & gradient title and text on right -------- -->
+
+  
+
+
+
+
+
+ +
+
+
+
+
+ + +
+
+
+
+
+ Boost creativity +

With our coded pages

+

The easiest way to get started is to use one of our
pre-built example pages.

+
+
+
+
+
+
+ +
+
+

Presentation Pages for Company, Sign In Page, Author and Contact

+
These is just a small selection of the multiple possibitilies you have. Focus on the business, not on the design.
+
+
+
+
+ + + +
+ +
+ +
+
+
+
+ flag +
+
Getting Started
+

Check the possible ways of working with our product and the necessary files for building your own project.

+ + Let's start + + +
+
+
+
+
+ precision_manufacturing +
+
Plugins
+

Get inspiration and have an overview about the plugins that we used to create the Material Kit.

+ + Read more + + +
+
+
+ +
+
+ receipt_long +
+
Utility Classes
+

Material Kit is giving you a lot of pre-made elements. For those who want flexibility, we included many utility classes.

+ + Read more + + +
+
+
+
+
+ + + +
+
+
+
+

Trusted by over

+

1,679,477+ web developers

+

Many Fortune 500 companies, startups, universities and governmental institutions love Creative Tim's products.

+
+
+
+
+
+
+
+
+
Nick Willever
+
+ 1 day ago +
+
+
+

"This is an excellent product, the documentation is excellent and helped me get things done more efficiently."

+
+ + + + + +
+
+
+
+ +
+
+
+
+
+
Shailesh Kushwaha
+
+ 1 week ago +
+
+
+

"I found solution to all my design needs from Creative Tim. I use them as a freelancer in my hobby projects for fun! And its really affordable, very humble guys !!!"

+
+ + + + + +
+
+
+
+ +
+
+
+
+
+
Samuel Kamuli
+
+ 3 weeks ago +
+
+
+

"Great product. Helped me cut the time to set up a site. I used the components within instead of starting from scratch. I highly recommend for developers who want to spend more time on the backend!."

+
+ + + + + +
+
+
+
+ +
+
+
+
+ Logo +
+
+ Logo +
+
+ Logo +
+
+ Logo +
+
+ Logo +
+
+
+
+ + +
+
+ pattern-lines +
+
+
+

Do you love this awesome

+

UI Kit for Bootstrap 5?

+

Cause if you do, it can be yours for FREE. Hit the button below to navigate to Creative Tim where you can find the Design System in HTML. Start a new project or give an old Bootstrap project a new look!

+ Download +
+
+
+
+
+
+
+
+

Available on these technologies

+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
+
+
+ + +
+
+
+
+

You liked it and

+

Want more?

+

+ Most complex and innovative Design System Made by Creative Tim . Check our latest Premium Bootstrap 5 UI Kit. + + Designed for those who like bold elements and beautiful websites. Made of hundred of elements, designed blocks and fully coded pages, Material Kit is ready to help you create stunning websites and webapps. +

+
+ Download PRO +
+ +
+
+
+
+ + Product Image + +
+
+
+
+ + + +
+
+
+
+

Thank you for your support!

+

We deliver the best web products

+
+ +
+
+
+ + +
+ +{% endblock content %} + +{% block javascripts %} + + + + + + + + + + + + + + + + +{% endblock javascripts %} diff --git a/home/tests.py b/home/tests.py new file mode 100644 index 0000000..7ce503c --- /dev/null +++ b/home/tests.py @@ -0,0 +1,3 @@ +from django.test import TestCase + +# Create your tests here. diff --git a/home/urls.py b/home/urls.py new file mode 100644 index 0000000..88a9cac --- /dev/null +++ b/home/urls.py @@ -0,0 +1,7 @@ +from django.urls import path + +from . import views + +urlpatterns = [ + path('', views.index, name='index'), +] diff --git a/home/views.py b/home/views.py new file mode 100644 index 0000000..a878981 --- /dev/null +++ b/home/views.py @@ -0,0 +1,9 @@ +from django.shortcuts import render +from django.http import HttpResponse + +# Create your views here. + +def index(request): + + # Page from the theme + return render(request, 'pages/index.html') diff --git a/manage.py b/manage.py new file mode 100644 index 0000000..4e20ce5 --- /dev/null +++ b/manage.py @@ -0,0 +1,22 @@ +#!/usr/bin/env python +"""Django's command-line utility for administrative tasks.""" +import os +import sys + + +def main(): + """Run administrative tasks.""" + os.environ.setdefault("DJANGO_SETTINGS_MODULE", "core.settings") + try: + from django.core.management import execute_from_command_line + except ImportError as exc: + raise ImportError( + "Couldn't import Django. Are you sure it's installed and " + "available on your PYTHONPATH environment variable? Did you " + "forget to activate a virtual environment?" + ) from exc + execute_from_command_line(sys.argv) + + +if __name__ == "__main__": + main() diff --git a/nginx/appseed-app.conf b/nginx/appseed-app.conf new file mode 100644 index 0000000..61c7a1e --- /dev/null +++ b/nginx/appseed-app.conf @@ -0,0 +1,15 @@ +upstream webapp { + server appseed_app:5005; +} + +server { + listen 5085; + server_name localhost; + + location / { + proxy_pass http://webapp; + proxy_set_header Host $host; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + } + +} diff --git a/render.yaml b/render.yaml new file mode 100644 index 0000000..f8968db --- /dev/null +++ b/render.yaml @@ -0,0 +1,15 @@ +services: + - type: web + name: django-app + plan: starter + env: python + region: frankfurt # region should be same as your database region. + buildCommand: "./build.sh" + startCommand: "gunicorn core.wsgi:application" + envVars: + - key: DEBUG + value: False + - key: SECRET_KEY + generateValue: true + - key: WEB_CONCURRENCY + value: 4 diff --git a/requirements.txt b/requirements.txt new file mode 100644 index 0000000..204658b --- /dev/null +++ b/requirements.txt @@ -0,0 +1,8 @@ +django +gunicorn +python-dotenv +whitenoise +django-theme-material-kit==1.0.19 + +# psycopg2-binary +# mysqlclient diff --git a/static/.gitkeep b/static/.gitkeep new file mode 100644 index 0000000..e69de29