<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <style> .content-block { margin-bottom: 40px; } .list-with-line li { padding-left: 40px !important; } .list-with-line li:not(:last-child):after { border: 1px dashed #0088cc; bottom: -13px; content: ''; left: 12px; position: absolute; top: 26px; width: 1px; } .img-rounded.mb-lg.lg1{height:25%; width:80%;} .transaction-data { background-color: #f7f7f7; padding: 40px 0; } </style> <script> function makeTxnsVisible() { document.getElementById("transactionsJSON").style.display = "block"; document.getElementById("accountsJSON").style.display = "none"; } function makeAcctsVisible() { document.getElementById("transactionsJSON").style.display = "none"; document.getElementById("accountsJSON").style.display = "block"; } function makeFl2Visible() { document.getElementById("fl2screens").style.display = "block"; document.getElementById("loginRequest").style.display = "none"; document.getElementById("verificationJSON").style.display = "none"; } function loginRequestVisible() { document.getElementById("fl2screens").style.display = "none"; document.getElementById("loginRequest").style.display = "block"; document.getElementById("verificationJSON").style.display = "none"; } function verificationJSONVisible() { document.getElementById("fl2screens").style.display = "none"; document.getElementById("loginRequest").style.display = "none"; document.getElementById("verificationJSON").style.display = "block"; } </script> <!-- Start Content Block 1-5 v1 --> <!-- // End Content Block 1-5 v1 --> <!-- /.item --> <div style="padding-top:40px;padding-bottom:40px;" class="item content content-block" id="content_section1"> <div class="container"> <div class="col-md-6 col-md-offset-3" style=" align-content: center; text-align: center; margin-bottom: 40px; "> <h2>Simple Integration</h2> </div> <div class="row"> <div class="col-md-7"> <div style="padding-left:30px" data-selector="Footers" class="editContent"> <h3 style="" data-selector="h4">3-Steps to Integrate</h3> </div><!-- /.editContent --> <div class="row"> <ul class='list list-ordened-style-2 list-ordened'> <li onmouseover="javascript:loginRequestVisible();" style="margin-bottom:40px"> <h4>Register (or log in)</h4> <p style='margin-bottom: 0;'>Enroll new user with Yodlee or obtain token for existing user</p> </li> <li onmouseover="javascript:makeFl2Visible();" style="margin-bottom:40px"> <h4>Add a user’s financial account(s)</h4> <p style='margin-bottom: 0;'>Yodlee FastLink, an easy to use add account wizard, seamlessly handles the end to end user experience for adding accounts. You can build your own flow but we recommend using Yodlee FastLink to save time and energy.</p> </li> <li onmouseover="javascript:verificationJSONVisible();" style="margin-bottom:40px"> <h4>API access to accounts and transaction data</h4> <p style='margin-bottom: 0;'>Our RESTful API will help you access data in minutes.</p> </li> </ul> </div><!-- ./row --> </div><!-- /.col-md-6 --> <div class="col-md-5" > <div class="tabs" id="loginRequest"> <ul class="nav nav-tabs"> <li class="nav-item active"> <a class="nav-link" href="#popular" data-toggle="tab"><i class="fa fa-star"></i> Popular</a> </li> <li class="nav-item"> <a class="nav-link" href="#recent" data-toggle="tab">Recent</a> </li> </ul> <div class="tab-content"> <div id="popular" class="tab-pane active"> <p>Popular</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p> </div> <div id="recent" class="tab-pane"> <p>Recent</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p> </div> </div> </div> <!-- <div id="fl2screens" style="display:none;" class="owl-carousel" data-plugin-options="{"items": 1, "autoHeight": true}"> <div><img alt="" class="img-responsive img-rounded" src="images/IMG_1524.PNG" /></div> <div><img alt="" class="img-responsive img-rounded" src="images/IMG_1525.PNG" /></div> <div><img alt="" class="img-responsive img-rounded" src="images/IMG_1526.PNG" /></div> <div><img alt="" class="img-responsive img-rounded" src="images/IMG_1527.PNG" /></div> </div> --> <img id="fl2screens" style="display:none;" class="img-responsive img-rounded mb-lg lg1" src="https://developer.yodlee.com/assets/img/Images_FastLink3.0/select-mob.png" alt="Project Image"> <div class="tabs" id="verificationJSON"> <ul class="nav nav-tabs"> <li class="nav-item active"> <a class="nav-link" href="#popular" data-toggle="tab"><i class="fa fa-star"></i> Popular</a> </li> <li class="nav-item"> <a class="nav-link" href="#recent" data-toggle="tab">Recent</a> </li> </ul> <div class="tab-content"> <div id="popular" class="tab-pane active"> <p>Popular</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p> </div> <div id="recent" class="tab-pane"> <p>Recent</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p> </div> </div> </div> </div> </div><!-- /.row --> </div><!-- /.container --> </div><!-- /.item --> <!-- Start Content Block 1-5 v1 --> <!-- // End Content Block 1-5 v1 --> <!-- /.item -->