"Dashboard "
Bootstrap 3.3.0 Snippet by fetheart

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
<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 ---------->
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul class="navbar color1">
<li><a href="#"><i class="icon20 home"></i><span>Home</span></a></li>
<li><a href="#"><i class="icon20 upload"></i><span>Upload</span></a></li>
<li><a href="#"><i class="icon20 download"></i><span>Download</span></a></li>
<li class="drpdown"><a href="#"><i class="icon20 comments"></i><span>Posts</span></a>
<ul class="drpcontent">
<li><a href="#">Latest Posts</a></li>
<li><a href="#">Popular Posts</a></li>
<li><a href="#">Private Posts</a></li>
</ul>
</li>
<li><a href="#"><i class="icon20 login"></i><span>Login</span></a></li>
<li class="drpdown"><a href="#"><i class="icon20 theme"></i><span>Themeselector</span></a>
<ul class="drpcontent" id="themeselect">
<li><a href="#" data-color="color1">Orange</a></li>
<li><a href="#" data-color="color2">Marine</a></li>
<li><a href="#" data-color="color3">Green</a></li>
<li><a href="#" data-color="color4">Purple</a></li>
<li><a href="#" data-color="color5">Red</a></li>
</ul>
</li>
</ul>
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=Dosis:400,700);
body {position:relative;margin:0;height: 300px; padding: 1px;background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAIAAAADnC86AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MUI1RkQ3NThCQkE2MTFFMTlDNThDQThGRTg1MEEzODkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MUI1RkQ3NTlCQkE2MTFFMTlDNThDQThGRTg1MEEzODkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxQjVGRDc1NkJCQTYxMUUxOUM1OENBOEZFODUwQTM4OSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxQjVGRDc1N0JCQTYxMUUxOUM1OENBOEZFODUwQTM4OSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pip+YGgAAAW1SURBVHjaXFjbsuQ4CMOO+3+3al/2309iFiTAJKmZrm7HFxBC4DP++fe/vbeIDhljTsVzXZd93vc9xrDvz/OMfGyyfdpbEbHvEw8HBY+/3ftpr2yyvbQV9vk8+7r8lBVTVXwnnModMc5XyiP5fuRb29Rs4r65VHOVH2k/zYDrWma3fVOfI2stG7bdpo1u+4e9bEjxxRbY9znmwKDtwq3pkcMDO4gHv2BEcX6Mc5XtP2GjTwMk9iOwhX2TQzaDr81uO+dxOwbXK/B0Y+dFK+luOuqP0rAEYLsjj9STsDnUgYnZlbiZsWOLbT8yZrUvdgnnDB1DJENgNpk1sSjA35t4PM9tA3ZQ8cBerYqTDW98fojD2Q6JgzjTlGkH0Wj+lPTT8Ehv1WiG6RNn7eKKObnq9/ZY+hrBXjZurO5mDkYaZlb8iBscnYzuAIPVTRsElwsrLpPxYvCAyShgD5XEo3B4C3IWk22qxyWXYLbSRHNJEjyNHMlsBE4wPENb53ESrRlJadXdJxQGTHqzzxB69lORIhVoY3Jt86u9Whpx3QBqFpUmECvu4FMwGk/6rR5CsPn3WwFTZo69UuResMGHLlq2gjVydMcBsczGpqJ0jtaIZnS1TpAgy1EYIIyMBpNlMPNgvX33T/u5gg7MQmgNzEx73UyfpyS26IfzZQQXFmBwL4xzPbhvpgbxt+isijlTGbidKMbWsRyo4qguovHfskLuyAsEnqda6G2VZW2ph4dfEOOwEZEudzvDf7+fTUOpwKlmTUh/KrlhOFWzVPTUgEA22oNMRudVAxga19SuVoF8c8Id49kZ0cPHNlibkN6hUT5hWJ1wVtv/0HEqTi4AFyaxDSrxrbzqFSvmKYjtoR2jcZbawslHuUbyi3Yw2Ez2iiQmW2n79TrYs4u1MjKHPqT2BRJeoU3w58L3q/DePU4pPfwxvUy6sib+O5XZD81V0kPwKdWpd+73KjCD2xb2tcqIXtC8/njGsKh4FhCGT22WE6wXJMDytrrLzFyfwBCo1oR4H0Mqdd1wKqGsMcdmTqhId/zYIVDCPXYIyursPzoOXpFRvmlOmFwmoXRwUY9aIRvLQUllSsq+mDST9N7rSPqNeLKW6fNmH5RT2P2wXB0lAeGjFoFTTGJaVqgQg2WhAlTAbUQ/U7ixTXCztl7epyFPzFF8khOVxMwIa7ZCZUFyPj2aPHy5iKBOlEuWnBXMQ/I5WPuUNRh9a9dO1l1wworDpm4HfuMgkcK5V/TPqDAZyIstZrWxEY4oWRG/3soEhxl7f2W+Khf2+p0lWNnnLo2ypaVtDKWttAR4nigVnk/ei4skO3ZXKES0101P97wkvCsp0km0CrWReYaLJzHCGRa5dDh63pm6Jq0TbV3KPLlAVWBHgZGpQWnXoNOsp3Y6v2hHgKYz+4KijBy096esFZb7BDiQX4DXBZXHjDcm7N/L8JSUpzcb1HYbsJbr95uvqGOrv7+/ysYKRNxkquzzmpWd/aya2PeqTkNDuYjItHL3aReLgIx9jXh1QqZ8i2iawv+jRLvTGLWZ6TT7ScR8ZkPBI6vPrfoWdI1LAzoVYM5YRtqUrx1eXGJ9sc+n8HBf7Lg1brP9HoQ7wyCKS6rCsM5lg01pJO+8NcurYOift0pSkFRt4L2Nd4teOeoOxwJtti6C1K+5b1k4Ej1arTz28epSt8WSBJm9uhftTQuI/DxXFepUO7Wv6YWFntZdqF0kJakbCckNisx+DS5W57KQho/QlBW9p6wbWwc5mqMonSKlIVTpvOwwa+x1NQKCqFy9qf5ESN7PjFshc+ogT7aXwmv+AaPKF8U1MgEt5yxMC8PD5nf5k1IgOSC/71TSA/HygMAUX+ISlfcR6t+ICrOT0vvJW2tWJPRhSeBdkpJ2lx2Rt+mV58ku/06TJv2PSH7ZzdtK3u76nwPkLVjz01n2Px1V+fpfgAEAYfN4sP2JlZ4AAAAASUVORK5CYII=");}
.navbar {
font-family: 'Dosis', sans-serif;
position:relative;
display:table;
float:none;
list-style-type:none;
padding:0;
margin:20px auto 250px auto;
}
.navbar:before {
position:absolute;
display:block;
content: "";
z-index:-1;
width:100%;
height:18px;
bottom:-9px;
left:2px;
background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 75%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.7)), color-stop(75%,rgba(0,0,0,0)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 75%);
background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 75%);
background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 75%);
background: radial-gradient(center, ellipse cover, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 75%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#00000000',GradientType=1 );
opacity:.4;
}
.navbar:after {
position:absolute;
display:block;
content: "";
z-index:-1;
width:100%;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard Angular
Flat Responsive Dashboard Design
Social Dashboard

Questions / Comments: