Bootstrap Snippet Profile: Linkedin style using HTML CSS Bootstrap 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="//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 ---------->
<!DOCTYPE html>
<html>
    <head>
        <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
    </head>
    <body>
        <div class="col-sm-2 col-sm-offset-4 frame">
            <div></div>
            <div class="profile">
               <img class="img-circle img-thumbnail" src="https://media.licdn.com/mpr/mpr/shrinknp_100_100/AAEAAQAAAAAAAAmtAAAAJDY2MzEwMDdhLThhOTEtNDQ3Yy1hMDM3LWM3NzM1MTg2YjVhNw.jpg" />
            </div>
            <div>
                <div>
                    <h4>piojoman</h4>
                    <p>Do not be afraid to take a big step, A precipice hopping is not passed</p>
                </div>                
                <div>
                    <div class="column">
                        <p>15</p>
                        <p>Friend</p>
                    </div>
                    <div class="column">
                        <p>8</p>
                        <p>Enemy</p>                            
                    </div>                        
                </div>     
                <div>
                    <button class="btn btn-info pull-left" data-toggle="tooltip" data-placement="top" title="Follow to piojoman">Follow</button>                        
                    <button class="btn btn-danger pull-right" style="margin-left:5px;" data-toggle="tooltip" data-placement="top" title="Block"><span class="glyphicon glyphicon-ban-circle" aria-hidden="true" ></span></button>
                    <button class="btn btn-success pull-right" data-toggle="tooltip" data-placement="top" title="Write a comment" ><span class="glyphicon glyphicon-comment" aria-hidden="true"></span></button>                        
                </div>                                         
            </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
.frame{
    border:black;
    border:1px solid rgba(0,0,0,0.15);
    position:relative;
    padding:0;
    display:table;
    border-radius:2px;
}
.frame > div:first-of-type{
    position:absolute; 
    z-index:-1;
    height:25%;
    width:100%;
    background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSMnLtQSWlj5VetZstWV6zV19JLKIjttnH6TJdeVgMMHA4EA78A');
}
.frame > div:nth-child(3){
    position:relative;
    border-bottom:black;
    border-bottom: 1px solid rgba(0,0,0,.15);
    display:flex;
    flex-direction:column; 
    justify-content:center;
    width:100%;
    align-items:center;
    
}
.frame > div:nth-child(3) > div:nth-child(1) > h4{
    text-align:center;
}
.frame > div:nth-child(3) > div:nth-child(1) > p{
    text-align:center;color:#adadad; font-family:Source Sans Pro;font-weight: 400;font-size: 13px;
}
.frame > div:nth-child(3) > div:nth-child(1){
    width:100%;
    border-bottom:black;
    border-bottom: 1px solid rgba(0,0,0,.15);
}          
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
$('[data-toggle=tooltip]').tooltip();
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Profile: Linkedin style"
Bootstrap 3.0.0 Snippet by pablocorezzola

Related: See More

Questions / Comments:

"Profile: Linkedin style" Bootstrap 3.0.0 Snippet by pablocorezzola

Related: See More

Questions / Comments:

"Profile: Linkedin style"
Bootstrap 3.0.0 Snippet by pablocorezzola