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

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

Eitech- Technology And IT Solutions Services

Main File Structure

Setup

Prerequisites

Python

For Windows

For Linux and macOS

Virtualenv

SCSS Structure

Sources & Credits

Supports