"Creative User Profile #User-Interface #User #Profile #jquery #Social #contact #accordion"
Bootstrap 3.3.0 Snippet by xanar

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 ---------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="container">
<div class="row">
<h1 class="text-center">Title</h1>
<!-- Contenedor -->
<ul id="accordion" class="accordion">
<li>
<div class="col col_4 iamgurdeep-pic">
<img class="img-responsive iamgurdeeposahan" alt="iamgurdeeposahan" src="https://us.123rf.com/450wm/vgstudio/vgstudio1509/vgstudio150900374/45876337-portrait-of-young-happy-smiling-woman-drinking-coffee-or-tea-at-home-square-composition.jpg?ver=6">
<div class="edit-pic">
<a href="https://web.facebook.com/iamgurdeeposahan" target="_blank" class="fa fa-facebook"></a>
<a href="https://www.instagram.com/gurdeeposahan/" target="_blank" class="fa fa-instagram"></a>
<a href="https://twitter.com/gurdeeposahan1" target="_blank" class="fa fa-twitter"></a>
<a href="https://plus.google.com/u/0/105032594920038016998" target="_blank" class="fa fa-google"></a>
</div>
<div class="username">
<h2>firstName lastName<small></h2>
<p>Web Development</p>
<a href="https://web.facebook.com/iamgurdeeposahan" target="_blank" class="btn-o"></i>Profile</a>
<a href="https://www.instagram.com/gurdeeposahan/" target="_blank" class="btn-o"></i>Contact</a>
</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
@import url(https://fonts.googleapis.com/css?family=Oswald:400,300);
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #eee;
font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;
}
.iamgurdeep-pic {
position: relative;
}
.username {
bottom: 0;
color: #ffffff;
padding: 30px 15px 4px;
position: absolute;
width: 100%;
text-shadow: 1px 1px 2px #000000;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, #2d2c41 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, #2d2c41 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #2d2c41 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a64d4d4d',GradientType=0 ); /* IE6-9 */
}
.iamgurdeeposahan {
border-radius: 4px 4px 0 0;
}
.username > h2 {
font-family: oswald;
font-size: 27px;
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
$(function() {
var Accordion = function(el, multiple) {
this.el = el || {};
this.multiple = multiple || false;
// Variables privadas
var links = this.el.find('.link');
// Evento
links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)
}
Accordion.prototype.dropdown = function(e) {
var $el = e.data.el;
$this = $(this),
$next = $this.next();
$next.slideToggle();
$this.parent().toggleClass('open');
if (!e.data.multiple) {
$el.find('.submenu').not($next).slideUp().parent().removeClass('open');
};
}
var accordion = new Accordion($('#accordion'), false);
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Kit
Instagram Style User Online
Creative Princing Table
Contact Form

Questions / Comments: