Eitech

- Welcome
- Main File Structure
- Setup
- CSS Structure
- Sources & Credits
- Support

Copyright © 2025. Eitech All Rights Reserved.

# Eitech- Technology And IT Solutions Services

Created: 05 September 2025
By: Unifato
Email: unifato.themes@gmail.com
Thank you for purchasing our theme. Eitech- Technology And IT Solutions Services. If you have any question, please feel free to contact us.

# Main File Structure

All the file are well organized, its so easy to work with the template.
1. Unzip the files.
2. Open "Eitech" folder.
Thank you for purchasing our theme. Eitech- Technology And IT Solutions Services. If you have any question, please feel free to contact us.

                    Eitech
                    ├── config
                    │   ├── settings
                    │   │    ├── base.py
                    │   │    ├── local.py
                    │   │    └── production.py
                    │   └── urls.py - all the urls
                    ├── eitech
                    │   ├── static
                    │   │   └──
                    │   │       ├── css
                    │   │       ├── fonts
                    │   │       ├── images
                    │   │       ├── js
                    │   │       └── scss
                    │   ├── templates
                    │   │   └── all the html pages
                    │   └── all the django apps
                    ├── requirements
                    │   ├── base.txt
                    │   ├── local.txt
                    │   └── production.txt
                    ├── utility
                    ├── db.sqlite3
                    └── manage.py

# Setup

### Prerequisites

Please follow below steps to install and setup all prerequisites:

- ##### Python

  Make sure to have the Python installed & running in your computer. If you already have installed Python on your computer, you can skip this step. Please use Python version 3 or if you are using Python version 2 then make sure to run all the below commands with `python` instead of `python3`.

  Install Git

- ##### For Windows

  - Download python from Microsoft store
  - Select the Python's version to download.
  - Click on the Install Now
  - Installation in Process

- ##### For Linux and macOS

  - `sudo apt update`
  - `sudo apt install python3`

- ##### Virtualenv

  Make sure to have the `virtualenv` installed globally & running on your computer. If you already have installed on your computer, you can skip this step.

  - Virtualenv installation command for Linux & macOS
    `python3 -m pip install --user virtualenv`
  - Virtualenv installation command for Windows
    `py -m pip install --user virtualenv`

To spin up the Django development server, follow the below mentioned steps in a separate terminal:

Command | Description
--- | ---
`python3 -m venv environment_name` | Create Virtual Environment on Linux & macOS
`python -m venv environment_name` | Create Virtual Environment on Windows OS
`source environment_name/bin/activate` | Activate Environment on Linux & macOS
`environment_name/Scripts/activate` | Activate Environment on Windows OS
`pip install -r requirements/local.txt` | This would install all the required python dependencies.
`python3 manage.py migrate` | Run the migration to sync the database on Linux & macOS
`python manage.py migrate` | Run the migration to sync the database on Windows OS
`python3 manage.py runserver` | Starts the local server on localhost:8000 on Linux & macOS
`python manage.py runserver` | Starts the local server on localhost:8000 on Windows OS

# SCSS Structure

The base structure was organized by row, col-** class

              // HOMEPAGE1 HEADER STARTS //
    .homepage1-body {
        .row-bg3 {
            border: 1px solid rgba(255, 255, 255, 0.10);
            background: rgba(255, 255, 255, 0.10);
            backdrop-filter: blur(1px);
            padding: 12px 0;
            border-radius: 16px;
            @media #{$xs} {
                border-radius: 0;
            }
            @media #{$md} {
                border-radius: 0;
            }
        }
      .vl-transparent-header {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          z-index: 99;
          padding: 16px 0;
          @media #{$xs} {
            padding: 0;
          }
          @media #{$md} {
            padding: 0;
          }
          .container.headerfix {
            max-width: 1300px;
          }
          .vl-logo {
              img {
                  width: 122px;
                  height: 50px;
                  object-fit: contain;
              }
          }
      }

      .vl-main-menu{
          & ul{
              text-align: center;
              & > li{
                  display: inline-block;
                  position: relative;
                  .span-arrow {
                    display: flex !important;
                    align-items: center;
                    justify-content: space-between;
                  }

                  a.nav-link.active {
                    color: var(--ztc-text-text-1);
                    background: none;
                    opacity: 70%;
                }
                  & > a{
                      color: var(--ztc-text-text-1);
                      font-family: var(--ztc-family-font1);
                      font-size: var(--ztc-font-size-font-s18);
                      display: inline-block;
                      position: relative;
                      transition: .4s;
                      padding: 0 16px;
                  }
                  &:hover{
                      & a{
                          color: var(--ztc-text-text-1);
                      }
                  }
                  & .sub-menu{
                      position: absolute;
                      top: 201%;
                      width:220px;
                      left: 0;
                      background: #fff;
                      padding: 12px 20px 24px;
                      opacity: 0;
                      visibility: hidden;
                      box-shadow: 0px 20px 30px rgba(1,15,28,0.1);
                      transition: .4s;
                      border-radius: 4px;
                      transform-origin: top;
                      transform: scale(1, 0);
                      &.menu1 {
                        top: 20% !important;
                      }
                      & li{
                          margin-right: 0;
                          display: block;
                          text-align: start;
                          & a{
                              color: var(--ztc-text-text-2);
                              display: inline-block;
                              font-size: var(--ztc-font-size-font-s18);
                              position: relative;
                              z-index: 1;
                              padding: 12px 0 0 0;
                              font-weight: var(--ztc-weight-medium);
                              &::after {
                                  position: absolute;
                                  content: "";
                                  height: 2px;
                                  width: 0;
                                  transition: all .4s;
                                  left: 0;
                                  bottom: 0;
                                  background: var(--Main-Color, linear-gradient(90deg, #2E0797 0%, #726EFC 100%));
                                  z-index: 1;
                              }
                              &:hover {
                                  &::after {
                                      width: 50%;
                                      transition: all .4s;
                                  }
                              }
                              &:before{
                                  display: none;
                              }
                          }
                          & .sub-menu{
                              left: 100%;
                              top: 201%;
                              opacity: 0;
                              visibility: hidden;
                              transition: .4s;
                              transform-origin: top;
                              transform: scale(1, 0);
                          }
                          &:hover{
                              & > a{
                                  color: #2E0797;
                              }
                              & > .sub-menu{
                                  opacity: 1;
                                  visibility: visible;
                                  top: 201%;
                                  transform: scale(1);
                              }
                          }

                      }
                  }

                  &:hover{
                      & a{
                          color: var(--ztc-text-text-1);

                      }
                      & .sub-menu{
                          opacity: 1;
                          visibility: visible;
                          top: 201%;
                          transform: scale(1);
                          transition: all .4s;
                      }
                  }

              }
          }
          &-black{
              & ul{
                  & li{
                      & a{
                          color: var(--ztc-text-text-1);
                          opacity: 80%;
                          padding: 0 20px;
                      }
                      &:hover{
                          & a{
                              color: var(--vl-theme-orange);
                          }
                      }
                      & .sub-menu{
                          & li{
                              &:hover{
                                  & > a{
                                      color: var(--vl-theme-orange);
                                  }
                              }
                          }
                      }
                  }
              }
          }
      }

      .vl-main-menu ul > li:hover .vl-mega-menu{
          opacity: 1;
          visibility: visible;
          transition: .3s;
          top: 201%;
          transform: scale(1);
      }

      .vl-mega-menu {
          position: absolute;
          left: -250px;
          top: 100px;
          width: 1290px;
          background: #fff;
          padding: 25px;
          box-shadow: 0px 20px 30px rgba(1,15,28,0.1);
          opacity: 0;
          visibility: hidden;
          transition: .3s;
          top: 201.3%;
          transform: scale(1, 0);
          transform-origin: top;
          border-radius: 4px;
          @media #{$lg}{
              left: -162px;
              width: 929px;
          }

          @media #{$md,$xs}{
              width: auto;
              opacity: 1;
              visibility: visible;
              transition: none;
              position: static;
              display: none;
              transform: scale(1);
          }
      }

      .vl-home-thumb {
        position: relative;
        z-index: 1;
        img {
            box-shadow: 0px 2px 6px rgba(1,15,28,0.2);
            height: 100%;
            width: 100%;
            object-fit: cover;
            border-radius: 4px;
            @media #{$md} {
                object-fit: cover;
            }
        }
        .img1 {
            position: relative;
            z-index: 1;
            &::after {
                position: absolute;
                content: "";
                height: 100%;
                width: 100%;
                left: 0;
                transition: all .4s;
                top: 0;
                background: var(--ztc-text-text-2);
                border-radius: 4px;
                transform: scale(0.8);
                visibility: hidden;
                opacity: 0;
            }
        }
        .btn-area1 {
            position: absolute;
            top: 0;
            left: 18%;
            right: 18%;
            transition: all .6s;
            visibility: hidden;
            opacity: 0;
            z-index: 2;
            @media #{$md} {
                left: 25%;
                right: 25%;
            }
            .vl-btn1 {
                position: relative;
                display: inline-block;
                padding: 18px 24px;
                border-radius: 8px;
                color: #2E0797 !important;
                background: var(--ztc-bg-bg-1);
                z-index: 1;
                font-family: var(--ztc-family-font1);
                font-size: var(--ztc-font-size-font-s20);
                line-height: 20px;
                font-weight: 700;
                transition: all .4s;
                width: 150px;
                &:hover {
                    color: var(--ztc-text-text-1) !important;
                    transition: all .4s;
                    i {
                        transform: rotate(0);
                        transition: all .4s;
                    }
                    &::after {
                        visibility: visible;
                        opacity: 1;
                        transition: all .4s;
                        width: 100%;
                        left: 0;
                    }
                }
                &::after {
                    position: absolute;
                    content: "";
                    height: 100%;
                    width: 10px;
                    background: var(--ztc-bg-bg-5);
                    transition: all .4s;
                    top: 0;
                    left: 50%;
                    border-radius: 8px;
                    z-index: -1;
                    visibility: hidden;
                    opacity: 0;
                }
                i {
                    margin-left: 4px;
                    transform: rotate(-45deg);
                    transition: all .4s;
                }
            }
        }

        a {
            font-size: var(--ztc-font-size-font-s18);
            line-height: 18px;
            font-weight: var(--ztc-weight-medium);
            color: var(--ztc-text-text-2) !important;
            transition: all .4s;
            display:block;
            padding-top: 16px;
            text-align: center;
        }

        &:hover {
            .btn-area1 {
                visibility: visible;
                opacity: 1;
                transition: all .6s;
                top: 20%;
                @media #{$md} {
                    top: 25%;
                }
            }
            .img1 {
                &::after {
                    transform: scale(1);
                    transition: all .4s;
                    visibility: visible;
                    opacity: 0.8;
                }
            }
        }
      }

      .header-sticky {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        -webkit-animation: .7s ease-in-out 0s normal none 1 running vlfadeInDown;
        animation: .7s ease-in-out 0s normal none 1 running vlfadeInDown;
        .row-bg3 {
            background: var(--ztc-bg-bg-2);
        }
      }
    }

    @keyframes vlfadeInDown {
      0% {
        opacity: 0;
        transform: translateY(-100%);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .vlfadeInDown {
      animation: vlfadeInDown 1s ease-out forwards;
    }
              // HOMEPAGE1 HEADER ENDS //

# Sources & Credits

- Fonts "'Figtree', sans-serif"
- Icons
  - Fontawesome 6 Pro
- Bootstrap Bootstrap 5

# Supports

Thank you for reading the documentaion. If you still have any question or any problem, please contact with us. We will give you best support. Thanks.

Unifato