RootZanli & NinjaCr3

: / home / o5t6x7pgljbm / public_html / tuitioncoin.org /
Filename : landing-saas-v3.html
back
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Silicon | SaaS Landing v.3</title>

    <!-- SEO Meta Tags -->
    <meta name="description" content="Silicon - Multipurpose Technology Bootstrap Template">
    <meta name="keywords" content="bootstrap, business, creative agency, mobile app showcase, saas, fintech, finance, online courses, software, medical, conference landing, services, e-commerce, shopping cart, multipurpose, shop, ui kit, marketing, seo, landing, blog, portfolio, html5, css3, javascript, gallery, slider, touch, creative">
    <meta name="author" content="Createx Studio">

    <!-- Viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Favicon and Touch Icons -->
    <link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
    <link rel="manifest" href="assets/favicon/site.webmanifest">
    <link rel="mask-icon" href="assets/favicon/safari-pinned-tab.svg" color="#6366f1">
    <link rel="shortcut icon" href="assets/favicon/favicon.ico">
    <meta name="msapplication-TileColor" content="#080032">
    <meta name="msapplication-config" content="assets/favicon/browserconfig.xml">
    <meta name="theme-color" content="#ffffff">

    <!-- Vendor Styles -->
    <link rel="stylesheet" media="screen" href="assets/vendor/boxicons/css/boxicons.min.css"/>
    <link rel="stylesheet" media="screen" href="assets/vendor/swiper/swiper-bundle.min.css"/>
    <link rel="stylesheet" media="screen" href="assets/vendor/lightgallery/css/lightgallery-bundle.min.css"/>

    <!-- Main Theme Styles + Bootstrap -->
    <link rel="stylesheet" media="screen" href="assets/css/theme.min.css">

    <!-- Page loading styles -->
    <style>
      .page-loading {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -webkit-transition: all .4s .2s ease-in-out;
        transition: all .4s .2s ease-in-out;
        background-color: #fff;
        opacity: 0;
        visibility: hidden;
        z-index: 9999;
      }
      .dark-mode .page-loading {
        background-color: #0b0f19;
      }
      .page-loading.active {
        opacity: 1;
        visibility: visible;
      }
      .page-loading-inner {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        text-align: center;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        -webkit-transition: opacity .2s ease-in-out;
        transition: opacity .2s ease-in-out;
        opacity: 0;
      }
      .page-loading.active > .page-loading-inner {
        opacity: 1;
      }
      .page-loading-inner > span {
        display: block;
        font-size: 1rem;
        font-weight: normal;
        color: #9397ad;
      }
      .dark-mode .page-loading-inner > span {
        color: #fff;
        opacity: .6;
      }
      .page-spinner {
        display: inline-block;
        width: 2.75rem;
        height: 2.75rem;
        margin-bottom: .75rem;
        vertical-align: text-bottom;
        border: .15em solid #b4b7c9;
        border-right-color: transparent;
        border-radius: 50%;
        -webkit-animation: spinner .75s linear infinite;
        animation: spinner .75s linear infinite;
      }
      .dark-mode .page-spinner {
        border-color: rgba(255,255,255,.4);
        border-right-color: transparent;
      }
      @-webkit-keyframes spinner {
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
      @keyframes spinner {
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
    </style>

    <!-- Theme mode -->
    <script>
      let mode = window.localStorage.getItem('mode'),
          root = document.getElementsByTagName('html')[0];
      if (mode !== null && mode === 'dark') {
        root.classList.add('dark-mode');
      } else {
        root.classList.remove('dark-mode');
      }
    </script>

    <!-- Page loading scripts -->
    <script>
      (function () {
        window.onload = function () {
          const preloader = document.querySelector('.page-loading');
          preloader.classList.remove('active');
          setTimeout(function () {
            preloader.remove();
          }, 1000);
        };
      })();
    </script>
  </head>


  <!-- Body -->
  <body>
    
    <!-- Page loading spinner -->
    <div class="page-loading active">
      <div class="page-loading-inner">
        <div class="page-spinner"></div><span>Loading...</span>
      </div>
    </div>


    <!-- Page wrapper for sticky footer -->
    <!-- Wraps everything except footer to push footer to the bottom of the page if there is little content -->
    <main class="page-wrapper">


      <!-- Navbar -->
      <!-- Remove "navbar-sticky" class to make navigation bar scrollable with the page -->
      <header class="header navbar navbar-expand-lg navbar-dark position-absolute navbar-sticky">
        <div class="container px-3">
          <a href="index.html" class="navbar-brand pe-3">
            <img src="assets/img/logo.svg" width="47" alt="Silicon">
            Silicon
          </a>
          <div id="navbarNav" class="offcanvas offcanvas-end bg-dark">
            <div class="offcanvas-header border-bottom border-light">
              <h5 class="offcanvas-title text-white">Menu</h5>
              <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body">
              <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item dropdown">
                  <a href="#" class="nav-link dropdown-toggle active" data-bs-toggle="dropdown" aria-current="page">Landings</a>
                  <div class="dropdown-menu dropdown-menu-dark p-0">
                    <div class="d-lg-flex">
                      <div class="mega-dropdown-column bg-position-center bg-repeat-0 bg-size-cover rounded-3 rounded-end-0" style="background-image: url(assets/img/landings.jpg); margin: -1px;"></div>
                      <div class="mega-dropdown-column pt-lg-3 pb-lg-4">
                        <ul class="list-unstyled mb-0">
                          <li><a href="index.html" class="dropdown-item">Template Intro Page</a></li>
                          <li><a href="landing-mobile-app-showcase-v1.html" class="dropdown-item">Mobile App Showcase v.1</a></li>
                          <li><a href="landing-mobile-app-showcase-v2.html" class="dropdown-item">Mobile App Showcase v.2</a></li>
                          <li><a href="landing-product.html" class="dropdown-item d-flex align-items-center">Product Landing<span class="badge bg-success ms-2">New</span></a></li>
                          <li><a href="landing-startup.html" class="dropdown-item d-flex align-items-center">Startup</a></li>
                          <li><a href="landing-saas-v1.html" class="dropdown-item">SaaS v.1</a></li>
                          <li><a href="landing-saas-v2.html" class="dropdown-item">SaaS v.2</a></li>
                          <li><a href="landing-saas-v3.html" class="dropdown-item">SaaS v.3</a></li>
                        </ul>
                      </div>
                      <div class="mega-dropdown-column pt-lg-3 pb-lg-4">
                        <ul class="list-unstyled mb-0">
                          <li><a href="landing-financial.html" class="dropdown-item">Financial Consulting</a></li>
                          <li><a href="landing-online-courses.html" class="dropdown-item">Online Courses</a></li>
                          <li><a href="landing-medical.html" class="dropdown-item">Medical</a></li>
                          <li><a href="landing-software-company.html" class="dropdown-item">IT (Software) Company</a></li>
                          <li><a href="landing-conference.html" class="dropdown-item">Conference</a></li>
                          <li><a href="landing-digital-agency.html" class="dropdown-item">Digital Agency</a></li>
                          <li><a href="landing-blog.html" class="dropdown-item">Blog Homepage</a></li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="nav-item dropdown">
                  <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Pages</a>
                  <div class="dropdown-menu dropdown-menu-dark">
                    <div class="d-lg-flex pt-lg-3">
                      <div class="mega-dropdown-column">
                        <h6 class="text-light px-3 mb-2">About</h6>
                        <ul class="list-unstyled mb-3">
                          <li><a href="about-v1.html" class="dropdown-item py-1">About v.1</a></li>
                          <li><a href="about-v2.html" class="dropdown-item py-1">About v.2</a></li>
                          <li><a href="about-v3.html" class="dropdown-item py-1">About v.3</a></li>
                        </ul>
                        <h6 class="text-light px-3 mb-2">Blog</h6>
                        <ul class="list-unstyled mb-3">
                          <li><a href="blog-list-with-sidebar.html" class="dropdown-item py-1">List View with Sidebar</a></li>
                          <li><a href="blog-grid-with-sidebar.html" class="dropdown-item py-1">Grid View with Sidebar</a></li>
                          <li><a href="blog-list-no-sidebar.html" class="dropdown-item py-1">List View no Sidebar</a></li>
                          <li><a href="blog-grid-no-sidebar.html" class="dropdown-item py-1">Grid View no Sidebar</a></li>
                          <li><a href="blog-simple-feed.html" class="dropdown-item py-1">Simple Feed</a></li>
                          <li><a href="blog-single.html" class="dropdown-item py-1">Single Post</a></li>
                          <li><a href="blog-podcast.html" class="dropdown-item py-1">Podcast</a></li>
                        </ul>
                      </div>
                      <div class="mega-dropdown-column">
                        <h6 class="text-light px-3 mb-2">Portfolio</h6>
                        <ul class="list-unstyled mb-3">
                          <li><a href="portfolio-grid.html" class="dropdown-item py-1">Grid View</a></li>
                          <li><a href="portfolio-list.html" class="dropdown-item py-1">List View</a></li>
                          <li><a href="portfolio-slider.html" class="dropdown-item py-1">Slider View</a></li>
                          <li><a href="portfolio-courses.html" class="dropdown-item py-1">Courses</a></li>
                          <li><a href="portfolio-single-project.html" class="dropdown-item py-1">Single Project</a></li>
                          <li><a href="portfolio-single-course.html" class="dropdown-item py-1">Single Course</a></li>
                        </ul>
                        <h6 class="text-light px-3 mb-2">Services</h6>
                        <ul class="list-unstyled mb-3">
                          <li><a href="services-v1.html" class="dropdown-item py-1">Services v.1</a></li>
                          <li><a href="services-v2.html" class="dropdown-item py-1">Services v.2</a></li>
                          <li><a href="services-single-v1.html" class="dropdown-item py-1">Service Details v.1</a></li>
                          <li><a href="services-single-v2.html" class="dropdown-item py-1">Service Details v.2</a></li>
                        </ul>
                      </div>
                      <div class="mega-dropdown-column">
                        <h6 class="text-light px-3 mb-2">Pricing</h6>
                        <ul class="list-unstyled mb-3">
                          <li><a href="pricing.html" class="dropdown-item py-1">Pricing Page</a></li>
                        </ul>
                        <h6 class="text-light px-3 mb-2">Contacts</h6>
                        <ul class="list-unstyled mb-3">
                          <li><a href="contacts-v1.html" class="dropdown-item py-1">Contacts v.1</a></li>
                          <li><a href="contacts-v2.html" class="dropdown-item py-1">Contacts v.2</a></li>
                          <li><a href="contacts-v3.html" class="dropdown-item py-1">Contacts v.3</a></li>
                        </ul>
                        <h6 class="text-light px-3 mb-2">Specialty</h6>
                        <ul class="list-unstyled">
                          <li><a href="404-v1.html" class="dropdown-item py-1">404 Error v.1</a></li>
                          <li><a href="404-v2.html" class="dropdown-item py-1">404 Error v.2</a></li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="nav-item dropdown">
                  <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Account</a>
                  <ul class="dropdown-menu dropdown-menu-dark">
                    <li><a href="account-details.html" class="dropdown-item">Account Details</a></li>
                    <li><a href="account-security.html" class="dropdown-item">Security</a></li>
                    <li><a href="account-notifications.html" class="dropdown-item">Notifications</a></li>
                    <li><a href="account-messages.html" class="dropdown-item">Messages</a></li>
                    <li><a href="account-saved-items.html" class="dropdown-item">Saved Items</a></li>
                    <li><a href="account-collections.html" class="dropdown-item">My Collections</a></li>
                    <li><a href="account-payment.html" class="dropdown-item">Payment Details</a></li>
                    <li><a href="account-signin.html" class="dropdown-item">Sign In</a></li>
                    <li><a href="account-signup.html" class="dropdown-item">Sign Up</a></li>
                  </ul>
                </li>
                <li class="nav-item">
                  <a href="components/typography.html" class="nav-link">UI Kit</a>
                </li>
                <li class="nav-item">
                  <a href="docs/getting-started.html" class="nav-link">Docs</a>
                </li>
              </ul>
            </div>
            <div class="offcanvas-header border-top border-light">
              <a href="https://themes.getbootstrap.com/product/silicon-business-technology-template-ui-kit/" class="btn btn-primary w-100" target="_blank" rel="noopener">
                <i class="bx bx-cart fs-4 lh-1 me-1"></i>
                &nbsp;Buy now
              </a>
            </div>      
          </div>
          <div class="dark-mode pe-lg-1 ms-auto me-4">
            <div class="form-check form-switch mode-switch" data-bs-toggle="mode">
              <input type="checkbox" class="form-check-input" id="theme-mode">
              <label class="form-check-label d-none d-sm-block" for="theme-mode">Light</label>
              <label class="form-check-label d-none d-sm-block" for="theme-mode">Dark</label>
            </div>
          </div>
          <button type="button" class="navbar-toggler" data-bs-toggle="offcanvas" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <a href="https://themes.getbootstrap.com/product/silicon-business-technology-template-ui-kit/" class="btn btn-primary btn-sm fs-sm rounded d-none d-lg-inline-flex" target="_blank" rel="noopener">
            <i class="bx bx-cart fs-5 lh-1 me-1"></i>
            &nbsp;Buy now
          </a>
        </div>
      </header>


      <!-- Hero -->
      <section class="dark-mode bg-dark bg-size-cover bg-repeat-0 bg-position-center position-relative overflow-hidden py-5 mb-4" style="background-image: url(assets/img/landing/saas-3/hero/hero-bg.jpg);">
        <div class="container position-relative zindex-2 pt-5 pb-md-2 pb-lg-4 pb-xl-5">
          <div class="row pt-3 pb-2 py-md-4">

            <!-- Text -->
            <div class="col-xl-5 col-md-6 pt-lg-5 text-center text-md-start mb-4 mb-md-0">
              <h1 class="display-3 pb-2 pb-sm-3">Make Your Life Even Easier with Crypto Bank</h1>
              <p class="fs-lg d-md-none d-xl-block pb-2 pb-md-0 mb-4 mb-md-5">Odio venenatis a, non egestas ut ultrices ultrices quis orci ipsum eu tellus tempor sed amet mauris pellentesque ut vitae.</p>
              <div class="d-flex justify-content-center justify-content-md-start pb-2 pt-lg-2 pt-xl-0">
                <a href="#" class="btn btn-lg btn-primary shadow-primary me-3 me-sm-4">Start trial now</a>
                <a href="#" class="btn btn-lg btn-outline-secondary">Contact us</a>
              </div>
              <div class="d-flex align-items-center justify-content-center justify-content-md-start text-start pt-4 pt-lg-5 mt-xxl-5">
                <div class="d-flex me-3">
                  <div class="d-flex align-items-center justify-content-center bg-light rounded-circle" style="width: 52px; height: 52px;">
                    <img src="assets/img/avatar/14.jpg" class="rounded-circle" width="48" alt="Avatar">
                  </div>
                  <div class="d-flex align-items-center justify-content-center bg-light rounded-circle ms-n3" style="width: 52px; height: 52px;">
                    <img src="assets/img/avatar/08.jpg" class="rounded-circle" width="48" alt="Avatar">
                  </div>
                  <div class="d-flex align-items-center justify-content-center bg-light rounded-circle ms-n3" style="width: 52px; height: 52px;">
                    <img src="assets/img/avatar/15.jpg" class="rounded-circle" width="48" alt="Avatar">
                  </div>
                </div>
                <div class="text-light"><strong>400k+</strong> users already with us</div>
              </div>
            </div>

             <!-- Parallax gfx -->
            <div class="col-xl-7 col-md-6 d-md-flex justify-content-end">
              <div class="parallax mx-auto ms-md-0 me-md-n5" style="max-width: 675px;">
                <div class="parallax-layer zindex-2" data-depth="0.1">
                  <img src="assets/img/landing/saas-3/hero/layer01.png" alt="Card">
                </div>
                <div class="parallax-layer zindex-3" data-depth="0.25">
                  <img src="assets/img/landing/saas-3/hero/layer02.png" alt="Bubble">
                </div>
                <div class="parallax-layer" data-depth="-0.15">
                  <img src="assets/img/landing/saas-3/hero/layer03.png" alt="Bubble">
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>


      <!-- Brands (carousel on screens < 1100px) -->
      <section class="container border-bottom-lg pt-sm-2">
        <div class="swiper mx-n2" data-swiper-options='{
          "slidesPerView": 2,
          "pagination": {
            "el": ".swiper-pagination",
            "clickable": true
          },
          "breakpoints": {
            "500": {
              "slidesPerView": 3,
              "spaceBetween": 8
            },
            "650": {
              "slidesPerView": 4,
              "spaceBetween": 8
            },
            "850": {
              "slidesPerView": 5,
              "spaceBetween": 8
            },
            "992": {
              "slidesPerView": 6,
              "spaceBetween": 8
            }
          }
        }'>
          <div class="swiper-wrapper">

            <!-- Item -->
            <div class="swiper-slide py-2">
              <a href="#" class="px-2 mx-2">
                <img src="assets/img/brands/01.svg" class="d-block mx-auto my-2" width="155" alt="Brand">
              </a>
            </div>

            <!-- Item -->
            <div class="swiper-slide py-2">
              <a href="#" class="px-2 mx-2">
                <img src="assets/img/brands/02.svg" class="d-block mx-auto my-2" width="155" alt="Brand">
              </a>
            </div>

            <!-- Item -->
            <div class="swiper-slide py-2">
              <a href="#" class="px-2 mx-2">
                <img src="assets/img/brands/03.svg" class="d-block mx-auto my-2" width="155" alt="Brand">
              </a>
            </div>

            <!-- Item -->
            <div class="swiper-slide py-2">
              <a href="#" class="px-2 mx-2">
                <img src="assets/img/brands/04.svg" class="d-block mx-auto my-2" width="155" alt="Brand">
              </a>
            </div>

            <!-- Item -->
            <div class="swiper-slide py-2">
              <a href="#" class="px-2 mx-2">
                <img src="assets/img/brands/05.svg" class="d-block mx-auto my-2" width="155" alt="Brand">
              </a>
            </div>

            <!-- Item -->
            <div class="swiper-slide py-2">
              <a href="#" class="px-2 mx-2">
                <img src="assets/img/brands/06.svg" class="d-block mx-auto my-2" width="155" alt="Brand">
              </a>
            </div>
          </div>

          <!-- Pagination (bullets) -->
          <div class="swiper-pagination position-relative pt-3"></div>
        </div>
      </section>


      <!-- Feature section (Trading) -->
      <section class="container py-5 my-md-2 my-lg-4 my-xl-5">

        <!-- Text -->
        <h2 class="h1 text-center mx-auto mt-n2 mt-sm-0 pt-md-2" style="max-width: 530px;">Get Possibilities for Better Trading with Silicon</h2>
        <ul class="list-unstyled d-flex flex-wrap justify-content-center mb-5">
          <li class="d-flex fs-xl mx-3 mt-2 mt-sm-3">
            <i class="bx bx-check lead text-primary mt-1 me-2"></i>
            <span>Spend with the Crypto and get up to <strong class="text-primary ms-1">12% back</strong></span>
          </li>
          <li class="d-flex fs-xl mx-3 mt-2 mt-sm-3">
            <i class="bx bx-check lead text-primary mt-1 me-2"></i>
            <span>Invite friends and get <strong class="text-primary ms-1">new opportunities</strong></span>
          </li>
          <li class="d-flex fs-xl mx-3 mt-2 mt-sm-3">
            <i class="bx bx-check lead text-primary mt-1 me-2"></i>
            <span>Trade and earn <strong class="text-primary mx-1">200+ cryptocurrencies</strong> and get a permanent <strong class="text-primary ms-1">5% discount</strong></span>
          </li>
        </ul>

        <!-- Parallax gfx -->
        <div class="position-relative px-4 px-sm-5 mb-3 mb-md-4">
          <img src="assets/img/landing/saas-3/feature-1/main.png" width="1079" class="d-block mx-auto" style="border-radius: 1.5rem; box-shadow: 0 1.875rem 7.5rem -.625rem rgba(124,125,152, .2);" alt="Dashboard">
          <div class="position-absolute w-100" style="left: 0; bottom: 13%; padding-right: 74.33%;">
            <img src="assets/img/landing/saas-3/feature-1/popup01.png" width="308" class="rellax d-block" style=" border-radius: .75rem; box-shadow: 0 .75rem 3.75rem -.625rem rgba(124,125,152, .2);" alt="Popup" data-rellax-percentage="0.5" data-rellax-speed="1" data-disable-parallax-down="lg">
          </div>
          <div class="position-absolute w-100" style="right: 0; top: 12%; padding-left: 74.16%;">
            <img src="assets/img/landing/saas-3/feature-1/popup02.png" width="310" class="rellax d-block" style="border-radius: .75rem; box-shadow: -.46875rem 2.25rem 6.5rem 0 rgba(126,123,160, .2);" alt="Popup" data-rellax-percentage="0.5" data-rellax-speed="1" data-disable-parallax-down="lg">
          </div>
          <div class="position-absolute w-100" style="right: 0; bottom: 9.4%; padding-left: 64.83%; padding-right: 5.5%;">
            <img src="assets/img/landing/saas-3/feature-1/popup03.png" width="322" class="rellax d-block ms-auto" style="border-radius: .75rem; box-shadow: -.46875rem 2.25rem 6.5rem 0 rgba(120,118,148, .14);" alt="Popup" data-rellax-percentage="0.5" data-rellax-speed=".5" data-disable-parallax-down="lg">
          </div>
        </div>
      </section>


      <!-- Feature section (App) -->
      <section class="container pb-5 mb-md-2 mb-lg-4 mb-xl-5">
        <div class="row align-items-center pt-2 pb-3">

          <!-- Text -->
          <div class="col-md-6 col-xl-5 text-center text-md-start mb-5 mb-md-0">
            <h2 class="h1 pb-2 pb-lg-3">Explore Opportunities with Silicon App</h2>
            <p class="pb-2 mb-4 mb-lg-5">In blandit luctus proin mauris a commodo, dolor diam tempus, aenean magna fusce eu. Id porttitor aliquam eget aliquet sagittis eu aut diam ut phasellus sed convallis iaculis neque ultricies convallis sed enim.</p>
            <hr>
            <div class="d-flex justify-content-center justify-content-md-between pt-4 pt-lg-5">
              <div class="mx-3 mx-md-0">
                <div class="display-3 text-dark mb-1">23%</div>
                <span>Nulla venenatis everys</span>
              </div>
              <div class="mx-3 mx-md-0">
                <div class="display-3 text-dark mb-1">132b</div>
                <span>Dictum in marko elementum</span>
              </div>
            </div>
          </div>

          <!-- Parallax gfx -->
          <div class="col-md-6 offset-xl-1">
            <div class="parallax ratio ratio-1x1 mx-auto" style="max-width: 550px;">
              <div class="parallax-layer position-absolute zindex-2" data-depth="-0.15">
                <img src="assets/img/landing/saas-3/feature-2/avatars.png" alt="Avatar">
              </div>
              <div class="parallax-layer d-flex justify-content-center align-items-center position-absolute top-0 start-0 w-100 h-100" data-depth="0.1">
                <div class="rounded-circle bg-primary" style="width: 70%; height: 70%; opacity: .06;"></div>
              </div>
              <div class="parallax-layer d-flex justify-content-center align-items-center position-absolute top-0 start-0 w-100 h-100" data-depth="0.2">
                <div class="rounded-circle bg-primary" style="width: 55%; height: 55%; opacity: .06;"></div>
              </div>
              <div class="parallax-layer d-flex justify-content-center align-items-center position-absolute top-0 start-0 w-100 h-100 zindex-3" data-depth="0.4">
                <div class="d-flex justify-content-center align-items-center rounded-circle bg-primary" style="width: 93px; height: 93px; box-shadow: 0 .1875rem 1.875rem -.125rem rgba(99,102,241, .95); ">
                  <span class="h5 text-light mb-0">400K+</span>
                </div>
              </div>
              <div class="parallax-layer d-flex justify-content-center align-items-center position-absolute top-0 start-0 w-100 h-100" data-depth="0.3">
                <div class="rounded-circle bg-primary" style="width: 40%; height: 40%; opacity: .06;"></div>
              </div>
            </div>
          </div>
        </div>
      </section>


      <!-- Feature section (Crypto bank) -->
      <section class="container pt-2 pt-sm-4 pb-5 mb-md-2 mb-lg-4 mb-xl-5">
        <div class="row align-items-center mb-2 pb-sm-3 pb-md-4">

          <!-- Text -->
          <div class="col-md-5 col-lg-6 col-xl-5 offset-xl-1 order-md-2 text-center text-md-start mb-5 mb-md-0">
            <h2 class="h1 pb-2 pb-lg-3">Make Your Life a lot Easier with Crypto Bank</h2>
            <p class="pb-2 mb-4 mb-xl-5">Sociis sit risus id. Sit facilisis dolor fermentum vestibulum arcuulvi maecenas maecenas pharet tincidunt sollicitudin in pellentesque vitae.</p>
            <hr>
            <div class="d-flex flex-wrap flex-sm-nowrap justify-content-center justify-content-md-between pt-3">
              <img src="assets/img/landing/saas-3/feature-3/binance.svg" width="48" class="d-block m-2 mx-md-0" alt="Bitcoin">
              <img src="assets/img/landing/saas-3/feature-3/ens.svg" width="48" class="d-block m-2 mx-md-0" alt="Ens">
              <img src="assets/img/landing/saas-3/feature-3/tether.svg" width="48" class="d-block m-2 mx-md-0" alt="Tether">
              <img src="assets/img/landing/saas-3/feature-3/alqo.svg" width="48" class="d-block m-2 mx-md-0" alt="Alqo">
              <img src="assets/img/landing/saas-3/feature-3/blockfi.svg" width="48" class="d-block m-2 mx-md-0" alt="BlockFi">
              <img src="assets/img/landing/saas-3/feature-3/bitcoin.svg" width="48" class="d-block m-2 mx-md-0" alt="Bitcoin">
            </div>
          </div>

          <!-- Parallax gfx -->
          <div class="col-md-7 col-lg-6 order-md-1">
            <div class="position-relative pt-5" style="max-width: 636px;">
              <img src="assets/img/landing/saas-3/feature-3/popup.png" class="rellax position-absolute top-0 mt-n5" alt="Card" data-rellax-percentage="0.5" data-rellax-speed="1" data-disable-parallax-down="lg">
              <img src="assets/img/landing/saas-3/feature-3/dashboard.jpg" class="d-block rounded-3 mt-sm-4 mt-md-0 mt-lg-4" alt="Dashboard" style="box-shadow: 0 1.875rem 7.5rem -.625rem rgba(124,125,152, .2);">
            </div>
          </div>
        </div>
      </section>


      <!-- How it works (Steps + Video) -->
      <section class="container">
        <div class="text-center pb-4 pb-md-0 mb-2 mb-md-5 mx-auto" style="max-width: 530px;">
          <h2 class="h1">How Does It Work?</h2>
          <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit volutpat mollis egestas nam luctus facilisis ultrices</p>
        </div>

        <!-- Steps -->
        <div class="steps steps-sm steps-horizontal-md steps-center pb-5 mb-md-2 mb-lg-3">
          <div class="step">
            <div class="step-number">
              <div class="step-number-inner">1</div>
            </div>
            <div class="step-body">
              <h3 class="h4 mb-3">Registration </h3>
              <p class="mb-0">Massa enim libero dictumst consectetur in convallis lobortis</p>
            </div>
          </div>
          <div class="step">
            <div class="step-number">
              <div class="step-number-inner">2</div>
            </div>
            <div class="step-body">
              <h3 class="h4 mb-3">Identity verification</h3>
              <p class="mb-0">At ultricies id non quisque integer eget velit. Facilisis enim</p>
            </div>
          </div>
          <div class="step">
            <div class="step-number">
              <div class="step-number-inner">3</div>
            </div>
            <div class="step-body">
              <h3 class="h4 mb-3">Start trading</h3>
              <p class="mb-0">Pellentesque rhoncus viverra vestibulum, purus purus</p>
            </div>
          </div>
          <div class="step">
            <div class="step-number">
              <div class="step-number-inner">4</div>
            </div>
            <div class="step-body">
              <h3 class="h4 mb-3">Earn with Silicon</h3>
              <p class="mb-0">Massa enim libero dictumst consectetur in convallis lobortis</p>
            </div>
          </div>
        </div>

        <!-- Video -->
        <div class="bg-secondary position-relative rounded-3 overflow-hidden px-4 px-sm-5">
          <div class="position-absolute top-50 start-50 w-75 h-75 translate-middle d-flex align-items-center justify-content-center zindex-5">
            <a href="https://www.youtube.com/watch?v=wODsNtortYw" class="btn btn-video btn-icon btn-xl bg-white stretched-link" data-bs-toggle="video">
              <i class="bx bx-play"></i>
            </a>
          </div>
          <div class="pt-4 mt-sm-3 px-3 px-sm-5 mx-md-5">
            <img src="assets/img/landing/saas-3/video-cover.png" width="786" class="rellax d-block mx-auto mt-lg-4" alt="Card" data-rellax-percentage="0.5" data-rellax-speed="1.1" data-disable-parallax-down="lg">
          </div>
        </div>
      </section>


      <!-- Testimonials -->
      <section class="container py-5 mb-2 mt-sm-2 my-md-4 my-lg-5">
        <div class="row pt-2 py-xl-3">
          <div class="col-lg-3 col-md-4">
            <h2 class="h1 text-center text-md-start mx-auto mx-md-0 pt-md-2" style="max-width: 300px;">What Our <br class="d-none d-md-inline">Clients Say <br class="d-none d-md-inline">About Us:</h2>

            <!-- Slider controls (Prev / next buttons) -->
            <div class="d-flex justify-content-center justify-content-md-start pb-4 mb-2 pt-2 pt-md-4 mt-md-5">
              <button type="button" id="prev-testimonial" class="btn btn-prev btn-icon btn-sm me-2">
                <i class="bx bx-chevron-left"></i>
              </button>
              <button type="button" id="next-testimonial" class="btn btn-next btn-icon btn-sm ms-2">
                <i class="bx bx-chevron-right"></i>
              </button>
            </div>
          </div>
          <div class="col-lg-9 col-md-8">
            <div class="swiper mx-n2" data-swiper-options='{
              "slidesPerView": 1,
              "spaceBetween": 8,
              "loop": true,
              "navigation": {
                "prevEl": "#prev-testimonial",
                "nextEl": "#next-testimonial"
              },
              "breakpoints": {
                "500": {
                  "slidesPerView": 2
                },
                "1000": {
                  "slidesPerView": 2
                },
                "1200": {
                  "slidesPerView": 3
                }
              }
            }'>
              <div class="swiper-wrapper">
  
                <!-- Item -->
                <div class="swiper-slide h-auto pt-4">
                  <figure class="d-flex flex-column h-100 px-2 px-sm-0 mb-0 mx-2">
                    <div class="card h-100 position-relative border-0 shadow-sm pt-4">
                      <span class="btn btn-icon btn-primary shadow-primary pe-none position-absolute top-0 start-0 translate-middle-y ms-4">
                        <i class="bx bxs-quote-left"></i>
                      </span>
                      <blockquote class="card-body pb-3 mb-0">
                        <p class="mb-0">Id mollis consectetur congue egestas egestas suspendisse blandit justo. Tellus augue commodo id quis tempus etiam pulvinar at maecenas.</p>
                      </blockquote>
                      <div class="card-footer border-0 text-nowrap pt-0">
                        <i class="bx bxs-star text-warning"></i>
                        <i class="bx bxs-star text-warning"></i>
                        <i class="bx bxs-star text-warning"></i>
                        <i class="bx bx-star text-muted opacity-75"></i>
                        <i class="bx bx-star text-muted opacity-75"></i>
                      </div>
                    </div>
                    <figcaption class="d-flex align-items-center ps-4 pt-4">
                      <img src="assets/img/avatar/40.jpg" width="48" class="rounded-circle" alt="Robert Fox">
                      <div class="ps-3">
                        <h6 class="fs-sm fw-semibold mb-0">Robert Fox</h6>
                        <span class="fs-xs text-muted">Founder of Lorem Company</span>
                      </div>
                    </figcaption>
                  </figure>
                </div>
  
                <!-- Item -->
                <div class="swiper-slide h-auto pt-4">
                  <figure class="d-flex flex-column h-100 px-2 px-sm-0 mb-0 mx-2">
                    <div class="card h-100 position-relative border-0 shadow-sm pt-4">
                      <span class="btn btn-icon btn-primary shadow-primary pe-none position-absolute top-0 start-0 translate-middle-y ms-4">
                        <i class="bx bxs-quote-left"></i>
                      </span>
                      <blockquote class="card-body pb-3 mb-0">
                        <p class="mb-0">Phasellus luctus nisi id orci condimentum, at cursus nisl vestibulum. Orci varius natoque penatibus et magnis dis parturient montes commodo.</p>
                      </blockquote>
                      <div class="card-footer border-0 text-nowrap pt-0">
                        <i class="bx bxs-star text-warning"></i>
                        <i class="bx bxs-star text-warning"></i>
                        <i class="bx bxs-star text-warning"></i>
                        <i class="bx bxs-star text-warning"></i>
                        <i class="bx bxs-star text-warning"></i>
                      </div>
                    </div>
                    <figcaption class="d-flex align-items-center ps-4 pt-4">
                      <img src="assets/img/avatar/06.jpg" width="48" class="rounded-circle" alt="Annette Black">
                      <div class="ps-3">
                        <h6 class="fs-sm fw-semibold mb-0">Annette Black</h6>
                        <span class="fs-xs text-muted">CEO of Ipsum Company</span>
                      </div>
                    </figcaption>
                  </figure>
                </div>
  
                <!-- Item -->
                <div class="swiper-slide h-auto pt-4">
                  <figure class="d-flex flex-column h-100 px-2 px-sm-0 mb-0 mx-2">
                    <div class="card h-100 position-relative border-0 shadow-sm pt-4">
                      <span class="btn btn-icon btn-primary shadow-primary pe-none position-absolute top-0 start-0 translate-middle-y ms-4">
                        <i class="bx bxs-quote-left"></i>
                      </span>
                      <blockquote class="card-body pb-3 mb-0">
                        <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ipsum odio, bibendum ornare mi at, efficitur urna.</p>
                      </blockquote>
                      <div class="card-footer border-0 text-nowrap pt-0">
                        <i class="bx bxs-star text-warning"></i>
                        <i class="bx bxs-star text-warning"></i>
                        <i class="bx bxs-star text-warning"></i>
                        <i class="bx bxs-star text-warning"></i>
                        <i class="bx bx-star text-muted opacity-75"></i>
                      </div>
                    </div>
                    <figcaption class="d-flex align-items-center ps-4 pt-4">
                      <img src="assets/img/avatar/41.jpg" width="48" class="rounded-circle" alt="Jerome Bell">
                      <div class="ps-3">
                        <h6 class="fs-sm fw-semibold mb-0">Jerome Bell</h6>
                        <span class="fs-xs text-muted">Founder of the Agency </span>
                      </div>
                    </figcaption>
                  </figure>
                </div>
  
                <!-- Item -->
                <div class="swiper-slide h-auto pt-4">
                  <figure class="d-flex flex-column h-100 px-2 px-sm-0 mb-0 mx-2">
                    <div class="card h-100 position-relative border-0 shadow-sm pt-4">
                      <span class="btn btn-icon btn-primary shadow-primary pe-none position-absolute top-0 start-0 translate-middle-y ms-4">
                        <i class="bx bxs-quote-left"></i>
                      </span>
                      <blockquote class="card-body pb-3 mb-0">
                        <p class="mb-0">Pellentesque finibus congue egestas egestas suspendisse blandit justo. Tellus augue commodo id quis tempus etiam pulvinar at maecenas.</p>
                      </blockquote>
                      <div class="card-footer border-0 text-nowrap pt-0">
                        <i class="bx bxs-star text-warning"></i>
                        <i class="bx bxs-star text-warning"></i>
                        <i class="bx bxs-star text-warning"></i>
                        <i class="bx bxs-star text-warning"></i>
                        <i class="bx bxs-star text-warning"></i>
                      </div>
                    </div>
                    <figcaption class="d-flex align-items-center ps-4 pt-4">
                      <img src="assets/img/avatar/05.jpg" width="48" class="rounded-circle" alt="Albert Flores">
                      <div class="ps-3">
                        <h6 class="fs-sm fw-semibold mb-0">Albert Flores</h6>
                        <span class="fs-xs text-muted">CEO of Dolor Ltd.</span>
                      </div>
                    </figcaption>
                  </figure>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>


      <!-- CTA -->
      <section class="container">
        <div class="dark-mode bg-dark bg-size-cover bg-position-center bg-repeat-0 position-relative overflow-hidden rounded-3 py-lg-3 py-xl-5 px-4 px-lg-5 px-xl-0" style="background-image: url(assets/img/landing/saas-3/cta-bg.jpg);">
          <div class="row position-relative zindex-2 py-5 my-1 my-md-3">
            <div class="col-md-6">
              <div class="mx-auto" style="max-width: 440px;">
                <h2 class="h1 pb-1 pb-md-3 pb-lg-4">Let's start your investing easier now!</h2>
                <ul class="list-unstyled fs-lg d-md-none pb-3">
                  <li class="d-flex mb-2">
                    <i class="bx bx-check lead text-primary me-2" style="margin-top: .125rem;"></i>
                    Purus vestibulum pharetra amet tincidunt pretium
                  </li>
                  <li class="d-flex mb-2">
                    <i class="bx bx-check lead text-primary me-2" style="margin-top: .125rem;"></i>
                    Haretra justo magna pharetra dui gravida sed nec
                  </li>
                  <li class="d-flex">
                    <i class="bx bx-check lead text-primary me-2" style="margin-top: .125rem;"></i>
                    Venenatis risus faucibus volutpat amet feugiat a
                  </li>
                </ul>
                <a href="#" class="btn btn-lg btn-primary shadow-primary w-100 w-sm-auto">Start trial now</a>
              </div>
            </div>
            <div class="col-md-6 pt-lg-3 pt-xl-4">
              <ul class="list-unstyled fs-lg d-none d-md-block">
                <li class="d-flex mb-2">
                  <i class="bx bx-check lead text-primary me-2" style="margin-top: .125rem;"></i>
                  Purus vestibulum pharetra amet tincidunt pretium
                </li>
                <li class="d-flex mb-2">
                  <i class="bx bx-check lead text-primary me-2" style="margin-top: .125rem;"></i>
                  Haretra justo magna pharetra dui gravida sed nec
                </li>
                <li class="d-flex">
                  <i class="bx bx-check lead text-primary me-2" style="margin-top: .125rem;"></i>
                  Venenatis risus faucibus volutpat amet feugiat a
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>
    </main>


    <!-- Footer -->
    <footer class="footer pt-5 pb-4 pb-lg-5">
      <div class="container pt-lg-4">
        <div class="row pb-5">
          <div class="col-lg-4 col-md-6">
            <div class="navbar-brand text-dark p-0 me-0 mb-3 mb-lg-4">
              <img src="assets/img/logo.svg" width="47" alt="Silicon">
              Silicon
            </div>
            <p class="fs-sm pb-lg-3 mb-4">Proin ipsum pharetra, senectus eget scelerisque varius pretium platea velit. Lacus, eget eu vitae nullam proin turpis etiam mi sit. Non feugiat feugiat egestas nulla nec. Arcu tempus, eget elementum dolor ullamcorper sodales ultrices eros.</p>
            <form class="needs-validation" novalidate>
              <label for="subscr-email" class="form-label">Subscribe to our newsletter</label>
              <div class="input-group">
                <input type="email" id="subscr-email" class="form-control rounded-start ps-5" placeholder="Your email" required>
                <i class="bx bx-envelope fs-lg text-muted position-absolute top-50 start-0 translate-middle-y ms-3 zindex-5"></i>
                <div class="invalid-tooltip position-absolute top-100 start-0">Please provide a valid email address.</div>
                <button type="submit" class="btn btn-primary">Subscribe</button>
              </div>
            </form>
          </div>
          <div class="col-xl-6 col-lg-7 col-md-5 offset-xl-2 offset-md-1 pt-4 pt-md-1 pt-lg-0">
            <div id="footer-links" class="row">
              <div class="col-lg-4">
                <h6 class="mb-2">
                  <a href="#useful-links" class="d-block text-dark dropdown-toggle d-lg-none py-2" data-bs-toggle="collapse">Useful Links</a>
                </h6>
                <div id="useful-links" class="collapse d-lg-block" data-bs-parent="#footer-links">
                  <ul class="nav flex-column pb-lg-1 mb-lg-3">
                    <li class="nav-item"><a href="#" class="nav-link d-inline-block px-0 pt-1 pb-2">Home</a></li>
                    <li class="nav-item"><a href="#" class="nav-link d-inline-block px-0 pt-1 pb-2">Features</a></li>
                    <li class="nav-item"><a href="#" class="nav-link d-inline-block px-0 pt-1 pb-2">Integrations</a></li>
                    <li class="nav-item"><a href="#" class="nav-link d-inline-block px-0 pt-1 pb-2">Our Clients</a></li>
                    <li class="nav-item"><a href="#" class="nav-link d-inline-block px-0 pt-1 pb-2">Blog</a></li>
                  </ul>
                  <ul class="nav flex-column mb-2 mb-lg-0">
                    <li class="nav-item"><a href="#" class="nav-link d-inline-block px-0 pt-1 pb-2">Terms &amp; Conditions</a></li>
                    <li class="nav-item"><a href="#" class="nav-link d-inline-block px-0 pt-1 pb-2">Privacy Policy</a></li>
                  </ul>
                </div>
              </div>
              <div class="col-xl-4 col-lg-3">
                <h6 class="mb-2">
                  <a href="#social-links" class="d-block text-dark dropdown-toggle d-lg-none py-2" data-bs-toggle="collapse">Socials</a>
                </h6>
                <div id="social-links" class="collapse d-lg-block" data-bs-parent="#footer-links">
                  <ul class="nav flex-column mb-2 mb-lg-0">
                    <li class="nav-item"><a href="#" class="nav-link d-inline-block px-0 pt-1 pb-2">Facebook</a></li>
                    <li class="nav-item"><a href="#" class="nav-link d-inline-block px-0 pt-1 pb-2">LinkedIn</a></li>
                    <li class="nav-item"><a href="#" class="nav-link d-inline-block px-0 pt-1 pb-2">Twitter</a></li>
                    <li class="nav-item"><a href="#" class="nav-link d-inline-block px-0 pt-1 pb-2">Instagram</a></li>
                  </ul>
                </div>
              </div>
              <div class="col-xl-4 col-lg-5 pt-2 pt-lg-0">
                <h6 class="mb-2">Contact Us</h6>
                <a href="mailto:email@example.com" class="fw-medium">email@example.com</a>
              </div>
            </div>
          </div>
        </div>
        <p class="nav d-block fs-xs text-center text-md-start pb-2 pb-lg-0 mb-0">
          &copy; All rights reserved. Made by 
          <a class="nav-link d-inline-block p-0" href="https://createx.studio/" target="_blank" rel="noopener">Createx Studio</a>
        </p>
      </div>
    </footer>


    <!-- Back to top button -->
    <a href="#top" class="btn-scroll-top" data-scroll>
      <span class="btn-scroll-top-tooltip text-muted fs-sm me-2">Top</span>
      <i class="btn-scroll-top-icon bx bx-chevron-up"></i>
    </a>


    <!-- Vendor Scripts -->
    <script src="assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="assets/vendor/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>
    <script src="assets/vendor/parallax-js/dist/parallax.min.js"></script>
    <script src="assets/vendor/rellax/rellax.min.js"></script>
    <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
    <script src="assets/vendor/lightgallery/lightgallery.min.js"></script>
    <script src="assets/vendor/lightgallery/plugins/video/lg-video.min.js"></script>

    <!-- Main Theme Script -->
    <script src="assets/js/theme.min.js"></script>
  </body>
</html>