Banking Compare

Developer
VULE
Size
7,742 Kb
Views
8,096
  1. Banking Compare Previews
  2. Banking Compare HTML Codes
  3. Banking Compare CSS Codes

How do I make an banking compare?

What is a banking compare? How do you make a banking compare? This script and codes were developed by VULE on 26 October 2022, Wednesday.

Banking Compare Previews
IQ Test

Banking Compare - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Banking Compare</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div style="height: 50px"></div>
<div class="clone-table-one"> <div class="tabbable-one"> <ul class="nav nav-tabs nav-append-content top-slider-mobile "> <li class=""> <a href="#cl-sentance-form" class="disable-click " data-toggle="tab" id="cl-sentance-form-link" title="Quick quote" data-action="click:tabChange" data-actionloc="explore:QuickSearch"> <div class="tab-sec quick-quote"> <span class="quotes"><span></span></span> <div class="clearfix"></div> <p>Quick quote</p> <i class="arrowup"></i> </div> </a> </li> <li class="active"> <a href="#cl-card-comparisons" class="active disable-click" data-toggle="tab" id="cl-card-comparisons-link" title="View &amp; Compare" data-action="click:tabChange" data-actionloc="explore:CompareOffers"> <div class="tab-sec compare-view"> <span></span> <div class="clearfix"></div> <p>View &amp; Compare</p> <i class="arrowup"></i> </div> </a> </li> <li class=""> <div class="custom-free"><img src="https://s24.postimg.org/sq8xx7tr9/landing-custom-free.png" alt="Custom Free" title="Custom Free"></div> <a href="#cl-quick-quote-comparisons" data-toggle="tab" id="cl-quick-quote-comparison" title="Custom quote" class=" disable-click preLoadImages" data-action="click:tabChange" data-actionloc="explore:GetQuote"> <div class="tab-sec custom-quote"> <span>&nbsp;</span> <div class="clearfix"></div> <p>Custom quote</p> <i class="arrowup"></i> </div> </a> </li> <li class=""> <a href="#cl-user-review" data-toggle="tab" id="cl-user-review-link" title="User reviews" class="disable-click " data-action="click:tabChange" data-actionloc="explore:UserReviews"> <div class="tab-sec user-review"> <span>&nbsp;</span> <div class="clearfix"></div> <p>User reviews</p> <i class="arrowup"></i> </div> </a> </li> <li class=""> <a href="#hungry-for-more" class="disable-click " data-toggle="tab" id="cl-hungry-for-more-link" title="Hungry for more?" data-action="click:tabChange" data-actionloc="explore:hungryForMore"> <div class="tab-sec hungry-more"> <span>&nbsp;</span> <div class="clearfix"></div> <p>Hungry for more?</p> <i class="arrowup"></i> </div> </a> </li> </ul> </div>
</div>
<div class="clone-section-list-banking"> <div class="offers-section offer-column-6 "> <div class="container"> <div id="js-offer-section-header" class="offers-heading-sticky affix-top"> <section id="offer-section-header" class="offer-section-header text-center row-same-height clearfix"> <div class="card col-same-height"> Bank Name </div> <div class="interest-rate-range col-same-height js-sort-in-header js-sort" data-sort-order="ASCENDING" data-default-order="ASCENDING" data-sort-val="interest-rate-range" data-actionloc="offer:Interest Rate Range-header" data-action="click:sort"> <span id="sort-column-title">Interest Rate Range</span> <span class="sprite-offers-common bbicons-sort-down js-sort-indicator"></span> <span class="col-sub-text"></span> </div> <div class="processing-fee-range col-same-height js-sort-in-header js-sort" data-sort-order="ASCENDING" data-default-order="ASCENDING" data-sort-val="processing-fee-range" data-actionloc="offer:Processing Fee Range-header" data-action="click:sort"> <span id="sort-column-title">Processing Fee Range</span> <span class="sprite-offers-common bbicons-sort-down js-sort-indicator"></span> <span class="col-sub-text"></span> </div> <div class="loan-amount-range col-same-height"> Loan Amount <span class="col-sub-text"></span> </div> <div class="tenure-range col-same-height"> Tenure Range <span class="col-sub-text"></span> </div> <div class="select-card col-same-height"></div> </section> </div> <section class="offer-section-content clearfix " id="offer-table"> <section class="clearfix js-offers-row p2 p1-cc " offerindex="1" data-bank="CITIBANK"> <div class="offers-wrapper js-offers-wrapper"> <div class="row-same-height js-offer-row-section"> <div class="offer-section-column col-same-height col-middle card"> <span class="offer-first-column"> <span class="js-product-logo-section product-logo" data-compare-img="/images/india/bank-offer/small/citibank.png"> <img src="https://s17.postimg.org/xl5cagf67/citibank.png" alt="CITIBANK" title="CITIBANK"> </span> <span class="js-product-name-section offers-card-name"> <nav> <ul> <li class="js-offer-name"> <span class="js-title js-format-string value-title ">CITIBANK</span> </li> <li> 4.5/5.0 <a class="ajax-review-call" data-actionloc="offer:review-view" data-action="click:explore" bank="39" data-toggle="modal" href=""> 1761 users </a> </li> </ul> </nav> </span> <span id="details-1039" action-count="false" data-action="click:view" class="bbicons-details sprite-offers-common" data-toggle="collapse" onclick="changeEventToTrigger(this); BB_trackGoogleEventWithLabel(OFFER_EVENT_CATEGORY, OFFER_EVENT_ACTION.DETAILS, 'Citi');" aria-expanded="false">Details</span> <input type="hidden" name="offerEventLabel-1039" id="offerEventLabel-1039" value="Citi"> </span> </div> <div class="offer-section-column col-same-height col-middle interest-rate-range"> <div class="column-center"> <span class="">11.49% - 15.99%</span> <span class="value-description">Fixed</span> </div> </div> <div class="offer-section-column col-same-height col-middle processing-fee-range"> <div class="column-center"> <span class="">1% to 2.5%</span> <span class="value-description"></span> </div> </div> <div class="offer-section-column col-same-height col-middle loan-amount-range"> <div class="column-center"> <span class="fui-rupee bb-rupee-xs"></span><span class="">30L Max</span> <span class="value-description"></span> </div> </div> <div class="offer-section-column col-same-height col-middle tenure-range"> <div class="column-center"> <span class="">1-5 Years</span> <span class="value-description"></span> </div> </div> <div class="offer-section-column col-same-height col-middle text-center select-card js-select-card"> <div class="btn-group"> <a class="btn btn-primary shortlist " title="Explore" alt="Explore" href="/citibank-personal-loan.html" offerid="1039" productid="1039" onclick=" BB_trackGoogleEventWithLabel(OFFER_EVENT_CATEGORY, 'explore', productName); " data-actionloc="slideElig:Explore" data-action="click:click" data-bank="CITIBANK" data-partner="true" data-modaltarget="CITIBANK"> <span class="bbicons-search sprite-offers-common"></span> Explore </a> <a class="btn btn-primary get-cc-card " title="Get Quote" alt="Get Quote" href="javascript:void(0)" offerid="1039" productid="1039" onclick=" BB_trackGoogleEventWithLabel(OFFER_EVENT_CATEGORY, 'getQuote', productName); " data-bank="CITIBANK" data-partner="true" data-modaltarget="CITIBANK"> <span class="bbicons-flash sprite-offers-common"></span> Get Quote </a> </div> <!--A/B test --> <!--end--> <div class="js-book-details book-details clearfix"> <div class="col-sm-12 col-md-12 pad-none response-time js-response-time"> <span class="heading">Response Time</span> <span class="value"> <strong> <span class="js-title"> Within 30 minutes </span> </strong> </span> </div> </div> </div> </div> </div> </section> <section class="clearfix js-offers-row " offerindex="12" data-bank="ADITYA BIRLA FINANCE LIMITED"> <div class="offers-wrapper js-offers-wrapper"> <div class="row-same-height js-offer-row-section"> <div class="offer-section-column col-same-height col-middle card"> <span class="offer-first-column"> <span class="js-product-logo-section product-logo" data-compare-img="/images/india/bank-offer/small/aditya-birla-finance.png"> <img src="https://s4.postimg.org/oprr8mjot/aditya-birla-finance.png" alt="Aditya Birla " title="Aditya Birla"> </span> <span class="js-product-name-section offers-card-name"> <nav> <ul> <li class="js-offer-name"> <span class="js-title js-format-string value-title ">ADITYA BIRLA</span> <span class="bbicons-help sprite-offers-common js-cluetip" data-toggle="tooltip" data-placement="right" title="ADITYA BIRLA FINANCE LIMITED"></span> </li> <li> <span class="micro-rating new-star-rating new-star-rating-2-5" id="review.reviewRating.1719" data-sort-popularity="2.5"> <input type="hidden" name="review.reviewRating.1719" value="2.5"> </span> </li> <li> 2.5/5.0 <a class="ajax-review-call" data-actionloc="offer:review-view" data-action="click:explore" bank="719" data-toggle="modal" href=""> 3 users </a> </li> </ul> </nav> </span> <span id="details-1719" action-count="false" data-action="click:view" class="bbicons-details sprite-offers-common" data-toggle="collapse" onclick="changeEventToTrigger(this); BB_trackGoogleEventWithLabel(OFFER_EVENT_CATEGORY, OFFER_EVENT_ACTION.DETAILS, 'Aditya Birla Finance Limited');" aria-expanded="false">Details</span> <input type="hidden" name="offerEventLabel-1719" id="offerEventLabel-1719" value="Aditya Birla Finance Limited"> </span> </div> <div class="offer-section-column col-same-height col-middle interest-rate-range"> <div class="column-center"> <span class="">11.5% - 13.25%</span> <span class="value-description">Fixed</span> </div> </div> <div class="offer-section-column col-same-height col-middle processing-fee-range"> <div class="column-center"> <span class="fui-rupee bb-rupee-xs"></span><span class="">0</span> <span class="value-description">One time fee</span> </div> </div> <div class="offer-section-column col-same-height col-middle loan-amount-range"> <div class="column-center"> <span class="fui-rupee bb-rupee-xs"></span><span class="">30L Max</span> <span class="value-description"></span> </div> </div> <div class="offer-section-column col-same-height col-middle tenure-range"> <div class="column-center"> <span class="">1-5 Years</span> <span class="value-description"></span> </div> </div> <div class="offer-section-column col-same-height col-middle text-center select-card js-select-card"> <div class="btn-group"> <a class="btn btn-primary shortlist " title="Explore" alt="Explore" href="/personal-loan/aditya-birla-finance-personal-loan.html" offerid="1719" productid="1719" onclick=" BB_trackGoogleEventWithLabel(OFFER_EVENT_CATEGORY, 'explore', productName); " data-actionloc="slideElig:Explore" data-action="click:click" data-bank="ADITYA BIRLA FINANCE LIMITED" data-partner="true" data-modaltarget="ADITYA BIRLA FINANCE LIMITED"> <span class="bbicons-search sprite-offers-common"></span> Explore </a> <a class="btn btn-primary get-cc-card " title="Get Quote" alt="Get Quote" href="javascript:void(0)" offerid="1719" productid="1719" onclick=" BB_trackGoogleEventWithLabel(OFFER_EVENT_CATEGORY, 'getQuote', productName); " data-bank="ADITYA BIRLA FINANCE LIMITED" data-partner="true" data-modaltarget="ADITYA BIRLA FINANCE LIMITED"> <span class="bbicons-flash sprite-offers-common"></span> Get Quote </a> </div> <!--A/B test --> <!--end--> <div class="js-book-details book-details clearfix"> <div class="col-sm-12 col-md-12 pad-none response-time js-response-time"> <span class="heading">Response Time</span> <span class="value"> <strong> <span class="js-title"> Within 30 minutes </span> </strong> </span> </div> </div> </div> </div> </div> </section> </section> <div id="ajax-review-content" class="js-ajax-review-content"> <div class="modal" id="review-content" tabindex="-1" role="dialog" aria-hidden="true"> </div> </div> </div> </div>
</div>
</body>
</html>

Banking Compare - Script Codes CSS Codes

div.clone-table-one .nav > li > a { position: relative; display: block; padding: 10px 15px; padding-top: 10px; padding-right: 15px; padding-bottom: 10px; padding-left: 15px;
}
div.clone-table-one ul,
div.clone-table-one ol { list-style: none;
}
div.clone-table-one .nav-tabs { border-bottom: inherit;
}
div.clone-table-one .nav-tabs > li { float: left; margin-bottom: inherit;
}
div.clone-table-one .nav-tabs > li > a { margin-right: 2px; line-height: 1.42857143; border: inherit; border-radius: inherit;
}
div.clone-table-one .nav-tabs > li.active > a,
div.clone-table-one .nav-tabs > li.active > a:focus,
div.clone-table-one .nav-tabs > li.active > a:hover { color: #555; cursor: default; background-color: #fff; border: inherit; border-bottom-color: inherit;
}
div.clone-table-one .disable-click,
div.clone-table-one .active .elig-mono-salaried .holder { cursor: default;
}
div.clone-table-one .tabbable-one ul { text-align: center;
}
div.clone-table-one .tabbable-one .nav-tabs > li { position: relative; float: none; display: inline-block; vertical-align: middle;
}
div.clone-table-one .active-tabs .tabbable-one li a { height: 166px; padding: 8px 12px; display: block; border-width: 2px; font-size: 14px; font-weight: 700; color: #7f8c9a; border-radius: 6px 6px 0 0; transition: none; cursor: pointer;
}
div.clone-table-one .active-tabs .tab-sec { min-width: 196px; padding: 10px 28px;
}
div.clone-table-one .tab-sec span { border: 5px solid #fff; border-radius: 45px; float: none; height: 90px; margin: 0 auto; width: 90px; display: block;
}
div.clone-table-one .tab-sec span { background-image: url(https://s10.postimg.org/ozkoca8ex/tab-sprite-image-v3.png); background-position: 0 100px; background-repeat: no-repeat;
}
div.clone-table-one .quick-quote .quotes { background-color: #e54f4f; background-image: none; position: relative;
}
div.clone-table-one .quick-quote .quotes span { background-color: transparent; border: 0 none!important; margin: 0; border-radius: 0; left: 19px; position: absolute; top: 3px; width: 50px; height: 100px;
}
div.clone-table-one .quick-quote .quotes span { background-position: 2px -11px;
}
div.clone-table-one .tab-sec p { color: #2a4a59; font-size: 18px; font-weight: 300; padding: 10px 0; text-align: center;
}
div.clone-table-one .active-tabs .tabbable-one li a.active span { border: 5px solid #ddd;
}
div.clone-table-one .compare-view span { background-color: #7abd91; background-position: 10px -393px;
}
div.clone-table-one .custom-quote span { background-color: #4f3c5c; background-position: 2px -140px;
}
div.clone-table-one .user-review span { background-color: #f1c30e; background-position: 9px -231px;
}
div.clone-table-one .hungry-more span { background-color: #60abe2; background-position: 16px -317px;
}
div.clone-table-one .active-tabs .active .disable-click { cursor: default;
}
div.clone-table-one .active-tabs .tabbable-one li a:hover span,
div.clone-table-one .active-tabs .tabbable-one li a.active span { border: 5px solid #ddd;
}
div.clone-table-one .active-tabs .tabbable-one li a.active span { border: 5px solid #ddd;
}
div.clone-table-one .custom-free { position: absolute; top: -20px; right: -44px;
}
div.clone-table-one img { vertical-align: middle;
}
div.clone-section-list-banking .offers-section { font-size: 12px; padding-bottom: 20px;
}
div.clone-section-list-banking .offers-section { padding-top: 0!important;
}
div.clone-section-list-banking .offers-section .row-same-height { cursor: pointer; height: 100%; display: table; width: 100%; table-layout: fixed;
}
div.clone-section-list-banking .clearfix { clear: both;
}
div.clone-section-list-banking .offer-section-header { padding: 5px 0;
}
div.clone-section-list-banking .text-center { text-align: center;
}
div.clone-section-list-banking .offers-section .interest-rate-range,
div.clone-section-list-banking .offers-section .tenure-range,
div.clone-section-list-banking .offers-section .processing-fee-range,
div.clone-section-list-banking .offers-section .loan-amount-range,
div.clone-section-list-banking .offers-section .features,
div.clone-section-list-banking .offers-section .perks,
div.clone-section-list-banking .offers-section .interest-rate-type { text-align: center; width: 15%;
}
div.clone-section-list-banking .offers-section .col-same-height { height: 100%; display: table-cell; float: none!important;
}
div.clone-section-list-banking .offer-section-header div { float: left; font-size: 12px; font-weight: bold; text-align: center; vertical-align: middle;
}
div.clone-section-list-banking .offer-section-header span { font-weight: bold;
}
div.clone-section-list-banking .offer-section-header .sprite-offers-common { width: 14px; height: 20px; display: inline-block; vertical-align: middle;
}
div.clone-section-list-banking .offer-section-header span { font-weight: bold;
}
div.clone-section-list-banking .bbicons-sort-up,
div.clone-section-list-banking .bbicons-sort-down { -webkit-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out;
}
div.clone-section-list-banking .bbicons-sort-down,
div.clone-section-list-banking .bbicons-sort-up { background-position: -2px -1098px;
}
div.clone-section-list-banking .sprite-offers-common { background-image: url(https://s1.postimg.org/64c7ogv4v/sprite-offers-common-_V13.png); background-repeat: no-repeat;
}
div.clone-section-list-banking .offer-section-header span { font-weight: bold;
}
div.clone-section-list-banking .offer-section-content section { position: relative; -webkit-box-shadow: 0 8px 6px -6px #d4d0d0; -moz-box-shadow: 0 8px 6px -6px #d4d0d0; box-shadow: 0 8px 6px -6px #d4d0d0; margin-bottom: 31px;
}
div.clone-section-list-banking .p1-cc { background-color: #eef5fd;
}
div.clone-section-list-banking .offers-wrapper { position: relative;
}
div.clone-section-list-banking .offer-section-content section .row-same-height { height: 132px; position: relative;
}
div.clone-section-list-banking .offers-section .row-same-height { cursor: pointer; height: 100%; display: table; width: 100%; table-layout: fixed;
}
div.clone-section-list-banking .offers-section .col-middle { vertical-align: middle;
}
div.clone-section-list-banking .offers-section .col-same-height { height: 100%; display: table-cell; float: none!important;
}
div.clone-section-list-banking .offer-section-content .offer-section-column { border: 1px solid #d4d0d0; border-right: 0 solid #d4d0d0; min-height: 100px; padding: 10px 5px; position: relative;
}
div.clone-section-list-banking .offers-section .card { width: 19%;
}
div.clone-section-list-banking .offer-first-column { display: block;
}
div.clone-section-list-banking .offer-first-column .product-logo,
div.clone-section-list-banking .offer-first-column .offers-card-name { display: table-cell; vertical-align: middle;
}
div.clone-section-list-banking .offer-section-content .card img { width: 78px; vertical-align: middle;
}
div.clone-section-list-banking .filter-section .navbar-header,
div.clone-section-list-banking .offer-section-content .card img { width: auto;
}
div.clone-section-list-banking .bbicons-details { color: #38acc9; cursor: pointer; width: 100px; height: 33px; position: absolute; bottom: -32px; left: 0; right: 0; margin: auto; top: auto; text-align: center; z-index: 1;
}
div.clone-section-list-banking .p1-cc .bbicons-details { background-position: 4px -786px;
}
div.clone-section-list-banking .offer-section-content .card nav { padding-left: 10px; width: 128px;
}
div.clone-section-list-banking .offer-section-content nav ul { list-style: none; margin: 0; padding: 0;
}
div.clone-section-list-banking h1,
div.clone-section-list-banking h2,
div.clone-section-list-banking h3,
div.clone-section-list-banking h4,
div.clone-section-list-banking h5,
div.clone-section-list-banking h6,
div.clone-section-list-banking p,
div.clone-section-list-banking ul,
div.clone-section-list-banking ol,
div.clone-section-list-banking li { margin: 0; padding: 0; font-weight: normal; line-height: normal;
}
div.clone-section-list-banking .offers-section .card li { line-height: normal; list-style-type: none;
}
div.clone-section-list-banking a { text-decoration: none; color: #38acc9; transition: all .25s ease 0s;
}
div.clone-section-list-banking .offers-section .value-description { clear: both; color: #9d9d9d; display: block; font-size: 11px; line-height: 15px;
}
div.clone-section-list-banking .offers-section .btn-group .btn-primary { padding: 7px 8px; min-width: 102px; margin-top: 10px; display: inline-block; float: left; border: 1px solid #1abc9c; font-size: 13px;
}
div.clone-section-list-banking .offers-section .btn-group .shortlist { border-right: 0 solid #fff; border-radius: 4px 0 0 4px; background-color: #fff; color: #000;
}
div.clone-section-list-banking .offers-section .btn-group .btn-primary { padding: 7px 8px; min-width: 102px; margin-top: 10px; display: inline-block; float: left; border: 1px solid #1abc9c; font-size: 13px;
}
div.clone-section-list-banking .btn-group > .btn:last-child:not(:first-child) { border-bottom-left-radius: 0; border-top-left-radius: 0;
}
div.clone-section-list-banking .sprite-offers-common { background-image: url(https://s17.postimg.org/el50ovg6n/sprite-offers-common-_V13.png); background-repeat: no-repeat;
}
div.clone-section-list-banking .btn { border: 0 none; border-radius: 4px; font-size: 15px; line-height: 1.4; padding: 10px 15px; cursor: pointer; transition: border 0.25s linear 0s, color 0.25s linear 0s, background-color 0.25s linear 0s; background-color: #e74c3c; color: #fff; text-decoration: none; display: inline-block;
}
div.clone-section-list-banking .btn-primary { background: #1abc9c;
}
div.clone-section-list-banking .bbicons-details { color: #38acc9; cursor: pointer; width: 100px; height: 33px; position: absolute; bottom: -32px; left: 0; right: 0; margin: auto; top: auto; text-align: center; z-index: 1;
}
div.clone-section-list-banking .bbicons-details { background-position: 4px -279px;
}
Banking Compare - Script Codes
Banking Compare - Script Codes
Home Page Home
Developer VULE
Username tinsatthu4
Uploaded October 26, 2022
Rating 3
Size 7,742 Kb
Views 8,096
Do you need developer help for Banking Compare?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

VULE (tinsatthu4) Script Codes
Name
Landing Page Uma Flezio
Space-partners
Categories Chosen
Mau Giao Dien Pho Dong Village Chuan
Angular Module practice
A Pen by VULE
Tham My Format
BDSLanding
HTML FORM
Landing Page Eropi
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!