LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

It's the weather!

in

It's

with a wind speed of

Icons by Josh Bader

Weather provided by OpenWeatherMap

CSS
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Roboto");
.char1 {
  -webkit-transform: rotate(-84.4117647059deg);
  transform: rotate(-84.4117647059deg);
}

.char2 {
  -webkit-transform: rotate(-73.8235294118deg);
  transform: rotate(-73.8235294118deg);
}

.char3 {
  -webkit-transform: rotate(-63.2352941176deg);
  transform: rotate(-63.2352941176deg);
}

.char4 {
  -webkit-transform: rotate(-52.6470588235deg);
  transform: rotate(-52.6470588235deg);
}

.char5 {
  -webkit-transform: rotate(-42.0588235294deg);
  transform: rotate(-42.0588235294deg);
}

.char6 {
  -webkit-transform: rotate(-31.4705882353deg);
  transform: rotate(-31.4705882353deg);
}

.char7 {
  -webkit-transform: rotate(-20.8823529412deg);
  transform: rotate(-20.8823529412deg);
}

.char8 {
  -webkit-transform: rotate(-10.2941176471deg);
  transform: rotate(-10.2941176471deg);
}

.char9 {
  -webkit-transform: rotate(0.2941176471deg);
  transform: rotate(0.2941176471deg);
}

.char10 {
  -webkit-transform: rotate(10.8823529412deg);
  transform: rotate(10.8823529412deg);
}

.char11 {
  -webkit-transform: rotate(21.4705882353deg);
  transform: rotate(21.4705882353deg);
}

.char12 {
  -webkit-transform: rotate(32.0588235294deg);
  transform: rotate(32.0588235294deg);
}

.char13 {
  -webkit-transform: rotate(42.6470588235deg);
  transform: rotate(42.6470588235deg);
}

.char14 {
  -webkit-transform: rotate(53.2352941176deg);
  transform: rotate(53.2352941176deg);
}

.char15 {
  -webkit-transform: rotate(63.8235294118deg);
  transform: rotate(63.8235294118deg);
}

.char16 {
  -webkit-transform: rotate(74.4117647059deg);
  transform: rotate(74.4117647059deg);
}

.char17 {
  -webkit-transform: rotate(85deg);
  transform: rotate(85deg);
}

html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 100%;
}

html *,
html *:before,
html *:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

a:hover {
  color: #fff;
}

body {
  max-width: 42em;
  padding: 2em;
  margin: 0 auto;
  color: #161616;
  font-family: "Roboto", sans-serif;
  text-align: center;
  margin-top: 50px;
  background-color: currentColor;
  margin-bottom: 0;
}

button {
  background: transparent;
  outline: 0 !important;
  margin: 0;
  padding: 0;
  border: 0;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
button:hover {
  color: royalblue;
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

.thing-two {
  margin-top: 3em;
}

.temp {
  font-weight: bold;
  font-size: 30px;
  margin: 30px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  color: orange;
}

#temp {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-delay: 0.45s;
          animation-delay: 0.45s;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

button:hover {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

/*HEADER TEXT */
h1.lead span {
  font: bold 26px "Roboto", Monaco, Monospace;
  height: 200px;
  position: absolute;
  width: 20px;
  left: 50;
  top: 2;
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}

/*Icon CSS From Josh Bader Weather Icons */
h1, h2, h3, h4 {
  font-weight: 100;
  font-size: 2em;
  color: rgba(255, 255, 255, 0.85);
}

p, a {
  color: rgba(255, 255, 255, 0.3);
  font-size: small;
}

p {
  margin: 1.375rem 0;
}

.main {
  margin-top: 15em;
  margin-bottom: 0;
  padding-bottom: 0;
}

.icon {
  position: relative;
  display: none;
  width: 12em;
  height: 10em;
  font-size: 1em;
  /* control icon size here */
}

#icon {
  margin-right: 0px;
  display: block-inline;
}

.cloud {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 3.6875em;
  height: 3.6875em;
  margin: -1.84375em;
  background: currentColor;
  border-radius: 50%;
  -webkit-box-shadow: -2.1875em 0.6875em 0 -0.6875em, 2.0625em 0.9375em 0 -0.9375em, 0 0 0 0.375em #fff, -2.1875em 0.6875em 0 -0.3125em #fff, 2.0625em 0.9375em 0 -0.5625em #fff;
          box-shadow: -2.1875em 0.6875em 0 -0.6875em, 2.0625em 0.9375em 0 -0.9375em, 0 0 0 0.375em #fff, -2.1875em 0.6875em 0 -0.3125em #fff, 2.0625em 0.9375em 0 -0.5625em #fff;
}
.cloud:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -0.5em;
  display: block;
  width: 4.5625em;
  height: 1em;
  background: currentColor;
  -webkit-box-shadow: 0 0.4375em 0 -0.0625em #fff;
          box-shadow: 0 0.4375em 0 -0.0625em #fff;
}
.cloud:nth-child(2) {
  z-index: 0;
  background: #fff;
  -webkit-box-shadow: -2.1875em 0.6875em 0 -0.6875em #fff, 2.0625em 0.9375em 0 -0.9375em #fff, 0 0 0 0.375em #fff, -2.1875em 0.6875em 0 -0.3125em #fff, 2.0625em 0.9375em 0 -0.5625em #fff;
          box-shadow: -2.1875em 0.6875em 0 -0.6875em #fff, 2.0625em 0.9375em 0 -0.9375em #fff, 0 0 0 0.375em #fff, -2.1875em 0.6875em 0 -0.3125em #fff, 2.0625em 0.9375em 0 -0.5625em #fff;
  opacity: 0.3;
  -webkit-transform: scale(0.5) translate(6em, -3em);
          transform: scale(0.5) translate(6em, -3em);
  -webkit-animation: cloud 4s linear infinite;
          animation: cloud 4s linear infinite;
}
.cloud:nth-child(2):after {
  background: #fff;
}

.sun {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.5em;
  height: 2.5em;
  margin: -1.25em;
  background: currentColor;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 0 0.375em #fff;
          box-shadow: 0 0 0 0.375em #fff;
  -webkit-animation: spin 12s infinite linear;
          animation: spin 12s infinite linear;
}

.rays {
  position: absolute;
  top: -2em;
  left: 50%;
  display: block;
  width: 0.375em;
  height: 1.125em;
  margin-left: -0.1875em;
  background: #fff;
  border-radius: 0.25em;
  -webkit-box-shadow: 0 5.375em #fff;
          box-shadow: 0 5.375em #fff;
}
.rays:before, .rays:after {
  content: "";
  position: absolute;
  top: 0em;
  left: 0em;
  display: block;
  width: 0.375em;
  height: 1.125em;
  -webkit-transform: rotate(60deg);
          transform: rotate(60deg);
  -webkit-transform-origin: 50% 3.25em;
          transform-origin: 50% 3.25em;
  background: #fff;
  border-radius: 0.25em;
  -webkit-box-shadow: 0 5.375em #fff;
          box-shadow: 0 5.375em #fff;
}
.rays:before {
  -webkit-transform: rotate(120deg);
          transform: rotate(120deg);
}

.cloud + .sun {
  margin: -2em 1em;
}

.rain, .lightning, .snow {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 3.75em;
  height: 3.75em;
  margin: 0.375em 0 0 -2em;
  background: currentColor;
}

.rain:after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 1.125em;
  height: 1.125em;
  margin: -1em 0 0 -0.25em;
  background: #0cf;
  border-radius: 100% 0 60% 50%/60% 0 100% 50%;
  -webkit-box-shadow: 0.625em 0.875em 0 -0.125em rgba(255, 255, 255, 0.2), -0.875em 1.125em 0 -0.125em rgba(255, 255, 255, 0.2), -1.375em -0.125em 0 rgba(255, 255, 255, 0.2);
          box-shadow: 0.625em 0.875em 0 -0.125em rgba(255, 255, 255, 0.2), -0.875em 1.125em 0 -0.125em rgba(255, 255, 255, 0.2), -1.375em -0.125em 0 rgba(255, 255, 255, 0.2);
  -webkit-transform: rotate(-28deg);
          transform: rotate(-28deg);
  -webkit-animation: rain 3s linear infinite;
          animation: rain 3s linear infinite;
}

.bolt {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -0.25em 0 0 -0.125em;
  color: #fff;
  opacity: 0.3;
  -webkit-animation: lightning 2s linear infinite;
          animation: lightning 2s linear infinite;
}
.bolt:nth-child(2) {
  width: 0.5em;
  height: 0.25em;
  margin: -1.75em 0 0 -1.875em;
  -webkit-transform: translate(2.5em, 2.25em);
          transform: translate(2.5em, 2.25em);
  opacity: 0.2;
  -webkit-animation: lightning 1.5s linear infinite;
          animation: lightning 1.5s linear infinite;
}
.bolt:before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  margin: -1.625em 0 0 -1.0125em;
  border-top: 1.25em solid transparent;
  border-right: 0.75em solid;
  border-bottom: 0.75em solid;
  border-left: 0.5em solid transparent;
  -webkit-transform: skewX(-10deg);
          transform: skewX(-10deg);
}
.bolt:after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  margin: -1.625em 0 0 -1.0125em;
  border-top: 1.25em solid transparent;
  border-right: 0.75em solid;
  border-bottom: 0.75em solid;
  border-left: 0.5em solid transparent;
  -webkit-transform: skewX(-10deg);
          transform: skewX(-10deg);
  margin: -0.25em 0 0 -0.25em;
  border-top: 0.75em solid;
  border-right: 0.5em solid transparent;
  border-bottom: 1.25em solid transparent;
  border-left: 0.75em solid;
  transform: skewX(-10deg);
}
.bolt:nth-child(2):before {
  margin: -0.75em 0 0 -0.5em;
  border-top: 0.625em solid transparent;
  border-right: 0.375em solid;
  border-bottom: 0.375em solid;
  border-left: 0.25em solid transparent;
}
.bolt:nth-child(2):after {
  margin: -0.125em 0 0 -0.125em;
  border-top: 0.375em solid;
  border-right: 0.25em solid transparent;
  border-bottom: 0.625em solid transparent;
  border-left: 0.375em solid;
}

.flake:before {
  content: "❄";
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -1.025em 0 0 -1.0125em;
  color: #fff;
  list-height: 1em;
  opacity: 0.2;
  animation: spin 8s linear infinite reverse;
}
.flake:after {
  content: "❄";
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -1.025em 0 0 -1.0125em;
  color: #fff;
  list-height: 1em;
  opacity: 0.2;
  animation: spin 8s linear infinite reverse;
  margin: 0.125em 0 0 -1em;
  font-size: 1.5em;
  opacity: 0.4;
  -webkit-animation: spin 14s linear infinite;
          animation: spin 14s linear infinite;
}
.flake:nth-child(2):before {
  margin: -0.5em 0 0 0.25em;
  font-size: 1.25em;
  opacity: 0.2;
  -webkit-animation: spin 10s linear infinite;
          animation: spin 10s linear infinite;
}
.flake:nth-child(2):after {
  margin: 0.375em 0 0 0.125em;
  font-size: 2em;
  opacity: 0.4;
  animation: spin 16s linear infinite reverse;
}

/* Animations */
@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes cloud {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.5) translate(-200%, -3em);
            transform: scale(0.5) translate(-200%, -3em);
  }
}
@keyframes cloud {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.5) translate(-200%, -3em);
            transform: scale(0.5) translate(-200%, -3em);
  }
}
@-webkit-keyframes rain {
  0% {
    background: #0cf;
    -webkit-box-shadow: 0.625em 0.875em 0 -0.125em rgba(255, 255, 255, 0.2), -0.875em 1.125em 0 -0.125em rgba(255, 255, 255, 0.2), -1.375em -0.125em 0 #0cf;
            box-shadow: 0.625em 0.875em 0 -0.125em rgba(255, 255, 255, 0.2), -0.875em 1.125em 0 -0.125em rgba(255, 255, 255, 0.2), -1.375em -0.125em 0 #0cf;
  }
  25% {
    -webkit-box-shadow: 0.625em 0.875em 0 -0.125em rgba(255, 255, 255, 0.2), -0.875em 1.125em 0 -0.125em #0cf, -1.375em -0.125em 0 rgba(255, 255, 255, 0.2);
            box-shadow: 0.625em 0.875em 0 -0.125em rgba(255, 255, 255, 0.2), -0.875em 1.125em 0 -0.125em #0cf, -1.375em -0.125em 0 rgba(255, 255, 255, 0.2);
  }
  50% {
    background: rgba(255, 255, 255, 0.3);
    -webkit-box-shadow: 0.625em 0.875em 0 -0.125em #0cf, -0.875em 1.125em 0 -0.125em rgba(255, 255, 255, 0.2), -1.375em -0.125em 0 rgba(255, 255, 255, 0.2);
            box-shadow: 0.625em 0.875em 0 -0.125em #0cf, -0.875em 1.125em 0 -0.125em rgba(255, 255, 255, 0.2), -1.375em -0.125em 0 rgba(255, 255, 255, 0.2);
  }
  100% {
    -webkit-box-shadow: 0.625em 0.875em 0 -0.125em rgba(255, 255, 255, 0.2), -0.875em 1.125em 0 -0.125em rgba(255, 255, 255, 0.2), -1.375em -0.125em 0 #0cf;
            box-shadow: 0.625em 0.875em 0 -0.125em rgba(255, 255, 255, 0.2), -0.875em 1.125em 0 -0.125em rgba(255, 255, 255, 0.2), -1.375em -0.125em 0 #0cf;
  }
}
@keyframes rain {
  0% {
    background: #0cf;
    -webkit-box-shadow: 0.625em 0.875em 0 -0.125em rgba(255, 255, 255, 0.2), -0.875em 1.125em 0 -0.125em rgba(255, 255, 255, 0.2), -1.375em -0.125em 0 #0cf;
            box-shadow: 0.625em 0.875em 0 -0.125em rgba(255, 255, 255, 0.2), -0.875em 1.125em 0 -0.125em rgba(255, 255, 255, 0.2), -1.375em -0.125em 0 #0cf;
  }
  25% {
    -webkit-box-shadow: 0.625em 0.875em 0 -0.125em rgba(255, 255, 255, 0.2), -0.875em 1.125em 0 -0.125em #0cf, -1.375em -0.125em 0 rgba(255, 255, 255, 0.2);
            box-shadow: 0.625em 0.875em 0 -0.125em rgba(255, 255, 255, 0.2), -0.875em 1.125em 0 -0.125em #0cf, -1.375em -0.125em 0 rgba(255, 255, 255, 0.2);
  }
  50% {
    background: rgba(255, 255, 255, 0.3);
    -webkit-box-shadow: 0.625em 0.875em 0 -0.125em #0cf, -0.875em 1.125em 0 -0.125em rgba(255, 255, 255, 0.2), -1.375em -0.125em 0 rgba(255, 255, 255, 0.2);
            box-shadow: 0.625em 0.875em 0 -0.125em #0cf, -0.875em 1.125em 0 -0.125em rgba(255, 255, 255, 0.2), -1.375em -0.125em 0 rgba(255, 255, 255, 0.2);
  }
  100% {
    -webkit-box-shadow: 0.625em 0.875em 0 -0.125em rgba(255, 255, 255, 0.2), -0.875em 1.125em 0 -0.125em rgba(255, 255, 255, 0.2), -1.375em -0.125em 0 #0cf;
            box-shadow: 0.625em 0.875em 0 -0.125em rgba(255, 255, 255, 0.2), -0.875em 1.125em 0 -0.125em rgba(255, 255, 255, 0.2), -1.375em -0.125em 0 #0cf;
  }
}
@-webkit-keyframes lightning {
  45% {
    color: #fff;
    background: #fff;
    opacity: 0.2;
  }
  50% {
    color: #0cf;
    background: #0cf;
    opacity: 1;
  }
  55% {
    color: #fff;
    background: #fff;
    opacity: 0.2;
  }
}
@keyframes lightning {
  45% {
    color: #fff;
    background: #fff;
    opacity: 0.2;
  }
  50% {
    color: #0cf;
    background: #0cf;
    opacity: 1;
  }
  55% {
    color: #fff;
    background: #fff;
    opacity: 0.2;
  }
}
footer {
  position: absolute;
  bottom: 0;
}

.footer-2 {
  display: inline-block;
  padding: 1.5em;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 70px;
}
.footer-2 .footer-logo {
  margin-bottom: 1em;
  margin-right: 0.5em;
}
.footer-2 .footer-logo img {
  height: 1.8em;
}
.footer-2 ul {
  display: inline-block;
  line-height: 1.8em;
  margin: 0 0 1em 0;
}
.footer-2 ul li {
  list-style: none;
  padding-right: 1em;
}
.footer-2 ul li a {
  color: rgba(229, 173, 79, 0.4);
  text-decoration: none;
}
.footer-2 ul li a:focus, .footer-2 ul li a:hover {
  opacity: 1;
  color: orange;
}
.footer-2 .footer-secondary-links ul {
  display: inline-block;
}
.footer-2 .footer-secondary-links ul .footer-social {
  margin: 1em 0 0 0;
}
.footer-2 .footer-secondary-links ul .footer-social li {
  float: left;
  line-height: 1.5em;
  margin: 0;
  padding-right: 1em;
}
.footer-2 .footer-secondary-links ul .footer-social li:last-child {
  padding-right: 0;
  opacity: 0.7;
  padding: 1px;
}
.footer-2 .footer-secondary-links ul .footer-social li:focus, .footer-2 .footer-secondary-links ul .footer-social li:hover {
  opacity: 1;
}
.footer-2 i {
  font-size: 1.34em;
  padding-top: 2px;
}
.footer-2 i:hover {
  color: orange;
}
.footer-2 p {
  color: rgba(229, 173, 79, 0.4);
  margin-top: 0;
  margin-bottom: 0;
}

@media screen and (min-width: 53.75em) {
  .footer-2 .footer-logo {
    float: left;
    margin-bottom: 0;
  }
}
@media screen and (min-width: 53.75em) {
  .footer-2 ul {
    float: left;
    line-height: 1.8em;
    margin-bottom: 0;
    margin-left: 1em;
  }
}
@media screen and (min-width: 53.75em) {
  .footer-2 ul li {
    display: inline-block;
    text-align: left;
  }
}
@media screen and (min-width: 53.75em) {
  .footer-2 .footer-secondary-links {
    float: right;
  }
}
@media screen and (min-width: 53.75em) {
  .footer-2 .footer-secondary-links ul .footer-social {
    float: right;
    margin-top: 0;
  }
}
JS
$(document).ready(function() {
  $("h1 .lead").lettering();
  //Globals
  var lat;
  var lon;
  var tempSwap = false;
  var cTemp;
  var fTemp;
  var key = 'e766d072f0e227cc8d41eb78edb83f4f';

  //Geoloation
  $.getJSON("http://ip-api.com/json/?callback=?", function(data2) {
    lat = data2.lat;
    lon = data2.lon;
    var api = 'http://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + lon + '&appid=' + key;

    //Get Metric Data
    $.getJSON(api + "&units=metric", function(data3) {
        var weather = data3.weather[0].description;
        var city = data3.name;
        var wind = data3.wind.speed;
        var iconCode = data3.weather[0].icon;
        cTemp = data3.main.temp;
      
      //Get Imperial Data 
      $.getJSON(api + "&units=imperial", function(data) {
        fTemp = data.main.temp;
        
        var fText = fTemp + ' ℉';
        var cText = cTemp + ' ℃';
    
        //Insert JSON Info
        $('#temp').html(fText);
        $('#location').html(city);
        $('#desc').html(weather);
        $('#wind').html(wind + " mph");
    
        //Add Weather Icons
        iconCode = iconCode.substring(0, iconCode.length - 1);
        switch(iconCode){
          case "02":
            $('.cloudy').show().css({'display': 'inline-block'});
            break;

          case "03":
            $('.cloudy').show().css({'display': 'inline-block'});
            break;

          case "04":
            $('.cloudy').show().css({'display': 'inline-block'});
            break;

          case "09":
            $('.rainy').show().css({'display': 'inline-block'});
            break;

          case "10":
            $('.rainy').show().css({'display': 'inline-block'});
            break;

          case "11":
            $('.thunder-storm').show().css({'display': 'inline-block'});
            break;

          case "13":
            $('.flurries').show().css({'display': 'inline-block'});
            break;

          default: 
            $('.sunny').show().css({'display': 'inline-block'});
                       }
    
        //Change Temp Toggle

        $('#temp').click(function() {
          tempSwap = !tempSwap;
          if (tempSwap === true) {
            $('#temp').html(cText);
          } else {
            $('#temp').html(fText);
          }
    


        });
      });

    });
  });
});
Term
Sat, 01/13/2018 - 16:17

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv