旅游网站制作内容/seo群发软件
目录
- 背景
- 目标
- 描述
- 技术特点
- 开发环境
- WWW
- 客户端浏览发展史
- 服务端http发展史
- 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 5class 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 8000class 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->\nrecv(sock, &ch, sizeof(ch), MSG_PEEK);if (ch == '\n'){// \r\n只读\n// 窥探到就一定存在recv(sock, &ch, sizeof(ch), 0);}else{ch = '\n';}}// 普通字符// \nout.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 6class 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 DEBUGstatic 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; // GETauto &body_text = _http_request._request_body; // POSTauto &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){// execclose(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){// parentclose(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{// getline += 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;// suffixfound = _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 DEBUGstd::cout << "begin---------------------------" << sock << std::endl;char buff[4096];recv(sock, buff, sizeof(buff), 0);std::cout << buff;std::cout << "end-----------------------------" << sock << std::endl;
#elseEndPoint *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;
#endifLOG(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=200string str1, str2;CutString(query_string, "&", str1, str2);string name1, value1;CutString(str1, "=", name1, value1);string name2, value2;CutString(str2, "=", name2, value2); // cerrcerr << 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 withmodern 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 withmodern 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 withmodern 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 withmodern 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 withmodern 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 withmodern 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 withmodern 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 withmodern 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 withmodern and creative multipurpose design you can use Bestservices & 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 withmodern 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-firstprojects on the web with the world's most popular front-endcomponent 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 5with 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 5with 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 5with 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 5with 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 withmodern 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 modernand creative multipurpose design you can use Best services & ITsolutions.</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'smost 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'smost 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 withtechxly. IT’s a highly Customizable,creative, modern, visuallystunning 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 ahigh-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 tocreate 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 ourbrand 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 ahigh-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 deliverresults. Use the form below to discuss your project needs withour 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'smost 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'smost 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 bydefault, until the collapse plugin adds the appropriateclasses that we use to style each element. These classescontrol the overall appearance, as well as the showing andhiding via CSS transitions. You can modify any of this withcustom CSS or overriding our default variables. It's alsoworth noting that just about any HTML can go withinthe .accordion-body, though the transition does limitoverflow.</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 bydefault, until the collapse plugin adds the appropriateclasses that we use to style each element. These classescontrol the overall appearance, as well as the showing andhiding via CSS transitions. You can modify any of this withcustom CSS or overriding our default variables. It's alsoworth noting that just about any HTML can go withinthe .accordion-body, though the transition does limitoverflow.</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 bydefault, until the collapse plugin adds the appropriateclasses that we use to style each element. These classescontrol the overall appearance, as well as the showing andhiding via CSS transitions. You can modify any of this withcustom CSS or overriding our default variables. It's alsoworth noting that just about any HTML can go withinthe .accordion-body, though the transition does limitoverflow.</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 bydefault, until the collapse plugin adds the appropriateclasses that we use to style each element. These classescontrol the overall appearance, as well as the showing andhiding via CSS transitions. You can modify any of this withcustom CSS or overriding our default variables. It's alsoworth noting that just about any HTML can go withinthe .accordion-body, though the transition does limitoverflow.</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 bydefault, until the collapse plugin adds the appropriateclasses that we use to style each element. These classescontrol the overall appearance, as well as the showing andhiding via CSS transitions. You can modify any of this withcustom CSS or overriding our default variables. It's alsoworth noting that just about any HTML can go withinthe .accordion-body, though the transition does limitoverflow.</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 bydefault, until the collapse plugin adds the appropriateclasses that we use to style each element. These classescontrol the overall appearance, as well as the showing andhiding via CSS transitions. You can modify any of this withcustom CSS or overriding our default variables. It's alsoworth noting that just about any HTML can go withinthe .accordion-body, though the transition does limitoverflow.</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 bydefault, until the collapse plugin adds the appropriateclasses that we use to style each element. These classescontrol the overall appearance, as well as the showing andhiding via CSS transitions. You can modify any of this withcustom CSS or overriding our default variables. It's alsoworth noting that just about any HTML can go withinthe .accordion-body, though the transition does limitoverflow.</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 bydefault, until the collapse plugin adds the appropriateclasses that we use to style each element. These classescontrol the overall appearance, as well as the showing andhiding via CSS transitions. You can modify any of this withcustom CSS or overriding our default variables. It's alsoworth noting that just about any HTML can go withinthe .accordion-body, though the transition does limitoverflow.</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'smost 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 protected]</a></span><span class="w4-color fs-eleven d-block"><a href="email-protection.html" class="__cf_email__" data-cfemail="2841464e47684d50494558444d064b4745">[email 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 Instagramfor 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 technologychallenges. 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 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 © 2024.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">网页模板</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>
演示
相关文章：
完整http服务器
目录 背景目标描述技术特点开发环境WWW客户端浏览发展史服务端http发展史http分层概览 背景 http协议被广泛使用，从移动端，pc浏览器，http无疑是打开互联网应用窗口的重要协议，http在网络应用层中的地位不可撼动，是能…...
【专题】2024AIGC创新应用洞察报告汇总PDF洞察（附原数据表）
原文链接：https://tecdat.cn/?p38310 在科技日新月异的今天，人工智能领域正以前所未有的速度发展，AIGC（人工智能生成内容）成为其中最耀眼的明珠。从其应用场景的不断拓展，到对各行业的深刻变革࿰…...
形态学图像处理(Morphological Image Processing)
形态学图像处理(Morphological Image Processing) 前言 本博客为个人总结数字图像处理一课所写，并给出适当的扩展和相应的demo。 写博客跟做 checkpoint 很像，毕竟个人还不能达到那种信手拈来的境界，忘了就是从零开始训练࿰…...
【IDER、PyCharm】免费AI编程工具完整教程：ChatGPT Free - Support Key call AI GPT-o1 Claude3.5
文章目录 CodeMoss 简介CodeMoss 的模型集成如何安装和配置 CodeMossIDER 插件安装步骤 CodeMoss 的实战使用AI 问答功能代码优化与解释优化这段代码解释这段代码 文件上传与对话联网查询与 GPT 助手联网查询GPT 助手 提升开发效率的最佳实践结语更多文献 CodeMoss 简介 CodeM…...
C++11的一些实用特性
1.统一的列表初始化 在C98中，标准允许使用花括号{}对数组或者结构体元素进行统一的列表初始值设定。 //统一的列表初始化 struct Date {int year;int month;int day; };void test1() {Date d1 { 2024,11,14 };int array1[] { 1, 2, 3, 4, 5 };int array2[5] { …...
23种设计模式-观察者(Observer)设计模式
文章目录 一.什么是观察者模式？二.观察者模式的结构三.观察者模式的应用场景四.观察者模式的优缺点五.观察者模式的实现（C示例）六.观察者模式的实现（JAVA示例）七.代码解释八.总结 类图： 观察者设计模式类图…...
【CUDA】Branch Divergence and Unrolling Loop
目录 一、避免分支发散 1.1 并行规约问题 1.2 并行规约中的发散 二、UNrolling Loops 一、避免分支发散 控制流有时依赖于 thread 索引。同一个warp中，一个条件分支可能导致性能很差。通过重新组织数据获取模式可以减少或避免 warp divergence。具体问题查看下…...
深度学习：卷积神经网络的计算复杂度，顺序操作，最大路径长度
卷积层的计算复杂度 在深度学习中，卷积层的计算复杂度主要取决于卷积核的大小、输入和输出的通道数量、以及输入序列的长度。具体来说，卷积层的计算复杂度可以通过以下几个因素来计算： 卷积核大小 k：卷积核的大小决定了每次卷积操…...
springboot 配置文件中 multipart.max-file-size 各个版本的写法
由于springboot具有几个版本，不同版本对于文件上传最大限制的配置也有所不同。 所以要注意springboot本身的版本，不然会一直报错 在springboot1.3版本中： multipart.maxFileSize在springboot1.4与springboot1.5版本中： spring…...
linux 中mysql查看慢日志
1、到mysql容器，先登录到数据库，查看是否开启 mysql -h 127.0.0.1 -uroot -p SHOW VARIABLES LIKE slow_query_log; 2、如果没有开启，需要先开启 set global slow_query_log ON; 3、查看慢日志文件 SHOW VARIABLES LIKE slow_query_log…...
单片机的基本组成与工作原理
单片机（Microcontroller Unit, MCU）是一种将计算机的主要部分集成在一个芯片上的小型计算机系统。它通常包括中央处理器（CPU）、存储器（Memory）、输入输出接口（I/O Ports）、定时器/计…...
智慧隧道和智慧交通
通过引入先进的物联网技术，将各种硬件设备如传感器、摄像头、控制系统等有效地连接并管理起来，以实现道路安全和交通流畅的目标。这些设备将能够实时监控和控制隧道内的各种设备和系统，从而提高道路安全、提升驾驶体验并降低管理成本。 在这个…...
List、Set、Map详解和区别
在 Java 中，List、Set、Map是常用的集合类型，它们各自具有不同的特点和用途，以下是对它们的详细介绍及区别分析： List（列表） 特点： 有序性：List中的元素是有序的，即元素…...
界面控件DevExpress WinForms v24.2新功能预览 - 支持.NET 9
DevExpress WinForms 拥有180组件和UI库，能为Windows Forms平台创建具有影响力的业务解决方案。DevExpress WinForms能完美构建流畅、美观且易于使用的应用程序，无论是Office风格的界面，还是分析处理大批量的业务数据，它都能轻松胜…...
Postman之pm.test断言操作
Postman之pm.test断言操作 1.断言方法2.连接符3.条件判断符 用于验证请求的响应数据是否符合预期 1.断言方法 pm.test()：定义一个测试函数，接受两个参数，一个字符串参数用来描述该测试，一个返回True/False的函数 语法格式&#…...
对数几率回归
对数几率回归简介 对数几率回归（Logistic Regression）是一种用于解决分类问题的经典统计模型，其核心思想是利用逻辑函数（Sigmoid函数）将线性回归模型的输出值映射到概率范围 [0, 1]，从而实现分类预测。对数…...
docker 配置同宿主机共同网段的IP 同时通过通网段的另一个电脑实现远程连接docker
docker配置网络 #宿主机执行命令 ifconfig 查询对应的主机ip 子网掩码 网关地址 #[网卡名称]：inet[主机IP] netmask[子网掩码] broadcast[网关地址]这里需要重点关注：eno1[网卡名称]以及【192.168.31.225】网关地址 在宿主机执行docker命令创建一个虚拟…...
4-7-1.C# 数据容器 - LinkedList（LinkedList 的定义、LinkedList 结点的遍历、LinkedList 的常用方法）
LinkedList 概述 LinkedList<T> 通过节点（Node）来存储数据，每个节点包含数据和指向下一个节点的引用 LinkedList<T> 存储的元素是可重复的 LinkedList<T> 支持泛型，可以指定存储的元素的类型 LinkedList<…...
「三」体验HarmonyOS端云一体化开发模板——使用DevEco Studio直接创建端云一体化工程
关于作者 白晓明 宁夏图尔科技有限公司董事长兼CEO、坚果派联合创始人 华为HDE、润和软件HiHope社区专家、鸿蒙KOL、仓颉KOL 华为开发者学堂/51CTO学堂/CSDN学堂认证讲师 开放原子开源基金会2023开源贡献之星 「目录」 「一」HarmonyOS端云一体化概要 「二」体验HarmonyOS端云一…...
确保以管理员权限运行 Visual Studio 开发者命令提示符
文章目录 解决方法：1. 以管理员身份运行命令提示符2. 改变目录权限3. 改变项目目录位置4. 检查文件系统权限 总结： ********************************************************************** ** Visual Studio 2022 Developer Command Prompt v17.12.0 …...
命令执行简单（棱角社区有毒）
前言：小迪安全2022第一节反弹shell，小迪用的是两台都是云服务器，没有服务器可以在自己的主机上搭建也是可以的，主机上搭两个网站 思路：生成一个木马文件，下载到本机，然后利用本机上传到目标主机…...
Keil基于ARM Compiler 5的工程迁移为ARM Compiler 6的工程
环境： keil版本为5.38，版本务必高于5.30 STM32F4的pack包版本要高于2.9 软件包下载地址：https://zhuanlan.zhihu.com/p/262507061 一、更改Keil中编译器 更改后编译，会报很多错，先不管。 二、更改头文件依赖 观察…...
Kafka-创建topic源码
一、命令创建topic kafka-topics --create --topic quickstart-events --bootstrap-server cdh1:9092 --partitions 2 --replication-factor 2 二、kafka-topics脚本 exec $(dirname $0)/kafka-run-class.sh org.apache.kafka.tools.TopicCommand "$" 脚本中指定了…...
【网络安全】(一) 0成本添加访问级监控
互联网的安全感这个概念源于阿里。顾名思义，让互联网的用户对于web产品能够产生足够的信任和依赖。特别是涉及到用户资金交易的站点，一次严重的用户资料泄露就可以彻底毁掉你的品牌。 然而当前阶段除了bat大部分互联网行业的企业对于网络安全给的重视都…...
【Three.js基础学习】26. Animated galaxy
前言 shaders实现星系 课程回顾 使用顶点着色器为每个粒子设置动画 a属性 ， u制服 ，v变化 像素比：window.devicePixelRatio 自动从渲染器检索像素比 renderer.getPixelRatio() 如何尺寸衰减， 放大缩小视角时，粒子都是同…...
vscode使用ssh配置docker容器环境
1 创建容器，并映射主机和容器的指定ssh服务端口 2 进入容器 docker exec -it <容器ID> /bin/bash 3在容器中安装ssh服务 apt-get update apt-get install openssh-server 接着修改ssh文件信息,将容器的10008端口暴露出来允许root用户使用ssh登录 vim /…...
NLP论文速读（EMNLP 2024）|动态奖励与提示优化来帮助语言模型的进行自我对齐
论文速读|Dynamic Rewarding with Prompt Optimization Enables Tuning-free Self-Alignment of Language Models 论文信息： 简介: 本文讨论的背景是大型语言模型（LLMs）的自我对齐问题。传统的LLMs对齐方法依赖于昂贵的训练和人类偏好注释&am…...
【LeetCode】167. 两数之和 II - 输入有序数组
描述 给定一个下标从 1 开始的整数数组numbers，该数组已按非递减顺序排列，请从数组中找出满足相加之和等于目标数target的两个数。如果这两个数分别是numbers[index1]和numbers[index2]，返回整数数组[index1, index2]。 只存在唯一答案&#…...
Getx：GetxController依赖管理02，Binding绑定全局控制器（懒加载Controller）
在使用GetX 状态管理器的时候，如果每个页面都手动实例化一个控制器就太麻烦了， Binding 的作用就是所有需要进行状态管理的控制器进行统一初始化 创建全局控制器Binding import package:get/get.dart; import ../controllers/counter.dart; // 同上一篇内…...
leetcode 找不同
389. 找不同 已解答 简单 相关标签 相关企业 给定两个字符串 s 和 t ，它们只包含小写字母。 字符串 t 由字符串 s 随机重排，然后在随机位置添加一个字母。 请找出在 t 中被添加的字母。 示例 1： 输入：s "abcd"…...