Bootstrap Snippet using HTML CSS

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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="e-ticket">
  <div class="container-fluid">
    <!-- Item -->
    <div class="ui-item">
      <!-- Head -->
      <div class="ui-head">
        <!-- Background Image -->
        <img style="max-width:620px" src="https://ledgeviewpartners.com/wp-content/uploads/2020/06/Salesforce-Background-2.jpg" alt="" class="img-responsive bg-img">
        <!-- Transparent Background -->
        <div class="ui-trans clearfix">
          <!-- Image -->
          <img src="https://chart.googleapis.com/chart?chs=180x180&cht=qr&chld=L|0&chl=https://bootsnipp.com/fullscreen/D9zzG" alt="" class="img-responsive border border-secondary">
          <!-- Details -->
          <div class="ui-details clearfix">
            <!-- Movie Name -->
            <h2 class="text-justify"><a href="#">Bootstrap 5 Service card with hover effect and gradient color</a></h2>
            <!-- Labels -->
            <a href="#" class="label">Vé Hội thảo viên</a>
            <a href="#" class="label">Mã vé: 5a44t26</a>
            <!-- Paragraph -->
            <p>Thông tin sự kiện:</p>
            <!-- Heading -->
            <h4><span><i class="fa fa-clock-o" aria-hidden="true"></i></span>:</h4>
            <!-- Director Name -->
            <h5><a href="#">16/09/2021 - 25/09/2021</a></h5>
            <!-- Heading -->
            <h4><span><i class="fa fa-calendar" aria-hidden="true"></i></span>:</h4>
            <!-- Writers -->
            <h5><a href="#"> Joss Whedon (screenplay), Zak Penn (story)</a></h5>
            <!-- Heading -->
            <h4><span><i class="fa fa-map-marker" aria-hidden="true"></i></span>:</h4>
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
@import url('http://fonts.googleapis.com/css?family=Open+Sans:300,400italic,400,600,700');
p {
    margin: 2px 0px;
    padding: 0px;
    margin-bottom:5px;
    line-height:28px;
}
a{
    text-decoration: none;
    color: #777;
}
a:hover,a:active,a:focus {
    outline: 0;
    text-decoration: none;
    color: #999;
}
hr {
    margin: 10px 0px;
    padding: 0px;
    border-top: 0px;
    border-bottom: 1px solid #eee;
}
.bg-red {
  background-color: #f75353 !important;
}
.bg-green {
  background-color: #51d466 !important;
}
/* General CSS */
body{
    background:#f4f8fd;
}
/* UI - X */
.e-ticket{
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Untitled"
Bootstrap 4.1.1 Snippet by tieusuquay79

Related: See More

Questions / Comments:

"Untitled" Bootstrap 4.1.1 Snippet by tieusuquay79

Related: See More

Questions / Comments:

"Untitled"
Bootstrap 4.1.1 Snippet by tieusuquay79