"profile page"
Bootstrap 3.3.0 Snippet by admanekishor

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/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<div class="container-fluid">
<div class="row">
<div class="profile-head">
<div class="profiles col-xs-8 col-xs-push-2 col-sm-10 col-sm-push-1 thumbnail">
<div class="col-md-3 col-sm-3 col-xs-12">
<div class="row">
<img src="http://www.newlifefamilychiropractic.net/wp-content/uploads/2014/07/300x300.gif" class="img-responsive" />
</div>
</div>
<div class="col-md-9 visible-lg">
<div class="row">
<span class="col-sm-12"><h5>Jenifer Smith</h5></span>
<div class="col-md-4 col-sm-6 col-xs-12">
<p>Web Designer / Develpor </p>
<ul>
<li><span >36</span>,<span>5'2</span></li>
<li><span>Pune</span></li>
<li><span>Hindu Maratha</span></li>
<li><span>Marathi</span></li>
</ul>
</div><!--col-md-8 col-sm-8 col-xs-12 close-->
<div class="col-md-4 col-sm-6 col-xs-12">
<p>Web Designer / Develpor </p>
<ul>
<li><span >36</span>,<span>5'2</span></li>
<li><span>Pune</span></li>
<li><span>Hindu Maratha</span></li>
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
body{background: #ddd;}
.page-header {background:#ccc;margin:0;}
.profile-head { height:400px; width:100%;background-color: rgb(255, 102, 0);float: left; position: relative;}
.profile-head img { margin:0 auto; border-radius:5px; max-width: 100%; width: 100%;}
.profile-head h5 {width: 100%;padding:5px 5px 0px 5px;text-align:justify;font-weight: bold;color: #555;font-size: 25px;text-transform:capitalize;
margin-bottom: 0;}
.profile-head p {width: 100%;text-align: justify;padding:0px 5px 5px 5px;color: #555;font-size:17px;text-transform:capitalize;margin:0;}
.profile-head a {width: 100%;text-align: center;padding: 10px 5px;color: #555;font-size: 15px;text-transform: capitalize;}
.profile-head ul { list-style:none;padding: 0;}
.profile-head ul li { display:block; color:#555;padding:5px;font-weight: 400;font-size: 15px;}
.profile-head ul li:hover span { color:rgb(0, 4, 51);}
.profile-head ul li span { color:#555;padding-right: 10px;}
.profile-head ul li a { color:#555;}
.profile-head h6 {width: 100%;text-align: center;font-weight: 100;color: #555;font-size: 15px;text-transform: uppercase;margin-bottom: 0;}
.profiles{ top: 300px;}
/*media query*/
@media all and (max-width:768px){
a.menu { display:block !important;margin: 9px 2px;float: right;color: rgba(255, 102, 0, 0.98); border:0px solid; background:none; font-size:30px;width:27px;position: relative;
cursor:pointer;}
a.menu:hover, a.menu:focus { color:rgb(0, 4, 51);}
.drop_menu1 { display: block;visibility: visible;width:250px;height:1000px;padding:5px 30px;position: absolute;right:0 !important;
background-color:#ffffff !important; transition:all ease 0.5s;border-top: 0px solid;cursor: pointer;}
}
@media all and (max-width:430px){
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Dashboard Angular
Elegant Login Page
My Awesome Login Page
Simple & Clean 404 Error Page style

Questions / Comments: