"Metarial Card"
Bootstrap 3.0.0 Snippet by skyturk

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="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.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 ---------->
<h3 class="text-center margin-top-20">Card Type One Horizontal</h3>
<div class="container-fluid margin-top-40">
<div class="col-lg-4 col-xs-12 col-md-6 card no-paddding margin-top-30">
<div class="col-xs-5 no-paddding">
<img src="https://images.unsplash.com/photo-1414690165279-49ab0a9a7e66?dpr=1&auto=format&fit=crop&w=1080&h=720&q=80&cs=tinysrgb&crop=&bg=" class="img-responsive card-img" alt="Responsive image">
</div>
<div class="col-xs-7 pull-right margin-top-20">
<div class="text-center">
<strong class="text-center">Freelancer</strong>
</div>
<div class="margin-top-20">
<strong>Göktürk Sığırtmaç</strong></br>
<strong><a href="github.com/skyturks">Git Hub Profile</a></strong></br>
<strong>s.gokturk@outlook.com</strong></br>
</div>
</div>
</div>
<div class="col-lg-4 col-xs-12 col-md-6 col-lg-offset-4 card no-paddding margin-top-30">
<div class="col-xs-5 no-paddding">
<img src="https://images.unsplash.com/photo-1414690165279-49ab0a9a7e66?dpr=1&auto=format&fit=crop&w=1080&h=720&q=80&cs=tinysrgb&crop=&bg=" class="img-responsive card-img" alt="Responsive image">
</div>
<div class="col-xs-7 pull-right margin-top-20">
<div class="text-center">
<strong class="text-center">Freelancer</strong>
</div>
<div class="margin-top-20">
<strong>Göktürk Sığırtmaç</strong></br>
<strong><a href="github.com/skyturks">Git Hub Profile</a></strong></br>
<strong>s.gokturk@outlook.com</strong></br>
</div>
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
.no-paddding{
padding: 0px;
}
.margin-top-20{
margin-top: 20px;
}
.margin-top-30{
margin-top: 30px;
}
.margin-top-40{
margin-top: 40px;
}
.margin-bottom-20{
margin-bottom: 20px;
}
.margin-bottom-30{
margin-bottom: 30px;
}
.margin-bottom-40{
margin-bottom: 40px;
}
/* Card Horizontal */
.card{
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
border-radius: 6px;
height: 150px;
}
.card-img{
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: