Bootstrap Snippet facebook like Cover Page 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
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="fb-profile-block">
          <div class="fb-profile-block-thumb"><img src="http://themeboxer.com/demo/snipp/coverpage.jpg" alt="" title=""></div>
          <div class="profile-img"><a href="#"><img src="http://themeboxer.com/demo/snipp/profile.jpg" alt="" title=""></a></div>
          <div class="profile-name">
            <h2>Profile Name</h2>
          </div>
          
          <div class="fb-profile-block-menu">
               <div class="block-menu">
                    <ul>
                       <li><a href="#">Timeline</a></li>
                       <li><a href="#">about</a></li>
                       <li><a href="#">Friends</a></li>
                       <li><a href="#">Photos</a></li>
                       <li><a href="#">More...</a></li>
                    </ul>
               </div>
          </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
.fb-profile-block {
  margin: auto;
  position: relative;
  width: 850px;
}
img{
    width: 100%;
    height: auto;
}
.fb-profile-block-thumb{
  display: block;
  height: 315px;
  overflow: hidden;
  position: relative;
  text-decoration: none;
}
.fb-profile-block-menu {
  border: 1px solid #d3d6db;
  border-radius: 0 0 3px 3px;
}
.profile-img a{
    bottom: 15px;
    box-shadow: none;
    display: block;
    left: 15px;
    padding:1px;
    position: absolute;
    height: 160px;
    width: 160px;
    background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0;
    z-index:9;
}
.profile-img img {
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.07);
  height:158px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"facebook like Cover Page"
Bootstrap 2.3.2 Snippet by Eliasmia

Related: See More

Questions / Comments:

"facebook like Cover Page" Bootstrap 2.3.2 Snippet by Eliasmia

Related: See More

Questions / Comments:

"facebook like Cover Page"
Bootstrap 2.3.2 Snippet by Eliasmia