File: /home/imensosw/user-interface.imenso.co/Solute/index_1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Solute</title>
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="css/style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!-- <header>
<div class="top_strip">
<div class="container">
<div class="block sm:flex justify-between items-center">
<div class="brand-logo">
<a href="#"> <img src="images/logo.png" alt="logo" /> </a>
</div>
<nav id="menu" class="menu hidden sm:block">
<ul class="block sm:flex sm:gap-3 md:gap-4">
<li class="dropdown-menu"><a href="#">Home</a>
<ul class="sub-menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Pages</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li class="dropdown-menu"><a href="#">Pages</a>
<ul class="sub-menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Pages</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</li>
<li><a href="#">Services</a></li>
<li class="dropdown-menu"><a href="#">Blog</a>
<ul class="sub-menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Pages</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<a href="javascript:void(0);" class="block sm:hidden absolute right-5 top-6 text-white"><i class="fa fa-bars text-lg" aria-hidden="true"></i></a>
<div class="search relative hidden sm:block">
<a href="#" class="text-white"><i class="fa fa-search" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
<div id="particles-js"></div>
<div class="banner">
<div class="container">
<div class="banner_cnt">
<span class="sub_heading">ENDLESS BUSINESS POSIBLITTES</span>
<h2>Best <span class="text-theme-primary">Solution</span> And Great <span class="text-theme-primary">Business</span></h2></h2>
<p>There are many lorem Ipsum available but the majority have in some form randomised words which don't look even slightly believable.</p>
<div class="flex gap-3 justify-center">
<a href="#" class="btn btn-primary">See Project</a>
<a href="#" class="btn btn-primary-o">Discover More</a>
</div>
</div>
</div>
</div>
</header> -->
<header class="bg-white">
<nav class="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8" aria-label="Global">
<div class="flex lg:flex-1">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600" alt="">
</a>
</div>
<div class="flex lg:hidden">
<button type="button" class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700">
<span class="sr-only">Open main menu</span>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
</div>
<div class="hidden lg:flex lg:gap-x-12">
<div class="relative">
<button type="button" class="flex items-center gap-x-1 text-sm font-semibold leading-6 text-gray-900" aria-expanded="false">
Product
<svg class="h-5 w-5 flex-none text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
</svg>
</button>
<!--
'Product' flyout menu, show/hide based on flyout menu state.
Entering: "transition ease-out duration-200"
From: "opacity-0 translate-y-1"
To: "opacity-100 translate-y-0"
Leaving: "transition ease-in duration-150"
From: "opacity-100 translate-y-0"
To: "opacity-0 translate-y-1"
-->
<div class="absolute -left-8 top-full z-10 mt-3 w-screen max-w-md overflow-hidden rounded-3xl bg-white shadow-lg ring-1 ring-gray-900/5">
<div class="p-4">
<div class="group relative flex items-center gap-x-6 rounded-lg p-4 text-sm leading-6 hover:bg-gray-50">
<div class="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
<svg class="h-6 w-6 text-gray-600 group-hover:text-indigo-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6a7.5 7.5 0 107.5 7.5h-7.5V6z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5H21A7.5 7.5 0 0013.5 3v7.5z" />
</svg>
</div>
<div class="flex-auto">
<a href="#" class="block font-semibold text-gray-900">
Analytics
<span class="absolute inset-0"></span>
</a>
<p class="mt-1 text-gray-600">Get a better understanding of your traffic</p>
</div>
</div>
<div class="group relative flex items-center gap-x-6 rounded-lg p-4 text-sm leading-6 hover:bg-gray-50">
<div class="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
<svg class="h-6 w-6 text-gray-600 group-hover:text-indigo-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.042 21.672L13.684 16.6m0 0l-2.51 2.225.569-9.47 5.227 7.917-3.286-.672zM12 2.25V4.5m5.834.166l-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243l-1.59-1.59" />
</svg>
</div>
<div class="flex-auto">
<a href="#" class="block font-semibold text-gray-900">
Engagement
<span class="absolute inset-0"></span>
</a>
<p class="mt-1 text-gray-600">Speak directly to your customers</p>
</div>
</div>
<div class="group relative flex items-center gap-x-6 rounded-lg p-4 text-sm leading-6 hover:bg-gray-50">
<div class="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
<svg class="h-6 w-6 text-gray-600 group-hover:text-indigo-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M7.864 4.243A7.5 7.5 0 0119.5 10.5c0 2.92-.556 5.709-1.568 8.268M5.742 6.364A7.465 7.465 0 004.5 10.5a7.464 7.464 0 01-1.15 3.993m1.989 3.559A11.209 11.209 0 008.25 10.5a3.75 3.75 0 117.5 0c0 .527-.021 1.049-.064 1.565M12 10.5a14.94 14.94 0 01-3.6 9.75m6.633-4.596a18.666 18.666 0 01-2.485 5.33" />
</svg>
</div>
<div class="flex-auto">
<a href="#" class="block font-semibold text-gray-900">
Security
<span class="absolute inset-0"></span>
</a>
<p class="mt-1 text-gray-600">Your customers’ data will be safe and secure</p>
</div>
</div>
<div class="group relative flex items-center gap-x-6 rounded-lg p-4 text-sm leading-6 hover:bg-gray-50">
<div class="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
<svg class="h-6 w-6 text-gray-600 group-hover:text-indigo-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 002.25-2.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v2.25A2.25 2.25 0 006 10.5zm0 9.75h2.25A2.25 2.25 0 0010.5 18v-2.25a2.25 2.25 0 00-2.25-2.25H6a2.25 2.25 0 00-2.25 2.25V18A2.25 2.25 0 006 20.25zm9.75-9.75H18a2.25 2.25 0 002.25-2.25V6A2.25 2.25 0 0018 3.75h-2.25A2.25 2.25 0 0013.5 6v2.25a2.25 2.25 0 002.25 2.25z" />
</svg>
</div>
<div class="flex-auto">
<a href="#" class="block font-semibold text-gray-900">
Integrations
<span class="absolute inset-0"></span>
</a>
<p class="mt-1 text-gray-600">Connect with third-party tools</p>
</div>
</div>
<div class="group relative flex items-center gap-x-6 rounded-lg p-4 text-sm leading-6 hover:bg-gray-50">
<div class="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
<svg class="h-6 w-6 text-gray-600 group-hover:text-indigo-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
</svg>
</div>
<div class="flex-auto">
<a href="#" class="block font-semibold text-gray-900">
Automations
<span class="absolute inset-0"></span>
</a>
<p class="mt-1 text-gray-600">Build strategic funnels that will convert</p>
</div>
</div>
</div>
<div class="grid grid-cols-2 divide-x divide-gray-900/5 bg-gray-50">
<a href="#" class="flex items-center justify-center gap-x-2.5 p-3 text-sm font-semibold leading-6 text-gray-900 hover:bg-gray-100">
<svg class="h-5 w-5 flex-none text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M2 10a8 8 0 1116 0 8 8 0 01-16 0zm6.39-2.908a.75.75 0 01.766.027l3.5 2.25a.75.75 0 010 1.262l-3.5 2.25A.75.75 0 018 12.25v-4.5a.75.75 0 01.39-.658z" clip-rule="evenodd" />
</svg>
Watch demo
</a>
<a href="#" class="flex items-center justify-center gap-x-2.5 p-3 text-sm font-semibold leading-6 text-gray-900 hover:bg-gray-100">
<svg class="h-5 w-5 flex-none text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M2 3.5A1.5 1.5 0 013.5 2h1.148a1.5 1.5 0 011.465 1.175l.716 3.223a1.5 1.5 0 01-1.052 1.767l-.933.267c-.41.117-.643.555-.48.95a11.542 11.542 0 006.254 6.254c.395.163.833-.07.95-.48l.267-.933a1.5 1.5 0 011.767-1.052l3.223.716A1.5 1.5 0 0118 15.352V16.5a1.5 1.5 0 01-1.5 1.5H15c-1.149 0-2.263-.15-3.326-.43A13.022 13.022 0 012.43 8.326 13.019 13.019 0 012 5V3.5z" clip-rule="evenodd" />
</svg>
Contact sales
</a>
</div>
</div>
</div>
<a href="#" class="text-sm font-semibold leading-6 text-gray-900">Features</a>
<a href="#" class="text-sm font-semibold leading-6 text-gray-900">Marketplace</a>
<a href="#" class="text-sm font-semibold leading-6 text-gray-900">Company</a>
</div>
<div class="hidden lg:flex lg:flex-1 lg:justify-end">
<a href="#" class="text-sm font-semibold leading-6 text-gray-900">Log in <span aria-hidden="true">→</span></a>
</div>
</nav>
<!-- Mobile menu, show/hide based on menu open state. -->
<div class="lg:hidden" role="dialog" aria-modal="true">
<!-- Background backdrop, show/hide based on slide-over state. -->
<div class="fixed inset-0 z-10"></div>
<div class="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
<div class="flex items-center justify-between">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600" alt="">
</a>
<button type="button" class="-m-2.5 rounded-md p-2.5 text-gray-700">
<span class="sr-only">Close menu</span>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="mt-6 flow-root">
<div class="-my-6 divide-y divide-gray-500/10">
<div class="space-y-2 py-6">
<div class="-mx-3">
<button type="button" class="flex w-full items-center justify-between rounded-lg py-2 pl-3 pr-3.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50" aria-controls="disclosure-1" aria-expanded="false">
Product
<!--
Expand/collapse icon, toggle classes based on menu open state.
Open: "rotate-180", Closed: ""
-->
<svg class="h-5 w-5 flex-none" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
</svg>
</button>
<!-- 'Product' sub-menu, show/hide based on menu state. -->
<div class="mt-2 space-y-2" id="disclosure-1">
<a href="#" class="block rounded-lg py-2 pl-6 pr-3 text-sm font-semibold leading-7 text-gray-900 hover:bg-gray-50">Analytics</a>
<a href="#" class="block rounded-lg py-2 pl-6 pr-3 text-sm font-semibold leading-7 text-gray-900 hover:bg-gray-50">Engagement</a>
<a href="#" class="block rounded-lg py-2 pl-6 pr-3 text-sm font-semibold leading-7 text-gray-900 hover:bg-gray-50">Security</a>
<a href="#" class="block rounded-lg py-2 pl-6 pr-3 text-sm font-semibold leading-7 text-gray-900 hover:bg-gray-50">Integrations</a>
<a href="#" class="block rounded-lg py-2 pl-6 pr-3 text-sm font-semibold leading-7 text-gray-900 hover:bg-gray-50">Automations</a>
<a href="#" class="block rounded-lg py-2 pl-6 pr-3 text-sm font-semibold leading-7 text-gray-900 hover:bg-gray-50">Watch demo</a>
<a href="#" class="block rounded-lg py-2 pl-6 pr-3 text-sm font-semibold leading-7 text-gray-900 hover:bg-gray-50">Contact sales</a>
</div>
</div>
<a href="#" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Features</a>
<a href="#" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Marketplace</a>
<a href="#" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Company</a>
</div>
<div class="py-6">
<a href="#" class="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Log in</a>
</div>
</div>
</div>
</div>
</div>
</header>
<main>
<section class="burger">
<div class="container">
<div class=" grid grid-cols-1 sm:grid-cols-2 items-center gap-8 sm:gap-12 md:gap-16">
<div>
<img src="images/about-img.png" alt="about-img" />
</div>
<div>
<span class="sub_heading_l">ABOUT COMPANY</span>
<h2 class="text-4xl sm:text-5xl font-bold my-6">The Best Of Product Your Business</h2>
<p>There are many variations of passages of lorem Ipsum available but the majority have suffered alteration in some form by inject rated humour or randomised this like.</p>
<div class="my-8 border-l-4 border-theme-primary pl-6">
<div class="font-medium">Highest quality security, Network uptime, fast output. Unlimited scale and customizing possibilities.</div>
<div><strong> Murad Hasan,</strong>
<span class="text-theme-gray">Head Of Idea</span></div>
</div>
<a href="#" class="btn btn-primary btn-black"> Read More </a>
</div>
</div>
</div>
</section>
<section class="burger bg-theme-lightgray">
<div class="container">
<div class="section_head text-center">
<span class="sub_heading">SERVICES</span>
<h2>We Offer All Types Of IT Solution Services</h2>
</div>
<div class="mt-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="card service_card">
<div class="flex gap-2">
<div>
<div class="service_icon">
<img src="images/web-programming.png" alt="web-programming" />
</div>
</div>
<div>
<h3>Software Development</h3>
<p>At vero eos et accusamus etiusto odio praesentium accusamus this etiusto odio data center.</p>
<div>
<a href="#" class="readmore">Read More <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
<div class="card service_card">
<div class="flex gap-2">
<div>
<div class="service_icon">
<img src="images/globe-grid.png" alt="globe-grid" />
</div>
</div>
<div>
<h3>Cyber Security</h3>
<p>At vero eos et accusamus etiusto odio praesentium accusamus this etiusto odio data center.</p>
<div>
<a href="#" class="readmore">Read More <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
<div class="card service_card">
<div class="flex gap-2">
<div>
<div class="service_icon">
<img src="images/data-collection.png" alt="data-collection" />
</div>
</div>
<div>
<h3>Data Recovery</h3>
<p>At vero eos et accusamus etiusto odio praesentium accusamus this etiusto odio data center.</p>
<div>
<a href="#" class="readmore">Read More <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
<div class="card service_card">
<div class="flex gap-2">
<div>
<div class="service_icon">
<img src="images/web-programming.png" alt="web-programming" />
</div>
</div>
<div>
<h3>Web Development</h3>
<p>At vero eos et accusamus etiusto odio praesentium accusamus this etiusto odio data center.</p>
<div>
<a href="#" class="readmore">Read More <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
<div class="card service_card">
<div class="flex gap-2">
<div>
<div class="service_icon">
<img src="images/cooperation.png" alt="cooperation" />
</div>
</div>
<div>
<h3>Business Consulting</h3>
<p>At vero eos et accusamus etiusto odio praesentium accusamus this etiusto odio data center.</p>
<div>
<a href="#" class="readmore">Read More <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
<div class="card service_card">
<div class="flex gap-2">
<div>
<div class="service_icon">
<img src="images/growth.png" alt="growth" />
</div>
</div>
<div>
<h3>Anaylitcs Solution</h3>
<p>At vero eos et accusamus etiusto odio praesentium accusamus this etiusto odio data center.</p>
<div>
<a href="#" class="readmore">Read More <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="burger bg_gradient">
<div class="container">
<div class="section_head text-center">
<span class="sub_heading">TEAM</span>
<h2>Our Best Team Member</h2>
</div>
<div class="mt-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="team_card">
<a href="#"></a>
<div class="team_img">
<img src="images/team1.jpg" class="animate w-full" alt="" />
<div class="social_link animate flex space-x-2 flex-wrap">
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
</div>
</div>
<div class="team_nm">
<h4>David Somers</h4>
<span>Developer</span>
</div>
</div>
<div class="team_card">
<a href="#"></a>
<div class="team_img">
<img src="images/team2.jpg" class="animate w-full" alt="team2" />
<div class="social_link animate flex space-x-2 flex-wrap">
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
</div>
</div>
<div class="team_nm">
<h4>Paula Olson</h4>
<span>Developer</span>
</div>
</div>
<div class="team_card">
<a href="#"></a>
<div class="team_img">
<img src="images/team3.jpg" class="animate w-full" alt="team3" />
<div class="social_link animate flex space-x-2 flex-wrap">
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
</div>
</div>
<div class="team_nm">
<h4>Michael Jennings</h4>
<span>Developer</span>
</div>
</div>
<div class="team_card">
<a href="#"></a>
<div class="team_img">
<img src="images/team4.jpg" class="animate w-full" alt="team" />
<div class="social_link animate flex space-x-2 flex-wrap">
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
</div>
</div>
<div class="team_nm">
<h4>Teresa Simpson</h4>
<span>Developer</span>
</div>
</div>
</div>
</div>
</section>
<section class="burger bg-theme-lightgray">
<div class="container">
<div class="sm:flex justify-between items-end">
<div class="section_head w-full ml-0 my-3">
<span class="sub_heading_l">PROJECT</span>
<h2>Awasome Portfolio</h2>
</div>
<div class="my-3">
<ul class="flex items-center gap-6 justify-start flex-wrap sm:justify-end tab_link">
<li><a href="#"> All Works</a></li>
<li><a href="#">Cloud Service</a></li>
<li><a href="#">Networking</a></li>
<li><a href="#">Security</a></li>
<li><a href="#">Web Design</a></li>
</ul>
</div>
</div>
<div class="mt-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="project">
<div class="project_img">
<img src="images/project-1.jpg" alt="" />
</div>
<div class="project_cnt animate">
<h4>Website Development</h4>
<span>Networking</span>
</div>
</div>
<div class="project">
<div class="project_img">
<img src="images/portfolio6.jpg" alt="" />
</div>
<div class="project_cnt animate">
<h4>Business Growth</h4>
<span>Networking</span>
</div>
</div>
<div class="project">
<div class="project_img">
<img src="images/blog2.jpg" alt="" />
</div>
<div class="project_cnt animate">
<h4>IT Solution</h4>
<span>Cloud Service</span>
</div>
</div>
<div class="project">
<div class="project_img">
<img src="images/portfolio4.jpg" alt="" />
</div>
<div class="project_cnt animate">
<h4>Save Security</h4>
<span>Cloud Service</span>
</div>
</div>
<div class="project">
<div class="project_img">
<img src="images/portfolio3.jpg" alt="" />
</div>
<div class="project_cnt animate">
<h4>Platform Integar</h4>
<span>Security</span>
</div>
</div>
<div class="project">
<div class="project_img">
<img src="images/portfolio2.jpg" alt="" />
</div>
<div class="project_cnt animate">
<h4>Cyber Security</h4>
<span>Security</span>
</div>
</div>
</div>
</div>
</section>
<section class="burger">
<div class="container">
<div class="section_head text-center">
<span class="sub_heading">FEEDBACK</span>
<h2>What Are They Saying About Company</h2>
</div>
<div class="mt-12 grid grid-cols-1 sm:grid-cols-2 gap-6">
<div class="testimonial p-8 border-[1px] border-black[.5] bg-white hover:border-theme-primary animate">
<div class="flex items-center gap-6">
<div class="testimonial_img">
<img src="images/testi2.jpg" alt="" />
</div>
<div class="">
<h4 class="mb-0 leading-[100%] font-semibold text-2xl">Paula Olson</h4>
<span class="mt-2 mb-3 inline-block text-theme-gray">Developer</span>
<div class="flex gap-2">
<i class="fa fa-star text-theme-primary" aria-hidden="true"></i>
<i class="fa fa-star text-theme-primary" aria-hidden="true"></i>
<i class="fa fa-star text-theme-primary" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</div>
</div>
</div>
<p class="mt-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="testimonial p-8 border-[1px] border-black[.5] bg-white hover:border-theme-primary animate">
<div class="flex items-center gap-6">
<div class="testimonial_img">
<img src="images/testi3.jpg" alt="" />
</div>
<div class="">
<h4 class="mb-0 leading-[100%] font-semibold text-2xl">Michael Jennings</h4>
<span class="mt-2 mb-3 inline-block text-theme-gray">Developer</span>
<div class="flex gap-2">
<i class="fa fa-star text-theme-primary" aria-hidden="true"></i>
<i class="fa fa-star text-theme-primary" aria-hidden="true"></i>
<i class="fa fa-star text-theme-primary" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</div>
</div>
</div>
<p class="mt-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</section>
<section class="burger bg-theme-lightgray">
<div class="container">
<div class="flex flex-wrap justify-around items-center client_logo">
<a href="#">
<img src="images/1.png" alt="1" />
</a>
<a href="#">
<img src="images/2.png" alt="2" />
</a>
<a href="#">
<img src="images/3.png" alt="3" />
</a>
</div>
</div>
</section>
<section class="burger bg_gradient">
<div class="container">
<div class="section_head text-center">
<span class="sub_heading">WHAT’S HAPPENING</span>
<h2>Best News & Blog</h2>
</div>
<div class="mt-12 grid grid-cols-1 sm:grid-cols-3 sm:gap-6">
<div class="blog shadow-sm">
<div class="blog_img">
<img src="images/blog1.jpg" alt="blog1" />
</div>
<div class="blog_cnt card">
<div class="flex items-center gap-2">
<div><a href="#" class="text-theme-primary text-sm after:content-['-'] after:ml-1 after:text-theme-primary inline-block">Business</a></div>
<div class="text-theme-gray text-sm"><span>solute</span></div>
</div>
<h4 class="my-3 line-clamp-2"><a href="#" class="text-lg font-semibold text-theme-black hover:text-theme-primary"> Innovation Using Best Software Company </a></h4>
<div>
<a href="#" class="readmore text-theme-primary text-sm">Read More <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
<div class="blog shadow-sm">
<div class="blog_img">
<img src="images/blog1.jpg" alt="blog1" />
</div>
<div class="blog_cnt card">
<div class="flex items-center gap-2">
<div><a href="#" class="text-theme-primary text-sm after:content-['-'] after:ml-1 after:text-theme-primary inline-block">Business</a></div>
<div class="text-theme-gray text-sm"><span>solute</span></div>
</div>
<h4 class="my-3 line-clamp-2"><a href="#" class="text-lg font-semibold text-theme-black hover:text-theme-primary">Ways Capitalize On Market Fruit Problem</a></h4>
<div>
<a href="#" class="readmore text-theme-primary text-sm">Read More <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
<div class="blog shadow-sm">
<div class="blog_img">
<img src="images/blog1.jpg" alt="blog1" />
</div>
<div class="blog_cnt card">
<div class="flex items-center gap-2">
<div><a href="#" class="text-theme-primary text-sm after:content-['-'] after:ml-1 after:text-theme-primary inline-block">Business</a></div>
<div class="text-theme-gray text-sm"><span>solute</span></div>
</div>
<h4 class="my-3 line-clamp-2"><a href="#" class="text-lg font-semibold text-theme-black hover:text-theme-primary">Easy Innovation Using Best Software Company</a></h4>
<div>
<a href="#" class="readmore text-theme-primary text-sm">Read More <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="footer bg-theme-black">
<div class="container">
<div class="relative grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 sm:gap-8 footer_navigation">
<div class="footer_col mb-4 sm:md-0 md:col-span-3 lg:col-span-1">
<img src="images/logo.png" alt="Logo" />
<p class="my-6">Lesires to obtain pain of itself because pain, but occasionally circumstances.</p>
<div class="social_link flex space-x-2 flex-wrap">
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
</div>
</div>
<div class="footer_col mb-4 sm:md-0">
<h3>Page Link</h3>
<ul>
<li> <a href="#"><i class="fa fa-angle-double-right" aria-hidden="true"></i>Home</a> </li>
<li> <a href="#"><i class="fa fa-angle-double-right" aria-hidden="true"></i>About Us</a> </li>
<li> <a href="#"><i class="fa fa-angle-double-right" aria-hidden="true"></i>Blog Page</a> </li>
<li> <a href="#"><i class="fa fa-angle-double-right" aria-hidden="true"></i>Terms & Conditions</a> </li>
<li> <a href="#"><i class="fa fa-angle-double-right" aria-hidden="true"></i>Privacy Policy</a> </li>
</ul>
</div>
<div class="footer_col mb-4 sm:md-0">
<h3>Services</h3>
<ul>
<li> <a href="#"><i class="fa fa-angle-double-right" aria-hidden="true"></i>Cyber Security</a> </li>
<li> <a href="#"><i class="fa fa-angle-double-right" aria-hidden="true"></i>Web Development</a> </li>
<li> <a href="#"><i class="fa fa-angle-double-right" aria-hidden="true"></i>AI Software</a> </li>
<li> <a href="#"><i class="fa fa-angle-double-right" aria-hidden="true"></i>Content Writting</a> </li>
<li> <a href="#"><i class="fa fa-angle-double-right" aria-hidden="true"></i>UI Design</a> </li>
</ul>
</div>
<div class="footer_col mb-4 sm:md-0">
<h3>Contact</h3>
<ul>
<li class="mb-4">88 Broklyn Street, 600 New
York, USA</li>
<li>
<i class="fa fa-globe" aria-hidden="true"></i> <a href="#">www.yourweb.com</a>
</li>
<li>
<i class="fa fa-envelope-o" aria-hidden="true"></i> <a href="mailto: example@gmail.com"> example@gmail.com</a>
</li>
<li>
<i class="fa fa-phone" aria-hidden="true"></i> <a href="tel:202-555-0184">202-555-0184</a>
</li>
</ul>
</div>
</div>
<div class="copyright">Copyright © 2024 Solute | Powered by Solute</div>
</div>
</footer>
<!-- stats.js -->
<!-- scripts -->
<script src="js/particles.min.js"></script>
<script src="js/app.js"></script>
<script src="js/stats.js"></script>
<script>
var count_particles, stats, update;
stats = new Stats;
stats.setMode(0);
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.body.appendChild(stats.domElement);
count_particles = document.querySelector('.js-count-particles');
update = function() {
stats.begin();
stats.end();
if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
}
requestAnimationFrame(update);
};
requestAnimationFrame(update);
</script>
</body>
</html>