Bootstrap Snippet Responsive Invoice template using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="style.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Poppins:400,500,600,700" rel="stylesheet">
</head>
<body>
<div class="menu"> <span></span> </div>
<nav id="nav">
        <ul class="main">
                <li><a data-toggle="tab" href="#route" role="tab" >Bus Route</a></li>
                <li><a data-toggle="tab" href="#location" role="tab" >Buses By Location</a></li>
                <li><a data-toggle="tab" href="#details" role="tab" >Bus Details</a></li>
                <li><a href="#">Notifications</a></li>
                <li><a  href="">BusPoll</a></li>
                <li><a  href="">Contact</a></li>
        </ul>
</nav>
<div class="overlay"></div>
    <div class="container">
    <h1>
        <span>M</span>
        <span>y</span>
        <span>B</span>
        <span>u</span>
        <span>s</span>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
    body{background:url(http://ilovehdwallpapers.com/thumbs/animated-classic-bus-on-road--t2.jpg) no-repeat center/cover;font-family: 'Poppins', sans-serif; height:150vh; }
    html    {font-size:14px}
    
/*  BURGER MENU
========================================== */
.menu {
        width: 50px;
    height: 50px;
    position: absolute;
    z-index: 21;
    right: 1%;
}
.menu span {
    position: relative;
    margin-top: 9px;
    margin-bottom: 9px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -15px;
    margin-top: -1.5px;
}
.menu span, .menu span::before, .menu span::after {
    display: block;
    
        width: 26px;
    right: 0;
    height: 3px;
    background-color: #fccb32;
    outline: 1px solid transparent;
    -webkit-transition-property: background-color, -webkit-transform;
    -moz-transition-property: background-color, -moz-transform;
    -o-transition-property: background-color, -o-transform;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
 $('#printInvoice').click(function(){
            Popup($('.invoice')[0].outerHTML);
            function Popup(data) 
            {
                window.print();
                return true;
            }
        });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Responsive Invoice template"
Bootstrap 4.1.1 Snippet by vijay18399

Related: See More

Questions / Comments:

"Responsive Invoice template" Bootstrap 4.1.1 Snippet by vijay18399

Related: See More

Questions / Comments:

"Responsive Invoice template"
Bootstrap 4.1.1 Snippet by vijay18399