<!DOCTYPE html><html lang="es"> <head> <meta charset="utf-8"> <title>Silicon | Mobile App Showcase Landing v.2</title> <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"> <meta name="viewport" content="width=device-width, initial-scale=1"> <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"> <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/css/theme.min.css"> <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> <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> <script>(function (){window.onload=function (){const preloader=document.querySelector('.page-loading'); preloader.classList.remove('active'); setTimeout(function (){preloader.remove();}, 1000);};})(); </script> </head> <body> <div class="page-loading active"> <div class="page-loading-inner"> <div class="page-spinner"></div><span>Loading...</span> </div></div><main class="page-wrapper"> <header class="header navbar navbar-expand-lg 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"> <div class="offcanvas-header border-bottom"> <h5 class="offcanvas-title">Menu</h5> <button type="button" class="btn-close" 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 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-startup.html" class="dropdown-item d-flex align-items-center">Startup<span class="badge bg-success ms-2">New</span></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><li><a href="landing-financial.html" class="dropdown-item">Financial Consulting</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-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"> <div class="d-lg-flex pt-lg-3"> <div class="mega-dropdown-column"> <h6 class="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></ul> <h6 class="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="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="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="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="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="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"> <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"> <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="form-check form-switch mode-switch pe-lg-1 ms-auto me-4" 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><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> <section class="container py-5 mt-5 mt-md-4 mb-md-3 mb-lg-4 mb-xl-5"> <div class="row align-items-center align-items-lg-stretch mb-2 mb-sm-3"> <div class="col-xl-7 col-md-6 d-flex justify-content-center justify-content-md-end overflow-hidden order-md-2 mt-n5 mt-sm-n4 mt-md-0"> <div class="position-relative mt-5" style="max-width: 660px;"> <div class="bg-gradient-primary position-absolute start-0 bottom-0 w-100 rounded-3 opacity-15" style="height: 95%;"></div><div class="parallax zindex-2"> <div class="parallax-layer zindex-2 mb-n3" data-depth="0.1"> <img src="assets/img/landing/app-showcase/hero/layer01.png" alt="Device"> </div><div class="parallax-layer" data-depth="-0.22"> <img src="assets/img/landing/app-showcase/hero/layer02.png" alt="Bubble"> </div><div class="parallax-layer" data-depth="0.3"> <img src="assets/img/landing/app-showcase/hero/layer03.png" alt="Bubble"> </div></div></div></div><div class="col-xl-5 col-md-6 d-flex flex-column order-md-1"> <div class="text-center text-md-start pt-4 pt-sm-5 pt-xl-0 mt-2 mt-sm-0 mt-lg-auto"> <h1 class="display-3 mb-4">Buy Trade and Store in One App</h1> <p class="fs-lg mb-0 d-md-none d-xl-block">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 flex-column flex-sm-row justify-content-center justify-content-md-start pt-2 mt-4 mt-md-5"> <a href="#" class="btn btn-dark btn-lg px-3 py-2 me-sm-3 me-lg-4 mb-3"> <img src="assets/img/market/appstore-light.svg" class="light-mode-img" width="124" alt="App Store"> <img src="assets/img/market/appstore-dark.svg" class="dark-mode-img" width="124" alt="App Store"> </a> <a href="#" class="btn btn-dark btn-lg px-3 py-2 mb-3"> <img src="assets/img/market/googleplay-light.svg" class="light-mode-img" width="139" alt="Google Play"> <img src="assets/img/market/googleplay-dark.svg" class="dark-mode-img" width="139" alt="Google Play"> </a> </div></div><div class="d-sm-flex d-md-none d-lg-flex justify-content-center justify-content-md-start mt-auto pt-3 pt-md-0"> <div class="d-flex align-items-center w-100 pe-xxl-2 mb-2 mb-md-0"> <div class="h1 mb-0">23k+</div><div class="ps-2 ms-1">downloads of the application</div></div><div class="vr d-none d-sm-block text-border my-2 mx-4"></div><div class="d-flex align-items-center w-100 ps-xxl-2"> <div class="h1 mb-0">13b+</div><div class="ps-2 ms-1">trading volume per every day</div></div></div></div></div></section> <section class="dark-mode bg-dark position-relative pt-5 pb-4 py-md-5"> <div class="position-absolute top-0 start-0 w-100 h-100 bg-secondary"></div><div class="container position-relative zindex-3 py-lg-4 pt-md-2 py-xl-5 mb-lg-4"> <div class="row justify-content-center text-center pb-4 mb-2"> <div class="col-xl-6 pt-2"> <h2 class="h1 mb-4">Buy crypto at true cost</h2> <p class="fs-lg mb-0">Egestas ullamcorper posuere tortor eget netus elementum dui eu cras eros accumsan, ullamcorper tortor gula dui in netus</p></div></div><div class="d-sm-flex flex-wrap d-lg-table w-100"> <div class="d-lg-table-row w-sm-50 w-lg-100 pe-sm-3 pe-lg-0 mb-3 mb-lg-0"> <div class="d-lg-table-cell align-middle border-bottom py-3 py-lg-4"> <div class="d-flex align-items-center"> <img src="assets/img/landing/app-showcase/crypto/btc.png" width="32" alt="Bitcoin"> <div class="ps-3"> <h3 class="h4 mb-0">Bitcoin<span class="d-inlin-block opacity-60 ps-2 ms-1">BTC</span></h3> </div></div></div><div class="d-lg-table-cell align-middle h4 border-bottom py-3 py-lg-4 mb-0">$38,940.63</div><div class="d-lg-table-cell align-middle fs-lg text-success border-bottom py-3 py-lg-4">+1.70%</div><div class="d-lg-table-cell align-middle fs-lg text-white border-bottom py-3 py-lg-4">$736,124,602,670.97</div><div class="d-lg-table-cell align-middle border-bottom-lg py-3 py-lg-4"> <img src="assets/img/landing/app-showcase/crypto/graphs/btc.svg" width="108" alt="BTC graph"> </div><div class="d-lg-table-cell align-middle border-bottom-lg text-lg-end pt-2 pb-3 py-lg-4"> <button type="button" class="btn btn-sm btn-outline-secondary fs-sm w-100 w-lg-auto">Trade</button> </div></div><div class="d-lg-table-row w-sm-50 w-lg-100 ps-sm-3 ps-lg-0 mb-3 mb-lg-0"> <div class="d-lg-table-cell align-middle border-bottom py-3 py-lg-4"> <div class="d-flex align-items-center"> <img src="assets/img/landing/app-showcase/crypto/usdt.png" width="32" alt="Tether"> <div class="ps-3"> <h3 class="h4 mb-0">Tether<span class="d-inlin-block opacity-60 ps-2 ms-1">USDT</span></h3> </div></div></div><div class="d-lg-table-cell align-middle h4 border-bottom py-3 py-lg-4 mb-0">$15.09</div><div class="d-lg-table-cell align-middle fs-lg text-danger border-bottom py-3 py-lg-4">-0.27%</div><div class="d-lg-table-cell align-middle fs-lg text-white border-bottom py-3 py-lg-4">$14,735,584,883.68</div><div class="d-lg-table-cell align-middle border-bottom-lg py-3 py-lg-4"> <img src="assets/img/landing/app-showcase/crypto/graphs/usdt.svg" width="108" alt="USDT graph"> </div><div class="d-lg-table-cell align-middle border-bottom-lg text-lg-end pt-2 pb-3 py-lg-4"> <button type="button" class="btn btn-sm btn-outline-secondary fs-sm w-100 w-lg-auto">Trade</button> </div></div><div class="d-lg-table-row w-sm-50 w-lg-100 pe-sm-3 pe-lg-0 mb-3 mb-lg-0"> <div class="d-lg-table-cell align-middle border-bottom py-3 py-lg-4"> <div class="d-flex align-items-center"> <img src="assets/img/landing/app-showcase/crypto/eth.png" width="32" alt="Ethereum"> <div class="ps-3"> <h3 class="h4 mb-0">Ethereum<span class="d-inlin-block opacity-60 ps-2 ms-1">ETH</span></h3> </div></div></div><div class="d-lg-table-cell align-middle h4 border-bottom py-3 py-lg-4 mb-0">$2,829.07</div><div class="d-lg-table-cell align-middle fs-lg text-success border-bottom py-3 py-lg-4">+1.27%</div><div class="d-lg-table-cell align-middle fs-lg text-white border-bottom py-3 py-lg-4">$337,863,906,048.53</div><div class="d-lg-table-cell align-middle border-bottom-lg py-3 py-lg-4"> <img src="assets/img/landing/app-showcase/crypto/graphs/eth.svg" width="108" alt="ETH graph"> </div><div class="d-lg-table-cell align-middle border-bottom-lg text-lg-end pt-2 pb-3 py-lg-4"> <button type="button" class="btn btn-sm btn-outline-secondary fs-sm w-100 w-lg-auto">Trade</button> </div></div><div class="d-lg-table-row w-sm-50 w-lg-100 ps-sm-3 ps-lg-0 mb-3 mb-lg-0"> <div class="d-lg-table-cell align-middle border-bottom py-3 py-lg-4"> <div class="d-flex align-items-center"> <img src="assets/img/landing/app-showcase/crypto/dot.png" width="32" alt="Polkadot"> <div class="ps-3"> <h3 class="h4 mb-0">Polkadot<span class="d-inlin-block opacity-60 ps-2 ms-1">DOT</span></h3> </div></div></div><div class="d-lg-table-cell align-middle h4 border-bottom py-3 py-lg-4 mb-0">$13.28</div><div class="d-lg-table-cell align-middle fs-lg text-danger border-bottom py-3 py-lg-4">-1.35%</div><div class="d-lg-table-cell align-middle fs-lg text-white border-bottom py-3 py-lg-4">$26,143,724,006.81</div><div class="d-lg-table-cell align-middle border-bottom-lg py-3 py-lg-4"> <img src="assets/img/landing/app-showcase/crypto/graphs/dot.svg" width="108" alt="DOT graph"> </div><div class="d-lg-table-cell align-middle border-bottom-lg text-lg-end pt-2 pb-3 py-lg-4"> <button type="button" class="btn btn-sm btn-outline-secondary fs-sm w-100 w-lg-auto">Trade</button> </div></div></div></div></section> <section class="container py-5 my-md-3 my-lg-4 my-xl-5"> <div class="row align-items-center align-items-xl-end py-2 pb-sm-3"> <div class="col-md-6 mb-5 mb-md-0"> <div style="max-width: 570px;"> <h2 class="h1 pb-3 mb-2 mb-md-3">Get possibilities for better trading with Silicon</h2> <div class="row row-cols-1 row-cols-sm-2 gx-lg-5 g-4"> <div class="col d-md-flex d-xl-block align-items-center pt-1 pt-sm-2 pt-md-0 pt-xl-3"> <div class="d-table bg-secondary rounded flex-shrink-0 p-2 mb-3 me-md-3 me-xl-0"> <img src="assets/img/landing/app-showcase/features/payments.svg" width="19" class="d-block m-1" alt="Icon"> </div><h3 class="h5 pb-sm-1 mb-2"> <span class="d-md-none d-xl-block">Top Up Account Easily</span> <span class="fs-base text-nav d-none d-md-block d-xl-none">Top Up Account Easily</span> </h3> <p class="fs-sm mb-0 d-md-none d-xl-block">Mollis consectetur congue egestas egestas suspendisse blandit proin volutpat mollis egestas in ultrices.</p></div><div class="col d-md-flex d-xl-block align-items-center pt-1 pt-sm-2 pt-md-0 pt-xl-3"> <div class="d-table bg-secondary rounded flex-shrink-0 p-2 mb-3 me-md-3 me-xl-0"> <img src="assets/img/landing/app-showcase/features/cashback.svg" width="19" class="d-block m-1" alt="Icon"> </div><h3 class="h5 pb-sm-1 mb-2"> <span class="d-md-none d-xl-block">Regular Cashback</span> <span class="fs-base text-nav d-none d-md-block d-xl-none">Regular Cashback</span> </h3> <p class="fs-sm mb-0 d-md-none d-xl-block">Id mollis consectetur congue egestas egestas suspendisse blandit justo lorem ipsum dolor sit amet, consectetur elit.</p></div><div class="col d-md-flex d-xl-block align-items-center pt-1 pt-sm-2 pt-md-0 pt-xl-3"> <div class="d-table bg-secondary rounded flex-shrink-0 p-2 mb-3 me-md-3 me-xl-0"> <img src="assets/img/landing/app-showcase/features/statistics.svg" width="19" class="d-block m-1" alt="Icon"> </div><h3 class="h5 pb-sm-1 mb-2"> <span class="d-md-none d-xl-block">Cost Statistics</span> <span class="fs-base text-nav d-none d-md-block d-xl-none">Cost Statistics</span> </h3> <p class="fs-sm mb-0 d-md-none d-xl-block">Congue fames odio tincidunt mus. Eleifend in at arcu id sit scelerisque in. Elit quis sem dictum non turpis eget.</p></div><div class="col d-md-flex d-xl-block align-items-center pt-1 pt-sm-2 pt-md-0 pt-xl-3"> <div class="d-table bg-secondary rounded flex-shrink-0 p-2 mb-3 me-md-3 me-xl-0"> <img src="assets/img/landing/app-showcase/features/security.svg" width="19" class="d-block m-1" alt="Icon"> </div><h3 class="h5 pb-sm-1 mb-2"> <span class="d-md-none d-xl-block">Data Security</span> <span class="fs-base text-nav d-none d-md-block d-xl-none">Data Security</span> </h3> <p class="fs-sm mb-0 d-md-none d-xl-block">Vulputate commodo tincidunt risus ac odio cursus morbi ipsum ut in laoreet fermentum condimentum.</p></div></div></div></div><div class="col-md-6"> <div class="rellax position-relative rounded-3 mb-xl-5" style="box-shadow: -7px 12px 60px 0 rgba(126,123,160, .12);" data-rellax-percentage="0.5" data-rellax-speed="1.3" data-disable-parallax-down="xl"> <img src="assets/img/landing/app-showcase/stats.jpg" class="d-block rounded-3" alt="Stats screen"> </div></div></div></section> <section class="container"> <div class="text-center pb-4 mb-3 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><div class="row align-items-center"> <div class="col-md-6 pb-4 pb-md-0 mb-2 mb-md-0"> <div class="position-relative px-5"> <div class="swiper-tabs zindex-2 mx-auto" style="max-width: 384px;"> <div id="screen-1" class="swiper-tab active"> <img src="assets/img/landing/app-showcase/screens/05.png" alt="App screen"> </div><div id="screen-2" class="swiper-tab"> <img src="assets/img/landing/app-showcase/screens/06.png" alt="App screen"> </div><div id="screen-3" class="swiper-tab"> <img src="assets/img/landing/app-showcase/screens/07.png" alt="App screen"> </div></div><div class="bg-gradient-primary position-absolute start-0 bottom-0 w-100 opacity-15 rounded-3" style="height: 86.5%;"></div></div></div><div class="col-md-6 col-lg-5 offset-lg-1"> <div class="ps-md-4 ps-lg-0"> <div class="swiper text-center text-md-start mt-auto" data-swiper-options='{"spaceBetween": 30, "loop": true, "tabs": true, "navigation":{"prevEl": "#prev-screen", "nextEl": "#next-screen"}}'> <div class="swiper-wrapper"> <div class="swiper-slide" data-swiper-tab="#screen-1"> <div class="fs-xl text-muted mb-3 mb-lg-4">step 1</div><h3 class="mb-lg-4">Create your account</h3> <p>Tellus est ullamcorper diam phasellus. Commodo acine pharetra quam lacinia fames quam nibh in elementum pulvinar consectetur adipiscing. Et viverra maecenas quis cras sed gravida volutpat, cursus enim enim ut nulla netus porta lacus.</p></div><div class="swiper-slide" data-swiper-tab="#screen-2"> <div class="fs-xl text-muted mb-3 mb-lg-4">step 2</div><h3 class="mb-lg-4">Set up payment details</h3> <p>Ac condimentum a nisl sagittis, interdum. Et viverra maecenas quis cras sed gravida volutpat, cursus enim. Enim ut nulla netus porta lacus diam. Risus massa fames metus lectus diam maecenas dui. Nibh morbi id purus eget tellus diam.</p></div><div class="swiper-slide" data-swiper-tab="#screen-3"> <div class="fs-xl text-muted mb-3 mb-lg-4">step 3</div><h3 class="mb-lg-4">Start trading</h3> <p>Risus massa fames metus lectus diam maecenas dui. Nibh morbi id purus eget tellus diam, integer blandit. Ac condimentum a nisl sagittis, interdum. Et viverra maecenas quis cras sed gravida volutpat, cursus enim. Enim ut nulla netus porta.</p></div></div></div><div class="d-flex justify-content-center justify-content-md-start pt-2 pt-lg-3"> <button type="button" id="prev-screen" class="btn btn-prev btn-icon btn-sm me-2"> <i class="bx bx-chevron-left"></i> </button> <button type="button" id="next-screen" class="btn btn-next btn-icon btn-sm ms-2"> <i class="bx bx-chevron-right"></i> </button> </div></div></div></div></section> <section class="container py-5 my-1 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 pb-3 pb-sm-4 pb-md-0 pt-md-2" style="max-width: 300px;">What <br class="d-none d-md-inline">People Say <br class="d-none d-md-inline">About App:</h2> <div class="d-none d-md-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"}, "pagination":{"el": ".swiper-pagination", "clickable": true}, "breakpoints":{"500":{"slidesPerView": 2}, "1000":{"slidesPerView": 2}, "1200":{"slidesPerView": 3}}}'> <div class="swiper-wrapper"> <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="ps-4 pt-4"> <h6 class="fs-sm fw-semibold mb-0">Robert Fox</h6> <span class="fs-xs text-muted">Founder of Lorem Company</span> </figcaption> </figure> </div><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="ps-4 pt-4"> <h6 class="fs-sm fw-semibold mb-0">Annette Black</h6> <span class="fs-xs text-muted">CEO of Ipsum Company</span> </figcaption> </figure> </div><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="ps-4 pt-4"> <h6 class="fs-sm fw-semibold mb-0">Jerome Bell</h6> <span class="fs-xs text-muted">Founder of the Agency </span> </figcaption> </figure> </div><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="ps-4 pt-4"> <h6 class="fs-sm fw-semibold mb-0">Albert Flores</h6> <span class="fs-xs text-muted">CEO of Dolor Ltd.</span> </figcaption> </figure> </div></div><div class="swiper-pagination position-relative d-md-none mt-5"></div></div></div></div></section> <section class="dark-mode bg-dark position-relative pt-lg-4 pt-xl-5 overflow-hidden"> <div class="position-absolute top-0 start-0 w-100 h-100 bg-secondary"></div><div class="container position-relative zindex-3 pt-5"> <div class="row pt-2 pt-sm-3 pt-md-4"> <div class="col-md-6 col-xl-5 col-xxl-4 text-center text-md-start pb-4 pb-sm-5 mb-2 mb-md-3 mb-lg-4 mb-xl-5"> <h2 class="h1 mb-5">Download Our App for Any Devices:</h2> <div class="d-flex d-md-block mt-n2 mt-sm-0"> <div class="row row-cols-1 row-cols-lg-2 align-items-lg-end me-1 me-md-0 pb-md-4 mb-md-3"> <div class="col"> <h3 class="fs-base fw-normal opacity-60 mb-2">App Store</h3> <div class="text-nowrap text-warning pb-1 mb-2"> <i class="bx bxs-star"></i> <i class="bx bxs-star"></i> <i class="bx bxs-star"></i> <i class="bx bxs-star"></i> <i class="bx bxs-star"></i> </div><h4 class="mb-1">Editor's Choice</h4> <p class="mb-0">rating 4.7, 187K+ reviews</p></div><div class="col d-xl-flex justify-content-end"> <a href="#" class="btn btn-dark btn-lg w-xl-100 px-3 py-2 ms-xl-3 mt-3 mt-lg-0"> <img src="assets/img/market/appstore-light.svg" class="light-mode-img" width="124" alt="App Store"> <img src="assets/img/market/appstore-dark.svg" class="dark-mode-img" width="124" alt="App Store"> </a> </div></div><div class="row row-cols-1 row-cols-lg-2 align-items-lg-end"> <div class="col"> <h3 class="fs-base fw-normal opacity-60 mb-2">Google Play</h3> <div class="text-nowrap text-warning pb-1 mb-2"> <i class="bx bxs-star"></i> <i class="bx bxs-star"></i> <i class="bx bxs-star"></i> <i class="bx bxs-star"></i> <i class="bx bxs-star"></i> </div><h4 class="mb-1">App of the Day</h4> <p class="mb-0">rating 4.8, 30K+ reviews</p></div><div class="col d-xl-flex justify-content-end"> <a href="#" class="btn btn-dark btn-lg w-xl-100 px-3 py-2 ms-xl-3 mt-3 mt-lg-0"> <img src="assets/img/market/googleplay-light.svg" class="light-mode-img" width="139" alt="Google Play"> <img src="assets/img/market/googleplay-dark.svg" class="dark-mode-img" width="139" alt="Google Play"> </a> </div></div></div></div><div class="col-md-6 col-xl-7 col-xxl-8"> <img src="assets/img/landing/app-showcase/devices.png" width="618" class="rellax d-block mx-auto" alt="Devices" data-rellax-percentage="0.5" data-rellax-speed="1" data-disable-parallax-down="lg"> <div class="d-none d-xl-block" style="margin-bottom: -450px;"></div><div class="d-none d-lg-block d-xl-none" style="margin-bottom: -800px;"></div><div class="d-none d-sm-block d-lg-none" style="margin-bottom: -400px;"></div><div class="d-sm-none" style="margin-bottom: -240px;"></div></div></div></div></section> <section class="container pt-5 pb-4 pb-sm-5 mb-2 mb-sm-0 mb-lg-3 mb-xl-4 mt-md-2 mt-lg-4 mt-xl-5"> <div class="row row-cols-1 row-cols-sm-3 pt-sm-3 py-2"> <div class="col d-flex d-sm-block d-lg-flex align-items-start mb-3 mb-sm-0"> <div class="d-table bg-primary shadow-primary rounded flex-shrink-0 p-2 mb-3"> <img src="assets/img/landing/app-showcase/icons/chat.svg" width="24" class="d-block m-1" alt="Icon"> </div><div class="ps-4 ps-sm-0 ps-lg-4 ms-lg-2 me-xl-2 pe-xl-5"> <h3 class="h4 mb-2 mb-md-3">24/7 Chat Help</h3> <p class="mb-1 mb-md-2">Chat support with our customer service specialists.</p><a href="#" class="btn btn-link px-0"> Talk to us <i class="bx bx-right-arrow-alt fs-xl ms-2"></i> </a> </div></div><div class="col d-flex d-sm-block d-lg-flex align-items-start mb-3 mb-sm-0"> <div class="d-table bg-primary shadow-primary rounded flex-shrink-0 p-2 mb-3"> <img src="assets/img/landing/app-showcase/icons/faq.svg" width="24" class="d-block m-1" alt="Icon"> </div><div class="ps-4 ps-sm-0 ps-lg-4 ms-lg-2 pe-xl-5"> <h3 class="h4 mb-2 mb-md-3">FAQ</h3> <p class="mb-1 mb-md-2">Find answers. Learn more about the features and services.</p><a href="#" class="btn btn-link px-0"> Learn more <i class="bx bx-right-arrow-alt fs-xl ms-2"></i> </a> </div></div><div class="col d-flex d-sm-block d-lg-flex align-items-start"> <div class="d-table bg-primary shadow-primary rounded flex-shrink-0 p-2 mb-3"> <img src="assets/img/landing/app-showcase/icons/email.svg" width="24" class="d-block m-1" alt="Icon"> </div><div class="ps-4 ps-sm-0 ps-lg-4 ms-lg-2 pe-xl-5"> <h3 class="h4 mb-2 mb-md-3">Email</h3> <p class="mb-1 mb-md-2">Please feel free to drop any questions to our email.</p><a href="#" class="btn btn-link px-0"> Drop us a line <i class="bx bx-right-arrow-alt fs-xl ms-2"></i> </a> </div></div></div></section> <div class="container mb-md-2 mb-lg-4"><hr></div></main> <footer class="footer pt-5 pb-4 pb-lg-5"> <div class="container text-center pt-lg-3"> <div class="navbar-brand justify-content-center text-dark mb-2 mb-lg-4"> <img src="assets/img/logo.svg" class="me-2" width="60" alt="Silicon"> <span class="fs-4">Silicon</span> </div><ul class="nav justify-content-center pt-3 pb-4 pb-lg-5"> <li class="nav-item"><a href="#" class="nav-link">Home</a></li><li class="nav-item"><a href="#" class="nav-link">Features</a></li><li class="nav-item"><a href="#" class="nav-link">Overview</a></li><li class="nav-item"><a href="#" class="nav-link">Blog</a></li><li class="nav-item"><a href="#" class="nav-link">Contacts</a></li><li class="nav-item"><a href="#" class="nav-link">Account</a></li></ul> <div class="d-flex flex-column flex-sm-row justify-content-center"> <a href="#" class="btn btn-dark btn-lg px-3 py-2 me-sm-4 mb-3"> <img src="assets/img/market/appstore-light.svg" class="light-mode-img" width="124" alt="App Store"> <img src="assets/img/market/appstore-dark.svg" class="dark-mode-img" width="124" alt="App Store"> </a> <a href="#" class="btn btn-dark btn-lg px-3 py-2 mb-3"> <img src="assets/img/market/googleplay-light.svg" class="light-mode-img" width="139" alt="Google Play"> <img src="assets/img/market/googleplay-dark.svg" class="dark-mode-img" width="139" alt="Google Play"> </a> </div><div class="d-flex justify-content-center pt-4 mt-lg-3"> <a href="#" class="btn btn-icon btn-secondary btn-facebook mx-2"> <i class="bx bxl-facebook"></i> </a> <a href="#" class="btn btn-icon btn-secondary btn-instagram mx-2"> <i class="bx bxl-instagram"></i> </a> <a href="#" class="btn btn-icon btn-secondary btn-twitter mx-2"> <i class="bx bxl-twitter"></i> </a> <a href="#" class="btn btn-icon btn-secondary btn-youtube mx-2"> <i class="bx bxl-youtube"></i> </a> </div><p class="nav d-block fs-sm text-center pt-5 mt-lg-4 mb-0"> <span class="opacity-80">&copy; All rights reserved. Made by </span> <a class="nav-link d-inline-block p-0" href="https://createx.studio/" target="_blank" rel="noopener">Createx Studio</a> </p></div></footer> <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> <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/js/theme.min.js"></script> </body></html>