<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/drehimself/pen/gdfJK?depth=everything&order=popularity&page=3&q=company&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'>
<style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
@font-face {
font-family: 'Intro';
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/Intro.ttf.woff") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/Intro.ttf.svg#Intro") format("svg"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/Intro.ttf.eot"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/Intro.ttf.eot?#iefix") format("embedded-opentype");
font-weight: normal;
font-style: normal;
}
body {
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/blurred_bg.jpg") no-repeat center center fixed;
background-size: cover;
}
.chicago {
box-sizing: border-box;
font: 13px "Open Sans", Arial;
padding: 40px 0;
}
*, *:before, *:after {
box-sizing: inherit;
}
.container {
margin: 0 auto;
width: 360px;
height: 480px;
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chicago.jpg");
border-radius: 2px;
position: relative;
}
.city-title, .city-weather-temperature, .city-weather-description, img.city-weather-icon {
font-family: 'Intro';
text-align: center;
margin: auto;
display: block;
}
.city-title {
font-size: 26px;
padding-top: 24px;
}
hr {
border-top: 1px solid #A3A3A3;
border-bottom: 1px solid #626165;
width: 112px;
}
.city-weather-temperature {
font-size: 22px;
margin-bottom: 10px;
}
.city-weather-description {
width: 120px;
margin: auto;
text-align: center;
}
.content {
position: absolute;
bottom: 0px;
z-index: 9999;
}
nav {
background: #fffff0;
padding-left: 0px;
}
nav ul {
padding: 13px 0;
}
nav ul li {
display: inline;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 11px;
border-color: transparent;
-webkit-transition: border-color 0.25s linear;
transition: border-color 0.25s linear;
}
nav ul li.selected {
border-bottom: 3px solid #C4A865;
}
nav ul li:hover {
border-bottom: 3px solid #C4A865;
border-color: 3px solid #c6a865;
}
nav ul li:last-child {
padding-right: 18px;
}
nav ul li a {
text-decoration: none;
color: black;
}
.nav-info-behind {
background: rgba(255, 255, 240, 0.65);
z-index: -1;
height: 130px;
width: 360px;
position: absolute;
bottom: 0;
}
.nav-info {
background: rgba(255, 255, 240, 0.65);
}
.nav-info .info {
margin-top: 20px;
margin-bottom: 24px;
}
.nav-info .info .company-name {
text-transform: uppercase;
font-weight: bold;
margin-bottom: 3px;
}
.nav-info .info .address {
line-height: 16px;
margin-bottom: 6px;
}
.nav-info .info .phone {
color: #C4A865;
font-weight: bold;
}
.nav-info img {
margin-top: 28px;
margin-right: 8px;
}
.one-half {
width: 180px;
float: left;
padding-left: 20px;
}
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.row:after,
.clearfix:after {
clear: both;
}
.row,
.clearfix {
zoom: 1;
}
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.hide {
display: none;
}
</style></head><body>
<div class="chicago">
<div class="container">
<div class="city-title">Chicago</div>
<hr />
<div class="city-weather-temperature" id="city-weather-temperature">-1° C</div>
<div class="city-weather-description" id="city-weather-description">
sunny
</div>
<img src="http://openweathermap.org/img/w/01d.png" alt="weather-icon" class="city-weather-icon" id="city-weather-icon" />
<div class="content">
<nav>
<ul>
<li><a href="#">Hotels</a></li>
<li><a href="#">Places</a></li>
<li><a href="#">Restaurants</a></li>
<li class="selected"><a href="#">Offices</a></li>
</ul>
</nav>
<div class="nav-info clearfix" id="offices">
<div class="one-half">
<div class="info" id="offices">
<div class="company-name">Mintel Group Ltd</div>
<div class="address">333 W. Wacker Drive, Suite 1100, Chicago</div>
<div class="phone">+1 123 654 987 36</div>
</div> <!-- end info -->
</div> <!-- end one-half -->
<div class="one-half">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/office1.png" alt="office 1" />
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/office2.png" alt="office 2" />
</div> <!-- end one-half -->
</div> <!-- end nav-info #offices-->
<div class="nav-info clearfix hide" id="restaurants">
<div class="one-half">
<div class="info" id="offices">
<div class="company-name">Restaurant Ltd</div>
<div class="address">123 E. Licoln Dr., Suite 9874, Chicago</div>
<div class="phone">+1 564 232 4853 </div>
</div> <!-- end info -->
</div> <!-- end one-half -->
<div class="one-half">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/office1.png" alt="office 1" />
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/office2.png" alt="office 2" />
</div> <!-- end one-half -->
</div> <!-- end nav-info #restaurants-->
<div class="nav-info clearfix hide" id="places">
<div class="one-half">
<div class="info" id="offices">
<div class="company-name">Places</div>
<div class="address">874 North Street, Suite 2200, Chicago</div>
<div class="phone">+1 905 265 9876 </div>
</div> <!-- end info -->
</div> <!-- end one-half -->
<div class="one-half">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/office1.png" alt="office 1" />
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/office2.png" alt="office 2" />
</div> <!-- end one-half -->
</div> <!-- end nav-info #places-->
<div class="nav-info clearfix hide" id="hotels">
<div class="one-half">
<div class="info" id="offices">
<div class="company-name">Hotels Ltd</div>
<div class="address">890 Marina Blvd, Suite 9412, Chicago</div>
<div class="phone">+1 416 874 9874 </div>
</div> <!-- end info -->
</div> <!-- end one-half -->
<div class="one-half">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/office1.png" alt="office 1" />
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/office2.png" alt="office 2" />
</div> <!-- end one-half -->
</div> <!-- end nav-info #hotels-->
<div class="nav-info-behind clearfix">
</div> <!-- end nav-info-behind-->
</div> <!-- end content -->
</div> <!-- end container -->
</div> <!-- end chicago -->
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >// weather api
$(document).ready(function() {
$.ajax({
url: "http://api.openweathermap.org/data/2.5/weather?q=chicago,usa&APPID=4573c189d467ca1814c1c10000060792",
dataType : "json",
type: "GET",
success: function(json) {
var temp = Math.round(json.main.temp - 273.15);
$('#city-weather-temperature').html(temp + '° C');
$('#city-weather-description').html(json.weather[0].description);
$('img#city-weather-icon').attr('src', 'http://openweathermap.org/img/w/' + json.weather[0].icon + '.png');
},
error: function(xhr, status, errorThrown) {
//do something if there was an error. Right now it will just show the default values in the html
}
});
// Nav toggle content
$("nav ul li a").on("click", function() {
var $this = $(this);
var target = $this.text().toLowerCase();
//update nav selected
$this.parent().addClass('selected').siblings().removeClass('selected');
//show and hide appropriate content based on selection
$('#' + target).fadeIn('slow').removeClass('hide').siblings().not('nav').not('.nav-info-behind').hide();
return false;
});
});
//# sourceURL=pen.js
</script>
</body></html>
