"UI Kit"
Bootstrap 3.1.0 Snippet by clramos90

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <!-- Docs at http://http://simpleweatherjs.com --> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.0.2/jquery.simpleWeather.min.js"></script> <div class="container"> <div class="row"> <div class="col-sm-3 col-md-3"> <div id="weather-widget" class="panel"> <div class="panel-heading text-center"> <div id="current"></div> </div> <div class="panel-body"> <div id="hiTemp" class="col-xs-6 text-center"></div> <div id="wind" class="col-xs-6 text-center"></div> </div> </div> </div> <div class="col-sm-4 col-md-4"> <div id="profile-widget" class="panel"> <div class="panel-heading"> </div> <div class="panel-body"> <div class="media"> <a class="pull-left" href="#"> <img class="media-object img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/flashmurphy/128.jpg"> </a> <div class="media-body"> <h2 class="media-heading">John Raymons</h2> <p style="color:#999;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> </div> <div class="panel-footer"> <div class="btn-group btn-group-justified"> <a class="btn btn-default" role="button"><i class="fa fa-eye"></i> 172</a> <a class="btn btn-default" role="button"><i class="fa fa-comment"></i> 34</a> <a class="btn btn-default" role="button"><i class="fa fa-heart"></i> 210</a> </div> </div> </div> </div> </div> </div>
/* Docs at http://http://simpleweatherjs.com Look inspired by http://www.degreees.com/ Used for demo purposes. Weather icon font from http://fonts.artill.de/collection/artill-weather-icons */ @font-face { font-family: 'weather'; src: url('https://dl.dropboxusercontent.com/u/2086809/weatherfont/artill_clean_icons-webfont.eot'); src: url('https://dl.dropboxusercontent.com/u/2086809/weatherfont/artill_clean_icons-webfont.eot?#iefix') format('embedded-opentype'), url('https://dl.dropboxusercontent.com/u/2086809/weatherfont/artill_clean_icons-webfont.woff') format('woff'), url('https://dl.dropboxusercontent.com/u/2086809/weatherfont/artill_clean_icons-webfont.ttf') format('truetype'), url('https://dl.dropboxusercontent.com/u/2086809/weatherfont/artill_clean_icons-webfont.svg#artill_clean_weather_iconsRg') format('svg'); font-weight: normal; font-style: normal; } html { width: 100%; height: 100%; } html:after { content: ""; background: #fff url(https://farm9.staticflickr.com/8244/8576587662_83a17eb781_b.jpg) no-repeat top center; background-size: cover; opacity: 0.5; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; } body { padding: 45px 0; font: 13px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; } .panel { border: none; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); } #weather-widget i { color: #fff; font-family: weather; font-size: 1.5em; font-weight: normal; font-style: normal; line-height: 1.0; } /* Weather icons */ .icon-0:before { content: ":"; } .icon-1:before { content: "p"; } .icon-2:before { content: "S"; } .icon-3:before { content: "Q"; } .icon-4:before { content: "S"; } .icon-5:before { content: "W"; } .icon-6:before { content: "W"; } .icon-7:before { content: "W"; } .icon-8:before { content: "W"; } .icon-9:before { content: "I"; } .icon-10:before { content: "W"; } .icon-11:before { content: "I"; } .icon-12:before { content: "I"; } .icon-13:before { content: "I"; } .icon-14:before { content: "I"; } .icon-15:before { content: "W"; } .icon-16:before { content: "I"; } .icon-17:before { content: "W"; } .icon-18:before { content: "U"; } .icon-19:before { content: "Z"; } .icon-20:before { content: "Z"; } .icon-21:before { content: "Z"; } .icon-22:before { content: "Z"; } .icon-23:before { content: "Z"; } .icon-24:before { content: "E"; } .icon-25:before { content: "E"; } .icon-26:before { content: "3"; } .icon-27:before { content: "a"; } .icon-28:before { content: "A"; } .icon-29:before { content: "a"; } .icon-30:before { content: "A"; } .icon-31:before { content: "6"; } .icon-32:before { content: "1"; } .icon-33:before { content: "6"; } .icon-34:before { content: "1"; } .icon-35:before { content: "W"; } .icon-36:before { content: "1"; } .icon-37:before { content: "S"; } .icon-38:before { content: "S"; } .icon-39:before { content: "S"; } .icon-40:before { content: "M"; } .icon-41:before { content: "W"; } .icon-42:before { content: "I"; } .icon-43:before { content: "W"; } .icon-44:before { content: "a"; } .icon-45:before { content: "S"; } .icon-46:before { content: "U"; } .icon-47:before { content: "S"; } #weather-widget .panel-heading { font-size: 4em; color: #fff; background-color: #55BC75; } #profile-widget .panel-heading { min-height: 200px; background: #fff url(https://farm4.staticflickr.com/3401/3477031513_a74143f14d_n.jpg) no-repeat bottom center; background-size: cover; } #profile-widget .panel-body { padding: 20px; } #profile-widget .panel-body .img-circle { height: 90px; width: 90px; padding: 8px; border: 1px solid #ddd; } #profile-widget .panel-footer { padding: 0px; border: none; } #profile-widget .panel-footer .btn-group .btn { border: none; border-radius-top: 0px; padding-top: 10px; padding-bottom: 10px; }
// Docs at http://simpleweatherjs.com $(document).ready(function() { $.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>'); } }); });

Related: See More


Questions / Comments: