"Awesome UI Kit"
Bootstrap 3.3.0 Snippet by napsterbd

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 ---------->
<!--
// Inspiration taken from Mike | Creative Mints
// - Dribbble.com page -> http://drbl.in/ghSU
Tried to keep it clean and documented. It's not absolutely perfect and I haven't tested it in many of the older browsers,
but I will try and tweak it when I see an issue or someone mentions it. Always love the work the designers over at Dribbble.com
put together. I wanted to attempt to mimic their photoshop work and provide some fun widgets for you Bootstrappers.
** Brian Moeller
-->
<link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Docs at http://simpleweatherjs.com -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.0.2/jquery.simpleWeather.min.js"></script>
<!-- Docs at http://www.chartjs.org -->
<script src="//www.chartjs.org/assets/Chart.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<!--
****** NAVIGATION WIDGET *******
-->
<div id="nav-widget" class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn text-uppercase"><i class="fa fa-map-marker fa-2x"></i> Check In<span class="badge">6</span></button>
</div>
<div class="btn-group">
<button type="button" class="btn text-uppercase"><i class="fa fa-bell fa-2x"></i> Events</button>
</div>
<div class="btn-group">
<button type="button" class="btn text-uppercase"><i class="fa fa-user fa-2x"></i> Account</button>
</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
/*
// Inspiration taken from Mike | Creative Mints
// - Dribbble.com page -> http://drbl.in/ghSU
Tried to keep it clean and documented. It's not absolutely perfect and I haven't tested it in many of the older browsers,
but I will try and tweak it when I see an issue or someone mentions it. Always love the work the designers over at Dribbble.com
put together. I wanted to attempt to mimic their photoshop work and provide some fun widgets for you Bootstrappers.
- Brian Moeller
*/
@font-face {
font-family: 'weather';
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot');
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot?#iefix') format('embedded-opentype'),
url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.woff') format('woff'),
url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.ttf') format('truetype'),
url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.svg#artill_clean_weather_iconsRg') format('svg');
font-weight: normal;
font-style: normal;
}
html {
width: 100%;
height: 100%;
}
body {
padding: 45px 0;
font: 14px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
color: #8F7F70;
background: #dec8bb; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RlYzhiYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMxJSIgc3RvcC1jb2xvcj0iI2FjOGU3NCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY2JSIgc3RvcC1jb2xvcj0iI2JkYTI4NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4NzZkNTIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #dec8bb 0%, #ac8e74 31%, #bda285 66%, #876d52 100%); /* FF3.6+ */
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
$(document).ready(function() {
// Docs at http://simpleweatherjs.com
$.simpleWeather({
location: 'New York, NY',
woeid: '',
unit: 'f',
success: function(weather) {
current = weather.temp+'° <i class="icon-'+weather.code+'"></i>';
hiTemp = 'Hi '+weather.high+'°';
wind = weather.wind.speed+' '+weather.units.speed;
$("#weather-widget #current").html(current);
$("#weather-widget #hiTemp").html(hiTemp);
$("#weather-widget #wind").html(wind);
},
error: function(error) {
$("#weather").html('<p>'+error+'</p>');
}
});
//Docs at http://www.chartjs.org
var pie_data = [
{
value: 300,
color:"#4DAF7C",
highlight: "#55BC75",
label: "Video"
},
{
value: 50,
color: "#EAC85D",
highlight: "#f9d463",
label: "Audio"
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Get Shit Done Pro
Awesome Search Box
My Awesome Login Page
Awesome UI Kit

Questions / Comments: