rahul.katari
/
ariadigitalmachines
Tarkkaile 1
Äänestä 0
Fork 0
Koodi Ongelmat 0 Pull-pyynnöt 0 Julkaisut 0 Wiki Activity
Ei kuvausta
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2 Commitit
1 Haara
Haara: master
Branchit Tagit
${ item.name }
Create branch ${ searchTerm }
from 'master'
${ noResults }
ariadigitalmachines/service-3.html

service-3.html 12KB
Pysyvä linkki Historia Raaka

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347 
  1. <!DOCTYPE html>

  2. <html lang="en">

  3. 

  4. <head>

  5.     <meta charset="UTF-8">

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">

  7.     <title>Service Sections - Creative Design</title>

  8.     <!-- Favicons -->

  9.     <link href="assets/img/favicon.png" rel="icon">

  10.     <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">

  11. 

  12.     <!-- Fonts -->

  13.     <link href="https://fonts.googleapis.com" rel="preconnect">

  14.     <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>

  15.     <link

  16.         href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"

  17.         rel="stylesheet">

  18. 

  19.     <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">

  20. 

  21.     <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">

  22. <link href="assets/css/main.css" rel="stylesheet">

  23. 

  24.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

  25.     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">

  26.     <style>

  27.         :root {

  28.             --gradient-1: linear-gradient(135deg, #6366f1, #8b5cf6);

  29.             --gradient-2: linear-gradient(135deg, #3b82f6, #2dd4bf);

  30.             --dark: #0f172a;

  31.             --light: #f8fafc;

  32.         }

  33. 

  34.         body {

  35.             background-color: var(--light);

  36.         }

  37. 

  38.         .service-section {

  39.             padding: 6rem 0;

  40.             position: relative;

  41.         }

  42. 

  43.         .service-section::before {

  44.             content: '';

  45.             position: absolute;

  46.             top: 0;

  47.             left: 0;

  48.             right: 0;

  49.             height: 60%;

  50.             background: var(--dark);

  51.             z-index: 0;

  52.         }

  53. 

  54.         .service-container {

  55.             position: relative;

  56.             z-index: 1;

  57.         }

  58. 

  59.         .service-badge {

  60.             display: inline-block;

  61.             padding: 0.5rem 1rem;

  62.             background: rgba(255, 255, 255, 0.1);

  63.             color: #fff;

  64.             border-radius: 100px;

  65.             font-size: 0.875rem;

  66.             font-weight: 500;

  67.             margin-bottom: 1.5rem;

  68.             backdrop-filter: blur(10px);

  69.         }

  70. 

  71.         .service-title {

  72.             color: #fff;

  73.             font-size: 3rem;

  74.             font-weight: 800;

  75.             margin-bottom: 1.5rem;

  76.             line-height: 1.2;

  77.         }

  78. 

  79.         .service-description {

  80.             color: rgba(255, 255, 255, 0.9);

  81.             font-size: 1.1rem;

  82.             line-height: 1.7;

  83.             margin-bottom: 2.5rem;

  84.         }

  85. 

  86.         .feature-list {

  87.             background: white;

  88.             border-radius: 24px;

  89.             padding: 2rem;

  90.             box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);

  91.             margin-bottom: 2rem;

  92.         }

  93. 

  94.         .feature-item {

  95.             display: flex;

  96.             align-items: flex-start;

  97.             gap: 1rem;

  98.             padding: 1.5rem;

  99.             border-bottom: 1px solid #e2e8f0;

  100.             transition: all 0.3s ease;

  101.         }

  102. 

  103.         .feature-item:last-child {

  104.             border-bottom: none;

  105.         }

  106. 

  107.         .feature-item:hover {

  108.             background: #f8fafc;

  109.             border-radius: 12px;

  110.         }

  111. 

  112.         .feature-icon {

  113.             width: 48px;

  114.             height: 48px;

  115.             border-radius: 12px;

  116.             display: flex;

  117.             align-items: center;

  118.             justify-content: center;

  119.             font-size: 1.25rem;

  120.             color: white;

  121.             flex-shrink: 0;

  122.         }

  123. 

  124.         .feature-content h3 {

  125.             font-size: 1.1rem;

  126.             font-weight: 600;

  127.             color: var(--dark);

  128.             margin-bottom: 0.5rem;

  129.         }

  130. 

  131.         .feature-content p {

  132.             font-size: 0.95rem;

  133.             color: #64748b;

  134.             margin: 0;

  135.         }

  136. 

  137.         .image-grid {

  138.             display: grid;

  139.             grid-template-columns: repeat(2, 1fr);

  140.             gap: 1.5rem;

  141.             margin-top: 4rem;

  142.         }

  143. 

  144.         .image-item {

  145.             position: relative;

  146.             border-radius: 20px;

  147.             overflow: hidden;

  148.             aspect-ratio: 4/3;

  149.         }

  150. 

  151.         .image-item img {

  152.             width: 100%;

  153.             height: 100%;

  154.             object-fit: cover;

  155.             transition: transform 0.5s ease;

  156.         }

  157. 

  158.         .image-item:hover img {

  159.             transform: scale(1.05);

  160.         }

  161. 

  162.         .cta-button {

  163.             display: inline-flex;

  164.             align-items: center;

  165.             gap: 0.75rem;

  166.             padding: 1rem 2rem;

  167.             background: white;

  168.             color: var(--dark);

  169.             border-radius: 100px;

  170.             text-decoration: none;

  171.             font-weight: 600;

  172.             transition: all 0.3s ease;

  173.             box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);

  174.         }

  175. 

  176.         .cta-button:hover {

  177.             transform: translateY(-2px);

  178.             box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);

  179.             color: var(--dark);

  180.         }

  181. 

  182.         @media (max-width: 768px) {

  183.             .service-section {

  184.                 padding: 4rem 0;

  185.             }

  186. 

  187.             .service-title {

  188.                 font-size: 2.25rem;

  189.             }

  190. 

  191.             .image-grid {

  192.                 grid-template-columns: 1fr;

  193.             }

  194.         }

  195. 

  196.         .icon-gradient-1 {

  197.             background: var(--gradient-1);

  198.         }

  199. 

  200.         .icon-gradient-2 {

  201.             background: var(--gradient-2);

  202.         }

  203.     </style>

  204. </head>

  205. 

  206. <body>

  207.     <header id="header" class="header d-flex align-items-center fixed-top">

  208.     </header>

  209.     <!-- Software Development Section -->

  210.     <section class="service-section">

  211.         <div class="container service-container">

  212.             <div class="row gy-5">

  213.                 <div class="col-lg-6">

  214.                     <span class="service-badge">Software Development</span>

  215.                     <h2 class="service-title">Small and Medium Businesses</h2>

  216.                     <p class="service-description">One application that provides complete business process. Fix series

  217.                         offers specially designed suits for Small & Medium Businesses with affordable pricing plans.</p>

  218. 

  219.                     <div class="feature-list">

  220.                         <div class="feature-item">

  221.                             <div class="feature-icon icon-gradient-1">

  222.                                 <i class="fas fa-laptop-code"></i>

  223.                             </div>

  224.                             <div class="feature-content">

  225.                                 <h3>Expertise in Technologies</h3>

  226.                                 <p>Leveraging cutting-edge technologies to deliver robust solutions</p>

  227.                             </div>

  228.                         </div>

  229.                         <div class="feature-item">

  230.                             <div class="feature-icon icon-gradient-1">

  231.                                 <i class="fas fa-globe"></i>

  232.                             </div>

  233.                             <div class="feature-content">

  234.                                 <h3>Nationwide Reach</h3>

  235.                                 <p>Local presence with nationwide coverage for better service</p>

  236.                             </div>

  237.                         </div>

  238.                         <div class="feature-item">

  239.                             <div class="feature-icon icon-gradient-1">

  240.                                 <i class="fas fa-users-gear"></i>

  241.                             </div>

  242.                             <div class="feature-content">

  243.                                 <h3>Customer-Centric Approach</h3>

  244.                                 <p>Focused on delivering value and exceptional user experience</p>

  245.                             </div>

  246.                         </div>

  247.                     </div>

  248. 

  249.                     <a href="#" class="cta-button">

  250.                         Learn More

  251.                         <i class="fas fa-arrow-right"></i>

  252.                     </a>

  253.                 </div>

  254.                 <div class="col-lg-6">

  255.                     <div class="image-grid">

  256.                         <div class="image-item">

  257.                             <img src="/api/placeholder/400/300" alt="Business Software 1">

  258.                         </div>

  259.                         <div class="image-item">

  260.                             <img src="/api/placeholder/400/300" alt="Business Software 2">

  261.                         </div>

  262.                         <div class="image-item">

  263.                             <img src="/api/placeholder/400/300" alt="Business Software 3">

  264.                         </div>

  265.                         <div class="image-item">

  266.                             <img src="/api/placeholder/400/300" alt="Business Software 4">

  267.                         </div>

  268.                     </div>

  269.                 </div>

  270.             </div>

  271.         </div>

  272.     </section>

  273. 

  274.     <!-- Live Streaming Section -->

  275.     <section class="service-section">

  276.         <div class="container service-container">

  277.             <div class="row gy-5">

  278.                 <div class="col-lg-6 order-lg-2">

  279.                     <span class="service-badge">Live Streaming</span>

  280.                     <h2 class="service-title">Analytics and Insights</h2>

  281.                     <p class="service-description">Advanced live streaming solutions with cutting-edge analytics

  282.                         including motion detection, facial recognition, and crowd analysis.</p>

  283. 

  284.                     <div class="feature-list">

  285.                         <div class="feature-item">

  286.                             <div class="feature-icon icon-gradient-2">

  287.                                 <i class="fas fa-camera"></i>

  288.                             </div>

  289.                             <div class="feature-content">

  290.                                 <h3>Real-time Detection</h3>

  291.                                 <p>Advanced motion and object detection capabilities</p>

  292.                             </div>

  293.                         </div>

  294.                         <div class="feature-item">

  295.                             <div class="feature-icon icon-gradient-2">

  296.                                 <i class="fas fa-chart-pie"></i>

  297.                             </div>

  298.                             <div class="feature-content">

  299.                                 <h3>Analytics Dashboard</h3>

  300.                                 <p>Comprehensive insights and reporting tools</p>

  301.                             </div>

  302.                         </div>

  303.                         <div class="feature-item">

  304.                             <div class="feature-icon icon-gradient-2">

  305.                                 <i class="fas fa-shield-halved"></i>

  306.                             </div>

  307.                             <div class="feature-content">

  308.                                 <h3>Security Features</h3>

  309.                                 <p>Enhanced security with behavior detection</p>

  310.                             </div>

  311.                         </div>

  312.                     </div>

  313. 

  314.                     <a href="#" class="cta-button">

  315.                         Explore Features

  316.                         <i class="fas fa-arrow-right"></i>

  317.                     </a>

  318.                 </div>

  319.                 <div class="col-lg-6 order-lg-1">

  320.                     <div class="image-grid">

  321.                         <div class="image-item">

  322.                             <img src="/api/placeholder/400/300" alt="Streaming Analytics 1">

  323.                         </div>

  324.                         <div class="image-item">

  325.                             <img src="/api/placeholder/400/300" alt="Streaming Analytics 2">

  326.                         </div>

  327.                         <div class="image-item">

  328.                             <img src="/api/placeholder/400/300" alt="Streaming Analytics 3">

  329.                         </div>

  330.                         <div class="image-item">

  331.                             <img src="/api/placeholder/400/300" alt="Streaming Analytics 4">

  332.                         </div>

  333.                     </div>

  334.                 </div>

  335.             </div>

  336.         </div>

  337.     </section>

  338.     <footer id="footer" class="footer">

  339.     </footer>

  340. 

  341.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

  342.     <!-- header and footer js files  -->

  343.     <script src="assets/js/navbar.js"></script>

  344.     <script src="assets/js/footer.js"></script>

  345. </body>

  346. 

  347. </html>