<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>
<!-- Stars -->
<h5><a href="#">Slorm Mckency. ,</a> <a href="#">Maring lawyent ,</a> <a href="#">Lowin cleanting</a></h5>
</div>
</div>
</div>
<!-- Review -->
<div class="ui-review">
<!-- Heading -->
<h3>Thông tin vé</h3>
<!-- Paragraph -->
<p class="border-bottom"><span class="text-muted">Mã vé</span><span class="d-flex font-weight-bold">aa aa</span></p>
<p class="border-bottom"><span class="text-muted">Mã vé</span><span class="d-flex font-weight-bold">aaaa</span></p>
<!-- Buttons -->
<a href="#" class="ui-btn bg-red"><i class="fa fa-ticket"></i> Vào tham dự</a>
<a href="#" class="ui-btn bg-green"><i class="fa fa-dot-circle-o"></i> Xem sự kiện</a>
</div>
</div>
</div>
</div>
@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{
max-width: 650px;
margin: 60px auto;
}
/* Head */
.e-ticket .ui-item .ui-head{
position: relative;
border-top-left-radius:5px;
border-top-right-radius:5px;
}
.e-ticket .ui-item .ui-head img.bg-img{
border-top-left-radius:5px;
border-top-right-radius:5px;
}
@media(max-width: 660px){
.e-ticket .ui-item .ui-head img.bg-img{
display: none;
}
}
/* Transparent Background */
.e-ticket .ui-head .ui-trans{
background: rgba(0,0,0,0.6);
width: 100%;
height: 100%;
position: absolute;
top: 0px;
padding: 25px;
border-top-left-radius:5px;
border-top-right-radius:5px;
}
@media(max-width: 660px){
.e-ticket .ui-head .ui-trans{
background: #fff;
position: inherit;
border:1px solid #ddd;
border-bottom:0px;
}
}
.e-ticket .ui-head .ui-trans img{
max-width: 180px;
float: left;
border:1px solid rgba(255,255,255,0.3);
box-shadow: 0px 0px 10px 0px #000;
}
@media(max-width: 660px){
.e-ticket .ui-item .ui-trans img{
float: none;
/* margin-bottom: 15px; */
box-shadow:none;
margin: auto;
display: block;
}
}
/* Details */
.e-ticket .ui-trans .ui-details{
margin-left: 205px;
}
@media(max-width: 660px){
.e-ticket .ui-trans .ui-details{
margin-left: 0px;
margin-top: 15px;
}
}
/* Heading */
.e-ticket .ui-trans .ui-details h2{
font-size: 25px;
line-height:38px;
font-weight:500;
}
.e-ticket .ui-trans .ui-details h2 > a{
color: #fff;
}
@media(max-width: 660px){
.e-ticket .ui-trans .ui-details h2 > a{
color: #555;
}
}
/* Label */
.e-ticket .ui-trans .ui-details a.label{
border: 1px solid rgba(255, 255, 255, 0.3);
margin:5px 2px;
display: inline-block;
background:rgba(0,0,0,0.3);
color: #ffe847;
padding: 5px;
}
@media(max-width: 660px){
.e-ticket .ui-trans .ui-details a.label{
border: 1px solid #ccc;
color: #555;
background:transparent;
}
}
.e-ticket .ui-trans .ui-details p{
font-size: 15px;
line-height: 23px;
color: #fff;
margin-bottom: 5px;
}
@media(max-width: 660px){
.e-ticket .ui-trans .ui-details p{
color: #555;
}
}
/* Small Headings */
.e-ticket .ui-trans .ui-details h4{
color: #fff;
font-size: 15px;
line-height: 23px;
margin: 0px;
width: 40px;
float: left;
font-weight: 600;
}
@media(max-width: 660px){
.e-ticket .ui-trans .ui-details h4{
color: #555;
width: 40px;
}
}
.e-ticket .ui-trans .ui-details h4 > span{
display: inline-block;
width: 25px;
}
@media(max-width: 660px){
.e-ticket .ui-trans .ui-details h4 > span{
width: 20px;
}
}
.e-ticket .ui-trans .ui-details h5{
margin-left: 40px;
font-size: 15px;
line-height: 23px;
font-weight: 400;
}
@media(max-width: 660px){
.e-ticket .ui-trans .ui-details h5{
margin-left: 40px;
}
}
.e-ticket .ui-trans .ui-details h5 > a{
color: #fff;
}
@media(max-width: 660px){
.e-ticket .ui-trans .ui-details h5 > a{
color: #555;
}
}
/* Review */
.e-ticket .ui-item .ui-review{
border:1px solid #ddd;
padding: 15px 20px 15px;
border-top:0px;
background:#fff;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
@media(max-width: 660px){
.e-ticket .ui-item .ui-review{
border-top:1px solid #ddd;
}
}
/* Heading */
.e-ticket .ui-item .ui-review h3{
font-size: 16px;
line-height: 26px;
display: inline-block;
}
/* Paragraph */
.e-ticket .ui-item .ui-review p{
font-size: 15px;
line-height: 28px;
color: #777;
margin-bottom:10px;
}
/* Button */
.e-ticket .ui-item .ui-review a.ui-btn{
display: inline-block;
margin: 15px 5px 8px 0px;
padding: 5px 10px;
color: #fff;
font-size: 15px;
line-height: 23px;
font-weight: 600;
border-radius: 2px;
}
.e-ticket .ui-item .ui-review a.ui-btn > i{
border-right: 1px solid rgba(0,0,0,0.1);
padding-right: 7px;
margin-right: 3px;
}
