目录

1. 背景
2. 目标
3. 描述
4. 技术特点
5. 开发环境
6. WWW
7. 客户端浏览发展史
8. 服务端http发展史
9. http分层概览

---

背景

http协议被广泛使用，从移动端，pc浏览器，http无疑是打开互联网应用窗口的重要协议，http在网络应用层中的地位不可撼动，是能准确区分前后的重要协议、

目标

对http协议的理论学习，从零开始完成web服务器开发，作用下三层协议，从技术到应用，让网络难点无处遁形

描述

采用C/S模型，编写支持中小型应用的http，并结合mysql，理解常见互联网应用行为，完全理解从上网开始，到关闭浏览器的所有操作中的技术细节

技术特点

网络编程（TCP/IP协议，socket流式套接字，http协议）
多线程技术
cgi技术
线程池

开发环境

cents 7/ubuntu 20.04 + vim/gcc/gdb+c/c++

WWW

www是环球信息网的缩写，（亦作“Web”、“WWW”、“W3”，英文全称为“World Wide Web”），中文名字‘万维网，“环球网”’等，常简称为Web

分为Web客户端和Web服务器程序。www可以让Web客户端（常用浏览器）访问浏览Web的页面。是一个由许多互相连接的超文本组成的系统，通过互联网访问。在这个系统中，每个有用的事物，称为一样“资源”；并且由一个全局“统一资源标识符”（URI）标识；这些资源通过超文本传输协议（Hypertext Transfer protocol）传送给用户，而后者通过点击链接来获得资源

万维网联盟（World Wide Web Consortium，简称W3C），又称W3C理事会。1994年10月在麻省理工学院计算机科学实验室成立。万维网联盟的创始人是万维网的发明者蒂姆·博纳斯-李。–摘自这里

客户端浏览发展史

1990年11月，世界上第一台Web服务器和Web浏览器诞生
1993年1月，NCSA（美国国家超级计算机应⽤中心NationalCenterfor SupercomputerApplications，简称NCSA）研发html内联显⽰图⽚的浏览器Mosaic，不久windows和苹果mac版的Mosaic相继出
现
NASAhttpd1.0也差不多这个时期出现
1994年12⽉网景公司NetscapeNavigator1.0（网景领航员）浏览器出现
1995年微软发布IE1.0和2.0
紧随其后，web服务器标准Apache0.2诞⽣
1995年左右，微软和⽹景针对html标准开始打仗
2000年，⽹景衰落
2004年，Mozilla（缩写MF或MoFo，全称Mozilla基⾦会，是为⽀持和领导开源的Mozilla项⽬⽽设⽴的⼀个⾮营利组织）基⾦发布firefox，第⼆次浏览器⼤战⼜开始了
随后，IE发布6，7，8，9，10版本，同步Chrome，Opera，Safari浏览器也开始抢占市场
今天的浏览器格局形成

服务端http发展史

1990年，HTTP/0.9诞⽣
1996年5⽉，HTTP/1.0标准诞⽣，记载于RFC1945,该标准⾄今仍然被使⽤
1997年1⽉，HTTP/1.1问世，是⽬前使⽤的主流http版本
HTTP/2.0正在定制，但要被⼴泛使⽤，仍旧需要较多时间

http分层概览

整体来看

细节

http相关协议

TCP
IP
DNS

DNS

http背景补充

目前主流使用http1.1，按照1.0来实现
http是无状态的，不会保留之前的请求和响应，为了保持状态，引入了cookie

URI、URL、URN

URI,是uniform resource identifier，统⼀资源标识符，⽤来唯⼀的标识⼀个资源
URL,是uniform resource locator，统⼀资源定位符，它是⼀种具体的URI，即URL可以⽤来标识⼀个资源，⽽且还指明了如何locate这个资源。
URN,uniform resource name，统⼀资源命名，是通过名字来标识资源，⽐如mailto:javanet@java.sun.com。

URI是一种抽象的，高层次概括定义统一资源表示，URL和URN是具体的资源表示方式，都是一种URI
URL是URI的子集，任何东西，只要能唯一标识出来，都可以说是URI。如果这个标识可以获取到上述对象的路径，同时也它可以是一个URL，但如果这个标识不提供获取对象的路径，，必然不是URL
URI: /home/index.html
URL: www.xxx.com:/home/index.html

浏览器URL格式

http是基于tcp的连接方式进行网络连接，1.1版本可以持续的长连接机制，绝大多数的web开发，都是构建在http协议上的应用
http url的格式如下：
http表⽰要通过HTTP协议来定位⽹络资源
host表⽰合法的Internet主机域名或者IP地址,本主机IP:127.0.0.1
port指定⼀个端⼝号，为空则使⽤缺省端⼝80
abs_path指定请求资源的URI
如果URL中没有给出abs_path，那么当它作为请求URI时，必须以“/”的形式给出，通常这个⼯作浏览器⾃动帮我们完成。默认访问首页

一个较完整的http请求：
http://www.aspxfans.com:8080/news/index.asp?boardID=5&ID=24618&page=1

请求与响应

示意图

细节

请求格式

响应格式

请求的方法

GET：获取资源，获取被URI标识的资源，重点
POST：传输实体主体，重点
PUT：传输文件，指定文件放的uri所标识的路径，类似ftp，有安全问题，大部分web不用
HEAD：获取报文首部，和GET类似，但是不返回报文主体部分。用于确认uri的有效性以及资源的日期等
DELETE：与put相反，删除uri指定的资源，不安全，一般也不使用
OPTIONS：询问支持方法
TRACE：追踪路径
CONNECT：使用隧道协议连接代理

总结方法：

响应，状态码及描述

状态码用表示服务器http响应状态的3位数字代码、通过状态码，就可以知道服务端是否正确的处理请求，如果不正确，是什么原因导致的（404）

是http返回给浏览器的状态码

状态码分类

常见状态码

2XX 成功：结果正确处理
200 OK：客户端的请求，被正确处理了
204：请求结果正确处理，但响应信息没有正文
206 Partial Content：表示客户端队服务器进行了范围请求，而且服务器成功执行了这部分GET请求，响应报文中由Content-Range指定的实体内容范围

3XX 成功：浏览器需要执行某些特殊的处理以正确处理请求
301 Moved Permanently：永久性重定向，表示请求的资源被分配了新的uri，以后用新的uri，如果之前将老的uri保存为书签了，后面应该按照响应的location首部字段重新保存书签
302 Found：临时重定向，目标资源分配了新的uri，希望用户本次用新的uri访问

307 Temporary Redirect：临时重定向，该状态码与302有相同含义，307会遵守标准，不会从post变get，每种浏览器可能有不同的情况

4XX 客户端错误：客户端发生错误的原因
400 Bad Request：表明请求报文中存在语法错误，需修改请求内容重新发送，另外，浏览器会像200 OK一样对待该状态码
403 Forbidden：表明浏览器请求的资源被服务器拒绝了，服务器没有必要给出详细理由，如果要说明，可以在响应实体内部说明
404 Not Found：没有请求的资源

5XX 服务器错误：服务器本身发生错误
500 Internal Server Error：服务端执行发生错误，可能是web本身的bug或临时故障
503 Server Unavailable：服务器处于超负荷或正在停机维护，目前无法处理请求，最好写入Retry-After首部字段返回客户端

CGI机制

CGI(CommonGatewayInterface)是WWW技术中最重要的技术之⼀，有着不可替代的重要地位。CGI是外部应⽤程序（CGI程序）与WEB服务器之间的接⼝标准，是在CGI程序和Web服务器之间传递信息的过程
浏览器除了从服务器下获得资源（⽹⻚，图⽚，⽂字等），有时候还有能上传⼀些东西（提交表单，注册⽤⼾之类的），看看我们⽬前的http只能进⾏获得资源，并不能够进⾏上传资源，所以⽬前http并不具有交互式。为了让我们的⽹站能够实现交互式，我们需要使⽤CGI完成，时刻记着，我们⽬前是要写⼀个http，所以，CGI的所有交互细节，都需要我们来完成。包括http提供的CGI机制和自己实现CGI程序

首先区分get和post的区别
GET⽅法从浏览器传参数给http服务器时，是需要将参数跟到URI后⾯的
POST⽅法从浏览器传参数给http服务器时，是需要将参数放的请求正⽂的

GET⽅法，如果没有传参，http按照⼀般的⽅式进⾏，返回资源即可
GET⽅法，如果有参数传⼊，http就需要按照CGI⽅式处理参数，并将执⾏结果（期望资源）返回给浏览器
POST⽅法,⼀般都需要使⽤CGI⽅式来进⾏处理

线程池介入

大量链接会导致内部进程线程暴增，让服务器效率恒定

完整代码

服务器部分

TcpServer.hpp

#pragma once
#include <sys/types.h>
#include <sys/socket.h>
#include <stdlib.h>
#include <netinet/in.h>
#include <arpa/inet.h>
#include <string.h>
#include <pthread.h>
#include <unistd.h>
#include "Log.hpp"

#define BACKLOG 5

class TcpServer
{
public:
    TcpServer(int port)
        :_port(port),
         _listen_sock(-1)
    {}

    void InitServer()
    {
        Socket();
        Bind();
        Listen();
        LOG(INFO, "tcpserver init success...");
    }

    void Socket()
    {
        _listen_sock = socket(AF_INET, SOCK_STREAM, 0);
        if (_listen_sock < 0)
        {
            LOG(FATAL, "socket error!");
            exit(1);
        }

        int opt = 1;
        setsockopt(_listen_sock, SOL_SOCKET, SO_REUSEADDR, &opt, sizeof(opt));
    }

    void Bind()
    {
        struct sockaddr_in local;
        memset(&local, 0, sizeof(local));
        local.sin_addr.s_addr = INADDR_ANY;
        local.sin_family = AF_INET;
        local.sin_port = htons(_port);

        if (bind(_listen_sock, (const sockaddr*)&local, sizeof(local)) < 0)
        {
            LOG(FATAL, "bind error!");
            exit(2);
        }
    }

    void Listen()
    {
        if (listen(_listen_sock, BACKLOG) < 0)
        {
            LOG(FATAL, "listen error!");
            exit(3);
        }
    }

    static TcpServer* GetInstance(int port)
    {
        static pthread_mutex_t mutex = PTHREAD_MUTEX_INITIALIZER;
        if (_svr == nullptr)
        {
            pthread_mutex_lock(&mutex);
            if (_svr == nullptr)
            {
                _svr = new TcpServer(port);
                _svr->InitServer();
            }
            pthread_mutex_unlock(&mutex);
        }

        return _svr;
    }        

    inline int Sock()
    {
        return _listen_sock;
    }

    ~TcpServer()
    {
        if(_listen_sock >= 0)
        {
            close(_listen_sock);
        }
    }

private:
    int _port;
    int _listen_sock;
    static TcpServer* _svr;

    TcpServer(const TcpServer& x){}
};

TcpServer* TcpServer::_svr = nullptr;

HttpServer.hpp

#pragma once
#include <signal.h>
#include "TcpServer.hpp"
#include "Task.hpp"
#include "ThreadPool.hpp"

#define PORT 8000

class HttpServer
{
public:
    HttpServer(int port = PORT)
        :_port(port),
         //_tpc_server(nullptr),
         _stop(false)
    {}

    void InitServer()
    {
        // 信号忽略，不然写入时可能直接崩溃
        signal(SIGPIPE, SIG_IGN);
        //_tpc_server = TcpServer::GetInstance(_port);
    }

    void Loop()
    {
        //int listen_sock = _tpc_server->Sock();
        TcpServer *tsvr = TcpServer::GetInstance(_port);
        while (!_stop)
        {
            struct sockaddr_in peer;
            memset(&peer, 0, sizeof(peer));
            socklen_t len = sizeof(peer);

            int sock = accept(tsvr->Sock(), (sockaddr *)&peer, &len);
            if (sock < 0)
            {
                continue;
            }

            LOG(INFO, "get a new link...");
            // int* tmp_sock = new int(sock);
            // pthread_t tid;
            // pthread_create(&tid, nullptr, Entrance::HandlerRequest, tmp_sock);

            // 引入线程池
            Task task(sock);
            ThreadPool::GetInstance()->PushTask(task);
            //_pool.push_back(task);
        }
    }

    ~HttpServer()
    {}

private:
    int _port;
    //TcpServer* _tpc_server;
    bool _stop;
};

服务器辅助分

Util.hpp

#pragma once
#include <string>
#include <sys/types.h>
#include <sys/socket.h>

class Util
{
public:
    static int ReadLine(int sock, std::string& out)
    {
        char ch;
        while (ch != '\n')
        {
            ssize_t s = recv(sock, &ch, sizeof(ch), 0);
            if (s > 0)
            {
                if (ch == '\r')
                {
                    // 看看后面是不是\n  \r或\r\n->\n
                    recv(sock, &ch, sizeof(ch), MSG_PEEK);
                    if (ch == '\n')
                    {
                        // \r\n只读\n
                        // 窥探到就一定存在
                        recv(sock, &ch, sizeof(ch), 0);
                    }
                    else
                    {
                        ch = '\n';
                    }
                }

                // 普通字符
                // \n
                out.push_back(ch);
            }
            else if (s == 0)
            {
                return 0;
            }
            else
            {
                return -1;
            }
        }

        return out.size();
    }

    static bool CutString(const std::string& target, std::string& sub_out1, std::string& sub_out2, std::string sep)
    {
        ssize_t pos = target.find(sep);
        if (pos != std::string::npos)
        {
            sub_out1 = target.substr(0, pos);
            sub_out2 = target.substr(pos + sep.size());
            return true;
        }
        return false;
    }

private:
};

线程池部分

#pragma once
#include <queue>
#include <thread>
#include "Task.hpp"

#define NUM 6

class ThreadPool
{
private:
    ThreadPool(int num = NUM)
        : _num(num),
          _stop(false)
    {
        pthread_mutex_init(&_mutex, nullptr);
        pthread_cond_init(&_cond, nullptr);
    }

    ThreadPool(const ThreadPool&){}

public:
    bool InitThreadPool()
    {
        for (int i = 0; i < _num; i++)
        {
            pthread_t tid;
            if (pthread_create(&tid, nullptr, ThreadRoutinue, this) != 0)
            {
                LOG(FATAL, "create thread pool error");
                return false;
            }
        }

        LOG(FATAL, "create thread pool success");
        return true;
    }

    bool IsStop()
    {
        return _stop;
    }

    static void* ThreadRoutinue(void* args)
    {
        ThreadPool *tp = (ThreadPool *)(args);
        while (true)
        {
            Task task;
            tp->Lock();
            // while 防止误唤醒
            while (tp->TaskQueueIsEmpty())
            {
                tp->ThreadWait(); // 醒来时，一定占有锁
            }
            tp->UnLock();
            tp->PopTask(task);
            task.ProcessOn();
        }
    }

    void ThreadWait()
    {
        pthread_cond_wait(&_cond, &_mutex);
    }

    void ThreadWakeUp()
    {
        pthread_cond_signal(&_cond);
    }

    void Lock()
    {
        pthread_mutex_lock(&_mutex);
    }

    void UnLock()
    {
        pthread_mutex_unlock(&_mutex);
    }

    void PushTask(const Task& task)
    {
        Lock();
        _task_queue.push(task);
        UnLock();
        ThreadWakeUp();
    }

    bool TaskQueueIsEmpty()
    {
        return _task_queue.size() == 0 ? true : false;
    }

    void PopTask(Task& task)
    {
        task = _task_queue.front();
        _task_queue.pop();
    }

    static ThreadPool* GetInstance()
    {
        static pthread_mutex_t _lock = PTHREAD_MUTEX_INITIALIZER;
        if (_instance == nullptr)
        {
            pthread_mutex_lock(&_lock);
            if (_instance == nullptr)
            {
                _instance = new ThreadPool();
                _instance->InitThreadPool();
            }
            pthread_mutex_unlock(&_lock);
        }

        return _instance;
    }

    ~ThreadPool()
    {
        pthread_mutex_destroy(&_mutex);
        pthread_cond_destroy(&_cond);
    }

private:
    int _num;
    bool _stop;
    std::queue<Task> _task_queue;
    pthread_mutex_t _mutex;
    pthread_cond_t _cond;
    static ThreadPool* _instance;
};

ThreadPool* ThreadPool::_instance = nullptr;

Task.hpp

#pragma once
#include "Protocol.hpp"

class Task
{
public:
    Task()
    {}

    Task(int sock)
        : _sock(sock)
    {}

    // 处理任务
    void ProcessOn()
    {
        _handler(_sock);
    }

private:
    int _sock;
    CallBack _handler;  // 设置回调
};

协议部分

Protocol.hpp

#pragma once
#include <iostream>
#include <unistd.h>
#include <vector>
#include <sstream>
#include <unordered_map>
#include <sys/stat.h>
#include <sys/sendfile.h>
#include <fcntl.h>
#include <algorithm>
#include <sys/wait.h>
#include "Util.hpp"

#define SEP ": "
#define OK 200
#define NOT_FOUND 404
#define BAD_REQUEST 400
#define SERVER_ERROR 500

#define WROOT "wwwroot"
#define HOME_PAGE "index.html"
#define PAGE_404 "404.html"
#define HTTP_VERSION "HTTP/1.0"
#define LINE_END "\r\n"

//#define DEBUG

static std::string CodeDesc(int code)
{
    std::string desc;
    switch (code)
    {
    case 200:
        desc = "OK";
        break;
    case 404:
        desc = "Not Found";
        break;
    default: 
        break;
    }

    return desc;
}

static std::string SuffixDesc(const std::string suffix)
{
    static std::unordered_map<std::string, std::string> suffixdesc =
        {
            {".html", "text/html"},
            {".css", "text/css"},
            {".js", "application/json"},
            {".xml", "application/xml"},
            {".jpg", "image/jpeg"}
        };

    auto it = suffixdesc.find(suffix);
    if (it != suffixdesc.end())
    {
        return it->second;
    }

    return "text/html";
}

class HttpRequest
{
public:
    HttpRequest()
        :_content_length(0),
        _cgi(false)
    {}

    ~HttpRequest()
    {}

public:
    std::string _request_line;
    std::vector<std::string> _request_header;
    std::string _blank;
    std::string _request_body;

    // 解析完毕的结果
    std::string _method;
    std::string _url;
    std::string _path;          // 请求目录和参数
    std::string _query_string;
    std::string _version;

    std::unordered_map<std::string, std::string> _header_kv;
    int _content_length;
    std::string _suffix;
    int _size;

    // CGI机制
    bool _cgi;
};

class HttpResponse
{
public:
    HttpResponse()
        :_blank(LINE_END),
         _status_code(OK),
         _fd(-1)
    {}

    ~HttpResponse()
    {}

public:
    std::string _status_line;
    std::vector<std::string> _response_header;
    std::string _blank;
    std::string __response_body;
    int _fd;

    int _status_code;
};

class EndPoint
{
public:
    bool RecvHttpRequestLine()
    {
        auto &line = _http_request._request_line;
        if (Util::ReadLine(_sock, line) > 0)
        {
            line.resize(line.size() - 1);
            LOG(INFO, _http_request._request_line);
        }
        else
        {
            _stop = true;
        }

        return _stop;
    }

    bool RecvHttpRequestHeader()
    {
        std::string line;
        while (true)
        {
            line.clear();
            if (Util::ReadLine(_sock, line) <= 0)
            {
                _stop = true;
                break;
            }

            if (line == "\n")
            {
                _http_request._blank = line;
                break;
            }

            line.resize(line.size() - 1);
            _http_request._request_header.push_back(line);
        }

        return _stop;
    }

    void ParseHttpRequestLine()
    {
        auto& line = _http_request._request_line;
        std::stringstream s(line);
        s >> _http_request._method >> _http_request._url >> _http_request._version;
        auto &method = _http_request._method;
        std::transform(method.begin(), method.end(), method.begin(), ::toupper);
    }

    void ParseHttpRequestHander()
    {
        for (auto& line: _http_request._request_header)
        {
            std::string key;
            std::string value;
            if (Util::CutString(line, key, value, SEP))
            {
                std::cout << key << ":" << value << std::endl;
                _http_request._header_kv.insert({key, value});
            }
        }
    }

    bool IsNeedRecvHttpRequestBody()
    {
        if (_http_request._method == "POST")
        {   
            auto it = _http_request._header_kv.find("Content-Length");
            if (it != _http_request._header_kv.end())
            {
                _http_request._content_length = atoi(it->second.c_str());
                return true;
            }
        }

        return false;
        
    }

    bool RecvHttpRequestBody()
    {
        if (IsNeedRecvHttpRequestBody())
        {
            int len = _http_request._content_length;
            auto &body = _http_request._request_body;
            char ch = 0;
            while (len)
            {
                ssize_t s = recv(_sock, &ch, 1, 0);
                if (s > 0)
                {
                    body.push_back(ch);
                    len--;
                }
                else
                {
                    _stop = true;
                    break;
                }
            }

        }

        return _stop;
    }

public:
    EndPoint(int sock)
        :_sock(sock),
         _stop(false)
    {}

    void RecvHttpRequest()
    {
        if (!RecvHttpRequestLine() && !RecvHttpRequestHeader())
        {
            ParseHttpRequestLine();
            ParseHttpRequestHander();
            RecvHttpRequestBody();
        }
    }

    // cgi处理
    int ProcessCgi()
    {
        int code = OK;
        auto &bin = _http_request._path;
        auto &method = _http_request._method;
        auto &query_string = _http_request._query_string; // GET
        auto &body_text = _http_request._request_body; // POST
        auto &response_body = _http_response.__response_body;
        int content_length = _http_request._content_length;

        // 环境变量，用来GET传
        std::string query_string_env;
        std::string method_env;
        std::string content_length_env;

        // 管道通信
        int input[2];
        int output[2];

        if (pipe(input) < 0)
        {
            LOG(ERROR, "pipe input error");
            code = SERVER_ERROR;
            return code;
        }

        if (pipe(output) < 0)
        {
            LOG(ERROR, "pipe input error");
            code = SERVER_ERROR;
            return code;
        }
        
        // 父进程关闭input写端，只读。关output读端，只写
        // 新线程，从头到尾只有一个进程，不能本进程替换, 创建新进程
        pid_t pid = fork();
        if (pid == 0)
        {
            // exec
            close(input[0]);
            close(output[1]);

            // 通过方法判断从哪取参数
            method_env = "METHOD=";
            method_env += method;
            putenv(((char*)method_env.c_str()));
            if (method == "GET")
            { 
                query_string_env += "QUERY_STRING=";
                query_string_env += query_string;
                // 注册环境变量
                putenv(((char*)query_string_env.c_str()));
            }
            else if (method == "POST")
            {
                content_length_env = "CONTENT_LENGTH=";
                content_length_env += std::to_string(content_length);
                putenv((char*)(content_length_env.c_str()));
            }
            else
            {
                // do nothing
            }
            std::cout << "替换的程序为:" << bin << std::endl;
            dup2(input[1], 1);
            dup2(output[0], 0);
            execl(bin.c_str(), bin.c_str(), nullptr);
            exit(1);
        }
        else if (pid > 0)
        {
            // parent
            close(input[1]);
            close(output[0]);

            if (method == "POST")
            {
                const char *start = body_text.c_str();
                int total = 0;
                int size = 0;
                // 防止一次没写完
                while ((total < content_length) && (size = write(output[1], start + total, body_text.size() - total)) > 0)
                {
                    total += size;
                }
            }

            // 读取cgi返回的数据
            char ch = 0;
            while (read(input[0], &ch, 1) > 0)
            {
                response_body.push_back(ch);
            }

            // 判断子进程退出状态
            int status = 0;
            pid_t ret = waitpid(pid, &status, 0);
            if (ret == pid)
            {
                if (WIFEXITED(status))
                {
                    if (WEXITSTATUS(status) == 0)
                    {
                        code = OK;
                    }
                    else
                    {
                        code = BAD_REQUEST;
                    }
                }
                else
                {
                    code = SERVER_ERROR;
                }
            }

            // 使用完后关闭描述符
            close(input[0]);
            close(output[1]);           
        }
        else
        {
            LOG(ERROR, "fork error");
            return 404;
        }

        return code;
    }

    int ProcessNoCgi()
    {
        _http_response._fd = open(_http_request._path.c_str(), O_RDONLY);
        if (_http_response._fd >= 0)
        {
            return OK;
        }
        return NOT_FOUND;
    }

    void BuildOkResponse()
    {
        std::string line = "Content-Type: ";
        line += SuffixDesc(_http_request._suffix);
        line += LINE_END;
        _http_response._response_header.push_back(line);

        line += "Content-Length: ";
        if (_http_request._cgi)
        {
            line += std::to_string(_http_response.__response_body.size());
        }
        else
        {
            // get
            line += std::to_string(_http_request._size);
        }
        line += LINE_END;
        _http_response._response_header.push_back(line);
    }

    void HandlerError(std::string page)
    {
        _http_request._cgi = false;
        // 给用户返回对应错误页面
        _http_response._fd = open(page.c_str(), O_RDONLY);
        if (_http_response._fd > 0)
        {
            struct stat st;
            stat(page.c_str(), &st);
            _http_request._size = st.st_size;
            std::string line = "Content-Type: text/html";  // 这里明确了是返回网页
            line += LINE_END;
            _http_response._response_header.push_back(line);

            line = "Content-Length: ";
            line += std::to_string(st.st_size);
            line += LINE_END;
            _http_response._response_header.push_back(line);
        }
    }

    void BuildHttpResponseHelper()
    {
        auto &code = _http_response._status_code;
        auto &status_line = _http_response._status_line;
        // 构建状态行
        status_line = HTTP_VERSION;
        status_line += " ";
        status_line += std::to_string(code);
        status_line += " ";
        status_line += CodeDesc(code);
        status_line += LINE_END;
        
        // 构建响应正文，可能包含报头
        std::string path = WROOT;
        path += "/";
        switch (code)
        {
        case OK:
            BuildOkResponse();
            break;
        case NOT_FOUND:
            path += PAGE_404;
            HandlerError(path);
            break;
        // case 500:
        //     HandlerError(PAGE_500);
        //     break;
        default:
            path += PAGE_404;
            HandlerError(path);
            break;
        }
    }

    void BuildHttpResponse()
    {
        struct stat st;
        int found = 0;
        std::string path;
        auto &code = _http_response._status_code;

        std::cout << "方法是: " << _http_request._method << std::endl;
        if (_http_request._method != "GET" && _http_request._method != "POST")
        {
            // 非法请求
            LOG(WARNING, "method not is right");
            code = BAD_REQUEST;
            goto END;
        }

        if (_http_request._method == "GET")
        {
            ssize_t pos = _http_request._url.find("?");
            if (pos != std::string::npos)
            {
                Util::CutString(_http_request._url, _http_request._path, _http_request._query_string, "?");
                _http_request._cgi = true;
            }
            else
            {
                _http_request._path = _http_request._url;
            }


        } 
        else if (_http_request._method == "POST")
        {
            _http_request._cgi = true;
            _http_request._path = _http_request._url;
        }
        else
        {
            // do nothing
        }

        // std::cout << _http_request._path << " " << _http_request._query_string << std::endl;
        path = _http_request._path;
        _http_request._path = WROOT;
        _http_request._path += path;
        // 访问的是根目录, 换成主页
        if (_http_request._path[_http_request._path.size() - 1] == '/')
        {
            _http_request._path += HOME_PAGE;
        }

        if (stat(_http_request._path.c_str(), &st) == 0)
        {
            // 访问的是目录
            if (S_ISDIR(st.st_mode))
            {
                // 不允许访问目录，请求目录，设置为这个目录的主页
                _http_request._path += "/";
                _http_request._path += HOME_PAGE;
                // 上面修改了路径，重新获取
                stat(_http_request._path.c_str(), &st);
            }

            // 访问可执行程序
            if ((st.st_mode & S_IXUSR) || (st.st_mode & S_IXGRP) || (st.st_mode & S_IXOTH))
            {
                std::cout << "访问程序:" << _http_request._path << std::endl;
                // 特殊处理
                _http_request._cgi = true;
            }

            _http_request._size = st.st_size;
        }
        else
        {
            // 资源不存在
            LOG(WARNING, _http_request._path + "NOT FOUND");
            code = NOT_FOUND;
            goto END;
        }

        // std::cout << "path:" << _http_request._path << std::endl;
        // suffix
        found = _http_request._path.rfind(".");
        if (found == std::string::npos)
        {
            _http_request._suffix = ".html";
        }
        else
        {
            _http_request._suffix = _http_request._path.substr(found);
        }

        // 是否cgi处理
        if (_http_request._cgi == true)
        {
            code = ProcessCgi();  // 执行目标程序，拿到结果：正文
        }
        else
        {
            // 目标网页一定存在
            // 返回要构建http响应
            code = ProcessNoCgi(); // 简单的网页处理，返回静态网页，只需要打开即可 
        }
END:
        // 构建错误响应
        BuildHttpResponseHelper();  // 状态行填充了，报头有了，空行有了，正文有了
    }

    void SendHttpResponse()
    {
        //std::cout << "status_line" << _http_response._status_line << std::endl;
        
        // for (auto it : _http_response._response_header)
        // {
        //     //std::cout << "status_head" << _http_response._status_line << std::endl;
        // }
        send(_sock, _http_response._status_line.c_str(), _http_response._status_line.size(), 0);
        for (auto it : _http_response._response_header)
        {
            send(_sock, it.c_str(), it.size(), 0);
        }
        send(_sock, _http_response._blank.c_str(), _http_response._blank.size(), 0);
        //std::string con = "hello world";
        if (_http_request._cgi)
        {
            // 内容在response里
            auto &response_body = _http_response.__response_body;
            size_t size = 0;
            size_t total = 0;
            const char *start = response_body.c_str();
            while ((total < response_body.size()) && (size = send(_sock, start + total, response_body.size() - total, 0)) > 0)
            {
                total += size;
            }
        }
        else
        {
            // 发送打开的文件
            sendfile(_sock, _http_response._fd, nullptr, _http_request._size);
            close(_http_response._fd);
        }
    }

    bool IsStop()
    {
        return _stop;
    }

    ~EndPoint()
    {}

private:
    int _sock;
    HttpRequest _http_request;
    HttpResponse _http_response;
    bool _stop;
};

class CallBack
{
public:
    CallBack()
    {}

    void operator()(int sock)
    {
        HandlerRequest(sock);
    }

    void HandlerRequest(int sock)
    {
        LOG(INFO, "handler request begin...");
        //int sock = *(int*)tmp_sock;
        //delete tmp_sock;

#ifdef DEBUG
        std::cout << "begin---------------------------" << sock << std::endl;
        char buff[4096];
        recv(sock, buff, sizeof(buff), 0);
        std::cout << buff;
        std::cout << "end-----------------------------" << sock << std::endl;
#else
        EndPoint *ep = new EndPoint(sock);
        ep->RecvHttpRequest();
        if (!ep->IsStop())
        {
            LOG(INFO, "recv success, begin build and send");
            ep->BuildHttpResponse();
            ep->SendHttpResponse();
        }
        else
        {
            LOG(INFO, "recv error, stop");
        }

        delete ep;
#endif
        LOG(INFO, "handle request end...");
        //return nullptr;
    }
    
    ~CallBack()
    {}
};

日志打印

Log.hpp

#pragma once
#include <iostream>
#include <string>
//#include <time.h>

#define INFO    1
#define WARNING 2
#define ERROR   3
#define FATAL   4

#define LOG(level, message) Log(#level, message, __FILE__, __LINE__) 

void Log(std::string level, std::string message, std::string filename, int line)
{
    std::cout << "[" << level << "]" << "[" << time(nullptr) << "]" << "[" << filename << "]"
              << "[" << line << "]: " << message << std::endl;
}

CGI程序

test_cgi.cc

#include <iostream>
#include <stdlib.h>
#include <unistd.h>
using namespace std;

bool GetQueryString(string& query_string)
{
    bool result = false;
    string method = getenv("METHOD");
    // 标准输出被重定向了，用标准错误
    // 获取环境变量
    //cerr << "debug method:" << method << endl;
    if (method == "GET")
    {
        query_string = getenv("QUERY_STRING");
        cerr << "debug query_string:" << query_string << endl;
        return true;
    }
    else if (method == "POST")
    {
        // 如何知道读取多少个字节
        //cerr << "content-length:" << getenv("CONTENT_LENGTH") << endl;
        int content_length = atoi(getenv("CONTENT_LENGTH"));
        char c = 0;
        while (content_length)
        {
            read(0, &c, 1);
            query_string.push_back(c);
            content_length--;
        }
        //cerr << "post debug query_string:" << query_string << endl;
        return true;
    }
    else
    {
        return false;
    }
}

void CutString(string in, string sep, string& out1, string& out2)
{
    auto pos = in.find(sep);
    if (pos != string::npos)
    {
        out1 = in.substr(0, pos);
        out2 = in.substr(pos + sep.size());
    }
}

int main()
{
    string query_string;
    GetQueryString(query_string);
    // a=100&b=200
    string str1, str2;
    CutString(query_string, "&", str1, str2);

    string name1, value1;
    CutString(str1, "=", name1, value1);

    string name2, value2;
    CutString(str2, "=", name2, value2);    

    // cerr
    cerr << name1 << ":" << value1 << endl;
    cerr << name2 << ":" << value2 << endl;
    // 管道写入
    cout << name1 << ":" << value1 << endl;
    cout << name2 << ":" << value2 << endl; 

    // 可能计算，存储，搜索，注册登录等
    int x = atoi(value1.c_str());
    int y = atoi(value2.c_str());

    cout << "<html>";
    cout << "<head><meta charset=\"utf-8\"></head>";
    cout << "<body>";
    cout << "<h3>" << value1 << "+" << value2 << "=" << x + y << "</h3>";
    cout << "<h3>" << value1 << "-" << value2 << "=" << x - y << "</h3>";
    cout << "<h3>" << value1 << "*" << value2 << "=" << x * y << "</h3>";
    cout << "<h3>" << value1 << "/" << value2 << "=" << x / y << "</h3>";
    cout << "</body>";
    cout << "</html>";

    return 0;
}

网页部分

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <!-- required meta -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- #keywords -->
    <meta name="keywords" content="boot, Bootstrap, It Solutions , Business Services, Techxly HTML Template">
    <!-- #description -->
    <meta name="description" content="IT Solutions & Business Services Multipurpose Responsive Website Template">
    <!-- #title -->
    <title>Techxly - IT Solutions & Business Services Template</title>
    <!-- #favicon -->
    <link rel="shortcut icon" href="assets/images/fav.png" type="image/x-icon">
    <!-- AOS  -->
    <link rel="stylesheet" href="static/css/aos.css">
    <!-- ==== css dependencies start ==== -->
    <link rel="stylesheet" href="static/css/style.css">
    <!-- tilt  -->
    <!-- ICON  -->
    <script src="static/js/web.js"></script>
    <!-- lightbox  -->
    <link rel="stylesheet" href="static/css/glightbox.min.css">
  </head>

  <body>
    <button id="rtlBtn">rtl</button>
    <!-- header-section start -->
    <header class="header-section header-menu w-100 pt-1 pt-lg-0 pb-3 pb-lg-0">
      <div class="navbar_mainhead header-fixed w-100">
        <div class="container">
          <div class="row align-items-center">
            <div class="col-12">
              <nav class="navbar navbar-expand-lg position-relative d-flex gap-5 align-items-center">
                <div>
                  <a href="" class="navbar-brand d-none d-sm-flex align-items-center gap-2">
                    <img src="static/picture/logo.png" class="logo" alt="logo">
                  </a>
                  <a href="" class="navbar-brand d-sm-none d-flex align-items-center gap-2">
                    <img src="static/picture/fav.png" class="shortlogo" alt="logo">
                  </a>
                </div>
                <div class="collapse navbar-collapse" id="navbar-content">
                  <ul class="navbar-nav d-flex align-items-lg-center gap-5 gap-lg-1 gap-xl-4 gap-xxl-5 py-2 py-lg-0 ms-2 ms-xl-10 ms-xxl-20 ps-0 ps-xxl-10 align-self-center">
                    <li class="dropdown">
                      <a href="" class="fs-ten">Home</a>
                    </li>
                    <li class="dropdown show-dropdown">
                      <a href="services.html" class="fs-ten">Services</a>
                    </li>
                    <li class="dropdown show-dropdown">
                      <a href="testimonials.html" class="fs-ten">Testimonials</a>
                    </li>
                    <li class="dropdown show-dropdown">
                      <a href="team.html" class="fs-ten">Team</a>
                    </li>
                    <li class="dropdown show-dropdown dropdown_btn">
                      <button type="button" aria-label="Navbar Dropdown Button" class="dropdown-toggle dropdown-nav d-flex gap-1 align-items-center fs-ten">
                        Menu <i class="ph-bold ph-caret-down"></i>
                      </button>
                      <ul class="dropdown-menu drop_menu">
                        <li>
                          <a class="dropdown-item fs-ten" href="about.html">About</a>
                        </li>
                        <li>
                          <a class="dropdown-item fs-ten" href="blog_details.html">Blog Details</a>
                        </li>
                        <li>
                          <a class="dropdown-item fs-ten" href="price.html">Pricing</a>
                        </li>
                        <li>
                          <a class="dropdown-item fs-ten" href="faqs.html">FAQs</a>
                        </li>
                        <li>
                          <a class="dropdown-item fs-ten" href="portfolio.html">Portfolio</a>
                        </li>
                        <li>
                          <a class="dropdown-item fs-ten" href="contact.html">Contact</a>
                        </li>
                        <li>
                          <a class="dropdown-item fs-ten" href="terms.html">Terms Conditions</a>
                        </li>
                        <li>
                          <a class="dropdown-item fs-ten" href="privacy.html">Privacy Policy</a>
                        </li>
                      </ul>
                    </li>
                    <li class="dropdown show-dropdown">
                      <a href="blog.html" class="fs-ten">Blog</a>
                    </li>
                  </ul>
                </div>
                <div>
                  <div class="right-area custom-pos position-relative d-flex gap-0 gap-xl-5 align-items-center">
                    <button id="toggle" class="dark_btn d-flex justify-content-center align-items-center fs-three p6-color mood_toggle">
                      <i class="ph-fill ph-moon fs-five" id="mood_icon"></i>
                    </button>
                    <a href="contact.html" class="btn p6-color d-none d-xl-block">
                      <span class="btn-text-one">Get Quotes</span>
                      <span class="btn-text-two">Get Quotes</span>
                    </a>
                  </div>
                  <button class="navbar-toggler mt-1" type="button" data-bs-toggle="collapse" aria-label="Navbar Toggler" data-bs-target="#navbar-content" aria-expanded="true" id="nav-icon3">
                    <span></span><span></span><span></span><span></span>
                  </button>
                </div>
              </nav>
            </div>
          </div>
        </div>
      </div>
    </header>
    <!-- header-section end -->

    <!-- Hero section start -->
    <section class="hero-bg overflow-hidden">
      <div class="particles_hero">
        <div class="container h-100">
          <div class="row g-lg-6 align-items-center pt-20 h-100">
            <div class="col-xxl-7 h-100 hero-bg-content">
              <div class="d-flex align-items-center justify-content-center h-100">
                <div>
                  <div data-aos="fade-up" data-aos-duration="800" class="hero_hot w-100 d-flex gap-3 align-items-center px-3 px-lg-5 py-2 py-lg-3 rounded-pill mb-3 mb-lg-6">
                    <button class="px-3 px-lg-5 py-2 rounded-pill w3-color bg3-color">
                      🚀 New
                    </button>
                    <span class="w3-color">Next - Level IT Solutions</span>
                  </div>
                  <h2 class="display-two fw-bold mb-3 mb-lg-5 w3-color" data-aos="fade-up" data-aos-duration="800">
                    Trusted
                    <span class="y1-color">IT Solutions</span>
                    & Cyber Security
                  </h2>
                  <div class="d-flex flex-wrap align-items-center gap-4 gap-md-8 align-items-center">
                    <div class="d-flex gap-2 align-items-center">
                      <img src="static/picture/quality.png" alt="...">
                      <span class="fs-ten w3-color">Supreme Quality Services</span>
                    </div>
                    <div class="d-flex gap-2 align-items-center">
                      <img src="static/picture/satisfaction.png" alt="...">
                      <span class="fs-ten w3-color">Promise of Satisfaction</span>
                    </div>
                  </div>
                  <div data-aos="fade-down" data-aos-duration="800">
                    <div class="d-flex flex-wrap gap-3 gap-md-6 my-5 my-md-10" data-aos="fade-down">
                      <a href="contact.html" class="btn">
                        <span class="btn-text-one d1-color">Get Quotes</span>
                        <span class="btn-text-two d1-color">Get Quotes</span>
                      </a>
                      <button class="btn-outline w2-color">
                        <span class="btn-text-one">Get Started</span>
                        <span class="btn-text-two">Get Started</span>
                      </button>
                    </div>
                    <div class="d-flex flex-wrap gap-3">
                      <a href="javascriopt:void(0)" class="hero_icon d-flex justify-content-center align-items-center">
                        <i class="ph ph-facebook-logo fs-six"></i>
                      </a>
                      <a href="javascriopt:void(0)" class="hero_icon d-flex justify-content-center align-items-center">
                        <i class="ph ph-x-logo fs-six"></i>
                      </a>
                      <a href="javascriopt:void(0)" class="hero_icon d-flex justify-content-center align-items-center">
                        <i class="ph ph-linkedin-logo fs-six"></i>
                      </a>
                      <a href="javascriopt:void(0)" class="hero_icon d-flex justify-content-center align-items-center">
                        <i class="ph ph-youtube-logo fs-six"></i>
                      </a>
                      <a href="javascriopt:void(0)" class="hero_icon d-flex justify-content-center align-items-center">
                        <i class="ph ph-instagram-logo fs-six"></i>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xxl-5 d-none d-xxl-block">
              <div data-tilt="">
                <img src="static/picture/hero-img.png" alt="hero" class="hero-img object-fit-cover">
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Hero section end -->

    <!-- service section start  -->
    <section class="position-relative pt-120 pb-120">
      <div class="container">
        <div class="d-flex flex-wrap gap-6 justify-content-between align-items-end" data-aos="fade-down" data-aos-duration="800">
          <div class="service_heading">
            <span class="fs-ten fw-semibold g2-color mb-2">Our Services</span>
            <h2 class="fs-two fw-semibold d1-color mb-6">
              What We’re <span class="y2-color">Offering?</span>
            </h2>
            <p class="fs-ten d2-color">
              Techxly is a HTML5 template based on Sass and Bootstrap 5 with
              modern and creative multipurpose design you can use Best services
              & IT solutions.
            </p>
          </div>
          <div>
            <a href="services.html" class="btn d1-color">
              <span class="btn-text-one">See Services</span>
              <span class="btn-text-two">See Services</span>
            </a>
          </div>
        </div>
        <div class="row g-3 g-sm-5 mt-7 mt-lg-15">
          <div class="col-12 col-sm-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
            <div class="service-card bgc1-color position-relative z-3 text-center px-10 py-8">
              <img src="static/picture/apps.png" alt="apps" width="80" height="80">
              <h4 class="fs-five fw-semibold d2-color mt-8 mb-4">
                Apps Development
              </h4>
              <p class="d2-color fs-ten">
                Techxly is a HTML5 template based on Sass and Bootstrap 5 with
                modern and creative.
              </p>
            </div>
          </div>
          <div class="col-12 col-sm-6 col-xl-4" data-aos="fade-up" data-aos-duration="800">
            <div class="service-card bgc1-color position-relative z-3 text-center px-10 py-8">
              <img src="static/picture/web.png" alt="apps" width="80" height="80">
              <h4 class="fs-five fw-semibold d2-color mt-8 mb-4">
                Web Development
              </h4>
              <p class="d2-color fs-ten">
                Techxly is a HTML5 template based on Sass and Bootstrap 5 with
                modern and creative.
              </p>
            </div>
          </div>
          <div class="col-12 col-sm-6 col-xl-4" data-aos="fade-up" data-aos-duration="900">
            <div class="service-card bgc1-color position-relative z-3 text-center px-10 py-8">
              <img src="static/picture/degital.png" alt="apps" width="80" height="80">
              <h4 class="fs-five fw-semibold d2-color mt-8 mb-4">
                Digital Marketing
              </h4>
              <p class="d2-color fs-ten">
                Techxly is a HTML5 template based on Sass and Bootstrap 5 with
                modern and creative.
              </p>
            </div>
          </div>
          <div class="col-12 col-sm-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
            <div class="service-card bgc1-color position-relative z-3 text-center px-10 py-8">
              <img src="static/picture/seo.png" alt="apps" width="80" height="80">
              <h4 class="fs-five fw-semibold d2-color mt-8 mb-4">
                SEO Optimization
              </h4>
              <p class="d2-color fs-ten">
                Techxly is a HTML5 template based on Sass and Bootstrap 5 with
                modern and creative.
              </p>
            </div>
          </div>
          <div class="col-12 col-sm-6 col-xl-4" data-aos="fade-up" data-aos-duration="800">
            <div class="service-card bgc1-color position-relative z-3 text-center px-10 py-8">
              <img src="static/picture/hosting.png" alt="apps" width="80" height="80">
              <h4 class="fs-five fw-semibold d2-color mt-8 mb-4">
                Web Hosting
              </h4>
              <p class="d2-color fs-ten">
                Techxly is a HTML5 template based on Sass and Bootstrap 5 with
                modern and creative.
              </p>
            </div>
          </div>
          <div class="col-12 col-sm-6 col-xl-4" data-aos="fade-up" data-aos-duration="900">
            <div class="service-card bgc1-color position-relative z-3 text-center px-10 py-8">
              <img src="static/picture/security.png" alt="apps" width="80" height="80">
              <h4 class="fs-five fw-semibold d2-color mt-8 mb-4">
                Data Secuity
              </h4>
              <p class="d2-color fs-ten">
                Techxly is a HTML5 template based on Sass and Bootstrap 5 with
                modern and creative.
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="rocket-img d-none d-xl-block">
        <img src="static/picture/rocket.png" alt="rocket">
      </div>
    </section>
    <!-- service section end  -->

    <!-- Our Process Flow start -->
    <section class="process-work-bg pt-120 pb-120 bg7-color">
      <div class="container">
        <div class="d-flex align-items-center justify-content-between">
          <div class="service_heading" data-aos="fade-down" data-aos-duration="800">
            <span class="fs-ten fw-semibold g1-color mb-2">Our Work Process</span>
            <h2 class="fs-two fw-semibold w3-color">
              How it helps your <span class="y1-color">business succeed</span>
            </h2>
            <p class="w3-color mt-4 mt-md-8">
              Techxly is a HTML5 template based on Sass and Bootstrap 5 with
              modern and creative multipurpose design you can use Best services
              & IT solutions.
            </p>
          </div>
          <div class="d-none d-md-flex align-items-center gap-2 position-relative pe-20 z-2">
            <div class="step-line"></div>
            <span class="w3-color fs-five fw-semibold">STEPS</span>
            <h1 class="work-step">03</h1>
          </div>
        </div>
        <div class="row g-5 mt-7 mt-lg-15">
          <div class="col-12 col-sm-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
            <div class="">
              <div class="d-flex align-items-center gap-10">
                <div class="process_icon_bg d-flex flex-shrink-0 justify-content-center align-items-center position-relative">
                  <img src="static/picture/service.png" alt="apps" width="60" height="60">
                  <div class="process_icon_num d-flex justify-content-center align-items-center position-absolute">
                    01
                  </div>
                </div>
                <div class="h-100">
                  <img src="static/picture/arrow.png" alt="..." class="arrow-img d-none d-xl-block">
                </div>
              </div>
              <h4 class="fs-five fw-semibold w3-color mt-4 mt-md-8 mb-2 mb-md-4">
                Choose a Service
              </h4>
              <p class="w4-color fs-ten">
                We focus on the best practices for it solutions and services.
              </p>
            </div>
          </div>
          <div class="col-12 col-sm-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
            <div class="">
              <div class="d-flex align-items-center gap-10">
                <div class="process_icon_bg d-flex flex-shrink-0 justify-content-center align-items-center position-relative">
                  <img src="static/picture/meeting.png" alt="apps" width="60" height="60">
                  <div class="process_icon_num d-flex justify-content-center align-items-center position-absolute">
                    02
                  </div>
                </div>
                <div class="h-100">
                  <img src="static/picture/arrow.png" alt="..." class="arrow-img d-none d-xl-block">
                </div>
              </div>
              <h4 class="fs-five fw-semibold w3-color mt-4 mt-md-8 mb-2 mb-md-4">
                Request a Meeting
              </h4>
              <p class="w4-color fs-ten">
                We focus on the best practices for it solutions and services.
              </p>
            </div>
          </div>
          <div class="col-12 col-sm-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
            <div class="">
              <div class="">
                <div class="process_icon_bg d-flex flex-shrink-0 justify-content-center align-items-center position-relative">
                  <img src="static/picture/service.png" alt="apps" width="60" height="60">
                  <div class="process_icon_num d-flex justify-content-center align-items-center position-absolute">
                    03
                  </div>
                </div>
              </div>
              <h4 class="fs-five fw-semibold w3-color mt-4 mt-md-8 mb-2 mb-md-4">
                Receive Custom Plan
              </h4>
              <p class="w4-color fs-ten">
                We focus on the best practices for it solutions and services.
              </p>
            </div>
          </div>
        </div>
        <div class="process-ready mt-8 mt-md-15 p-5 p-md-10">
          <div class="d-flex flex-wrap gap-3 justify-content-between">
            <div class="d-flex flex-wrap gap-3 gap-md-6">
              <div>
                <img src="static/picture/img1.png" alt="..." class="process-work-img">
                <img src="static/picture/img2.png" alt="..." class="process-work-img2">
                <img src="static/picture/img3.png" alt="..." class="process-work-img2">
              </div>
              <div>
                <span class="fs-seven w3-color d-block mb-1 mb-md-2">Ready to Get</span>
                <span class="fs-ten g1-color">Let’s Discuss & Start IT Consultations</span>
              </div>
            </div>
            <a href="contact.html" class="btn">
              <span class="btn-text-one d1-color">Get Quotes</span>
              <span class="btn-text-two d1-color">Get Quotes</span>
            </a>
          </div>
        </div>
      </div>
    </section>
    <!-- Our Process Flow End -->

    <!-- Who we are section start -->
    <section class="pt-120 overflow-hidden">
      <div class="container">
        <div class="row g-7 g-md-10 pb-120">
          <div class="col-xl-6">
            <div class="position-relative">
              <img src="static/picture/who.png" alt="...">

              <div class="who-text-rotate d-none d-sm-block">
                <div class="position-relative">
                  <img src="static/picture/text-rotate.png" alt="..." class="rotate-animain">
                  <img src="static/picture/toppy.png" alt="topy" class="position-absolute start-0 end-0 top-0 bottom-0 m-auto">
                </div>
              </div>
            </div>
          </div>
          <div class="col-xl-6">
            <div class="service_heading" data-aos="fade-down" data-aos-duration="800">
              <span class="fs-ten fw-semibold g1-color mb-2">Who we are</span>
              <h2 class="fs-two fw-semibold d1-color">
                We provide perfect How it helps your
                <span class="y2-color text-decoration-underline">it solutions & technology</span>
                for any startups
              </h2>
              <p class="d2-color mt-4 mt-md-8">
                Techxly is a HTML5 template based on Sass and Bootstrap 5 with
                modern and creative multipurpose design you can use Best
                services & IT solutions.
              </p>
              <div class="d-flex align-items-center gap-4 gap-md-8 mt-4 mt-md-8">
                <img src="static/picture/code.png" alt="...">
                <p class="text-five fw-semibold d2-color code-title">
                  We provide the most reasonable cost and best services.
                </p>
              </div>
              <div class="line my-4 my-md-8"></div>
              <div class="row g-3 g-md-6">
                <div class="col-lg-6">
                  <div class="d-flex align-items-center gap-3">
                    <i class="ph ph-check g2-color fs-three"></i>
                    <span class="fs-ten d2-color mt-2 d-block">Quality control system</span>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="d-flex align-items-center gap-3">
                    <i class="ph ph-check g2-color fs-three"></i>
                    <span class="fs-ten d2-color mt-2 d-block">Finish work before deadline</span>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="d-flex align-items-center gap-3">
                    <i class="ph ph-check g2-color fs-three"></i>
                    <span class="fs-ten d2-color mt-2 d-block">Best ever plan</span>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="d-flex align-items-center gap-3">
                    <i class="ph ph-check g2-color fs-three"></i>
                    <span class="fs-ten d2-color mt-2 d-block">Client free service</span>
                  </div>
                </div>
              </div>
              <a href="contact.html" class="btn mt-4 mt-md-8">
                <span class="btn-text-one d1-color">Get Quotes</span>
                <span class="btn-text-two d1-color">Get Quotes</span>
              </a>
            </div>
          </div>
        </div>

        <!-- trusted clients -->
        <div class="trusted-clients row g-5 g-lg-0 justify-content-center align-items-center bg2-color py-20">
          <div class="col-xl-4 px-4 px-sm-8 px-xl-0">
            <span class="fs-ten fw-medium g1-color">5+ Trusted Our Clients</span>
            <h2 class="fs-two fw-semibold w3-color mt-2">
              Most Experienced
              <span class="y1-color text-decoration-underline">Our Services</span>
            </h2>
            <p class="fs-ten w4-color mt-4 mt-md-8">
              Techxly is a HTML5 template based on Sass and Bootstrap 5 with
              modern and creative.
            </p>
          </div>
          <div class="col-xl-6">
            <div class="row">
              <div class="col-6 col-md-4">
                <div class="trusted-counter px-4 px-md-8 py-5 py-md-10">
                  <div class="trusted-img-bg">
                    <img src="static/picture/happy-clients.png" alt="...">
                  </div>
                  <h2 class="fs-two fw-semibold y1-color text-center mt-2 mt-md-4">
                    <span class="counter">130</span>+
                  </h2>
                  <span class="w3-color text-center d-block">Happy Clients</span>
                </div>
              </div>
              <div class="col-6 col-md-4">
                <div class="trusted-counter px-4 px-md-8 py-5 py-md-10">
                  <div class="trusted-img-bg">
                    <img src="static/picture/done.png" alt="...">
                  </div>
                  <h2 class="fs-two fw-semibold y1-color text-center mt-2 mt-md-4">
                    <span class="counter">250</span>+
                  </h2>
                  <span class="w3-color text-center d-block">Projects Done</span>
                </div>
              </div>
              <div class="col-6 col-md-4">
                <div class="trusted-counter px-4 px-md-8 py-5 py-md-10">
                  <div class="trusted-img-bg">
                    <img src="static/picture/experts.png" alt="...">
                  </div>
                  <h2 class="fs-two fw-semibold y1-color text-center mt-2 mt-md-4">
                    <span class="counter">50</span>+
                  </h2>
                  <span class="w3-color text-center d-block">Skilled Experts</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Who we are section end -->

    <!-- our skills section start -->
    <section class="our-skills-section pt-120 pb-120">
      <div class="container pt-120">
        <div class="row g-6 justify-content-between align-items-center">
          <div class="col-lg-5">
            <span class="fs-ten fw-medium g1-color">OUR SKILLS</span>
            <h2 class="fs-two fw-semibold text-white mt-2">
              Explore our best recently
              <span class="y1-color">completed projects</span>
            </h2>
            <a href="contact.html" class="btn mt-5 mt-md-10">
              <span class="btn-text-one d1-color">Our Service</span>
              <span class="btn-text-two d1-color">Our Service</span>
            </a>
          </div>
          <div class="col-lg-6">
            <div class="">
              <div data-aos="fade-up">
                <div class="progress-bar-wrap">
                  <div class="mb-1 d-flex justify-content-between">
                    <span class="text-white fs-ten fw-semibold mb-2 d-block">DEVELOPMENT</span>
                    <span class="progress-value text-white fs-ten fw-semibold">85%</span>
                  </div>
                  <div class="progress-bar">
                    <div class="progress-bar-inner"></div>
                  </div>
                </div>
                <div class="progress-bar-wrap mt-3 mt-md-6">
                  <div class="mb-1 d-flex justify-content-between">
                    <span class="text-white fs-ten fw-semibold mb-2 d-block">ENGINEERING</span>
                    <span class="progress-value text-white fs-ten fw-semibold">69%</span>
                  </div>
                  <div class="progress-bar">
                    <div class="progress-bar-inner"></div>
                  </div>
                </div>
                <div class="progress-bar-wrap mt-3 mt-md-6">
                  <div class="mb-1 d-flex justify-content-between">
                    <span class="text-white fs-ten fw-semibold mb-2 d-block">WEB DESIGN</span>
                    <span class="progress-value text-white fs-ten fw-semibold">76%</span>
                  </div>
                  <div class="progress-bar">
                    <div class="progress-bar-inner"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- our skills section end -->

    <!-- Choose us section end -->
    <section class="pt-120 pb-120 overflow-hidden">
      <div class="container">
        <div class="row g-5 g-md-10 align-items-center">
          <div class="col-xl-7">
            <div class="h-100">
              <div class="service_heading" data-aos="fade-down" data-aos-duration="800">
                <span class="fs-ten fw-semibold g1-color mb-2">Why Choose Us</span>
                <h2 class="fs-two fw-semibold d2-color mb-6 w-100">
                  We provide perfect it solutions & technology for any startups.
                </h2>
                <p class="fs-ten d2-color">
                  Start work with Techxly. Build responsive, mobile-first
                  projects on the web with the world's most popular front-end
                  component library.
                </p>
              </div>
              <div class="mt-8 mt-lg-15">
                <div class="row g-4 g-lg-8">
                  <div class="col-md-6" data-aos="fade-up" data-aos-duration="800">
                    <img src="static/picture/high-security.png" alt="security" width="60" height="60">
                    <h5 class="fs-five d2-color mt-3 mt-lg-6 mb-2 mb-lg-4">
                      High Security
                    </h5>
                    <p class="fs-ten d2-color">
                      Techxly is a HTML5 template based on Sass and Bootstrap 5
                      with modern and creative.
                    </p>
                  </div>
                  <div class="col-md-6" data-aos="fade-up" data-aos-duration="900">
                    <img src="static/picture/team.png" alt="security" width="60" height="60">
                    <h5 class="fs-five d2-color mt-3 mt-lg-6 mb-2 mb-lg-4">
                      Skilled Team
                    </h5>
                    <p class="fs-ten d2-color">
                      Techxly is a HTML5 template based on Sass and Bootstrap 5
                      with modern and creative.
                    </p>
                  </div>
                  <div class="col-md-6" data-aos="fade-up" data-aos-duration="800">
                    <img src="static/picture/price.png" alt="security" width="60" height="60">
                    <h5 class="fs-five d2-color mt-3 mt-lg-6 mb-2 mb-lg-4">
                      Affordable Price
                    </h5>
                    <p class="fs-ten d2-color">
                      Techxly is a HTML5 template based on Sass and Bootstrap 5
                      with modern and creative.
                    </p>
                  </div>
                  <div class="col-md-6" data-aos="fade-up" data-aos-duration="900">
                    <img src="static/picture/support.png" alt="security" width="60" height="60">
                    <h5 class="fs-five d2-color mt-3 mt-lg-6 mb-2 mb-lg-4">
                      24/7 Support
                    </h5>
                    <p class="fs-ten d2-color">
                      Techxly is a HTML5 template based on Sass and Bootstrap 5
                      with modern and creative.
                    </p>
                  </div>
                </div>
              </div>
              <div class="mt-6 mt-lg-12 d-flex flex-wrap gap-4 gap-lg-8 d-flex align-items-center" data-aos="fade-up" data-aos-duration="800">
                <a href="contact.html" class="btn d1-color">
                  <span class="btn-text-one">Get Quotes</span>
                  <span class="btn-text-two">Get Quotes</span>
                </a>
                <div class="d-flex align-items-center gap-lg-5">
                  <div class="d-flex">
                    <div class="choose_icon_width bgy2-color d-flex flex-shrink-0 justify-content-center align-items-center">
                      <i class="ph ph-phone-call text-white fs-three"></i>
                    </div>
                  </div>
                  <a href="tel:+4733378901" class="choose-num d2-color fw-semibold fs-six">(+44) 152-567-987</a>
                </div>
              </div>
            </div>
          </div>
          <div class="col-xl-5" data-aos="zoom-in" data-aos-duration="800">
            <div class="">
              <img class="choose_us object-fit-cover" src="static/picture/choose_us.png" alt="...">
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Choose us section End -->

    <!-- INDUSTRY WE SERVE section start -->
    <section class="industry-section pt-120 pb-120 overflow-hidden">
      <div class="container">
        <div class="process_heading text-center" data-aos="fade-down" data-aos-duration="800">
          <span class="fs-ten g1-color">INDUSTRY WE SERVE</span>
          <h3 class="w3-color fs-two">
            Our industry
            <span class="y2-color text-decoration-underline">expertise & solutions</span>
          </h3>
          <p class="fs-ten w3-color mt-3 mt-md-6">
            Techxly is a HTML5 template based on Sass and Bootstrap 5 with
            modern and creative.
          </p>
        </div>
        <div class="pt-60 position-relative">
          <div class="swiper service_slider">
            <div class="swiper-wrapper d-flex align-items-center">
              <div class="swiper-slide">
                <div class="industry-items">
                  <div class="px-8 py-5 brd3 d-flex flex-column justify-content-start align-items-center rounded-4 item">
                    <div class="d-flex justify-content-center align-items-center icon">
                      <i class="ph ph-graduation-cap fs-four"></i>
                    </div>
                    <span class="text-sm w-100 w3-color d-block mt-3 mt-md-5 text-center">Education</span>
                    <div class="industry-link">
                      <a href="javascript:void(0)" class="industry-link-icon d-flex align-items-center justify-content-center mt-3 mt-md-5 link-icon">
                        <i class="ph ph-arrow-up-right"></i>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="industry-items">
                  <div class="px-10 py-5 brd3 d-flex flex-column justify-content-start align-items-center rounded-4 item">
                    <div class="d-flex justify-content-center align-items-center icon">
                      <i class="ph ph-shopping-cart fs-four"></i>
                    </div>
                    <span class="text-sm w3-color d-block mt-3 mt-md-5">eCommerce</span>
                    <div class="industry-link">
                      <a href="javascript:void(0)" class="industry-link-icon d-flex align-items-center justify-content-center mt-3 mt-md-5 link-icon">
                        <i class="ph ph-arrow-up-right"></i>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="industry-items">
                  <div class="px-10 py-5 brd3 d-flex flex-column justify-content-start align-items-center rounded-4 item">
                    <div class="d-flex justify-content-center align-items-center icon">
                      <i class="ph ph-heartbeat fs-four"></i>
                    </div>
                    <span class="text-sm w3-color d-block mt-3 mt-md-5">Healthcare</span>
                    <div class="industry-link">
                      <a href="javascript:void(0)" class="industry-link-icon d-flex align-items-center justify-content-center mt-3 mt-md-5 link-icon">
                        <i class="ph ph-arrow-up-right"></i>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="industry-items">
                  <div class="px-10 py-5 brd3 d-flex flex-column justify-content-start align-items-center rounded-4 item">
                    <div class="d-flex justify-content-center align-items-center icon">
                      <i class="ph ph-bank fs-four"></i>
                    </div>
                    <span class="text-sm w3-color d-block mt-3 mt-md-5">Finance</span>
                    <div class="industry-link">
                      <a href="javascript:void(0)" class="industry-link-icon d-flex align-items-center justify-content-center mt-3 mt-md-5 link-icon">
                        <i class="ph ph-arrow-up-right"></i>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="industry-items">
                  <div class="px-10 py-5 brd3 d-flex flex-column justify-content-start align-items-center rounded-4 item">
                    <div class="d-flex justify-content-center align-items-center icon">
                      <i class="ph ph-car fs-four"></i>
                    </div>
                    <span class="text-sm w3-color d-block mt-3 mt-md-5">Automotive</span>
                    <div class="industry-link">
                      <a href="javascript:void(0)" class="industry-link-icon d-flex align-items-center justify-content-center mt-3 mt-md-5 link-icon">
                        <i class="ph ph-arrow-up-right"></i>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="industry-items">
                  <div class="px-10 py-5 brd3 d-flex flex-column justify-content-start align-items-center rounded-4 item">
                    <div class="d-flex justify-content-center align-items-center icon">
                      <i class="ph ph-laptop fs-four"></i>
                    </div>
                    <span class="text-sm w3-color d-block mt-3 mt-md-5">Software</span>
                    <div class="industry-link">
                      <a href="javascript:void(0)" class="industry-link-icon d-flex align-items-center justify-content-center mt-3 mt-md-5 link-icon">
                        <i class="ph ph-arrow-up-right"></i>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="industry-items">
                  <div class="px-10 py-5 brd3 d-flex flex-column justify-content-start align-items-center rounded-4 item">
                    <div class="d-flex justify-content-center align-items-center icon">
                      <i class="ph ph-heartbeat fs-four"></i>
                    </div>
                    <span class="text-sm w3-color d-block mt-3 mt-md-5">Healthcare</span>
                    <div class="industry-link">
                      <a href="javascript:void(0)" class="industry-link-icon d-flex align-items-center justify-content-center mt-3 mt-md-5 link-icon">
                        <i class="ph ph-arrow-up-right"></i>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="industry-items">
                  <div class="px-10 py-5 brd3 d-flex flex-column justify-content-start align-items-center rounded-4 item">
                    <div class="d-flex justify-content-center align-items-center icon">
                      <i class="ph ph-bank fs-four"></i>
                    </div>
                    <span class="text-sm w3-color d-block mt-3 mt-md-5">Finance</span>
                    <div class="industry-link">
                      <a href="javascript:void(0)" class="industry-link-icon d-flex align-items-center justify-content-center mt-3 mt-md-5 link-icon">
                        <i class="ph ph-arrow-up-right"></i>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="industry-items">
                  <div class="px-10 py-5 brd3 d-flex flex-column justify-content-start align-items-center rounded-4 item">
                    <div class="d-flex justify-content-center align-items-center icon">
                      <i class="ph ph-car fs-four"></i>
                    </div>
                    <span class="text-sm w3-color d-block mt-3 mt-md-5">Automotive</span>
                    <div class="industry-link">
                      <a href="javascript:void(0)" class="industry-link-icon d-flex align-items-center justify-content-center mt-3 mt-md-5 link-icon">
                        <i class="ph ph-arrow-up-right"></i>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="industry-items">
                  <div class="px-10 py-5 brd3 d-flex flex-column justify-content-start align-items-center rounded-4 item">
                    <div class="d-flex justify-content-center align-items-center icon">
                      <i class="ph ph-laptop fs-four"></i>
                    </div>
                    <span class="text-sm w3-color d-block mt-3 mt-md-5">Software</span>
                    <div class="industry-link">
                      <a href="javascript:void(0)" class="industry-link-icon d-flex align-items-center justify-content-center mt-3 mt-md-5 link-icon">
                        <i class="ph ph-arrow-up-right"></i>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- INDUSTRY WE SERVE section end -->

    <!-- Protfolio section start -->
    <section class="pt-120 bg7-color overflow-hidden">
      <div class="process_heading text-center" data-aos="fade-down" data-aos-duration="800">
        <span class="fs-ten fw-semibold g1-color mb-2 text-center">Recent Work Highlights</span>
        <h2 class="fs-two fw-semibold d2-color mb-3 mb-lg-6">
          Highlighting Our Most Notable Work and
          <span class="y2-color text-decoration-underline">Successful Projects</span>
        </h2>
        <p class="fs-ten d2-color">
          Techxly is a HTML5 template based on Sass and Bootstrap 5 with modern
          and creative multipurpose design you can use Best services & IT
          solutions.
        </p>
      </div>
      <!-- tab -->
      <div>
        <ul data-aos="zoom-in" data-aos-duration="800" class="tabs d-flex gap-3 gap-md-0 justify-content-center flex-wrap p-2 mt-8 mt-lg-15 mb-4 md:mb-8">
          <li data-tab-target="#all" class="active cursor-pointer d2-color border cus-border border-six rounded-pill px-3 px-md-6 py-2 py-md-3 tab">
            All
          </li>
          <li data-tab-target="#branding" class="cursor-pointer d2-color border cus-border border-six rounded-pill px-3 px-md-6 py-2 py-md-3 tab">
            Branding
          </li>
          <li data-tab-target="#design" class="cursor-pointer d2-color border cus-border border-six rounded-pill px-3 px-md-6 py-2 py-md-3 tab">
            Design
          </li>
          <li data-tab-target="#development" class="cursor-pointer d2-color border cus-border border-six rounded-pill px-3 px-md-6 py-2 py-md-3 tab">
            Development
          </li>
          <li data-tab-target="#solution" class="cursor-pointer d2-color border cus-border border-six rounded-pill px-3 px-md-6 py-2 py-md-3 tab">
            It Solution
          </li>
        </ul>

        <div class="tab-content position-relative">
          <div id="all" data-tab-content="" class="active">
            <div class="row g-3">
              <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
                <div class="single_project position-relative z-1">
                  <div>
                    <img src="static/picture/w1.png" class="w-full" alt="...">
                  </div>
                  <a href="javascript:void(0)" class="d-flex gap-2 justify-content-between bgc1-color project-content z-2">
                    <div class="p-3 p-md-5">
                      <h4 class="p2-color fs-five mb-2 mb-md-3">
                        App for Virtual Reality
                      </h4>
                      <span class="d2-color fs-seven">App Development </span>
                    </div>
                    <div class="project-content-right d-flex align-items-center justify-content-center bgy1-color px-5">
                      <i class="ph-bold ph-arrow-right d1-color fs-five"></i>
                    </div>
                  </a>
                </div>
              </div>
              <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
                <div class="single_project position-relative z-1">
                  <div>
                    <img src="static/picture/w2.png" class="w-full" alt="...">
                  </div>
                  <a href="javascript:void(0)" class="d-flex gap-2 justify-content-between bgc1-color project-content z-2">
                    <div class="p-3 p-md-5">
                      <h4 class="p2-color fs-five mb-2 mb-md-3">
                        App for Virtual Reality
                      </h4>
                      <span class="d2-color fs-seven">App Development </span>
                    </div>
                    <div class="project-content-right d-flex align-items-center justify-content-center bgy1-color px-5">
                      <i class="ph-bold ph-arrow-right d1-color fs-five"></i>
                    </div>
                  </a>
                </div>
              </div>
              <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
                <div class="single_project position-relative z-1">
                  <div>
                    <img src="static/picture/w3.png" class="w-full" alt="...">
                  </div>
                  <a href="javascript:void(0)" class="d-flex gap-2 justify-content-between bgc1-color project-content z-2">
                    <div class="p-3 p-md-5">
                      <h4 class="p2-color fs-five mb-2 mb-md-3">
                        App for Virtual Reality
                      </h4>
                      <span class="d2-color fs-seven">App Development </span>
                    </div>
                    <div class="project-content-right d-flex align-items-center justify-content-center bgy1-color px-5">
                      <i class="ph-bold ph-arrow-right d1-color fs-five"></i>
                    </div>
                  </a>
                </div>
              </div>
              <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
                <div class="single_project position-relative z-1">
                  <div>
                    <img src="static/picture/w4.png" class="w-full" alt="...">
                  </div>
                  <a href="javascript:void(0)" class="d-flex gap-2 justify-content-between bgc1-color project-content z-2">
                    <div class="p-3 p-md-5">
                      <h4 class="p2-color fs-five mb-2 mb-md-3">
                        App for Virtual Reality
                      </h4>
                      <span class="d2-color fs-seven">App Development </span>
                    </div>
                    <div class="project-content-right d-flex align-items-center justify-content-center bgy1-color px-5">
                      <i class="ph-bold ph-arrow-right d1-color fs-five"></i>
                    </div>
                  </a>
                </div>
              </div>
              <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
                <div class="single_project position-relative z-1">
                  <div>
                    <img src="static/picture/w5.png" class="w-full" alt="...">
                  </div>
                  <a href="javascript:void(0)" class="d-flex gap-2 justify-content-between bgc1-color project-content z-2">
                    <div class="p-3 p-md-5">
                      <h4 class="p2-color fs-five mb-2 mb-md-3">
                        App for Virtual Reality
                      </h4>
                      <span class="d2-color fs-seven">App Development </span>
                    </div>
                    <div class="project-content-right d-flex align-items-center justify-content-center bgy1-color px-5">
                      <i class="ph-bold ph-arrow-right d1-color fs-five"></i>
                    </div>
                  </a>
                </div>
              </div>
              <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
                <div class="single_project position-relative z-1">
                  <div>
                    <img src="static/picture/w6.png" class="w-full" alt="...">
                  </div>
                  <a href="javascript:void(0)" class="d-flex gap-2 justify-content-between bgc1-color project-content z-2">
                    <div class="p-3 p-md-5">
                      <h4 class="p2-color fs-five mb-2 mb-md-3">
                        App for Virtual Reality
                      </h4>
                      <span class="d2-color fs-seven">App Development </span>
                    </div>
                    <div class="project-content-right d-flex align-items-center justify-content-center bgy1-color px-5">
                      <i class="ph-bold ph-arrow-right d1-color fs-five"></i>
                    </div>
                  </a>
                </div>
              </div>
            </div>
          </div>

          <!-- branding -->
          <div id="branding" data-tab-content="">
            <div class="row g-3">
              <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
                <div class="single_project position-relative z-1">
                  <div>
                    <img src="static/picture/w2.png" class="w-full" alt="...">
                  </div>
                  <a href="javascript:void(0)" class="d-flex gap-2 justify-content-between bgc1-color project-content z-2">
                    <div class="p-3 p-md-5">
                      <h4 class="p2-color fs-five mb-2 mb-md-3">
                        App for Virtual Reality
                      </h4>
                      <span class="d2-color fs-seven">App Development </span>
                    </div>
                    <div class="project-content-right d-flex align-items-center justify-content-center bgy1-color px-5">
                      <i class="ph-bold ph-arrow-right d1-color fs-five"></i>
                    </div>
                  </a>
                </div>
              </div>
              <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
                <div class="single_project position-relative z-1">
                  <div>
                    <img src="static/picture/w3.png" class="w-full" alt="...">
                  </div>
                  <a href="javascript:void(0)" class="d-flex gap-2 justify-content-between bgc1-color project-content z-2">
                    <div class="p-3 p-md-5">
                      <h4 class="p2-color fs-five mb-2 mb-md-3">
                        App for Virtual Reality
                      </h4>
                      <span class="d2-color fs-seven">App Development </span>
                    </div>
                    <div class="project-content-right d-flex align-items-center justify-content-center bgy1-color px-5">
                      <i class="ph-bold ph-arrow-right d1-color fs-five"></i>
                    </div>
                  </a>
                </div>
              </div>
              <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
                <div class="single_project position-relative z-1">
                  <div>
                    <img src="static/picture/w5.png" class="w-full" alt="...">
                  </div>
                  <a href="javascript:void(0)" class="d-flex gap-2 justify-content-between bgc1-color project-content z-2">
                    <div class="p-3 p-md-5">
                      <h4 class="p2-color fs-five mb-2 mb-md-3">
                        App for Virtual Reality
                      </h4>
                      <span class="d2-color fs-seven">App Development </span>
                    </div>
                    <div class="project-content-right d-flex align-items-center justify-content-center bgy1-color px-5">
                      <i class="ph-bold ph-arrow-right d1-color fs-five"></i>
                    </div>
                  </a>
                </div>
              </div>
              <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
                <div class="single_project position-relative z-1">
                  <div>
                    <img src="static/picture/w6.png" class="w-full" alt="...">
                  </div>
                  <a href="javascript:void(0)" class="d-flex gap-2 justify-content-between bgc1-color project-content z-2">
                    <div class="p-3 p-md-5">
                      <h4 class="p2-color fs-five mb-2 mb-md-3">
                        App for Virtual Reality
                      </h4>
                      <span class="d2-color fs-seven">App Development </span>
                    </div>
                    <div class="project-content-right d-flex align-items-center justify-content-center bgy1-color px-5">
                      <i class="ph-bold ph-arrow-right d1-color fs-five"></i>
                    </div>
                  </a>
                </div>
              </div>
            </div>
          </div>

          <!-- degine -->
          <div id="design" data-tab-content="">
            <div class="row g-3">
              <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
                <div class="single_project position-relative z-1">
                  <div>
                    <img src="static/picture/w2.png" class="w-full" alt="...">
                  </div>
                  <a href="javascript:void(0)" class="d-flex gap-2 justify-content-between bgc1-color project-content z-2">
                    <div class="p-3 p-md-5">
                      <h4 class="p2-color fs-five mb-2 mb-md-3">
                        App for Virtual Reality
                      </h4>
                      <span class="d2-color fs-seven">App Development </span>
                    </div>
                    <div class="project-content-right d-flex align-items-center justify-content-center bgy1-color px-5">
                      <i class="ph-bold ph-arrow-right d1-color fs-five"></i>
                    </div>
                  </a>
                </div>
              </div>
              <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
                <div class="single_project position-relative z-1">
                  <div>
                    <img src="static/picture/w3.png" class="w-full" alt="...">
                  </div>
                  <a href="javascript:void(0)" class="d-flex gap-2 justify-content-between bgc1-color project-content z-2">
                    <div class="p-3 p-md-5">
                      <h4 class="p2-color fs-five mb-2 mb-md-3">
                        App for Virtual Reality
                      </h4>
                      <span class="d2-color fs-seven">App Development </span>
                    </div>
                    <div class="project-content-right d-flex align-items-center justify-content-center bgy1-color px-5">
                      <i class="ph-bold ph-arrow-right d1-color fs-five"></i>
                    </div>
                  </a>
                </div>
              </div>
              <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
                <div class="single_project position-relative z-1">
                  <div>
                    <img src="static/picture/w4.png" class="w-full" alt="...">
                  </div>
                  <a href="javascript:void(0)" class="d-flex gap-2 justify-content-between bgc1-color project-content z-2">
                    <div class="p-3 p-md-5">
                      <h4 class="p2-color fs-five mb-2 mb-md-3">
                        App for Virtual Reality
                      </h4>
                      <span class="d2-color fs-seven">App Development </span>
                    </div>
                    <div class="project-content-right d-flex align-items-center justify-content-center bgy1-color px-5">
                      <i class="ph-bold ph-arrow-right d1-color fs-five"></i>
                    </div>
                  </a>
                </div>
              </div>
              <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
                <div class="single_project position-relative z-1">
                  <div>
                    <img src="static/picture/w5.png" class="w-full" alt="...">
                  </div>
                  <a href="javascript:void(0)" class="d-flex gap-2 justify-content-between bgc1-color project-content z-2">
                    <div class="p-3 p-md-5">
                      <h4 class="p2-color fs-five mb-2 mb-md-3">
                        App for Virtual Reality
                      </h4>
                      <span class="d2-color fs-seven">App Development </span>
                    </div>
                    <div class="project-content-right d-flex align-items-center justify-content-center bgy1-color px-5">
                      <i class="ph-bold ph-arrow-right d1-color fs-five"></i>
                    </div>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <!-- development -->
          <div id="development" data-tab-content="">
            <div class="row g-3">
              <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
                <div class="single_project position-relative z-1">
                  <div>
                    <img src="static/picture/w2.png" class="w-full" alt="...">
                  </div>
                  <a href="javascript:void(0)" class="d-flex gap-2 justify-content-between bgc1-color project-content z-2">
                    <div class="p-3 p-md-5">
                      <h4 class="p2-color fs-five mb-2 mb-md-3">
                        App for Virtual Reality
                      </h4>
                      <span class="d2-color fs-seven">App Development </span>
                    </div>
                    <div class="project-content-right d-flex align-items-center justify-content-center bgy1-color px-5">
                      <i class="ph-bold ph-arrow-right d1-color fs-five"></i>
                    </div>
                  </a>
                </div>
              </div>
              <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
                <div class="single_project position-relative z-1">
                  <div>
                    <img src="static/picture/w3.png" class="w-full" alt="...">
                  </div>
                  <a href="javascript:void(0)" class="d-flex gap-2 justify-content-between bgc1-color project-content z-2">
                    <div class="p-3 p-md-5">
                      <h4 class="p2-color fs-five mb-2 mb-md-3">
                        App for Virtual Reality
                      </h4>
                      <span class="d2-color fs-seven">App Development </span>
                    </div>
                    <div class="project-content-right d-flex align-items-center justify-content-center bgy1-color px-5">
                      <i class="ph-bold ph-arrow-right d1-color fs-five"></i>
                    </div>
                  </a>
                </div>
              </div>
              <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
                <div class="single_project position-relative z-1">
                  <div>
                    <img src="static/picture/w5.png" class="w-full" alt="...">
                  </div>
                  <a href="javascript:void(0)" class="d-flex gap-2 justify-content-between bgc1-color project-content z-2">
                    <div class="p-3 p-md-5">
                      <h4 class="p2-color fs-five mb-2 mb-md-3">
                        App for Virtual Reality
                      </h4>
                      <span class="d2-color fs-seven">App Development </span>
                    </div>
                    <div class="project-content-right d-flex align-items-center justify-content-center bgy1-color px-5">
                      <i class="ph-bold ph-arrow-right d1-color fs-five"></i>
                    </div>
                  </a>
                </div>
              </div>
              <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
                <div class="single_project position-relative z-1">
                  <div>
                    <img src="static/picture/w6.png" class="w-full" alt="...">
                  </div>
                  <a href="javascript:void(0)" class="d-flex gap-2 justify-content-between bgc1-color project-content z-2">
                    <div class="p-3 p-md-5">
                      <h4 class="p2-color fs-five mb-2 mb-md-3">
                        App for Virtual Reality
                      </h4>
                      <span class="d2-color fs-seven">App Development </span>
                    </div>
                    <div class="project-content-right d-flex align-items-center justify-content-center bgy1-color px-5">
                      <i class="ph-bold ph-arrow-right d1-color fs-five"></i>
                    </div>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <!-- solution -->
          <div id="solution" data-tab-content="">
            <div class="row g-3">
              <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
                <div class="single_project position-relative z-1">
                  <div>
                    <img src="static/picture/w1.png" class="w-full" alt="...">
                  </div>
                  <a href="javascript:void(0)" class="d-flex gap-2 justify-content-between bgc1-color project-content z-2">
                    <div class="p-3 p-md-5">
                      <h4 class="p2-color fs-five mb-2 mb-md-3">
                        App for Virtual Reality
                      </h4>
                      <span class="d2-color fs-seven">App Development </span>
                    </div>
                    <div class="project-content-right d-flex align-items-center justify-content-center bgy1-color px-5">
                      <i class="ph-bold ph-arrow-right d1-color fs-five"></i>
                    </div>
                  </a>
                </div>
              </div>
              <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
                <div class="single_project position-relative z-1">
                  <div>
                    <img src="static/picture/w2.png" class="w-full" alt="...">
                  </div>
                  <a href="javascript:void(0)" class="d-flex gap-2 justify-content-between bgc1-color project-content z-2">
                    <div class="p-3 p-md-5">
                      <h4 class="p2-color fs-five mb-2 mb-md-3">
                        App for Virtual Reality
                      </h4>
                      <span class="d2-color fs-seven">App Development </span>
                    </div>
                    <div class="project-content-right d-flex align-items-center justify-content-center bgy1-color px-5">
                      <i class="ph-bold ph-arrow-right d1-color fs-five"></i>
                    </div>
                  </a>
                </div>
              </div>
              <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
                <div class="single_project position-relative z-1">
                  <div>
                    <img src="static/picture/w3.png" class="w-full" alt="...">
                  </div>
                  <a href="javascript:void(0)" class="d-flex gap-2 justify-content-between bgc1-color project-content z-2">
                    <div class="p-3 p-md-5">
                      <h4 class="p2-color fs-five mb-2 mb-md-3">
                        App for Virtual Reality
                      </h4>
                      <span class="d2-color fs-seven">App Development </span>
                    </div>
                    <div class="project-content-right d-flex align-items-center justify-content-center bgy1-color px-5">
                      <i class="ph-bold ph-arrow-right d1-color fs-five"></i>
                    </div>
                  </a>
                </div>
              </div>
              <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
                <div class="single_project position-relative z-1">
                  <div>
                    <img src="static/picture/w4.png" class="w-full" alt="...">
                  </div>
                  <a href="javascript:void(0)" class="d-flex gap-2 justify-content-between bgc1-color project-content z-2">
                    <div class="p-3 p-md-5">
                      <h4 class="p2-color fs-five mb-2 mb-md-3">
                        App for Virtual Reality
                      </h4>
                      <span class="d2-color fs-seven">App Development </span>
                    </div>
                    <div class="project-content-right d-flex align-items-center justify-content-center bgy1-color px-5">
                      <i class="ph-bold ph-arrow-right d1-color fs-five"></i>
                    </div>
                  </a>
                </div>
              </div>
              <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="700">
                <div class="single_project position-relative z-1">
                  <div>
                    <img src="static/picture/w5.png" class="w-full" alt="...">
                  </div>
                  <a href="javascript:void(0)" class="d-flex gap-2 justify-content-between bgc1-color project-content z-2">
                    <div class="p-3 p-md-5">
                      <h4 class="p2-color fs-five mb-2 mb-md-3">
                        App for Virtual Reality
                      </h4>
                      <span class="d2-color fs-seven">App Development </span>
                    </div>
                    <div class="project-content-right d-flex align-items-center justify-content-center bgy1-color px-5">
                      <i class="ph-bold ph-arrow-right d1-color fs-five"></i>
                    </div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Protfolio section end  -->

    <!-- Choose plan section start -->
    <section class="pt-120 pb-120">
      <div class="container">
        <div class="process_heading text-center" data-aos="fade-down" data-aos-duration="800">
          <span class="fs-ten fw-semibold g2-color mb-2 text-center">Choose Your Plan</span>
          <h2 class="fs-two fw-semibold d2-color mb-3 mb-lg-6">
            Choose the right plan for
            <span class="y2-color text-decoration-underline">your business</span>
          </h2>
          <p class="fs-ten d2-color">
            Build responsive, mobile-first projects on the web with the world's
            most popular front-end component library.
          </p>
        </div>
        <div class="mt-8 mt-lg-15">
          <div class="row g-6">
            <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="800">
              <div class="position-relative pricing_section">
                <div class="bgc1-color pricing-card">
                  <div class="px-4 px-lg-8 pt-5 pt-lg-10">
                    <h4 class="fs-seven d2-color fw-normal wider">STARTUP</h4>
                    <div class="d-flex gap-1">
                      <h3 class="display-one fw-semibold p2-color">$29</h3>
                      <span class="fs-three p2-color fw-semibold">$</span>
                    </div>
                    <span class="fs-ten fw-normal d3-color wider">Per Month</span>

                    <ul class="my-5 my-md-10">
                      <li class="d-flex gap-3 align-items-center mb-2 mb-md-3">
                        <i class="ph ph-check g2-color fs-five"></i>
                        <span class="fs-tex d2-color">Web & Mobile-Optimizeds</span>
                      </li>
                      <li class="d-flex gap-3 align-items-center mb-2 mb-md-3">
                        <i class="ph ph-check g2-color fs-five"></i>
                        <span class="fs-tex d2-color">Free Custom Domain Serve</span>
                      </li>
                      <li class="d-flex gap-3 align-items-center mb-2 mb-md-3">
                        <i class="ph ph-check g2-color fs-five"></i>
                        <span class="fs-tex d2-color">Best Hosting on the Market</span>
                      </li>
                      <li class="d-flex gap-3 align-items-center mb-2 mb-md-3">
                        <i class="ph ph-check g2-color fs-five"></i>
                        <span class="fs-tex d2-color">Outstanding Support</span>
                      </li>
                    </ul>
                  </div>
                  <a href="javascript:void(0)" class="d-flex justify-content-center align-items-center gap-1 bgd1-color fs-six w2-color w-100 py-2 py-md-4 price_btn">
                    Purchase Now
                    <i class="ph ph-arrow-right"></i>
                  </a>
                </div>
              </div>
            </div>
            <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="800">
              <div class="position-relative pricing_section">
                <div class="bgc1-color pricing-card">
                  <div class="px-4 px-lg-8 pt-5 pt-lg-10">
                    <h4 class="fs-seven d2-color fw-normal wider">STANDARD</h4>
                    <div class="d-flex gap-1">
                      <h3 class="display-one fw-semibold p2-color">$49</h3>
                      <span class="fs-three p2-color fw-semibold">$</span>
                    </div>
                    <span class="fs-ten fw-normal d3-color wider">Per Month</span>

                    <ul class="my-5 my-md-10">
                      <li class="d-flex gap-3 align-items-center mb-2 mb-md-3">
                        <i class="ph ph-check g2-color fs-five"></i>
                        <span class="fs-tex d2-color">Web & Mobile-Optimizeds</span>
                      </li>
                      <li class="d-flex gap-3 align-items-center mb-2 mb-md-3">
                        <i class="ph ph-check g2-color fs-five"></i>
                        <span class="fs-tex d2-color">Free Custom Domain Serve</span>
                      </li>
                      <li class="d-flex gap-3 align-items-center mb-2 mb-md-3">
                        <i class="ph ph-check g2-color fs-five"></i>
                        <span class="fs-tex d2-color">Best Hosting on the Market</span>
                      </li>
                      <li class="d-flex gap-3 align-items-center mb-2 mb-md-3">
                        <i class="ph ph-check g2-color fs-five"></i>
                        <span class="fs-tex d2-color">Outstanding Support</span>
                      </li>
                    </ul>
                  </div>
                  <a href="javascript:void(0)" class="d-flex justify-content-center align-items-center gap-1 bgd1-color fs-six w2-color w-100 py-2 py-md-4 price_btn">
                    Purchase Now
                    <i class="ph ph-arrow-right"></i>
                  </a>
                </div>
              </div>
            </div>
            <div class="col-md-6 col-xl-4" data-aos="fade-up" data-aos-duration="800">
              <div class="position-relative pricing_section">
                <div class="bgc1-color pricing-card">
                  <div class="px-4 px-lg-8 pt-5 pt-lg-10">
                    <h4 class="fs-seven d2-color fw-normal wider">PREMIUM</h4>
                    <div class="d-flex gap-1">
                      <h3 class="display-one fw-semibold p2-color">$99</h3>
                      <span class="fs-three p2-color fw-semibold">$</span>
                    </div>
                    <span class="fs-ten fw-normal d3-color wider">Per Month</span>

                    <ul class="my-5 my-md-10">
                      <li class="d-flex gap-3 align-items-center mb-2 mb-md-3">
                        <i class="ph ph-check g2-color fs-five"></i>
                        <span class="fs-tex d2-color">Web & Mobile-Optimizeds</span>
                      </li>
                      <li class="d-flex gap-3 align-items-center mb-2 mb-md-3">
                        <i class="ph ph-check g2-color fs-five"></i>
                        <span class="fs-tex d2-color">Free Custom Domain Serve</span>
                      </li>
                      <li class="d-flex gap-3 align-items-center mb-2 mb-md-3">
                        <i class="ph ph-check g2-color fs-five"></i>
                        <span class="fs-tex d2-color">Best Hosting on the Market</span>
                      </li>
                      <li class="d-flex gap-3 align-items-center mb-2 mb-md-3">
                        <i class="ph ph-check g2-color fs-five"></i>
                        <span class="fs-tex d2-color">Outstanding Support</span>
                      </li>
                    </ul>
                  </div>
                  <a href="javascript:void(0)" class="d-flex justify-content-center align-items-center gap-1 bgd1-color fs-six w2-color w-100 py-2 py-md-4 price_btn">
                    Purchase Now
                    <i class="ph ph-arrow-right"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Choose plan section end -->

    <!-- Our clients section start -->
    <section class="pt-120 pb-120 our_clients overflow-x-hidden">
      <div class="container">
        <div class="service_heading">
          <span class="fs-ten fw-semibold g2-color mb-2">Our Clients</span>
          <h2 class="fs-two fw-semibold d1-color mb-6">
            We love to work with
            <span class="y2-color text-decoration-underline">clients to develop
            </span>
            unique, innovative websites.
          </h2>
          <p class="fs-ten d2-color">
            Build responsive, mobile-first projects on the web with the world's
            most popular front-end component library.
          </p>
        </div>

        <div class="mt-8 mt-md-15" data-aos="zoom-out-up">
          <div class="swiper clients_slider">
            <div class="swiper-wrapper d-flex align-items-center">
              <div class="swiper-slide">
                <div class="px-4 px-md-8 py-5 py-md-10 bgw3-color d-flex align-items-center justify-content-center">
                  <img src="static/picture/partner1.png" alt="logo">
                </div>
              </div>
              <div class="swiper-slide">
                <div class="px-4 px-md-8 py-5 py-md-10 bgw3-color d-flex align-items-center justify-content-center">
                  <img src="static/picture/partner2.png" alt="logo">
                </div>
              </div>
              <div class="swiper-slide">
                <div class="px-4 px-md-8 py-5 py-md-10 bgw3-color d-flex align-items-center justify-content-center">
                  <img src="static/picture/partner3.png" alt="logo">
                </div>
              </div>
              <div class="swiper-slide">
                <div class="px-4 px-md-8 py-5 py-md-10 bgw3-color d-flex align-items-center justify-content-center">
                  <img src="static/picture/partner4.png" alt="logo">
                </div>
              </div>
              <div class="swiper-slide">
                <div class="px-4 px-md-8 py-5 py-md-10 bgw3-color d-flex align-items-center justify-content-center">
                  <img src="static/picture/partner5.png" alt="logo">
                </div>
              </div>
              <div class="swiper-slide">
                <div class="px-4 px-md-8 py-5 py-md-10 bgw3-color d-flex align-items-center justify-content-center">
                  <img src="static/picture/partner6.png" alt="logo">
                </div>
              </div>
              <div class="swiper-slide">
                <div class="px-4 px-md-8 py-5 py-md-10 bgw3-color d-flex align-items-center justify-content-center">
                  <img src="static/picture/partner7.png" alt="logo">
                </div>
              </div>
              <div class="swiper-slide">
                <div class="px-4 px-md-8 py-5 py-md-10 bgw3-color d-flex align-items-center justify-content-center">
                  <img src="static/picture/partner8.png" alt="logo">
                </div>
              </div>
              <div class="swiper-slide">
                <div class="px-4 px-md-8 py-5 py-md-10 bgw3-color d-flex align-items-center justify-content-center">
                  <img src="static/picture/partner9.png" alt="logo">
                </div>
              </div>
            </div>
          </div>
          <div class="swiper clients_slider2 mt-4 mt-md-8">
            <div class="swiper-wrapper d-flex align-items-center">
              <div class="swiper-slide">
                <div class="px-4 px-md-8 py-5 py-md-10 bgw3-color d-flex align-items-center justify-content-center">
                  <img src="static/picture/partner1.png" alt="logo">
                </div>
              </div>
              <div class="swiper-slide">
                <div class="px-4 px-md-8 py-5 py-md-10 bgw3-color d-flex align-items-center justify-content-center">
                  <img src="static/picture/partner2.png" alt="logo">
                </div>
              </div>
              <div class="swiper-slide">
                <div class="px-4 px-md-8 py-5 py-md-10 bgw3-color d-flex align-items-center justify-content-center">
                  <img src="static/picture/partner3.png" alt="logo">
                </div>
              </div>
              <div class="swiper-slide">
                <div class="px-4 px-md-8 py-5 py-md-10 bgw3-color d-flex align-items-center justify-content-center">
                  <img src="static/picture/partner4.png" alt="logo">
                </div>
              </div>
              <div class="swiper-slide">
                <div class="px-4 px-md-8 py-5 py-md-10 bgw3-color d-flex align-items-center justify-content-center">
                  <img src="static/picture/partner5.png" alt="logo">
                </div>
              </div>
              <div class="swiper-slide">
                <div class="px-4 px-md-8 py-5 py-md-10 bgw3-color d-flex align-items-center justify-content-center">
                  <img src="static/picture/partner6.png" alt="logo">
                </div>
              </div>
              <div class="swiper-slide">
                <div class="px-4 px-md-8 py-5 py-md-10 bgw3-color d-flex align-items-center justify-content-center">
                  <img src="static/picture/partner7.png" alt="logo">
                </div>
              </div>
              <div class="swiper-slide">
                <div class="px-4 px-md-8 py-5 py-md-10 bgw3-color d-flex align-items-center justify-content-center">
                  <img src="static/picture/partner8.png" alt="logo">
                </div>
              </div>
              <div class="swiper-slide">
                <div class="px-4 px-md-8 py-5 py-md-10 bgw3-color d-flex align-items-center justify-content-center">
                  <img src="static/picture/partner9.png" alt="logo">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Our clients section end -->

    <!-- Testimonials section start -->
    <section class="testimonial pt-120 pb-120">
      <div class="process_heading text-center">
        <span class="fs-ten fw-semibold g2-color mb-2 text-center">💖 Real results from real clients</span>
        <h2 class="fs-two fw-semibold d1-color mb-4 mb-md-8">
          See how we've helped our
          <span class="y2-color text-decoration-underline">clients succeed</span>
        </h2>
        <p class="fs-ten d2-color">
          More than 1500+ agencies using Techxly.Build faster websites with
          techxly. IT’s a highly Customizable,creative, modern, visually
          stunning and Bootstrap5 HTML5 Template.
        </p>
      </div>
      <div class="mt-8 mt-lg-15 container">
        <div class="swiper testimonial_slider">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div class="px-3 px-md-6 py-5 py-md-10 bgc1-color">
                <div class="d-flex gap-1 mb-3">
                  <i class="ph-fill ph-star y1-color"></i>
                  <i class="ph-fill ph-star y1-color"></i>
                  <i class="ph-fill ph-star y1-color"></i>
                  <i class="ph-fill ph-star y1-color"></i>
                  <i class="ph-fill ph-star y1-color"></i>
                </div>
                <p class="d2-color fs-six">
                  �?I highly recommend techxly to anyone looking for a
                  high-quality Bootstrap theme.�?                </p>
                <div class="d-flex gap-3 align-items-center mt-4 mt-md-7">
                  <img src="static/picture/team3.png" alt=" testimon" class="testimonial_img">

                  <span class="fs-eleven d-block d2-color fw-medium">By Dennis Maxwell</span>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="px-3 px-md-6 py-5 py-md-10 bgc1-color">
                <div class="d-flex gap-1 mb-3">
                  <i class="ph-fill ph-star y1-color"></i>
                  <i class="ph-fill ph-star y1-color"></i>
                  <i class="ph-fill ph-star y1-color"></i>
                  <i class="ph-fill ph-star y1-color"></i>
                  <i class="ph-fill ph-star y1-color"></i>
                </div>
                <p class="d2-color fs-six">
                  Techxly is the perfect theme for businesses that want to
                  create a stylish and functional website.
                </p>
                <div class="d-flex gap-3 align-items-center mt-4 mt-md-7">
                  <img src="static/picture/team5.png" alt=" testimon" class="testimonial_img">

                  <span class="fs-eleven d-block d2-color fw-medium">By Jhon Doe</span>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="px-3 px-md-6 py-5 py-md-10 bgc1-color">
                <div class="d-flex gap-1 mb-3">
                  <i class="ph-fill ph-star y1-color"></i>
                  <i class="ph-fill ph-star y1-color"></i>
                  <i class="ph-fill ph-star y1-color"></i>
                  <i class="ph-fill ph-star y1-color"></i>
                  <i class="ph-fill ph-star y1-color"></i>
                </div>
                <p class="d2-color fs-six">
                  Techxly helped us create a stunning website that reflects our
                  brand perfectly.
                </p>
                <div class="d-flex gap-3 align-items-center mt-4 mt-md-7">
                  <img src="static/picture/team6.png" alt=" testimon" class="testimonial_img">

                  <span class="fs-eleven d-block d2-color fw-medium">By Rose Li</span>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="px-3 px-md-6 py-5 py-md-10 bgc1-color">
                <div class="d-flex gap-1 mb-3">
                  <i class="ph-fill ph-star y1-color"></i>
                  <i class="ph-fill ph-star y1-color"></i>
                  <i class="ph-fill ph-star y1-color"></i>
                  <i class="ph-fill ph-star y1-color"></i>
                  <i class="ph-fill ph-star y1-color"></i>
                </div>
                <p class="d2-color fs-six">
                  �?I highly recommend techxly to anyone looking for a
                  high-quality Bootstrap theme.�?                </p>
                <div class="d-flex gap-3 align-items-center mt-4 mt-md-7">
                  <img src="static/picture/team7.png" alt=" testimon" class="testimonial_img">

                  <span class="fs-eleven d-block d2-color fw-medium">By Russel Stevens</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Testimonials section end -->

    <!-- Discuss project section start -->
    <section class="dicscuss_projects parallax overflow-hidden">
      <div class="container pt-120 pb-120">
        <div class="row">
          <div class="col-lg-6"></div>
          <div class="col-lg-6">
            <div class="d-flex align-items-center justify-content-center px-2 px-md-5">
              <div class="dicscuss-content">
                <span class="fs-ten fw-semibold g2-color mb-2">We Carry More Than Just Good Coding Skills</span>
                <h2 class="fs-two fw-semibold w3-color mb-3 mb-lg-6">
                  Let's Discuss your <span class="y1-color">Projects</span>
                </h2>
                <p class="fs-ten w3-color">
                  We pride ourselves with our ability to perform and deliver
                  results. Use the form below to discuss your project needs with
                  our team, we will get back asap.
                </p>
                <div class="mt-5 mt-lg-10 d-flex flex-wrap gap-4 gap-lg-8 d-flex align-items-center">
                  <a href="contact.html" class="btn">
                    <span class="btn-text-one d1-color">Get Quotes</span>
                    <span class="btn-text-two d1-color">Get Quotes</span>
                  </a>
                  <div class="d-flex align-items-center gap-3 gap-lg-5">
                    <div class="d-flex">
                      <div class="choose_icon_width bgg1-color d-flex justify-content-center align-items-center">
                        <i class="ph ph-phone-call text-white fs-three"></i>
                      </div>
                      <div class="choose_icon_width choose_img">
                        <img src="static/picture/chooseImg.png" alt="...">
                      </div>
                    </div>
                    <a href="tel:+4733378901" class="w3-color fw-semibold fs-six">(+44) 152-567-987</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Discuss project section end -->

    <!-- Our Team Section star -->
    <section class="pt-120 pb-120">
      <div class="container">
        <div class="process_heading text-center" data-aos="fade-up" data-aos-duration="800">
          <span class="fs-ten fw-semibold g2-color mb-2 text-center">Our Team</span>
          <h2 class="fs-two fw-semibold d2-color mb-3 mb-lg-6">
            Meet the
            <span class="y2-color text-decoration-underline">Masterminds</span>
          </h2>
          <p class="fs-ten d2-color">
            Build responsive, mobile-first projects on the web with the world's
            most popular front-end component library.
          </p>
        </div>
        <div class="row g-6 mt-8 mt-md-15">
          <div class="col-sm-6 col-lg-4 col-xl-3">
            <div data-aos="fade-up" class="team_card">
              <div class="thumb">
                <div class="post-thumb">
                  <div class="post-thumb-inner">
                    <img src="static/picture/team1.png" alt="..." class="w-100 rounded-3">
                  </div>
                </div>
                <div class="post-thumb">
                  <div class="post-thumb-inner">
                    <img src="static/picture/team1.png" alt="..." class="w-100 rounded-3">
                  </div>
                </div>
              </div>
              <div class="px-4 px-md-8 pt-4 pt-md-8">
                <span class="y2-color">CHIEF EXECUTIVE</span>
                <h4 class="d2-color text-four fw-semibold mt-2 mb-3">
                  Manny Danile
                </h4>

                <div class="p2-color">
                  <a href="javascript:void(0)" class="p2-color fs-eight socal-icon">FB</a>
                  -
                  <a href="javascript:void(0)" class="p2-color fs-eight socal-icon">TW</a>
                  -
                  <a href="javascript:void(0)" class="p2-color fs-eight socal-icon">IN</a>
                </div>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-lg-4 col-xl-3">
            <div data-aos="fade-up" class="team_card">
              <div class="thumb">
                <div class="post-thumb">
                  <div class="post-thumb-inner">
                    <img src="static/picture/team2.png" alt="..." class="w-100 rounded-3">
                  </div>
                </div>
                <div class="post-thumb">
                  <div class="post-thumb-inner">
                    <img src="static/picture/team2.png" alt="..." class="w-100 rounded-3">
                  </div>
                </div>
              </div>
              <div class="px-4 px-md-8 pt-4 pt-md-8">
                <span class="y2-color">CHIEF EXECUTIVE</span>
                <h4 class="d2-color text-four fw-semibold mt-2 mb-3">
                  Kenna Lara
                </h4>
                <div class="p2-color">
                  <a href="javascript:void(0)" class="p2-color fs-eight socal-icon">FB</a>
                  -
                  <a href="javascript:void(0)" class="p2-color fs-eight socal-icon">TW</a>
                  -
                  <a href="javascript:void(0)" class="p2-color fs-eight socal-icon">IN</a>
                </div>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-lg-4 col-xl-3">
            <div data-aos="fade-up" class="team_card">
              <div class="thumb">
                <div class="post-thumb">
                  <div class="post-thumb-inner">
                    <img src="static/picture/team3.png" alt="..." class="w-100 rounded-3">
                  </div>
                </div>
                <div class="post-thumb">
                  <div class="post-thumb-inner">
                    <img src="static/picture/team3.png" alt="..." class="w-100 rounded-3">
                  </div>
                </div>
              </div>
              <div class="px-4 px-md-8 pt-4 pt-md-8">
                <span class="y2-color">CHIEF EXECUTIVE</span>
                <h4 class="d2-color text-four fw-semibold mt-2 mb-3">
                  Jhone Doe
                </h4>
                <div class="p2-color">
                  <a href="javascript:void(0)" class="p2-color fs-eight socal-icon">FB</a>
                  -
                  <a href="javascript:void(0)" class="p2-color fs-eight socal-icon">TW</a>
                  -
                  <a href="javascript:void(0)" class="p2-color fs-eight socal-icon">IN</a>
                </div>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-lg-4 col-xl-3">
            <div data-aos="fade-up" class="team_card">
              <div class="thumb">
                <div class="post-thumb">
                  <div class="post-thumb-inner">
                    <img src="static/picture/team4.png" alt="..." class="w-100 rounded-3">
                  </div>
                </div>
                <div class="post-thumb">
                  <div class="post-thumb-inner">
                    <img src="static/picture/team4.png" alt="..." class="w-100 rounded-3">
                  </div>
                </div>
              </div>
              <div class="px-4 px-md-8 pt-4 pt-md-8">
                <span class="y2-color">CHIEF EXECUTIVE</span>
                <h4 class="d2-color text-four fw-semibold mt-2 mb-3">
                  Afa Rose
                </h4>
                <div class="p2-color">
                  <a href="javascript:void(0)" class="p2-color fs-eight socal-icon">FB</a>
                  -
                  <a href="javascript:void(0)" class="p2-color fs-eight socal-icon">TW</a>
                  -
                  <a href="javascript:void(0)" class="p2-color fs-eight socal-icon">IN</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Our Team Section end -->

    <!-- man user video section start -->
    <section class="man-user-video">
      <div class="d-flex gap-2 align-items-center justify-content-center h-100">
        <a href="#" class="glightbox3">
          <div class="video-btn cursor brn1 n1-color d-flex align-items-center justify-content-center video-modal-button-open">
            <i class="ph-fill ph-play fs-two y2-color"></i>
          </div>
        </a>
      </div>
    </section>
    <!-- man user video section end -->

    <!-- Blogs section star -->
    <section class="pt-120 pb-120 overflow-hidden">
      <div class="container">
        <div class="d-flex flex-wrap gap-2 justify-content-between align-items-end">
          <div>
            <span class="fs-ten g2-color fw-medium">Our News Updates</span>
            <h3 class="fs-two d1-color fw-semibold mt-2 mb-3 mb-md-6">
              Latest articles & news From the blogs
            </h3>
            <span class="d2-color fs-ten">More than 1500+ agencies using Techxly
            </span>
          </div>
          <a href="contact.html" class="btn">
            <span class="btn-text-one d1-color">All Articles</span>
            <span class="btn-text-two d1-color">All Articles</span>
          </a>
        </div>
        <div class="row g-6 mt-8 mt-md-15">
          <div class="col-md-6 col-lg-4">
            <div class="blog_card">
              <div class="thumb">
                <div class="post-thumb">
                  <div class="post-thumb-inner">
                    <img src="static/picture/blog1.jpg" alt="..." class="blog_image w-100 rounded-3">
                  </div>
                </div>
                <div class="post-thumb">
                  <div class="post-thumb-inner">
                    <img src="static/picture/blog1.jpg" alt="..." class="blog_image w-100 rounded-3">
                  </div>
                </div>
              </div>
              <div class="p-5">
                <span class="p2-color p-2 bg21-color rounded-pill">STARTUP</span>
                <a href="javascript:void(0)" class="fs-five d1-color mt-2 mt-md-3 mb-3 mb-md-6 d-block fw-bold">
                  You will destroy yourself financially if you save
                </a>
                <div class="d-flex gap-2 flex-wrap justify-content-between align-items-center">
                  <div class="d-flex gap-2 align-items-center">
                    <img src="static/picture/team3.png" alt=" testimon" class="testimonial_img">

                    <span class="fs-eleven d-block d2-color fw-medium">Dennil Sami</span>
                  </div>
                  <span class="d2-color">Jan 26, 2024 </span>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-6 col-lg-4">
            <div class="blog_card">
              <div class="thumb">
                <div class="post-thumb">
                  <div class="post-thumb-inner">
                    <img src="static/picture/blog2.png" alt="..." class="blog_image w-100 rounded-3">
                  </div>
                </div>
                <div class="post-thumb">
                  <div class="post-thumb-inner">
                    <img src="static/picture/blog2.png" alt="..." class="blog_image w-100 rounded-3">
                  </div>
                </div>
              </div>
              <div class="p-5">
                <span class="y2-color p-2 bgy21-color rounded-pill">DOMAIN & HOSTING</span>
                <a href="javascript:void(0)" class="fs-five d1-color mt-2 mt-md-3 mb-3 mb-md-6 d-block fw-bold">
                  How to host website on any hosting provider?
                </a>
                <div class="d-flex gap-2 flex-wrap justify-content-between align-items-center">
                  <div class="d-flex gap-2 align-items-center">
                    <img src="static/picture/team5.png" alt=" testimon" class="testimonial_img">

                    <span class="fs-eleven d-block d2-color fw-medium">Jhone Doe</span>
                  </div>
                  <span class="d2-color">Apr 16, 2024 </span>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-6 col-lg-4">
            <div class="blog_card">
              <div class="thumb">
                <div class="post-thumb">
                  <div class="post-thumb-inner">
                    <img src="static/picture/blog3.png" alt="..." class="blog_image w-100 rounded-3">
                  </div>
                </div>
                <div class="post-thumb">
                  <div class="post-thumb-inner">
                    <img src="static/picture/blog3.png" alt="..." class="blog_image w-100 rounded-3">
                  </div>
                </div>
              </div>
              <div class="p-5">
                <span class="g2-color p-2 bgg21-color rounded-pill">STRATEGY</span>
                <a href="javascript:void(0)" class="fs-five d1-color mt-2 mt-md-3 mb-3 mb-md-6 d-block fw-bold">
                  You will destroy yourself financially if you save
                </a>
                <div class="d-flex gap-2 flex-wrap justify-content-between align-items-center">
                  <div class="d-flex gap-2 align-items-center">
                    <img src="static/picture/team8.png" alt=" testimon" class="testimonial_img">

                    <span class="fs-eleven d-block d2-color fw-medium">David Smith</span>
                  </div>
                  <span class="d2-color">May 10, 2024 </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Blogs section end -->

    <!-- FAQs section start -->
    <section class="pt-120 pb-120 bgc1-color">
      <div class="container">
        <div class="process_heading text-center" data-aos="fade-down">
          <span class="fs-ten fw-semibold g2-color mb-2 text-center">FAQ's</span>
          <h2 class="fs-two fw-semibold d2-color mb-3 mb-lg-6">
            Frequently Asked
            <span class="y2-color text-decoration-underline">Questions</span>
          </h2>
          <p class="fs-ten d2-color">
            Build responsive, mobile-first projects on the web with the world's
            most popular front-end component library.
          </p>
        </div>
        <div class="row g-2 g-md-6 mt-5 mt-md-10">
          <div class="col-lg-6">
            <div data-aos="fade-up" class="p-4 p-md-8 mb-2 mb-md-4 cursor-pointer faq">
              <div class="question d-flex gap-3 justify-content-between align-items-center rounded-2">
                <div class="d-flex gap-2 align-items-center">
                  <div class="faq_icon_width d-flex flex-shrink-0 align-items-center justify-content-center">
                    <i class="ph ph-arrow-right w2-color"></i>
                  </div>
                  <h3 class="d1-color fs-ten fw-bold">
                    Can you provide of all IT Managenment services?
                  </h3>
                </div>
                <div class="position-relative">
                  <i class="ph ph-minus d1-color fs-five"></i>
                  <i class="ph ph-minus fs-five position-absolute rotate-90 faqIcon ms-5 d1-color end-0"></i>
                </div>
              </div>
              <div class="answer max-h-0 overflow-hidden">
                <p class="d2-color text-base font-medium leading-[150%] pt-3 pt-md-5">
                  This is the first item's accordion body. It is hidden by
                  default, until the collapse plugin adds the appropriate
                  classes that we use to style each element. These classes
                  control the overall appearance, as well as the showing and
                  hiding via CSS transitions. You can modify any of this with
                  custom CSS or overriding our default variables. It's also
                  worth noting that just about any HTML can go within
                  the .accordion-body, though the transition does limit
                  overflow.
                </p>
              </div>
            </div>
            <div data-aos="fade-up" class="p-4 p-md-8 mb-2 mb-md-4 cursor-pointer faq">
              <div class="question d-flex gap-3 justify-content-between align-items-center rounded-2">
                <div class="d-flex gap-2 align-items-center">
                  <div class="faq_icon_width d-flex flex-shrink-0 align-items-center justify-content-center">
                    <i class="ph ph-arrow-right w2-color"></i>
                  </div>
                  <h3 class="d1-color fs-ten fw-bold">
                    Can I change plans later on?
                  </h3>
                </div>
                <div class="position-relative">
                  <i class="ph ph-minus d1-color fs-five"></i>
                  <i class="ph ph-minus fs-five position-absolute rotate-90 faqIcon ms-5 d1-color end-0"></i>
                </div>
              </div>
              <div class="answer max-h-0 overflow-hidden">
                <p class="d2-color text-base font-medium leading-[150%] pt-3 pt-md-5">
                  This is the first item's accordion body. It is hidden by
                  default, until the collapse plugin adds the appropriate
                  classes that we use to style each element. These classes
                  control the overall appearance, as well as the showing and
                  hiding via CSS transitions. You can modify any of this with
                  custom CSS or overriding our default variables. It's also
                  worth noting that just about any HTML can go within
                  the .accordion-body, though the transition does limit
                  overflow.
                </p>
              </div>
            </div>
            <div data-aos="fade-up" class="p-4 p-md-8 mb-2 mb-md-4 cursor-pointer faq">
              <div class="question d-flex gap-3 justify-content-between align-items-center rounded-2 cursor-pointer">
                <div class="d-flex gap-2 align-items-center">
                  <div class="faq_icon_width d-flex flex-shrink-0 align-items-center justify-content-center">
                    <i class="ph ph-arrow-right w2-color"></i>
                  </div>
                  <h3 class="d1-color fs-ten fw-bold">
                    Can I try before I buy?
                  </h3>
                </div>
                <div class="position-relative">
                  <i class="ph ph-minus d1-color fs-five"></i>
                  <i class="ph ph-minus fs-five position-absolute rotate-90 faqIcon ms-5 d1-color end-0"></i>
                </div>
              </div>
              <div class="answer max-h-0 overflow-hidden">
                <p class="d2-color text-base font-medium leading-[150%] pt-3 pt-md-5">
                  This is the first item's accordion body. It is hidden by
                  default, until the collapse plugin adds the appropriate
                  classes that we use to style each element. These classes
                  control the overall appearance, as well as the showing and
                  hiding via CSS transitions. You can modify any of this with
                  custom CSS or overriding our default variables. It's also
                  worth noting that just about any HTML can go within
                  the .accordion-body, though the transition does limit
                  overflow.
                </p>
              </div>
            </div>
            <div data-aos="fade-up" class="p-4 p-md-8 cursor-pointer faq">
              <div class="question d-flex gap-3 justify-content-between align-items-center rounded-2">
                <div class="d-flex gap-2 align-items-center">
                  <div class="faq_icon_width d-flex flex-shrink-0 align-items-center justify-content-center">
                    <i class="ph ph-arrow-right w2-color"></i>
                  </div>
                  <h3 class="d1-color fs-ten fw-bold">
                    Will I Receive Future Updates?
                  </h3>
                </div>
                <div class="position-relative">
                  <i class="ph ph-minus d1-color fs-five"></i>
                  <i class="ph ph-minus fs-five position-absolute rotate-90 faqIcon ms-5 d1-color end-0"></i>
                </div>
              </div>
              <div class="answer max-h-0 overflow-hidden">
                <p class="d2-color text-base font-medium leading-[150%] pt-3 pt-md-5">
                  This is the first item's accordion body. It is hidden by
                  default, until the collapse plugin adds the appropriate
                  classes that we use to style each element. These classes
                  control the overall appearance, as well as the showing and
                  hiding via CSS transitions. You can modify any of this with
                  custom CSS or overriding our default variables. It's also
                  worth noting that just about any HTML can go within
                  the .accordion-body, though the transition does limit
                  overflow.
                </p>
              </div>
            </div>
          </div>
          <div class="col-lg-6">
            <div data-aos="fade-up" class="p-4 p-md-8 mb-2 mb-md-4 cursor-pointer faq">
              <div class="question d-flex gap-3 justify-content-between align-items-center">
                <div class="d-flex gap-2 align-items-center">
                  <div class="faq_icon_width d-flex flex-shrink-0 align-items-center justify-content-center">
                    <i class="ph ph-arrow-right w2-color"></i>
                  </div>
                  <h3 class="d1-color fs-ten fw-bold">
                    Is this Servies work in my Country?
                  </h3>
                </div>
                <div class="position-relative">
                  <i class="ph ph-minus d1-color fs-five"></i>
                  <i class="ph ph-minus fs-five position-absolute rotate-90 faqIcon ms-5 d1-color end-0"></i>
                </div>
              </div>
              <div class="answer max-h-0 overflow-hidden">
                <p class="d2-color text-base font-medium leading-[150%] pt-3 pt-md-5">
                  This is the first item's accordion body. It is hidden by
                  default, until the collapse plugin adds the appropriate
                  classes that we use to style each element. These classes
                  control the overall appearance, as well as the showing and
                  hiding via CSS transitions. You can modify any of this with
                  custom CSS or overriding our default variables. It's also
                  worth noting that just about any HTML can go within
                  the .accordion-body, though the transition does limit
                  overflow.
                </p>
              </div>
            </div>
            <div data-aos="fade-up" class="p-4 p-md-8 mb-2 mb-md-4 cursor-pointer faq">
              <div class="question d-flex gap-3 justify-content-between align-items-center">
                <div class="d-flex gap-2 align-items-center">
                  <div class="faq_icon_width d-flex flex-shrink-0 align-items-center justify-content-center">
                    <i class="ph ph-arrow-right w2-color"></i>
                  </div>
                  <h3 class="d1-color fs-ten fw-bold">How much I will pay?</h3>
                </div>
                <div class="position-relative">
                  <i class="ph ph-minus d1-color fs-five"></i>
                  <i class="ph ph-minus fs-five position-absolute rotate-90 faqIcon ms-5 d1-color end-0"></i>
                </div>
              </div>
              <div class="answer max-h-0 overflow-hidden">
                <p class="d2-color text-base font-medium leading-[150%] pt-3 pt-md-5">
                  This is the first item's accordion body. It is hidden by
                  default, until the collapse plugin adds the appropriate
                  classes that we use to style each element. These classes
                  control the overall appearance, as well as the showing and
                  hiding via CSS transitions. You can modify any of this with
                  custom CSS or overriding our default variables. It's also
                  worth noting that just about any HTML can go within
                  the .accordion-body, though the transition does limit
                  overflow.
                </p>
              </div>
            </div>
            <div data-aos="fade-up" class="p-4 p-md-8 mb-2 mb-md-4 cursor-pointer faq">
              <div class="question d-flex gap-3 justify-content-between align-items-center">
                <div class="d-flex gap-2 align-items-center">
                  <div class="faq_icon_width d-flex flex-shrink-0 align-items-center justify-content-center">
                    <i class="ph ph-arrow-right w2-color"></i>
                  </div>
                  <h3 class="d1-color fs-ten fw-bold">
                    how can i sign up the contract?
                  </h3>
                </div>
                <div class="position-relative">
                  <i class="ph ph-minus d1-color fs-five"></i>
                  <i class="ph ph-minus fs-five position-absolute rotate-90 faqIcon ms-5 d1-color end-0"></i>
                </div>
              </div>
              <div class="answer max-h-0 overflow-hidden">
                <p class="d2-color text-base font-medium leading-[150%] pt-3 pt-md-5">
                  This is the first item's accordion body. It is hidden by
                  default, until the collapse plugin adds the appropriate
                  classes that we use to style each element. These classes
                  control the overall appearance, as well as the showing and
                  hiding via CSS transitions. You can modify any of this with
                  custom CSS or overriding our default variables. It's also
                  worth noting that just about any HTML can go within
                  the .accordion-body, though the transition does limit
                  overflow.
                </p>
              </div>
            </div>
            <div data-aos="fade-up" class="p-4 p-md-8 mb-2 mb-md-4 cursor-pointer faq">
              <div class="question d-flex gap-3 justify-content-between align-items-center">
                <div class="d-flex gap-2 align-items-center">
                  <div class="faq_icon_width d-flex flex-shrink-0 align-items-center justify-content-center">
                    <i class="ph ph-arrow-right w2-color"></i>
                  </div>
                  <h3 class="d1-color fs-ten fw-bold">
                    Can you handle ongoing maintenance?
                  </h3>
                </div>
                <div class="position-relative">
                  <i class="ph ph-minus d1-color fs-five"></i>
                  <i class="ph ph-minus fs-five position-absolute rotate-90 faqIcon ms-5 d1-color end-0"></i>
                </div>
              </div>
              <div class="answer max-h-0 overflow-hidden">
                <p class="d2-color text-base font-medium leading-[150%] pt-3 pt-md-5">
                  This is the first item's accordion body. It is hidden by
                  default, until the collapse plugin adds the appropriate
                  classes that we use to style each element. These classes
                  control the overall appearance, as well as the showing and
                  hiding via CSS transitions. You can modify any of this with
                  custom CSS or overriding our default variables. It's also
                  worth noting that just about any HTML can go within
                  the .accordion-body, though the transition does limit
                  overflow.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- FAQs section end -->

    <!-- Contact section start -->
    <section class="pt-120 pb-120 bg7-color position-relative">
      <div class="container">
        <div class="process_heading text-center" data-aos="fade-down">
          <span class="fs-ten fw-semibold g2-color mb-2 text-center">Get in Touch</span>
          <h2 class="fs-two fw-semibold d2-color mb-3 mb-lg-6">
            Let's start working together
          </h2>
          <p class="fs-ten d2-color">
            Build responsive, mobile-first projects on the web with the world's
            most popular front-end component library.
          </p>
        </div>
        <div class="row g-3 g-md-6 mt-5 mt-md-10 position-relative z-2">
          <div class="col-lg-8">
            <form id="contact-form" class="contact-form bg14-color py-5 py-md-10 px-4 px-md-8 border cus-border border-seven rounded-4">
              <div class="d-sm-flex gap-3 gap-lg-6 mb-4 mb-md-8">
                <div class="w-100">
                  <label class="d2-color fs-ten mb-1">Name:</label>
                  <input type="text" class="d2-color border cus-border border-seven px-3 px-md-6 py-2 py-md-4 rounded" placeholder="Rachel Roth" id="name" required="">
                </div>
                <div class="w-100 mt-3 mt-sm-0">
                  <label class="d2-color fs-ten mb-1">Email address:</label>
                  <input type="email" class="d2-color border cus-border border-seven px-3 px-md-6 py-2 py-md-4 rounded" placeholder="Name@ examples" id="email" required="">
                </div>
              </div>
              <div class="mb-4 mb-md-8">
                <label class="d2-color fs-ten mb-1">Subject:</label>
                <input type="text" class="d2-color border cus-border border-seven px-3 px-md-6 py-2 py-md-4 rounded" placeholder="Write your Subject" id="subject" required="">
              </div>
              <div class="mb-5 mb-md-10">
                <label class="d2-color fs-ten mb-1">Message:</label>
                <textarea class="h-135 d2-color border cus-border border-seven px-3 px-md-6 py-2 py-md-4 rounded" placeholder="Rachel Roth" id="message" required=""></textarea>
              </div>
              <button class="btn2 d1-color" id="contact-submit-btn">
                <span class="btn-text-one">Send Message</span>
                <span class="btn-text-two">Send Message</span>
              </button>
            </form>
          </div>
          <div class="col-lg-4">
            <div class="bgg1-color px-5 px-lg-10 py-8 py-md-15 rounded-4">
              <div class="mb-5 mb-md-6 mb-xxl-11">
                <h4 class="fs-five w3-color mb-2">Our address info</h4>
                <span class="w4-color fs-eleven">2 Embarcadero Center, San Francisco, CA 94111 USA</span>
              </div>
              <div class="mb-5 mb-md-6 mb-xxl-11">
                <h4 class="fs-five w3-color mb-2">Phone:</h4>
                <span class="w4-color fs-eleven d-block mb-2">+1 (800) 555-1212</span>
                <span class="w4-color fs-eleven d-block">+1 (800) 555-1212</span>
              </div>
              <div class="mb-5 mb-md-6 mb-xxl-11">
                <h4 class="fs-five w3-color mb-2">Email:</h4>
                <span class="w4-color fs-eleven d-block mb-2"><a href="email-protection.html" class="__cf_email__" data-cfemail="b4c7c1c4c4dbc6c0f4d0dbd9d5ddda9ad7dbd9">[email&#160;protected]</a></span>
                <span class="w4-color fs-eleven d-block"><a href="email-protection.html" class="__cf_email__" data-cfemail="2841464e47684d50494558444d064b4745">[email&#160;protected]</a></span>
              </div>
              <div class="social_info">
                <h4 class="fs-five w3-color mb-2 mb-md-4">Our Social info</h4>
                <div class="d-flex flex-wrap gap-3">
                  <a href="javascriopt:void(0)" class="contact_icon d-flex justify-content-center align-items-center">
                    <i class="ph ph-facebook-logo fs-six w3-color"></i>
                  </a>
                  <a href="javascriopt:void(0)" class="contact_icon d-flex justify-content-center align-items-center">
                    <i class="ph ph-x-logo fs-six w3-color"></i>
                  </a>
                  <a href="javascriopt:void(0)" class="contact_icon d-flex justify-content-center align-items-center">
                    <i class="ph ph-linkedin-logo fs-six w3-color"></i>
                  </a>
                  <a href="javascriopt:void(0)" class="contact_icon d-flex justify-content-center align-items-center">
                    <i class="ph ph-instagram-logo fs-six w3-color"></i>
                  </a>
                  <a href="javascriopt:void(0)" class="contact_icon d-flex justify-content-center align-items-center">
                    <i class="ph ph-youtube-logo fs-six w3-color"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="position-absolute left-0 bottom-0 z-1 d-none d-xl-block">
        <img src="static/picture/contact-arrow.png" alt="..." class="contact-arrow">
      </div>
    </section>
    <!-- Contact section end -->

    <!-- subscribe sectiion start -->
    <section class="py-6 py-md-10 bg2-color overflow-hidden">
      <div class="container">
        <div class="row g-3 align-items-center justify-content-between">
          <div class="col-lg-6">
            <p class="w3-color fs-five">
              Subscribe to our newsletter or
              <span class="y1-color fs-five">follow @techxly</span> on Instagram
              for latest update
            </p>
          </div>
          <div class="col-lg-5">
            <form id="subscribe-form">
              <div class="d-flex align-items-center gap-2 px-4 px-md-8 py-2 py-md-4 border rounded-pill">
                <input type="email" id="email" placeholder="Name@examples" class="fs-ten border-0 outline-none focus:outline-none w3-color">
                <button id="subscribe-btn" class="subscribe-btn flex-shrink-0 cursor-pointer">
                  <i class="ph-fill ph-paper-plane-tilt"></i>
                </button>
              </div>
            </form>
            <p class="w3-color mt-3 mt-md-5">
              * We will not share your personal information with anyone
            </p>
          </div>
        </div>
      </div>
    </section>
    <!-- subscribe sectiion end -->

    <!-- Footer section start -->
    <section class="bgd4-color footer_section">
      <div class="pt-120 pb-120">
        <div class="container">
          <div class="row g-6 justify-content-between">
            <div class="col-12 col-xl-4">
              <div class="mb-3 mb-lg-6">
                <img src="static/picture/logo.png" alt="logo">
              </div>
              <p class="w3-color fs-ten">
                We have 14+ years experience. Helping you overcome technology
                challenges. Join the thriving Techxly it solution agency.
              </p>
              <div class="mt-4 mt-md-8">
                <div class="d-flex gap-2 gap-md-4 align-items-center mb-3 mb-md-5">
                  <i class="ph-fill ph-map-pin fs-six w3-color"></i>
                  <span class="w3-color fs-ten">2 Embarcadero Center, San Francisco, CA 94111 USA</span>
                </div>
                <div class="d-flex gap-2 gap-md-4 align-items-center mb-3 mb-md-5">
                  <i class="ph-fill ph-phone-incoming fs-six w3-color"></i>
                  <a href="tel:+1-847-555-5555" class="fs-ten">+1 (800) 555-1212</a>
                </div>
                <div class="d-flex gap-2 gap-md-4 align-items-center">
                  <i class="ph-fill ph-envelope fs-six w3-color"></i>
                  <a href="email-protection.html#0e7d61636b61606b4e6b766f637e626b206d6163" class="fs-ten"><span class="__cf_email__" data-cfemail="7e0d0b0e0e110c0a3e1a11131f1710501d1113">[email&#160;protected]</span></a>
                </div>
              </div>
            </div>
            <div class="col-sm-6 col-xl-2">
              <h4 class="fs-five w3-color mb-3 mb-md-5">Our Social info</h4>
              <a href="services.html" class="d-flex align-items-center flex-shrink-0 gap-2 mb-2 mb-md-3">
                <span class="fs-ten w3-color fw-medium footer_tag">Web Design</span>
              </a>
              <a href="services.html" class="d-flex align-items-center flex-shrink-0 gap-2 mb-2 mb-md-3">
                <span class="fs-ten w3-color fw-medium footer_tag">App Development</span>
              </a>
              <a href="services.html" class="d-flex align-items-center flex-shrink-0 gap-2 mb-2 mb-md-3">
                <span class="fs-ten w3-color fw-medium footer_tag">Cloud Services</span>
              </a>
              <a href="services.html" class="d-flex align-items-center flex-shrink-0 gap-2 mb-2 mb-md-3">
                <span class="fs-ten w3-color fw-medium footer_tag">Domain & Hosting</span>
              </a>
              <a href="services.html" class="d-flex align-items-center flex-shrink-0 gap-2 mb-2 mb-md-3">
                <span class="fs-ten w3-color fw-medium footer_tag">Seo Optimization</span>
              </a>
              <a href="services.html" class="d-flex align-items-center flex-shrink-0 gap-2 mb-2 mb-md-3">
                <span class="fs-ten w3-color fw-medium footer_tag">Digital Marketing</span>
              </a>
              <a href="services.html" class="d-flex align-items-center flex-shrink-0 gap-2 mb-2 mb-md-3">
                <span class="fs-ten w3-color fw-medium footer_tag">Cyber Security</span>
              </a>
              <a href="services.html" class="d-flex align-items-center flex-shrink-0 gap-2 mb-2 mb-md-3">
                <span class="fs-ten w3-color fw-medium footer_tag">Brand Identity</span>
              </a>
            </div>
            <div class="col-sm-6 col-xl-2">
              <h4 class="fs-five w3-color mb-3 mb-md-5">Information</h4>
              <a href="about.html" class="d-flex align-items-center flex-shrink-0 gap-2 mb-2 mb-md-3">
                <span class="fs-ten w3-color fw-medium footer_tag">About</span>
              </a>
              <a href="price.html" class="d-flex align-items-center flex-shrink-0 gap-2 mb-2 mb-md-3">
                <span class="fs-ten w3-color fw-medium footer_tag">Pricing</span>
              </a>
              <a href="team.html" class="d-flex align-items-center flex-shrink-0 gap-2 mb-2 mb-md-3">
                <span class="fs-ten w3-color fw-medium footer_tag">Team</span>
              </a>
              <a href="portfolio.html" class="d-flex align-items-center flex-shrink-0 gap-2 mb-2 mb-md-3">
                <span class="fs-ten w3-color fw-medium footer_tag">Portfolio</span>
              </a>
              <a href="faqs.html" class="d-flex align-items-center flex-shrink-0 gap-2 mb-2 mb-md-3">
                <span class="fs-ten w3-color fw-medium footer_tag">FAQs</span>
              </a>
              <a href="blog.html" class="d-flex align-items-center flex-shrink-0 gap-2 mb-2 mb-md-3">
                <span class="fs-ten w3-color fw-medium footer_tag">Blogs</span>
              </a>
              <a href="javascriopt:void(0)" class="d-flex align-items-center flex-shrink-0 gap-2 mb-2 mb-md-3">
                <span class="fs-ten w3-color fw-medium footer_tag">Coming Soon</span>
              </a>
            </div>
            <div class="col-12 col-xl-3">
              <h4 class="fs-five w3-color mb-3 mb-md-5">Follow Us</h4>

              <div class="d-flex flex-column gap-3">
                <a href="javascript:void(0)" class="footer-follow-item d-flex justify-content-between align-items-center px-3 py-2 d-block rounded-pill">
                  <div class="d-flex align-items-center gap-2">
                    <div class="footer_icon">
                      <i class="ph ph-facebook-logo"></i>
                    </div>
                    <span class="fs-eight w3-color">Facebook</span>
                  </div>
                  <div>
                    <span class="follow-views fs-eight w3-color fw-semibold">1,44,000</span>
                    <div class="footer-link">
                      <i class="ph ph-arrow-up-right"></i>
                    </div>
                  </div>
                </a>
                <a href="javascript:void(0)" class="footer-follow-item d-flex justify-content-between align-items-center px-3 py-2 d-block rounded-pill">
                  <div class="d-flex align-items-center gap-2">
                    <div class="footer_icon">
                      <i class="ph ph-x-logo"></i>
                    </div>
                    <span class="fs-eight w3-color">Twitter</span>
                  </div>
                  <div>
                    <span class="follow-views fs-eight w3-color fw-semibold">1,44,000</span>
                    <div class="footer-link">
                      <i class="ph ph-arrow-up-right"></i>
                    </div>
                  </div>
                </a>
                <a href="javascript:void(0)" class="footer-follow-item d-flex justify-content-between align-items-center px-3 py-2 d-block rounded-pill">
                  <div class="d-flex align-items-center gap-2">
                    <div class="footer_icon">
                      <i class="ph ph-linkedin-logo"></i>
                    </div>
                    <span class="fs-eight w3-color">Linkedin</span>
                  </div>
                  <div>
                    <span class="follow-views fs-eight w3-color fw-semibold">1,44,000</span>
                    <div class="footer-link">
                      <i class="ph ph-arrow-up-right"></i>
                    </div>
                  </div>
                </a>
                <a href="javascript:void(0)" class="footer-follow-item d-flex justify-content-between align-items-center px-3 py-2 d-block rounded-pill">
                  <div class="d-flex align-items-center gap-2">
                    <div class="footer_icon">
                      <i class="ph ph-instagram-logo"></i>
                    </div>
                    <span class="fs-eight w3-color">Instagram</span>
                  </div>
                  <div>
                    <span class="follow-views fs-eight w3-color fw-semibold">1,44,000</span>
                    <div class="footer-link">
                      <i class="ph ph-arrow-up-right"></i>
                    </div>
                  </div>
                </a>
                <a href="javascript:void(0)" class="footer-follow-item d-flex justify-content-between align-items-center px-3 py-2 d-block rounded-pill">
                  <div class="d-flex align-items-center gap-2">
                    <div class="footer_icon">
                      <i class="ph ph-youtube-logo"></i>
                    </div>
                    <span class="fs-eight w3-color">Youtube</span>
                  </div>
                  <div>
                    <span class="follow-views fs-eight w3-color fw-semibold">1,44,000</span>
                    <div class="footer-link">
                      <i class="ph ph-arrow-up-right"></i>
                    </div>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <hr class="border cus-border border-four my-0">
      <div class="container d-flex flex-row-reverse sm:gap-3 flex-wrap justify-content-md-between justify-content-center py-3 py-md-6">
        <div class="d-flex gap-4">
          <a href="terms.html" class="w3-color sm:fs-ten footer_tag">Terms & Conditions</a>
          <span class="w3-color sm:fs-ten">|</span>
          <a href="privacy.html" class="w3-color sm:fs-ten footer_tag">Privacy Policy</a>
        </div>
        <span class="w3-color sm:fs-ten text-center">Copyright &copy; 2024.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a> |
         
          
        </span>
      </div>
    </section>
    <!-- Footer section end -->

    <!-- tilt js -->
    <script data-cfasync="false" src="static/js/email-decode.min.js"></script><script src="static/js/vanilla-tilt.min.js"></script>
    <script src="static/js/plugins.js"></script>
    <script src="static/js/main.js"></script>
    <script src="static/js/swiper-bundle.min.js"></script>
    <script src="static/js/aos.js"></script>
    <script src="static/js/custom-plugin.js"></script>
    <!-- glightbox  -->
    <script src="static/js/glightbox.min.js"></script>
    <script>
      var lightboxVideo = GLightbox({
        selector: ".glightbox3",
      });
    </script>
    <script type="text/javascript" src="static/js/email.min.js"></script>
  	
</body>
</html>

404.html

<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <h1>404查找的页面不存在</h1>
</body>
</html>

演示