Bill Pay Intro Carousel

Developer
Mike
Size
4,943 Kb
Views
6,072
  1. Bill Pay Intro Carousel Previews
  2. Bill Pay Intro Carousel HTML Codes
  3. Bill Pay Intro Carousel CSS Codes
  4. Bill Pay Intro Carousel JS Codes

How do I make an bill pay intro carousel?

What is a bill pay intro carousel? How do you make a bill pay intro carousel? This script and codes were developed by Mike on 21 January 2023, Saturday.

Bill Pay Intro Carousel Previews
IQ Test

Bill Pay Intro Carousel - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bill Pay Intro Carousel</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <section id="bill-pay-intro-slider"> <div id="billpay-slider" class="carousel slide" data-ride="carousel"> <!-- Slider --> <div class="carousel-inner" role="listbox"> <!-- Slide 1 --> <div class="item active"> <div class="billpay-slider-panel"> <div class="icon-wrap"> <ul> <li id="connect-records-icon"> <span class="glyphicon glyphicon-credit-card" aria-hidden="true"></span> </li> </ul> </div> <div> <ol class="indicators"> <li class="active"></li> <li/> <li/> </ol> </div> <div class="content-wrap"> <h2>Introducing an enhanced bill pay feature</h2> <div> <p>MyHealth<i>One</i> now offers you an improved feature to make paying your hospital bills, tracking your payments and managing multiple accounts even faster. </div> <div class="next-btn-one"> <a href="#billpay-slider" class="btn btn-primary btn-slider-inverse" data-target="#billpay-slider" data-slide-to="1">Next</a> </div> </div> </div> <!-- /.billpay-slider-panel --> <div class="skip text-center"> <p><a href="#">Skip</a></p> </div> </div> <!-- Slide 2 --> <div class="item"> <div class="billpay-slider-panel"> <div class="icon-wrap"> <ul> <li id="connect-records-icon"> <span class="glyphicon glyphicon-user" aria-hidden="true"></span> </li> </ul> </div> <div> <ol class="indicators"> <li/> <li class="active"></li> <li/> </ol> </div> <div class="content-wrap"> <h2>Track and make payments on multiple accounts</h2> <div> <p>View mulitple accounts at once, and pay some or all of your bills using one or more payment methods. Don't worry, you can easily keep track of these payments in the "payment history" tab of your account. </div> <div> <a href="#billpay-slider" class="btn btn-primary btn-slider-inverse" data-target="#billpay-slider" data-slide-to="2">Next</a> </div> </div> </div> <!-- /.billpay-slider-panel --> <div class="skip text-center"> <p><a href="#">Skip</a></p> </div> </div> <!-- Slide 3 --> <div class="item"> <div class="billpay-slider-panel"> <div class="icon-wrap"> <ul> <li id="connect-records-icon"> <span class="glyphicon glyphicon-link" aria-hidden="true"></span> </li> </ul> </div> <div> <ol class="indicators"> <li/> <li/> <li class="active"></li> </ol> </div> <div class="content-wrap"> <h2>Connect your records to get started</h2> <div> <p>To get the most out of MyHealth<i>One</i>'s bill pay feature, please connect your health records. You'll be asked to complete a few forms and then proceed to bill pay to pay your hospital bill(s). </div> <div> <a href="#" class="btn btn-primary btn-slider">Connect records now</a> </div> <div> <a href="#" class="connect-later-link">Continue to bill pay</a> </div> </div> </div> <!-- /.billpay-slider-panel --> </div> <!-- Controls --> <a class="left carousel-control" href="#billpay-slider" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#billpay-slider" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </section>
</body> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Bill Pay Intro Carousel - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,300,400italic);
body { background: #F4F4F4;
}
section,
div,
p,
h1,
h2,
h3,
h4,
h5,
h6,
a,
span,
tr,
td { font-family: "Open Sans", sans-serif; font-weight: 300;
}
#bill-pay-intro-slider { padding-top: 40px; padding-bottom: 40px;
}
#bill-pay-intro-slider .carousel-inner { height: 610px !important; overflow: visible;
}
@media (max-width: 768px) { #bill-pay-intro-slider .carousel-inner { height: auto !important; }
}
#bill-pay-intro-slider .billpay-slider-panel { position: relative; color: #ccc; background: #FFF; height: 600px; width: 500px; margin: auto; padding: 40px 60px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
@media (max-width: 768px) { #bill-pay-intro-slider .billpay-slider-panel { width: auto; height: auto; margin-bottom: 20px; }
}
#bill-pay-intro-slider .indicators { top: 25px; position: relative; left: 50%; z-index: 15; width: 60%; padding-left: 0; margin-left: -30%; text-align: center; list-style: none;
}
@media screen (min-width: 768px) { #bill-pay-intro-slider .indicators { bottom: 20px; }
}
#bill-pay-intro-slider .indicators li { display: inline-block; width: 8px; height: 8px; margin: 0 10px 0 0; text-indent: -999px; cursor: pointer; background: #efefef; border: 1px solid #fff; border-radius: 10px;
}
#bill-pay-intro-slider .indicators .active { width: 8px; height: 8px; margin: 0 10px 0 0; background-color: #468FDB;
}
#bill-pay-intro-slider .carousel-control.right { background-image: none !important; visibility: hidden !important;
}
#bill-pay-intro-slider .carousel-control.left { background-image: none !important; visibility: hidden !important;
}
#bill-pay-intro-slider .carousel-control .glyphicon-chevron-left,
#bill-pay-intro-slider .carousel-control .icon-prev { visibility: visible;
}
@media screen and (min-width: 768px) { #bill-pay-intro-slider .carousel-control .glyphicon-chevron-left, #bill-pay-intro-slider .carousel-control .icon-prev { margin-left: 45px; }
}
@media screen and (min-width: 1200px) { #bill-pay-intro-slider .carousel-control .glyphicon-chevron-left, #bill-pay-intro-slider .carousel-control .icon-prev { margin-left: 150px; }
}
@media screen and (min-width: 1600px) { #bill-pay-intro-slider .carousel-control .glyphicon-chevron-left, #bill-pay-intro-slider .carousel-control .icon-prev { margin-left: 250px; }
}
#bill-pay-intro-slider .carousel-control .glyphicon-chevron-right,
#bill-pay-intro-slider .carousel-control .icon-next { visibility: visible;
}
@media screen and (min-width: 768px) { #bill-pay-intro-slider .carousel-control .glyphicon-chevron-right, #bill-pay-intro-slider .carousel-control .icon-next { margin-right: 45px; }
}
@media screen and (min-width: 1200px) { #bill-pay-intro-slider .carousel-control .glyphicon-chevron-right, #bill-pay-intro-slider .carousel-control .icon-next { margin-right: 150px; }
}
@media screen and (min-width: 1600px) { #bill-pay-intro-slider .carousel-control .glyphicon-chevron-right, #bill-pay-intro-slider .carousel-control .icon-next { margin-right: 250px; }
}
#bill-pay-intro-slider .icon-wrap { text-align: center;
}
#bill-pay-intro-slider .icon-wrap ul { padding: 0;
}
#bill-pay-intro-slider .icon-wrap ul li { list-style: none;
}
#bill-pay-intro-slider .icon-wrap ul span { color: #468FDB; background-color: #F4F4F4; display: inline-block; font-size: 60px; margin: 0 auto; width: 145px; height: 145px; padding: 45px 0; border-radius: 50%;
}
#bill-pay-intro-slider .content-wrap { margin-top: 50px; text-align: center;
}
#bill-pay-intro-slider .content-wrap h2 { color: #000; padding: 0px 5px 10px 5px;
}
#bill-pay-intro-slider .content-wrap p { font-size: 1.2em; color: #9FA1A7; margin-bottom: 30px;
}
#bill-pay-intro-slider .content-wrap .next-btn-one { padding-top: 23px;
}
#bill-pay-intro-slider .content-wrap .btn { height: 40px; border-radius: 3px; padding-top: 20px; padding-bottom: 40px; transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
}
#bill-pay-intro-slider .content-wrap .btn-slider { margin-bottom: 20px; background: #468FDB; width: 80%;
}
#bill-pay-intro-slider .content-wrap .btn-slider:hover { background: #2369b2;
}
#bill-pay-intro-slider .content-wrap .btn-slider-inverse { color: #468FDB; border: 1px solid #468FDB; background: #FFF; font-size: 1.2em; width: 80%;
}
#bill-pay-intro-slider .content-wrap .btn-slider-inverse:hover { background: #468FDB; color: #FFF;
}
#bill-pay-intro-slider .skip { padding-top: 18px; font-size: 1.1em;
}

Bill Pay Intro Carousel - Script Codes JS Codes

$('.carousel').carousel({ interval: false
})
Bill Pay Intro Carousel - Script Codes
Bill Pay Intro Carousel - Script Codes
Home Page Home
Developer Mike
Username mikestabile
Uploaded January 21, 2023
Rating 3
Size 4,943 Kb
Views 6,072
Do you need developer help for Bill Pay Intro Carousel?

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!

Mike (mikestabile) Script Codes
Name
Scroll to top design 2
A Pen by Mike
Bill Pay Banner Ad
Business Card Sample Using jQuery Flip
Scroll to top design 1
Hero with bottom banner
Materialize Card
Styled radio buttons
JQuery Smooth Scroll
Bootstrap Tour Example
Create amazing love letters 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!