"WireFrame Theme 2.0"
Bootstrap 3.3.0 Snippet by ibrahimyilmaz

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 ---------->
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Smooth Tabs</title>
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web:900" rel="stylesheet">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class='main hList inactive'>
<div class="tab active"><span>About</span></div><!--
--><div class="tab"><span>Work</span></div><!--
--><div class="tab"><span>Profiles</span></div><!--
--><div class="tab" ><span>Store</span></div><!--
--><div class="tab" ><span>Tours</span></div><!--
--><div class="tab" ><span>Videos</span></div><!--
--><div class="tab" ><span>News</span></div><!--
--><div class="tab" ><span>Underground</span></div><!--
--><div class="tab" ><span>Connect</span></div>
</nav>
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
{
margin:0;
overflow-X:hidden;
font-family:"Raleway","Roboto","Helvetica",sans-serif;
-webkit-font-smoothing:antialiased;
-moz-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
font-smoothing:antialiased;
background:rgba(18,18,26,1);
background-image:url('http://artlantis-media.ru/static/img/0000/0002/7260/27260842.qvpm616fga.png');
background-blend-mode:overlay;
background-size:15%;
}
::-webkit-scrollbar
{
display:none;
}
/*Grid Wrapper*/
#home
{
color:#aaaaaf;
width:100%;
height:100%;
position:relative;
padding:100px;
display:block;
transition:transform 0.5s ease-in-out;
}
#home>section
{
position:relative;
}
#home>.header>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
$('nav.main>.tab').each(function(index){
$(this).css({'transition-delay':((index*0.1)+'s')});
});
$('#grid_wrapper>card').each(function(index){
$(this).css({'transition-delay':((index*0.05)+'s')});
});
$('document').ready(function(){
$('#grid_wrapper').removeClass('init');
});
//$('nav.main').removeClass('inactive');
$('nav.main>.tab').click(function(e){
var $eq=$('nav.main>.tab').index($(this));
var $ripple=$("<div/>");
$ripple.addClass('ripple');
$ripple.css({left:e.clientX-$(this).offset().left,top:e.clientY-$(this).offset().top});
$(this).append($ripple);
setTimeout(function(){
$ripple.remove();
},1000);
var $megaRipple=$("<div/>");
$megaRipple.addClass('ripple');
$megaRipple.addClass('mega');
$megaRipple.css({
left:e.clientX,
top:e.clientY,
background:$(this).css('border-color')
});
$('#content_wrapper>div.content').append($megaRipple);
setTimeout(function(){
$megaRipple.animate({opacity:0},1000);
setTimeout(function(){
$megaRipple.remove();
},1000);
},500);
$('nav.main').find('.active').removeClass('active');
$(this).addClass('active');
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Bootstrap Wizard
Bootstrap form theme

Questions / Comments: