"Workshops"
Bootstrap 4.0.0 Snippet by vijay18399

Post to Facebook Tweet this

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.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css">
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="section_bg_gray">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="ptb-50">
<h2 class="text-center">Workshops</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="single_what_we_do">
<div class="top_line"></div>
<div class="what_we_do_figure">
<i class="devicon-amazonwebservices-original colored xxxlarge"></i>
</div>
<h4 class="what_we_do_title">AWS</h4>
<div class='single_what_we_do'>Date : 23-10-2018</div>
<div class='single_what_we_do'>Price : 200/-</div>
<div class='single_what_we_do'>Days : 2</div>
<br>
<button class="btn btn-primary btn-round">Know More</button>
<br>
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
.xxxlarge{font-size:88px!important}
.modal.animate .a-flipX{-webkit-animation:flipOutX .5s;animation:flipOutX .5s}
.modal.animate.show .a-flipX{-webkit-animation:flipInX .5s;animation:flipInX .5s}
.modal.animate {opacity:0}
.modal.animate.show {opacity:1}
.modal.animate .modal-dialog{-webkit-transform:translate(0,0);-ms-transform: translate(0,0);transform:translate(0,0)}
.ptb-50{
padding: 50px 50px;
}
.section_bg_gray {
background-color: #f3f5f7;
}
.single_what_we_do {
background-color: #ffffff;
text-align: center;
padding: 0 35px;
border-radius: 10px;
position: relative;
margin-bottom: 3px;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.single_what_we_do:hover {
-webkit-box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2);
}
.single_what_we_do .top_line {
position: absolute;
top: 0;
left: 44%;
background-color: #8448ff;
width: 12%;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
$(function(){
$('[role=dialog]')
.on('show.bs.modal', function(e) {
$(this)
.find('[role=document]')
.removeClass()
.addClass('modal-dialog ' + $(e.relatedTarget).data('ui-class'))
})
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard Pro

Questions / Comments: