Skip to content

Instantly share code, notes, and snippets.

@Venkateshwaran

Venkateshwaran/index.html

Last active March 30, 2017 15:43
Show Gist options
  • Save Venkateshwaran/b49dffbf1df5cbdb4b21bfa5c7f547fb to your computer and use it in GitHub Desktop.
Save Venkateshwaran/b49dffbf1df5cbdb4b21bfa5c7f547fb to your computer and use it in GitHub Desktop.
Download ZIP
Weather app using AngularJS
Raw
index.html
<body ng-app="weatherApp">
<div ng-controller="weatherCtrl">
<div class="main" ng-class="backGround">
<div ng-class="temperature.seaSon"></div>
<div class="container">
<div class="row">
<header class="col-xs-12 col-lg-12 text-center">
<!-- <h1>Weather</h1> -->
</header>
<div class="col-xs-8 col-lg-12 col-xs-offset-2">
<div class="text-center status">
<p>{{weatherDetails.name}}, {{weatherDetails.sys.country}}</p>
<p class="degree">{{temperature.temp}} &#176;<span class="temp" ng-click="Data.sys()">{{weatherDetails.unit}}</span> </p>
<p>{{weatherDetails.weather[0].main}}</p>
<div class="onoffswitch">
<input type="checkbox" ng-model="weatherMetric" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" ng-click="changeMetric(weatherMetric);">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="btn-group switch-climate" ng-click="manualChoice(climate)">
<label class="btn">
<input type="radio" ng-model="climate" name="options" value="haze" />
<span>Haze</span>
</label>
<label class="btn">
<input type="radio" ng-model="climate" name="options" value="rain" />
<span>Rainy</span>
</label>
<label class="btn">
<input type="radio" ng-model="climate" name="options" value="clouds" />
<span>Clouds</span>
</label>
<label class="btn">
<input type="radio" ng-model="climate" name="options" value="clear" />
<span>Clear</span>
</label>
<label class="btn">
<input type="radio" ng-model="climate" name="options" value="thunderstorm" />
<span>Thunderstrom</span>
</label>
<label class="btn">
<input type="radio" ng-model="climate" name="options" value="snow" />
<span>Snow</span>
</label>
<p class="power">I'm giving you the power to change the season. Go ahead. Try it.</p>
</div>
<hr>
<p class="text-center credit">Coded By <a href="https://github.com/venkateshwaran" target="_blank">Venkat</a></p>
<p class="text-center credit">Inspired By <a href="https://codepen.io/fbrz/pen/iqtlk" target="_blank">Fabrizio Bianchi</a></p>
</div>
</body>
Raw
script.js
var weatherApp = angular.module('weatherApp', []);
weatherApp.factory('config', [function() {
var config = {};
var api = {
key: "34875098579ef572342736e829413e70"
};
config = api;
return config;
}]);
weatherApp.factory('authFact', ["$http", "config", function($http, config) {
var authFact = config;
authFact.getWeather = function(city) {
var self = this;
var units = "&units=metric";
var appID = "&appid=" + self.key;
return $http({
method: 'GET',
url: 'http://api.openweathermap.org/data/2.5/weather?q=' + city + appID + units
});
};
authFact.getLocation = function() {
return $http({
method: 'GET',
url: 'http://ipinfo.io/json'
});
};
//authFact.$inject = ['$http'];
return authFact;
}]);
weatherApp.controller('weatherCtrl', ['$scope', 'authFact', function($scope, authFact) {
$scope.config = authFact;
$scope.temperature = {};
$scope.weatherMetric = true;
authFact.getLocation().success(function(response) {
$scope.locationData = response;
$scope.locationData.city = response.city + ',' + response.country;
authFact.getWeather($scope.locationData.city).success(function(response) {
$scope.weatherDetails = response;
$scope.temperature.cel = $scope.weatherDetails.main.temp;
$scope.temperature.temp = $scope.temperature.cel;
$scope.weatherDetails.unit = 'C';
$scope.temperature.description = $scope.weatherDetails.weather[0].main.toLowerCase();
$scope.backGround = ($scope.temperature.description);
$scope.manualChoice($scope.temperature.description);
});
});
$scope.changeMetric = function(metric) {
if (!metric) {
$scope.temperature.temp = ($scope.temperature.cel * 9) / 5 + 32;
$scope.weatherDetails.unit = 'F';
$scope.manualChoice($scope.temperature.description);
return $scope.temperature.temp;
}
$scope.weatherDetails.unit = 'C';
$scope.temperature.temp = $scope.temperature.cel;
$scope.manualChoice($scope.temperature.description);
return $scope.temperature.temp;
};
$scope.manualChoice = function(choice) {
console.log($scope.temperature.description);
console.log(choice);
switch (choice) {
case 'haze':
$scope.backGround = "haze";
$scope.temperature.seaSon = "sunny";
break;
case 'clouds':
$scope.backGround = "cloud";
$scope.temperature.seaSon = "cloudy";
break;
case 'rain':
$scope.backGround = "rain";
$scope.temperature.seaSon = "rainy";
break;
case 'snow':
$scope.backGround = "snow";
$scope.temperature.seaSon = "snowy";
break;
case 'clear':
$scope.backGround = "clear";
$scope.temperature.seaSon = "starry";
break;
case 'thunderstorm':
$scope.backGround = "thunderstorm";
$scope.temperature.seaSon = "stormy";
break;
default:
$scope.backGround = "haze";
$scope.temperature.seaSon = "sunny";
}
};
}]);
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
Raw
style.css
body {
font-family: 'Roboto';
color: #fff;
}
.status p {
font-size: 1.8em;
text-transform: capitalize;
}
.degree {
display: inline-block;
font-size: 45px !important;
}
.credit {
color: #333;
}
.power {
color: #bfbfbf;
font-size: 0.8em;
}
header {
margin-bottom: 30px;
}
.temp {
color: #fff;
}
.main {
width: 600px;
padding: 20px;
position: relative;
margin: 30px auto;
box-shadow: 2px 3.464px 8px 0 rgba(39, 44, 49, 0.12), 8px 13.856px 38px 0 rgba(39, 44, 49, 0.08);
border-radius: 3px;
}
.main.haze {
background: #00BBFF;
}
.main.cloud {
background: #237596;
}
.main.clear {
background: #222233;
}
.main.thunderstorm {
background: #444;
}
.main.snow {
background: #85db8c;
}
.main.rain {
background: #e6e6e6;
}
h1 {
font-size: 5em;
}
.onoffswitch {
position: relative;
width: 90px;
vertical-align: text-bottom;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
margin: 0 auto;
text-align: left;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
margin-bottom: 0;
position: relative;
border: 2px solid #999999;
border-radius: 20px;
}
.onoffswitch-inner {
display: block;
width: 200%;
margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before,
.onoffswitch-inner:after {
display: block;
float: left;
width: 50%;
height: 30px;
padding: 0;
line-height: 30px;
font-size: 15px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "°C";
padding-left: 10px;
background-color: #ED1C24;
color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "°F";
padding-right: 10px;
background-color: #EEEEEE;
color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 20px;
margin: 5px;
background: #FFFFFF;
position: absolute;
top: 0;
bottom: 0;
right: 56px;
border: 2px solid #999999;
border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
/* SUNNY */
.sunny {
animation: sunny 15s linear infinite;
background: linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
height: 140px;
width: 20px;
margin-left: -30%;
position: absolute;
left: 50%;
top: 20px;
}
.sunny:before {
background: linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
content: '';
height: 140px;
width: 20px;
opacity: 1;
position: absolute;
bottom: 0px;
left: 0px;
transform: rotate(90deg);
}
.sunny:after {
background: #FFEE44;
border-radius: 50%;
box-shadow: rgba(255, 255, 0, 0.2) 0 0 0 15px;
content: '';
height: 80px;
width: 80px;
position: absolute;
left: -30px;
top: 30px;
}
@keyframes sunny {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* CLOUDY */
.cloudy {
animation: cloudy 5s ease-in-out infinite;
background: #FFFFFF;
border-radius: 50%;
box-shadow: #FFFFFF 65px -15px 0 -5px, #FFFFFF 25px -25px, #FFFFFF 30px 10px, #FFFFFF 60px 15px 0 -10px, #FFFFFF 85px 5px 0 -5px;
height: 50px;
width: 50px;
margin-left: -35%;
position: absolute;
left: 50%;
top: 70px;
}
.cloudy:after {
animation: cloudy_shadow 5s ease-in-out infinite;
background: #000000;
border-radius: 50%;
content: '';
height: 15px;
width: 120px;
opacity: 0.2;
position: absolute;
left: 5px;
bottom: -60px;
transform: scale(1);
}
@keyframes cloudy {
50% {
transform: translateY(-20px);
}
}
@keyframes cloudy_shadow {
50% {
transform: translateY(20px) scale(.7);
opacity: .05;
}
}
/* RAINY */
.rainy {
animation: rainy 5s ease-in-out infinite 1s;
background: #CCCCCC;
border-radius: 50%;
box-shadow: #CCCCCC 65px -15px 0 -5px, #CCCCCC 25px -25px, #CCCCCC 30px 10px, #CCCCCC 60px 15px 0 -10px, #CCCCCC 85px 5px 0 -5px;
display: block;
height: 50px;
width: 50px;
margin-left: -35%;
position: absolute;
left: 50%;
top: 70px;
}
.rainy:after {
animation: rainy_shadow 5s ease-in-out infinite 1s;
background: #000000;
border-radius: 50%;
content: '';
height: 15px;
width: 120px;
opacity: 0.2;
position: absolute;
left: 5px;
bottom: -60px;
transform: scale(1);
}
.rainy:before {
animation: rainy_rain .7s infinite linear;
content: '';
background: #CCCCCC;
border-radius: 50%;
display: block;
height: 6px;
width: 3px;
opacity: 0.3;
transform: scale(.9);
}
@keyframes rainy {
50% {
transform: translateY(-20px);
}
}
@keyframes rainy_shadow {
50% {
transform: translateY(20px) scale(.7);
opacity: 0.05;
}
}
@keyframes rainy_rain {
0% {
box-shadow: rgba(0, 0, 0, 0) 30px 30px, rgba(0, 0, 0, 0) 40px 40px, #000 50px 75px, #000 55px 50px, #000 70px 100px, #000 80px 95px, #000 110px 45px, #000 90px 35px;
}
25% {
box-shadow: #000 30px 45px, #000 40px 60px, #000 50px 90px, #000 55px 65px, rgba(0, 0, 0, 0) 70px 120px, rgba(0, 0, 0, 0) 80px 120px, #000 110px 70px, #000 90px 60px;
}
26% {
box-shadow: #000 30px 45px, #000 40px 60px, #000 50px 90px, #000 55px 65px, rgba(0, 0, 0, 0) 70px 40px, rgba(0, 0, 0, 0) 80px 20px, #000 110px 70px, #000 90px 60px;
}
50% {
box-shadow: #000 30px 70px, #000 40px 80px, rgba(0, 0, 0, 0) 50px 100px, #000 55px 80px, #000 70px 60px, #000 80px 45px, #000 110px 95px, #000 90px 85px;
}
51% {
box-shadow: #000 30px 70px, #000 40px 80px, rgba(0, 0, 0, 0) 50px 45px, #000 55px 80px, #000 70px 60px, #000 80px 45px, #000 110px 95px, #000 90px 85px;
}
75% {
box-shadow: #000 30px 95px, #000 40px 100px, #000 50px 60px, rgba(0, 0, 0, 0) 55px 95px, #000 70px 80px, #000 80px 70px, rgba(0, 0, 0, 0) 110px 120px, rgba(0, 0, 0, 0) 90px 110px;
}
76% {
box-shadow: #000 30px 95px, #000 40px 100px, #000 50px 60px, rgba(0, 0, 0, 0) 55px 35px, #000 70px 80px, #000 80px 70px, rgba(0, 0, 0, 0) 110px 25px, rgba(0, 0, 0, 0) 90px 15px;
}
100% {
box-shadow: rgba(0, 0, 0, 0) 30px 120px, rgba(0, 0, 0, 0) 40px 120px, #000 50px 75px, #000 55px 50px, #000 70px 100px, #000 80px 95px, #000 110px 45px, #000 90px 35px;
}
}
/* RAINBOW */
.rainbow {
animation: rainbow 5s ease-in-out infinite;
border-radius: 170px 0 0 0;
box-shadow: #FB323C -2px -2px 0 1px, #F99716 -4px -4px 0 3px, #FEE124 -6px -6px 0 5px, #AFDF2E -8px -8px 0 7px, #6AD7F8 -10px -10px 0 9px, #60B1F5 -12px -12px 0 11px, #A3459B -14px -14px 0 13px;
height: 70px;
width: 70px;
margin-left: -35%;
position: absolute;
left: 50%;
top: 71px;
transform: rotate(40deg);
}
.rainbow:after {
animation: rainbow_shadow 5s ease-in-out infinite;
background: #000000;
border-radius: 50%;
content: '';
opacity: 0.2;
height: 15px;
width: 120px;
position: absolute;
bottom: -23px;
left: 17px;
transform: rotate(-40deg);
transform-origin: 50% 50%;
}
@keyframes rainbow {
50% {
transform: rotate(50deg);
}
}
@keyframes rainbow_shadow {
50% {
transform: rotate(-50deg) translate(10px) scale(.7);
opacity: 0.05;
}
}
/* STARRY */
.starry {
animation: starry_star 5s ease-in-out infinite;
background: #fff;
border-radius: 50%;
box-shadow: #FFFFFF 26px 7px 0 -1px, rgba(255, 255, 255, 0.1) -36px -19px 0 -1px, rgba(255, 255, 255, 0.1) -51px -34px 0 -1px, #FFFFFF -52px -62px 0 -1px, #FFFFFF 14px -37px, rgba(255, 255, 255, 0.1) 41px -19px, #FFFFFF 34px -50px, rgba(255, 255, 255, 0.1) 14px -71px 0 -1px, #FFFFFF 64px -21px 0 -1px, rgba(255, 255, 255, 0.1) 32px -85px 0 -1px, #FFFFFF 64px -90px, rgba(255, 255, 255, 0.1) 60px -67px 0 -1px, #FFFFFF 34px -127px, rgba(255, 255, 255, 0.1) -26px -103px 0 -1px;
height: 4px;
width: 4px;
margin-left: -30%;
opacity: 1;
position: absolute;
left: 50%;
top: 150px;
}
.starry:after {
animation: starry 5s ease-in-out infinite;
border-radius: 50%;
box-shadow: #FFFFFF -25px 0;
content: '';
height: 100px;
width: 100px;
position: absolute;
top: -106px;
transform: rotate(-5deg);
transform-origin: 0 50%;
}
@keyframes starry {
50% {
transform: rotate(10deg);
}
}
@keyframes starry_star {
50% {
box-shadow: rgba(255, 255, 255, 0.1) 26px 7px 0 -1px, #FFFFFF -36px -19px 0 -1px, #FFFFFF -51px -34px 0 -1px, rgba(255, 255, 255, 0.1) -52px -62px 0 -1px, rgba(255, 255, 255, 0.1) 14px -37px, #FFFFFF 41px -19px, rgba(255, 255, 255, 0.1) 34px -50px, #FFFFFF 14px -71px 0 -1px, rgba(255, 255, 255, 0.1) 64px -21px 0 -1px, #FFFFFF 32px -85px 0 -1px, rgba(255, 255, 255, 0.1) 64px -90px, #FFFFFF 60px -67px 0 -1px, rgba(255, 255, 255, 0.1) 34px -127px, #FFFFFF -26px -103px 0 -1px;
}
}
/* STORMY */
.stormy {
animation: stormy 5s ease-in-out infinite;
background: #222222;
border-radius: 50%;
box-shadow: #222222 65px -15px 0 -5px, #222222 25px -25px, #222222 30px 10px, #222222 60px 15px 0 -10px, #222222 85px 5px 0 -5px;
height: 50px;
width: 50px;
margin-left: -35%;
position: absolute;
left: 50%;
top: 70px;
}
.stormy:after {
animation: stormy_shadow 5s ease-in-out infinite;
background: #000;
border-radius: 50%;
content: '';
height: 15px;
width: 120px;
opacity: 0.2;
position: absolute;
left: 5px;
bottom: -60px;
transform: scale(1);
}
.stormy:before {
animation: stormy_thunder 2s steps(1, end) infinite;
border-left: 0px solid transparent;
border-right: 7px solid transparent;
border-top: 43px solid yellow;
box-shadow: yellow -7px -32px;
content: '';
display: block;
height: 0;
width: 0;
position: absolute;
left: 57px;
top: 70px;
transform: rotate(14deg);
transform-origin: 50% -60px;
}
@keyframes stormy {
50% {
transform: translateY(-20px);
}
}
@keyframes stormy_shadow {
50% {
transform: translateY(20px) scale(.7);
opacity: 0.05;
}
}
@keyframes stormy_thunder {
0% {
transform: rotate(20deg);
opacity: 1;
}
5% {
transform: rotate(-34deg);
opacity: 1;
}
10% {
transform: rotate(0deg);
opacity: 1;
}
15% {
transform: rotate(-34deg);
opacity: 0;
}
}
/* SNOWY */
.snowy {
animation: snowy 5s ease-in-out infinite 1s;
background: #FFFFFF;
border-radius: 50%;
box-shadow: #FFFFFF 65px -15px 0 -5px, #FFFFFF 25px -25px, #FFFFFF 30px 10px, #FFFFFF 60px 15px 0 -10px, #FFFFFF 85px 5px 0 -5px;
display: block;
height: 50px;
width: 50px;
margin-left: -35%;
position: absolute;
left: 50%;
top: 70px;
}
.snowy:after {
animation: snowy_shadow 5s ease-in-out infinite 1s;
background: #000000;
border-radius: 50%;
content: '';
height: 15px;
width: 120px;
opacity: 0.2;
position: absolute;
left: 8px;
bottom: -60px;
transform: scale(1);
}
.snowy:before {
animation: snowy_snow 2s infinite linear;
content: '';
border-radius: 50%;
display: block;
height: 7px;
width: 7px;
opacity: 0.8;
transform: scale(.9);
}
@keyframes snowy {
50% {
transform: translateY(-20px);
}
}
@keyframes snowy_shadow {
50% {
transform: translateY(20px) scale(.7);
opacity: 0.05;
}
}
@keyframes snowy_snow {
0% {
box-shadow: rgba(238, 238, 238, 0) 30px 30px, rgba(238, 238, 238, 0) 40px 40px, #EEEEEE 50px 75px, #EEEEEE 55px 50px, #EEEEEE 70px 100px, #EEEEEE 80px 95px, #EEEEEE 110px 45px, #EEEEEE 90px 35px;
}
25% {
box-shadow: #EEEEEE 30px 45px, #EEEEEE 40px 60px, #EEEEEE 50px 90px, #EEEEEE 55px 65px, rgba(238, 238, 238, 0) 70px 120px, rgba(238, 238, 238, 0) 80px 120px, #EEEEEE 110px 70px, #EEEEEE 90px 60px;
}
26% {
box-shadow: #EEEEEE 30px 45px, #EEEEEE 40px 60px, #EEEEEE 50px 90px, #EEEEEE 55px 65px, rgba(238, 238, 238, 0) 70px 40px, rgba(238, 238, 238, 0) 80px 20px, #EEEEEE 110px 70px, #EEEEEE 90px 60px;
}
50% {
box-shadow: #EEEEEE 30px 70px, #EEEEEE 40px 80px, rgba(238, 238, 238, 0) 50px 100px, #EEEEEE 55px 80px, #EEEEEE 70px 60px, #EEEEEE 80px 45px, #EEEEEE 110px 95px, #EEEEEE 90px 85px;
}
51% {
box-shadow: #EEEEEE 30px 70px, #EEEEEE 40px 80px, rgba(238, 238, 238, 0) 50px 45px, #EEEEEE 55px 80px, #EEEEEE 70px 60px, #EEEEEE 80px 45px, #EEEEEE 110px 95px, #EEEEEE 90px 85px;
}
75% {
box-shadow: #EEEEEE 30px 95px, #EEEEEE 40px 100px, #EEEEEE 50px 60px, rgba(238, 238, 238, 0) 55px 95px, #EEEEEE 70px 80px, #EEEEEE 80px 70px, rgba(238, 238, 238, 0) 110px 120px, rgba(238, 238, 238, 0) 90px 110px;
}
76% {
box-shadow: #EEEEEE 30px 95px, #EEEEEE 40px 100px, #EEEEEE 50px 60px, rgba(238, 238, 238, 0) 55px 35px, #EEEEEE 70px 80px, #EEEEEE 80px 70px, rgba(238, 238, 238, 0) 110px 25px, rgba(238, 238, 238, 0) 90px 15px;
}
100% {
box-shadow: rgba(238, 238, 238, 0) 30px 120px, rgba(238, 238, 238, 0) 40px 120px, #EEEEEE 50px 75px, #EEEEEE 55px 50px, #EEEEEE 70px 100px, #EEEEEE 80px 95px, #EEEEEE 110px 45px, #EEEEEE 90px 35px;
}
}
.btn-group {
width: 600px;
margin: 0 auto;
display: block;
text-align: center;
}
label.btn span {
font-size: 1em;
}
label input[type="radio"] ~ i.fa.fa-circle-o {
color: #c8c8c8;
display: inline;
font-size: 1em;
}
label input[type="radio"] ~ i.fa.fa-dot-circle-o {
display: none;
font-size: 1em;
}
label input[type="radio"]:checked ~ i.fa.fa-circle-o {
display: none;
}
label input[type="radio"]:checked ~ i.fa.fa-dot-circle-o {
color: #7AA3CC;
display: inline;
}
label:hover input[type="radio"] ~ i.fa {
color: #7AA3CC;
}
label input[type="checkbox"] ~ i.fa.fa-square-o {
color: #c8c8c8;
display: inline;
}
label input[type="checkbox"] ~ i.fa.fa-check-square-o {
display: none;
}
label input[type="checkbox"]:checked ~ i.fa.fa-square-o {
display: none;
}
label input[type="checkbox"]:checked ~ i.fa.fa-check-square-o {
color: #7AA3CC;
display: inline;
}
label:hover input[type="checkbox"] ~ i.fa {
color: #7AA3CC;
}
div.switch-climate label.active {
color: #7AA3CC;
}
div.switch-climate label {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 2em;
text-align: left;
white-space: nowrap;
vertical-align: top;
cursor: pointer;
background-color: none;
border: 0px solid #c8c8c8;
border-radius: 3px;
color: #c8c8c8;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
div.switch-climate label:hover {
color: #7AA3CC;
}
div.switch-climate label:active,
div.switch-climate label.active {
-webkit-box-shadow: none;
box-shadow: none;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/1.3.2/css/weather-icons.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment