"services"
Bootstrap 3.3.0 Snippet by evarevirus

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">
<div class="title"> SERVICES </div>
<div class="icons">
<ul class="menu">
<li class="active"> <span class="icon">
<svg id="js_svg-element" class="active " version="1.1" x="0px" y="0px"
viewBox="0 0 150 150" enable-background="new 0 0 150 150" xml:space="preserve">
<g>
<g>
<path d="M75,84.8c3.7,0,6.8-3,6.8-6.8V62.8c0-3.7-3-6.8-6.8-6.8c-3.7,0-6.8,3-6.8,6.8V78C68.2,81.8,71.3,84.8,75,84.8z"/>
<path d="M85.9,74h-1.4c-0.4,0-0.8,0.4-0.8,0.8v2.8c0,4.8-3.9,8.8-8.8,8.8c-4.8,0-8.8-3.9-8.8-8.8v-2.8c0-0.4-0.4-0.8-0.8-0.8h-1.4
c-0.4,0-0.8,0.4-0.8,0.8v2.8c0,5.8,4.5,10.9,10.2,11.6v2h-6c-0.4,0-0.8,0.4-0.8,0.8v1.4c0,0.4,0.4,0.8,0.8,0.8h15
c0.4,0,0.8-0.4,0.8-0.8v-1.4c0-0.4-0.4-0.8-0.8-0.8h-6v-2c5.7-0.7,10.2-5.8,10.2-11.6v-2.8C86.7,74.3,86.3,74,85.9,74z"/>
</g>
</g>
<g display="none">
<path display="inline" d="M88.9,70.9h-3.6c0-4-3.2-7.2-7.2-7.2v-3.6C84.2,60.1,88.9,64.9,88.9,70.9z M78.1,54.7v3.6
c7,0,12.6,5.7,12.6,12.6h3.6C94.3,62,87.1,54.7,78.1,54.7z M67.8,88.3c1.1,0.7,3.1,1.5,3.1,1.5c5.8,2.1,11.2,0.2,13.9-1.9
c0.4-0.2,0.7-0.4,1-0.7c2.3-2.5,1.4-7.9-2.2-13.2c-0.5,1.1-1.6,2-2.7,2.7c2.5,4,2.9,7.2,2.2,7.9c-0.9,0.9-6.5,0-12.6-6
c-6-5.9-6.9-11.5-6-12.6c0.7-0.7,3.8-0.5,7.9,2.2c0.5-1.1,1.4-2.2,2.7-2.7c-5.4-3.6-10.6-4.7-13.2-2.2c-0.1,0.1-0.1,0.2-0.2,0.2
c0-0.2,0-0.2,0-0.2c-3.2,3.2-6.9,13,2,21.8c0.2,0.2,0.5,0.4,0.7,0.6C64.6,85.8,66.8,87.7,67.8,88.3z M67.8,71.1
c0.5,0.7,0.9,1.4,1.6,2.3l5.5-0.8c0.3,0.6,0.8,1.1,1.5,1.5l-0.8,5.5c0.7,0.5,1.6,1.1,2.3,1.4l0.9-6.6c1.6-0.3,2.8-1.8,2.8-3.5
c0-2-1.6-3.6-3.6-3.6c-1.7,0-3.1,1.1-3.5,2.7L67.8,71.1z"/>
</g>
<g display="none">
<path display="inline" d="M93,64.7v25.7H62.1V64.7H93 M95.6,62.1h-36V93h36V62.1L95.6,62.1z M64.7,85.3h25.7l-5.1-15.4l-7.7,10.3
L72.4,75L64.7,85.3z M67.3,69.9c-1.4,0-2.6,1.2-2.6,2.6c0,1.4,1.1,2.6,2.6,2.6s2.6-1.1,2.6-2.6C69.9,71,68.7,69.9,67.3,69.9z
M54.4,57v30.9H57V59.6h33.4V57H54.4z"/>
</g>
</svg>
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(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);
.container{
font-family: 'Open Sans';
width:960px;
height:auto;
padding-bottom:50px;
margin:auto;
overflow:hidden;
}
.title{
font-size:24px;
color:#ff0000;
font-weight:600;
margin-top:50px;
margin-bottom:30px;
width:100%;
text-align:center;
}
svg{
min-width:170px;
width:20%;
height:140px;
fill:#cdcdcd;
}
.icon svg:hover{
fill:#ff0000;
}
.icons ul{
text-decoration:none;
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
jQuery(document).ready(function () {
jQuery(".menu li:first-child").hover(function(){
jQuery(".text-container1").toggleClass("slide-left-1");
});
jQuery(".menu li:nth-child(2)").hover(function(){
jQuery(".text-container1").toggleClass("slide-left-0");
jQuery(".text-container2").toggleClass("slide-left-1");
jQuery(".text-container3").toggleClass("slide-left-2");
jQuery(".text-container4").toggleClass("slide-left-4");
jQuery(".text-container5").toggleClass("slide-left-5");
jQuery(".menu li:first-child").toggleClass("active hidden");
jQuery('#js_svg-element').attr('class', '');
}, function(){
jQuery('#js_svg-element').attr('class', 'active');
jQuery(".menu li:first-child").toggleClass("active");
jQuery(".text-container1").toggleClass("slide-left-0");
jQuery(".text-container2").toggleClass("slide-left-1");
jQuery(".text-container3").toggleClass("slide-left-2");
jQuery(".text-container4").toggleClass("slide-left-4");
jQuery(".text-container5").toggleClass("slide-left-5");
});
jQuery(".menu li:nth-child(3)").hover(function(){
jQuery(".text-container1").toggleClass("slide-left-3");
jQuery(".text-container2").toggleClass("slide-left-0");
jQuery(".text-container3").toggleClass("slide-left-1");
jQuery(".text-container4").toggleClass("slide-left-2");
jQuery(".text-container5").toggleClass("slide-left-4");
jQuery(".menu li:first-child").toggleClass("active hidden");
jQuery('#js_svg-element').attr('class', '');
}, function(){
jQuery('#js_svg-element').attr('class', 'active');
jQuery(".menu li:first-child").toggleClass("active");
jQuery(".text-container1").toggleClass("slide-left-3");
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Dashboard 2 PRO
BOOTSTRAP 4 OUR SERVICES
Bootstrap 4 Our services
Services Tabs

Questions / Comments: