1,272 public/index.html
View file
@@ -32,16 +32,61 @@
app.controller('maincontroller', function($scope, $http) {

//Function that loads data from url
$scope.loadData = function() {
$http.get("https://obscure-waters-1317.herokuapp.com/posts/update")
$scope.loadMainData = function() {
$http.get("https://www.reddit.com/r/leagueoflegends+teslamotors+spacex.json")
.success(function(data) {
$scope.names = data;
});
};

//Function that loads data from Tesla url
$scope.loadteslaData = function() {
$http.get("https://www.reddit.com/r/teslamotors.json")
.success(function(data) {
$scope.names = data;
});
};

//Function that loads data from League of Legends url
$scope.loadleagueData = function() {
$http.get("https://www.reddit.com/r/leagueoflegends.json")
.success(function(data) {
$scope.names = data;
});
};

$scope.loadSpaceXData = function() {
$http.get("https://www.reddit.com/r/spacex.json")
.success(function(data) {
$scope.names = data;
});
};

//Initial load
$scope.loadData();
$scope.loadMainData();


});

app.directive('loading', ['$http', function($http) {
return {
restrict: 'A',
link: function(scope, elm, attrs) {
scope.isLoading = function() {
return $http.pendingRequests.length > 0;
};

scope.$watch(scope.isLoading, function(v) {
if (v) {
elm.show();
} else {
elm.hide();
}
});
}
};

}]);
</script>

<head>
@@ -71,7 +116,6 @@
border-top: 1px solid grey;
border-bottom: 1px solid grey;
border-color: #E4E4E4;

}

#scroll:hover {
@@ -192,15 +236,15 @@
z-index: 1;
overflow: hidden;
transition-property: background border width height box-shadow;
transition-duration: 0.05s;
transition-duration: 0.075s;
transition-timing-function: ease-in-out;
cursor: pointer;
}

.mdl-frontpagecard:hover {
background: #fafafa;


border: 1px solid;
border-color: rgba(250, 87, 5, 0.31);
}

.cardcontainer {
@@ -215,6 +259,7 @@
padding-top: 3px;
overflow: hidden;
margin-left: 15px;
margin-bottom: 6px;
}

.derp {
@@ -237,7 +282,6 @@
border: 1px solid rgba(0, 0, 0, 0.11);
overflow: hidden;
right: 0;

}

.derp2 {
@@ -266,7 +310,7 @@
}

.derp2:hover {
background-color:#fafafa;
background-color: #fafafa;
}

#circle1 {
@@ -289,48 +333,48 @@
width: 100%;
}

.deft{
border-bottom-color: rgb(136, 153, 166);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-style: none;
border-bottom-width: 0px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(136, 153, 166);
border-left-style: none;
border-left-width: 0px;
border-right-color: rgb(136, 153, 166);
border-right-style: none;
border-right-width: 0px;
border-top-color: rgb(136, 153, 166);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-top-style: none;
border-top-width: 0px;
color: rgb(136, 153, 166);
cursor: auto;
display: inline-block;
float: left;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
height: 48px;
width: 48px;
line-height: 18px;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin-left: -58px;
margin-top: 3px;
text-align: start;
z-index: 12;
.deft {
border-bottom-color: rgb(136, 153, 166);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-style: none;
border-bottom-width: 0px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(136, 153, 166);
border-left-style: none;
border-left-width: 0px;
border-right-color: rgb(136, 153, 166);
border-right-style: none;
border-right-width: 0px;
border-top-color: rgb(136, 153, 166);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-top-style: none;
border-top-width: 0px;
color: rgb(136, 153, 166);
cursor: auto;
display: inline-block;
float: left;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
height: 48px;
width: 48px;
line-height: 18px;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin-left: -58px;
margin-top: 3px;
text-align: start;
z-index: 12;
}

.mdl-card__titleblack {
color: #333333;
color: black;
font-size: 15px;
font-weight: 300;
margin-top: 5px;
@@ -347,7 +391,7 @@
line-height: 5px;
padding-top: 10px;
margin-left: 53px;
padding-bottom: 13px;
margin-bottom: 5px;
width: 100%
}

@@ -380,8 +424,6 @@
background-color: #F2F2F2
}



.headertime {
color: black;
font-weight: lighter;
@@ -470,7 +512,7 @@
}

.postimage {
width: 485px;
min-width: 485px;
height: 300px;
margin: 13px;
margin-left: 40px;
@@ -479,13 +521,32 @@
z-index: 9997;
}

.postimagetravis {
width: 546px;
height: 310px;
margin-left: 23px;
margin-bottom: 20px;
margin-top: 10px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.18);
.imagediv {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
max-width: 500px;
max-height: 250px;
margin-left: 69px;
margin-bottom: 5px;
margin-top: 15px;
display: block;
overflow: hidden;
border: 1px solid lightgrey;
}

.imageclass {
object-fit: contain;
max-width: 100%;
max-height: 100%;


}

.backtotop {
@@ -565,18 +626,14 @@
z-index: 3;
background-color: white;
color: #fff;
box-shadow: 0 1px 2px rgba(199, 195, 195, 0.94);
box-shadow: 0 1px 2px rgba(110, 110, 110, 0.40);
transition-property: max-height, box-shadow;
transition-duration: 0.15s;
transition-timing-function: ease-in-out;
-webkit-backdrop-filter: blur(7px);

}

.mdl-layout__header2:hover{


}
.mdl-layout__header2:hover {}

.mdl-layout__header-row2 {
display: -webkit-box;
@@ -609,28 +666,28 @@
margin-left: auto;
margin-right: auto;
background-color: white;
color: #005D7D;
color: rgb(250, 87, 5);
}

.mdl-layout-title2 {
display: block;
position: relative;
font-family: "Futura", "Trebuchet MS", "Arial", sans-serif;
font-family: "tahoma", "Trebuchet MS", "Arial", sans-serif;
font-size: 20px;
line-height: 1;
text-align: left;
letter-spacing: .02em;
font-weight: 500;
box-sizing: border-box;
color: #2c3741 ;
color: rgb(250, 87, 5);
}

.mdl-layout-title2:hover {
text-decoration: none;
}

.mdl-navigation__link2 {
color: rgb(94, 94, 94);
color: rgb(250, 87, 5);
font-family: "Futura", "Trebuchet MS", "Arial", sans-serif;
text-decoration: none;
font-size: 14px;
@@ -714,23 +771,21 @@
overflow: hidden;
border-radius: 2px;
border: 1px solid;
border-color: #e4e3e3;
border-color: #e4e3e3;
cursor: pointer;
transition-property: background border width height box-shadow;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
color:#6b6969;
color: #6b6969;
}
.searchbackground:hover {
background-color: #ffffff;

}
.mdl-button--accent.mdl-button--accent.mdl-button--raised {
background-color: #F4F4F4;
color: #eeeeee;
}

.subject{
.subject {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -740,58 +795,51 @@
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
width:100%;
min-height:30px;
width: 100%;
min-height: 30px;
-webkit-backdrop-filter: blur(7px);
background-color:#f5f5f5;
position:relative;
background-color: #f5f5f5;
position: relative;
padding-top: 11px;
z-index: 10;
overflow: hidden;
transition-property: box-shadow;
transition-duration: 0.15s;
transition-timing-function: ease-in-out;

}

.subject:hover{

}

.feedtitle{
.subject:hover {}
.feedtitle {
font-size: 14px;
padding-left: 0px;
font-family: futura;
cursor: default;
color: rgb(94, 94, 94);
display: inline;
}

.feedtitlesources{
.feedtitlesources {
font-size: 12px;
font-weight: 500px;
padding-left: 50px;
font-family: futura;
cursor: white;
color: rgb(94, 94, 94);
}

.feedtitlesourcesnames{
.feedtitlesourcesnames {
font-size: 11px;
font-weight: 500px;
padding-left: 50px;
color: rgb(94, 94, 94);
font-family:helvetica;
font-family: helvetica;
cursor: pointer;
}

.feedtitlesourcesnames:hover{
.feedtitlesourcesnames:hover {
color: #cccccc;
}

.titlefeedcontainer{
width: 1234px;margin: 0;
.titlefeedcontainer {
width: 1234px;
margin: 0;
padding-left: 65px;
text-align:left;
text-align: left;
margin-left: auto;
margin-right: auto;
display: -webkit-box;
@@ -818,932 +866,254 @@
-ms-flex-align: center;
align-items: center;
}

.sourceimage{
display:inline-block;
float:left;
width: 35px;
height: 35px;
margin-left:15px;
margin-top:5px;
border: 1px solid lightgrey;
border-radius:2px;
}


.sourceimage {
display: inline-block;
float: left;
width: 35px;
height: 35px;
margin-left: 15px;
margin-top: 5px;
border: 1px solid lightgrey;
border-radius: 2px;
}
</style>

</head>
<!-- Nav bar-->
<!-- Nav bar-->

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">

<header class="mdl-layout__header2 shadow">
<div style="background-color: #005D7D; height:2px; width:100%"></div>
<div class="mdl-layout__header-row2">
<!-- Title -->
<a class="mdl-layout-title2" href="/">Watch</a>
<div class="searchbackground">
<span class="search mdl-js-ripple-effect">Search For Something</span>
</div>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation. We hide it in small screens. -->
<nav class="mdl-navigation mdl">
<div class="mdl-navigation__link2" style="color:#005D7D" tabindex="0"> Dashboard</div>
<div class="mdl-navigation__link2" tabindex="0"> Settings</div>
<div class="mdl-navigation__link2" tabindex="0"> Profile</div>
<button class="mdl-button2 mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" style='background-color: #005D7D;
color: white; font-weight:bolder; box-shadow: 0 0 0 0' ng-click="loadData() ">Update</button>
</nav>
<header class="mdl-layout__header2 shadow">
<div style="background-color: rgb(250, 87, 5); height:2px; width:100%"></div>
<div class="mdl-layout__header-row2">
<!-- Title -->
<a class="mdl-layout-title2" href="/">DARWIN</a>
<div class="searchbackground">
<span class="search mdl-js-ripple-effect">Search For Something</span>
</div>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation. We hide it in small screens. -->
<nav class="mdl-navigation mdl">
<div class="mdl-navigation__link2" style="color:rgb(250, 87, 5)" tabindex="0"> Dashboard</div>
<div class="mdl-navigation__link2" tabindex="0"> Settings</div>
<div class="mdl-navigation__link2" tabindex="0"> Profile</div>
<button class="mdl-button2 mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" style='background-color: rgb(250, 87, 5);
color: white; font-weight:bolder; box-shadow: 0 0 0 0' ng-click="loadMainData() ">Update</button>
</nav>
</div>
<div class="subject">
<div class="titlefeedcontainer">
<div class="feedtitle">Global</div>
<span class="feedtitlesources">Sources</span>
<span class="feedtitlesourcesnames">Reddit</span>
<span class="feedtitlesourcesnames">Surrender@20</span>
<span class="feedtitlesourcesnames">Op.gg</span>
<span class="feedtitlesourcesnames">Lolesports</span>
<span class="feedtitlesourcesnames">leagueoflegends.com</span>
<span class="feedtitlesourcesnames">replay.gg</span>
<span class="feedtitlesourcesnames">twitch.tv</span>
<span class="feedtitlesourcesnames">more</span>
</div>
<div class="subject">
<div class="titlefeedcontainer">
<span class="feedtitle">Global</span>
<span class="feedtitlesources">Sources</span>
<span class="feedtitlesourcesnames">Reddit</span>
<span class="feedtitlesourcesnames">Surrender@20</span>
<span class="feedtitlesourcesnames">Op.gg</span>
<span class="feedtitlesourcesnames">Lolesports</span>
<span class="feedtitlesourcesnames">leagueoflegends.com</span>
<span class="feedtitlesourcesnames">replay.gg</span>
<span class="feedtitlesourcesnames">twitch.tv</span>
<span class="feedtitlesourcesnames">more</span>
</div>
</div>


</header>


<!-- Start of main content-->

<body>
<main class="mdl-layout__content">
<script>
$(document).ready(function() {
$("#hide").click(function() {
$("p").hide();
});
$("#show").click(function() {
$("p").show();
});
});
</script>

<!-- Stickie section title-->
<div class="frontp">
<div class="mdl-grid containee">

<div class=" mdl-cell--2-col-desktop" >
<div style="position:fixed;">
<div class="derp2">
<div class="mdl-card__titleblack" style="margin:10px; font-size:13px; padding-left:10px; padding-top:5px;">Subjects
<!--<button id="hide">Hide</button><button id="show">show</button>-->
</div>
<div style="padding-left:10px; border-top: 1px solid lightgrey">
<p style="margin:10px; display:none;">Tesla Motors
<span style="padding-left:5px; font-size:10px;">edit</span>
</p>
<p style="margin:10px; display:none;">Tesla Motors
<span style="padding-left:5px; font-size:10px;">edit</span>
</p>
<p style="margin:10px; display:none;">Tesla Motors
<span style="padding-left:5px; font-size:10px;">edit</span>
</p>
<p style="margin:10px; display:none;">Tesla Motors
<span style="padding-left:5px; font-size:10px;">edit</span>
</p>
<p style="margin:10px;display:none;">Tesla Motors
<span style="padding-left:5px; font-size:10px;">edit</span>
</p>
</div>

</div>

<div class="derp2">
<div class="mdl-card__titleblack" style="margin:10px; font-size:13px; padding-left:10px; padding-top:5px;">What's going on?</div>
</div>
<div class="derp2">
<div class="mdl-card__titleblack" style="margin:10px; font-size:13px; padding-left:10px; padding-top:5px;">Live Events</div>
</div>
<div class="derp2">
<div class="basesignature1" style="padding:10px; padding-left:20px; text-align:left;"> Funnel © 2015
<span style="padding-left:20px;">Developed by Romario Coffie</span>
</div>
</div>
</div>
</div>



<div class=" mdl-cell--6-col-desktop " style="margin-left: 76px;">
<!-- Sticky post number 1-->
<div class="mdl-frontpagecard">
<div class="cardcontainer">
<img class="sourceimage" src="http://www1.pcmag.com/media/images/391545-reddit-logo.jpg?thumb=y" alt="">
<div class="mdl-card__titleblack">
<div style="font-size:10px; font-weight:bolder; color:#606060 margin-bottom:10px;">
<span style="">/r/leagueoflegends</span>
<span style=" margin-left:5px;font-size: 9px">{{ names[0].time }}</span>
</div>
<a ng-href="{{ names[0].link }}">{{ names[0].title }}</a>
</div>
<div class="commentcontainer">
<div class="mdl-card__supportingblack ">
<span><a ng-href="{{ names[0].link }}">BuckeyeSundae[M]</a></span>
<span class="fpcomment"><a ng-href="{{ names[0].link }}">{{ names[0].comments }}</a></span>

</div>
</div>
</div>
</div>



<div class="mdl-frontpagecard">
<div class="cardcontainer">
<img class="sourceimage" src="http://www1.pcmag.com/media/images/391545-reddit-logo.jpg?thumb=y" alt="">
<div class="mdl-card__titleblack">
<div style="font-size:10px; font-weight:bolder; color:#606060 margin-bottom:5px;">
<span style="padding-bottom:25px;">/r/leagueoflegends</span>
<span style="margin-left:5px; font-size: 9px">{{ names[1].time }}</span>
</div>
<a ng-href="{{ names[1].link }}">{{ names[1].title }}</a>
</div>
<div class="commentcontainer">
<div class="mdl-card__supportingblack ">
<span><a ng-href="{{ names[1].link }}">BuckeyeSundae[M]</a></span>
<span class="fpcomment"><a ng-href="{{ names[1].link }}">{{ names[1].comments }}</a></span>


</div>
</div>
</div>
</div>


<!-- frontpage post number 1-->
<div class="mdl-frontpagecard">
<div class="cardcontainer">
<img class="sourceimage" src="http://www1.pcmag.com/media/images/391545-reddit-logo.jpg?thumb=y" alt="">
<div class="mdl-card__titleblack">
<div style="font-size:10px; font-weight:bolder; color:#606060 margin-bottom:5px;">
<span style="padding-bottom:25px;">/r/leagueoflegends</span>
<span style="margin-left:5px; font-size: 9px">{{ names[2].time }}</span>
</div>
<a ng-href="{{ names[2].link }}">{{ names[2].title }}</a>
</div>
<div class="commentcontainer">
<div class="mdl-card__supportingblack ">
<span><a ng-href="{{ names[2].link }}">BuckeyeSundae[M]</a></span>
<span class="fpcomment"><a ng-href="{{ names[2].link }}">{{ names[2].comments }}</a></span>


</div>
</div>
</div>
</div>


<!-- frontpage post number 1-->
<div class="mdl-frontpagecard">
<div class="cardcontainer">
<img class="sourceimage" src="http://www1.pcmag.com/media/images/391545-reddit-logo.jpg?thumb=y" alt="">
<div class="mdl-card__titleblack">
<div style="font-size:10px; font-weight:bolder; color:#606060 margin-bottom:5px;">
<span style="padding-bottom:25px;">/r/leagueoflegends</span>
<span style="margin-left:5px; font-size: 9px">{{ names[3].time }}</span>
</div>
<a ng-href="{{ names[3].link }}">{{ names[3].title }}</a>
</div>
<div class="commentcontainer">
<div class="mdl-card__supportingblack ">
<span><a ng-href="{{ names[3].link }}">BuckeyeSundae[M]</a></span>
<span class="fpcomment"><a ng-href="{{ names[3].link }}">{{ names[3].comments }}</a></span>


</div>
</div>
</div>
</div>

<!-- video card
<div class="mdl-frontpagecard">
<div class="cardcontainer">
<div class="mdl-card__titleblack">
<a href="https://www.reddit.com/r/leagueoflegends">NEW CHAMP SELECT - Break out your best champs in your favorite roles. With new champ select, everyone is on the same page before the draft even begins.</a>
</div>
<div class="commentcontainer">
<div class="mdl-card__supportingblack">
<a href="https://www.reddit.com/r/leagueoflegends">MooBeat</a>
<span class="fpcomment">16 comments</span>
<span class="mdl-card__supportingblack">Surrender@20<span>
<span class="postcardtime">5 hours ago<span>
</div>
</div>
<iframe class="postimage" src="https://www.youtube.com/embed/Qe4hMva5R3c" frameborder="0" allowfullscreen></iframe>
</div>
</div>
-->

<!-- front page post number 2-->
<div class="mdl-frontpagecard">
<div class="cardcontainer">
<img class="sourceimage" src="http://www1.pcmag.com/media/images/391545-reddit-logo.jpg?thumb=y" alt="">
<div class="mdl-card__titleblack">
<div style="font-size:10px; font-weight:bolder; color:#606060 margin-bottom:5px;">
<span style="padding-bottom:25px;">/r/leagueoflegends</span>
<span style="margin-left:5px; font-size: 9px">{{ names[4].time }}</span>
</div>
<a ng-href="{{ names[4].link }}">{{ names[4].title }}</a>
</div>
<div class="commentcontainer">
<div class="mdl-card__supportingblack ">
<span><a ng-href="{{ names[4].link }}">BuckeyeSundae[M]</a></span>
<span class="fpcomment"><a ng-href="{{ names[4].link }}">{{ names[4].comments }}</a></span>


</div>
</div>
</div>
</div>

<!-- front page post number 2-->
<div class="mdl-frontpagecard">
<div class="cardcontainer">
<img class="sourceimage" src="http://www1.pcmag.com/media/images/391545-reddit-logo.jpg?thumb=y" alt="">
<div class="mdl-card__titleblack">
<div style="font-size:10px; font-weight:bolder; color:#606060 margin-bottom:5px;">
<span style="padding-bottom:25px;">/r/leagueoflegends</span>
<span style="margin-left:5px; font-size: 9px">{{ names[5].time }}</span>
</div>
<a ng-href="{{ names[5].link }}">{{ names[5].title }}</a>
</div>
<div class="commentcontainer">
<div class="mdl-card__supportingblack ">
<span><a ng-href="{{ names[5].link }}">BuckeyeSundae[M]</a></span>
<span class="fpcomment"><a ng-href="{{ names[5].link }}">{{ names[5].comments }}</a></span>


</div>
</div>
</div>
</div>

<!-- front page post number 2-->
<div class="mdl-frontpagecard">
<div class="cardcontainer">
<img class="sourceimage" src="http://www1.pcmag.com/media/images/391545-reddit-logo.jpg?thumb=y" alt="">
<div class="mdl-card__titleblack">
<div style="font-size:10px; font-weight:bolder; color:#606060 margin-bottom:5px;">
<span style="padding-bottom:25px;">/r/leagueoflegends</span>
<span style="margin-left:5px; font-size: 9px">{{ names[6].time }}</span>
</div>
<a ng-href="{{ names[6].link }}">{{ names[6].title }}</a>
</div>
<div class="commentcontainer">
<div class="mdl-card__supportingblack ">
<span><a ng-href="{{ names[6].link }}">BuckeyeSundae[M]</a></span>
<span class="fpcomment"><a ng-href="{{ names[6].link }}">{{ names[6].comments }}</a></span>


</div>
</div>
</div>
</div>

<!-- front page post number 2-->
<div class="mdl-frontpagecard">
<div class="cardcontainer">
<img class="sourceimage" src="http://www1.pcmag.com/media/images/391545-reddit-logo.jpg?thumb=y" alt="">
<div class="mdl-card__titleblack">
<div style="font-size:10px; font-weight:bolder; color:#606060 margin-bottom:5px;">
<span style="padding-bottom:25px;">/r/leagueoflegends</span>
<span style="margin-left:5px; font-size: 9px">{{ names[7].time }}</span>
</div>
<a ng-href="{{ names[7].link }}">{{ names[7].title }}</a>
</div>
<div class="commentcontainer">
<div class="mdl-card__supportingblack ">
<span><a ng-href="{{ names[7].link }}">BuckeyeSundae[M]</a></span>
<span class="fpcomment"><a ng-href="{{ names[7].link }}">{{ names[7].comments }}</a></span>


</div>
</div>
</div>
</div>

<!-- front page post number 2-->
<div class="mdl-frontpagecard">
<div class="cardcontainer">
<img class="sourceimage" src="http://www1.pcmag.com/media/images/391545-reddit-logo.jpg?thumb=y" alt="">
<div class="mdl-card__titleblack">
<div style="font-size:10px; font-weight:bolder; color:#606060 margin-bottom:5px;">
<span style="padding-bottom:25px;">/r/leagueoflegends</span>
<span style="margin-left:5px; font-size: 9px">{{ names[8].time }}</span>
</div>
<a ng-href="{{ names[8].link }}">{{ names[8].title }}</a>
</div>
<div class="commentcontainer">
<div class="mdl-card__supportingblack ">
<span><a ng-href="{{ names[8].link }}">BuckeyeSundae[M]</a></span>
<span class="fpcomment"><a ng-href="{{ names[8].link }}">{{ names[8].comments }}</a></span>


</header>


<!-- Start of main content-->

<body>
<main class="mdl-layout__content">

<!-- Stickie section title-->
<div class="frontp">
<div class="mdl-grid containee">

<div class=" mdl-cell--2-col-desktop">
<div style="position:fixed;">
<div class="derp2">
<div class="mdl-card__titleblack" style="margin:10px; font-size:13px; padding-left:10px; padding-top:5px;">Favourites
<!--<button id="hide">Hide</button><button id="show">show</button>-->

<div style="padding-left:10px; border-top: 1px solid lightgrey" ng-show="show">
<p style="margin:10px; display:none;">Tesla Motors
<span style="padding-left:5px; font-size:10px;">edit</span>
</p>
<p style="margin:10px; display:none;">Tesla Motors
<span style="padding-left:5px; font-size:10px;">edit</span>
</p>
<p style="margin:10px; display:none;">Tesla Motors
<span style="padding-left:5px; font-size:10px;">edit</span>
</p>
<p style="margin:10px; display:none;">Tesla Motors
<span style="padding-left:5px; font-size:10px;">edit</span>
</p>
<p style="margin:10px;display:none;">Tesla Motors
<span style="padding-left:5px; font-size:10px;">edit</span>
</p>
</div>
</div>
</div>
</div>
</div>

<!-- front page post number 2-->
<div class="mdl-frontpagecard">
<div class="cardcontainer">
<img class="sourceimage" src="http://www1.pcmag.com/media/images/391545-reddit-logo.jpg?thumb=y" alt="">
<div class="mdl-card__titleblack">
<div style="font-size:10px; font-weight:bolder; color:#606060 margin-bottom:5px;">
<span style="padding-bottom:25px;">/r/leagueoflegends</span>
<span style="margin-left:5px; font-size: 9px">{{ names[9].time }}</span>
</div>
<a ng-href="{{ names[9].link }}">{{ names[9].title }}</a>
</div>
<div class="commentcontainer">
<div class="mdl-card__supportingblack ">
<span><a ng-href="{{ names[9].link }}">BuckeyeSundae[9]</a></span>
<span class="fpcomment"><a ng-href="{{ names[9].link }}">{{ names[9].comments }}</a></span>


</div>
<div class="derp2">
<div class="mdl-card__titleblack" style="margin:10px; font-size:13px; padding-left:10px; padding-top:5px;">What's going on?</div>
</div>
</div>
</div>

<!-- front page post number 2-->
<div class="mdl-frontpagecard">
<div class="cardcontainer">
<img class="sourceimage" src="http://www1.pcmag.com/media/images/391545-reddit-logo.jpg?thumb=y" alt="">
<div class="mdl-card__titleblack">
<div style="font-size:10px; font-weight:bolder; color:#606060 margin-bottom:5px;">
<span style="padding-bottom:25px;">/r/leagueoflegends</span>
<span style="margin-left:5px; font-size: 9px">{{ names[10].time }}</span>
</div>
<a ng-href="{{ names[10].link }}">{{ names[10].title }}</a>
<div class="derp2">
<div class="mdl-card__titleblack" style="margin:10px; font-size:13px; padding-left:10px; padding-top:5px;">Live Events</div>
</div>
<div class="commentcontainer">
<div class="mdl-card__supportingblack ">
<span><a ng-href="{{ names[10].link }}">BuckeyeSundae[M]</a></span>
<span class="fpcomment"><a ng-href="{{ names[10].link }}">{{ names[10].comments }}</a></span>


<div class="derp2">
<div class="basesignature1" style="padding:10px; padding-left:20px; text-align:left;"> Funnel © 2015
<span style="padding-left:20px;">Developed by Romario Coffie</span>
</div>
</div>
</div>
</div>

<!-- front page post number 2-->
<div class="mdl-frontpagecard">
<div class="cardcontainer">
<img class="sourceimage" src="http://www1.pcmag.com/media/images/391545-reddit-logo.jpg?thumb=y" alt="">
<div class="mdl-card__titleblack">
<div style="font-size:10px; font-weight:bolder; color:#606060 margin-bottom:5px;">
<span style="padding-bottom:25px;">/r/leagueoflegends</span>
<span style="margin-left:5px; font-size: 9px">{{ names[11].time }}</span>
</div>
<a ng-href="{{ names[11].link }}">{{ names[11].title }}</a>
</div>
<div class="commentcontainer">
<div class="mdl-card__supportingblack ">
<span><a ng-href="{{ names[11].link }}">BuckeyeSundae[M]</a></span>
<span class="fpcomment"><a ng-href="{{ names[11].link }}">{{ names[11].comments }}</a></span>


</div>
</div>
</div>
</div>

<!-- front page post number 2-->
<div class="mdl-frontpagecard">
<div class="cardcontainer">
<img class="sourceimage" src="http://www1.pcmag.com/media/images/391545-reddit-logo.jpg?thumb=y" alt="">
<div class="mdl-card__titleblack">
<div style="font-size:10px; font-weight:bolder; color:#606060 margin-bottom:5px;">
<span style="padding-bottom:25px;">/r/leagueoflegends</span>
<span style="margin-left:5px; font-size: 9px">{{ names[12].time }}</span>
</div>
<a ng-href="{{ names[12].link }}">{{ names[12].title }}</a>
</div>
<div class="commentcontainer">
<div class="mdl-card__supportingblack ">
<span><a ng-href="{{ names[12].link }}">BuckeyeSundae[M]</a></span>
<span class="fpcomment"><a ng-href="{{ names[12].link }}">{{ names[12].comments }}</a></span>
<div class=" mdl-cell--6-col-desktop " style="margin-left: 76px;">

<!-- Loadering icon-->
<div id="p2" class="mdl-progress mdl-js-progress mdl-progress__indeterminate" style="display:none"></div>

<!-- Post card -->
<div class="mdl-frontpagecard" ng-repeat="count in [0,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]">
<div class="cardcontainer">
<img class="sourceimage" src="http://www1.pcmag.com/media/images/391545-reddit-logo.jpg?thumb=y" alt="">
<div class="mdl-card__titleblack">
<div style="font-size:10px; font-weight:bolder; color:#909090; margin-bottom:5px;">
<span style="">subreddit: {{ names.data.children[count].data.subreddit }}</span>
<span style=" margin-left:5px;font-size: 10px;">upvotes: {{ names.data.children[count].data.ups }}</span>
</div>
<a ng-href="https://www.reddit.com{{ names.data.children[count].data.permalink }}">{{ names.data.children[count].data.title }}</a>
</div>
</div>
</div>
</div>

<!-- front page post number 2-->
<div class="mdl-frontpagecard">
<div class="cardcontainer">
<img class="sourceimage" src="http://www1.pcmag.com/media/images/391545-reddit-logo.jpg?thumb=y" alt="">
<div class="mdl-card__titleblack">
<div style="font-size:10px; font-weight:bolder; color:#606060 margin-bottom:5px;">
<span style="padding-bottom:25px;">/r/leagueoflegends</span>
<span style="margin-left:5px; font-size: 9px">{{ names[13].time }}</span>
<div class="imagediv" ng-hide="!names.data.children[count].data.preview.images[0].source.url">
<a ng-href="{{ names.data.children[count].data.url}}">
<img ng-src="{{names.data.children[count].data.preview.images[0].source.url}}" class="imageclass">
</a>
</div>
<a ng-href="{{ names[13].link }}">{{ names[13].title }}</a>
</div>
<div class="commentcontainer">
<div class="mdl-card__supportingblack ">
<span><a ng-href="{{ names[13].link }}">BuckeyeSundae[M]</a></span>
<span class="fpcomment"><a ng-href="{{ names[13].link }}">{{ names[13].comments }}</a></span>


<div class="commentcontainer">
<div class="mdl-card__supportingblack ">
<div style="display:inline;"><a ng-href="https://www.reddit.com{{ names.data.children[count].data.permalink }}">Author: {{ names.data.children[count].data.author }}</a></div>
<span class="fpcomment"><a ng-href="https://www.reddit.com{{ names.data.children[count].data.permalink }}">{{ names.data.children[count].data.num_comments }} comments</a></span>
</div>
</div>
</div>
</div>
</div>

<!-- front page post number 2-->
<div class="mdl-frontpagecard">
<div class="cardcontainer">
<img class="sourceimage" src="http://www1.pcmag.com/media/images/391545-reddit-logo.jpg?thumb=y" alt="">
<div class="mdl-card__titleblack">
<div style="font-size:10px; font-weight:bolder; color:#606060 margin-bottom:5px;">
<span style="padding-bottom:25px;">/r/leagueoflegends</span>
<span style="margin-left:5px; font-size: 9px">{{ names[14].time }}</span>
</div>
<a ng-href="{{ names[14].link }}">{{ names[14].title }}</a>
</div>
<div class="commentcontainer">
<div class="mdl-card__supportingblack ">
<span><a ng-href="{{ names[14].link }}">BuckeyeSundae[M]</a></span>
<span class="fpcomment"><a ng-href="{{ names[14].link }}">{{ names[14].comments }}</a></span>


</div>
</div>
</div>
<!--
**video**
</div>
<iframe class="postimage" src="https://www.youtube.com/embed/Qe4hMva5R3c" frameborder="0" allowfullscreen></iframe>
<!-- front page post number 2-->
<div class="mdl-frontpagecard">
<div class="cardcontainer">
<img class="sourceimage" src="http://www1.pcmag.com/media/images/391545-reddit-logo.jpg?thumb=y" alt="">
<div class="mdl-card__titleblack">
<div style="font-size:10px; font-weight:bolder; color:#606060 margin-bottom:5px;">
<span style="padding-bottom:25px;">/r/leagueoflegends</span>
<span style="margin-left:5px; font-size: 9px">{{ names[15].time }}</span>
</div>
<a ng-href="{{ names[15].link }}">{{ names[15].title }}</a>
</div>
<div class="commentcontainer">
<div class="mdl-card__supportingblack ">
<span><a ng-href="{{ names[15].link }}">BuckeyeSundae[M]</a></span>
<span class="fpcomment"><a ng-href="{{ names[15].link }}">{{ names[15].comments }}</a></span>


</div>
</div>
</div>
</div>

<!-- front page post number 2-->
<div class="mdl-frontpagecard">
<div class="cardcontainer">
<img class="sourceimage" src="http://www1.pcmag.com/media/images/391545-reddit-logo.jpg?thumb=y" alt="">
<div class="mdl-card__titleblack">
<div style="font-size:10px; font-weight:bolder; color:#606060 margin-bottom:5px;">
<span style="padding-bottom:25px;">/r/leagueoflegends</span>
<span style="margin-left:5px; font-size: 9px">{{ names[16].time }}</span>
</div>
<a ng-href="{{ names[16].link }}">{{ names[16].title }}</a>
</div>
<div class="commentcontainer">
<div class="mdl-card__supportingblack ">
<span><a ng-href="{{ names[16].link }}">BuckeyeSundae[M]</a></span>
<span class="fpcomment"><a ng-href="{{ names[16].link }}">{{ names[16].comments }}</a></span>


</div>
-->
</div>
</div>
</div>

<!-- front page post number 2-->
<div class="mdl-frontpagecard">
<div class="cardcontainer">
<img class="sourceimage" src="http://www1.pcmag.com/media/images/391545-reddit-logo.jpg?thumb=y" alt="">
<div class="mdl-card__titleblack">
<div style="font-size:10px; font-weight:bolder; color:#606060 margin-bottom:5px;">
<span style="padding-bottom:25px;">/r/leagueoflegends</span>
<span style="margin-left:5px; font-size: 9px">{{ names[17].time }}</span>
</div>
<a ng-href="{{ names[17].link }}">{{ names[17].title }}</a>
</div>
<div class="commentcontainer">
<div class="mdl-card__supportingblack ">
<span><a ng-href="{{ names[17].link }}">BuckeyeSundae[17]</a></span>
<span class="fpcomment"><a ng-href="{{ names[17].link }}">{{ names[17].comments }}</a></span>


</div>
</div>
</div>
</div>

<!-- front page post number 2-->
<div class="mdl-frontpagecard">
<div class="cardcontainer">
<img class="sourceimage" src="http://www1.pcmag.com/media/images/391545-reddit-logo.jpg?thumb=y" alt="">
<div class="mdl-card__titleblack">
<div style="font-size:10px; font-weight:bolder; color:#606060 margin-bottom:5px;">
<span style="padding-bottom:25px;">/r/leagueoflegends</span>
<span style="margin-left:5px; font-size: 9px">{{ names[18].time }}</span>
</div>
<a ng-href="{{ names[18].link }}">{{ names[18].title }}</a>
</div>
<div class="commentcontainer">
<div class="mdl-card__supportingblack ">
<span><a ng-href="{{ names[18].link }}">BuckeyeSundae[M]</a></span>
<span class="fpcomment"><a ng-href="{{ names[18].link }}">{{ names[18].comments }}</a></span>


<!-- Subjects-->
<div class="mdl-cell--3-col-desktop">
<div class="derp" id="toolbox">
<div class="updateheader">Subject Updates</div>
<div id="scroll">
<div class="updatetopics">
<span>
<a href="/">Team Solo Mid</a>
</span>
</div>
</div>
</div>
</div>

<!-- front page post number 2-->
<div class="mdl-frontpagecard">
<div class="cardcontainer">
<img class="sourceimage" src="http://www1.pcmag.com/media/images/391545-reddit-logo.jpg?thumb=y" alt="">
<div class="mdl-card__titleblack">
<div style="font-size:10px; font-weight:bolder; color:#606060 margin-bottom:5px;">
<span style="padding-bottom:25px;">/r/leagueoflegends</span>
<span style="margin-left:5px; font-size: 9px">{{ names[19].time }}</span>
<div class="updatetopics">
<span>
<a href="/">Xer0</a>
</span>
</div>
<a ng-href="{{ names[19].link }}">{{ names[19].title }}</a>
</div>
<div class="commentcontainer">
<div class="mdl-card__supportingblack ">
<span><a ng-href="{{ names[19].link }}">BuckeyeSundae[M]</a></span>
<span class="fpcomment"><a ng-href="{{ names[19].link }}">{{ names[19].comments }}</a></span>


<div class="updatetopics">
<span>
<a href="/">Jamaica</a>
</span>
</div>
</div>
</div>
</div>

<!-- front page post number 2-->
<div class="mdl-frontpagecard">
<div class="cardcontainer">
<img class="sourceimage" src="http://www1.pcmag.com/media/images/391545-reddit-logo.jpg?thumb=y" alt="">
<div class="mdl-card__titleblack">
<div style="font-size:10px; font-weight:bolder; color:#606060 margin-bottom:5px;">
<span style="padding-bottom:25px;">/r/leagueoflegends</span>
<span style="margin-left:5px; font-size: 9px">{{ names[20].time }}</span>
</div>
<a ng-href="{{ names[20].link }}">{{ names[20].title }}</a>
</div>
<div class="commentcontainer">
<div class="mdl-card__supportingblack ">
<span><a ng-href="{{ names[20].link }}">BuckeyeSundae[M]</a></span>
<span class="fpcomment"><a ng-href="{{ names[20].link }}">{{ names[20].comments }}</a></span>


<div class="updatetopics">
<span>
<a ng-click="loadleagueData()" style="color:darkblue">League of Legends</a>
</span>
</div>
</div>
</div>
</div>

<!-- front page post number 2-->
<div class="mdl-frontpagecard">
<div class="cardcontainer">
<img class="sourceimage" src="http://www1.pcmag.com/media/images/391545-reddit-logo.jpg?thumb=y" alt="">
<div class="mdl-card__titleblack">
<div style="font-size:10px; font-weight:bolder; color:#606060 margin-bottom:5px;">
<span style="padding-bottom:25px;">/r/leagueoflegends</span>
<span style="margin-left:5px; font-size: 9px">{{ names[21].time }}</span>
<div class="updatetopics">
<span>
<a href="/">Google</a>
</span>
</div>
<a ng-href="{{ names[21].link }}">{{ names[21].title }}</a>
</div>
<div class="commentcontainer">
<div class="mdl-card__supportingblack ">
<span><a ng-href="{{ names[21].link }}">BuckeyeSundae[M]</a></span>
<span class="fpcomment"><a ng-href="{{ names[21].link }}">{{ names[21].comments }}</a></span>


<div class="updatetopics">
<span>
<a ng-click="loadteslaData()" style="color:darkblue">Tesla Motors</a>
</span>
</div>
</div>
</div>
</div>

<!-- front page post number 2-->
<div class="mdl-frontpagecard">
<div class="cardcontainer">
<img class="sourceimage" src="http://www1.pcmag.com/media/images/391545-reddit-logo.jpg?thumb=y" alt="">
<div class="mdl-card__titleblack">
<div style="font-size:10px; font-weight:bolder; color:#606060 margin-bottom:5px;">
<span style="padding-bottom:25px;">/r/leagueoflegends</span>
<span style="margin-left:5px; font-size: 9px">{{ names[22].time }}</span>
<div class="updatetopics">
<span>
<a href="/">Bernie Sanders</a>
</span>
</div>
<a ng-href="{{ names[22].link }}">{{ names[22].title }}</a>
</div>
<div class="commentcontainer">
<div class="mdl-card__supportingblack ">
<span><a ng-href="{{ names[22].link }}">BuckeyeSundae[M]</a></span>
<span class="fpcomment"><a ng-href="{{ names[22].link }}">{{ names[22].comments }}</a></span>


<div class="updatetopics">
<span>
<a href="/">Apple</a>
</span>
</div>
</div>
</div>
</div>

<!-- front page post number 2-->
<div class="mdl-frontpagecard">
<div class="cardcontainer">
<img class="sourceimage" src="http://www1.pcmag.com/media/images/391545-reddit-logo.jpg?thumb=y" alt="">
<div class="mdl-card__titleblack">
<div style="font-size:10px; font-weight:bolder; color:#606060 margin-bottom:5px;">
<span style="padding-bottom:25px;">/r/leagueoflegends</span>
<span style="margin-left:5px; font-size: 9px">{{ names[23].time }}</span>
<div class="updatetopics">
<span>
<a ng-click="loadSpaceXData()" style="color:darkblue">Space X</a>
</span>
</div>
<a ng-href="{{ names[23].link }}">{{ names[23].title }}</a>
</div>
<div class="commentcontainer">
<div class="mdl-card__supportingblack ">
<span><a ng-href="{{ names[23].link }}">BuckeyeSundae[M]</a></span>
<span class="fpcomment"><a ng-href="{{ names[23].link }}">{{ names[23].comments }}</a></span>


<div class="updatetopics">
<span>
<a href="/">Elon Musk</a>
</span>
</div>
</div>
</div>
</div>

<!-- front page post number 2-->
<div class="mdl-frontpagecard">
<div class="cardcontainer">
<img class="sourceimage" src="http://www1.pcmag.com/media/images/391545-reddit-logo.jpg?thumb=y" alt="">
<div class="mdl-card__titleblack">
<div style="font-size:10px; font-weight:bolder; color:#606060 margin-bottom:5px;">
<span style="padding-bottom:25px;">/r/leagueoflegends</span>
<span style="margin-left:5px; font-size: 9px">{{ names[23].time }}</span>
<div class="updatetopics">
<span>
<a href="/">Late Night Show</a>
</span>
</div>
<a ng-href="{{ names[24].link }}">{{ names[24].title }}</a>
</div>
<div class="commentcontainer">
<div class="mdl-card__supportingblack ">
<span><a ng-href="{{ names[24].link }}">BuckeyeSundae[M]</a></span>
<span class="fpcomment"><a ng-href="{{ names[24].link }}">{{ names[24].comments }}</a></span>


<div class="updatetopics">
<span>
<a href="/">One Punch Man</a>
</span>
</div>
</div>
</div>
</div>

<!-- front page post number 2-->
<div class="mdl-frontpagecard">
<div class="cardcontainer">
<img class="sourceimage" src="http://www1.pcmag.com/media/images/391545-reddit-logo.jpg?thumb=y" alt="">
<div class="mdl-card__titleblack">
<div style="font-size:10px; font-weight:bolder; color:#606060 margin-bottom:5px;">
<span style="padding-bottom:25px;">/r/leagueoflegends</span>
<span style="margin-left:5px; font-size: 9px">{{ names[25].time }}</span>
<div class="updatetopics">
<span>
<a href="/">Limitless</a>
</span>
</div>
<a ng-href="{{ names[25].link }}">{{ names[25].title }}</a>
</div>
<div class="commentcontainer">
<div class="mdl-card__supportingblack ">
<span><a ng-href="{{ names[25].link }}">BuckeyeSundae[M]</a></span>
<span class="fpcomment"><a ng-href="{{ names[25].link }}">{{ names[25].comments }}</a></span>


<div class="updatetopics">
<span>
<a href="/">SKT Faker</a>
</span>
</div>
</div>
</div>
</div>

<!-- front page post number 2-->
<div class="mdl-frontpagecard">
<div class="cardcontainer">
<img class="sourceimage" src="http://www1.pcmag.com/media/images/391545-reddit-logo.jpg?thumb=y" alt="">
<div class="mdl-card__titleblack">
<div style="font-size:10px; font-weight:bolder; color:#606060 margin-bottom:5px;">
<span style="padding-bottom:25px;">/r/leagueoflegends</span>
<span style="margin-left:5px; font-size: 9px">{{ names[26].time }}</span>
</div>
<a ng-href="{{ names[26].link }}">{{ names[26].title }}</a>
</div>
<div class="commentcontainer">
<div class="mdl-card__supportingblack ">
<span><a ng-href="{{ names[26].link }}">BuckeyeSundae[26]</a></span>
<span class="fpcomment"><a ng-href="{{ names[26].link }}">{{ names[26].comments }}</a></span>
<div class="updatetopics">
<span>

<a href="/">Silicon Valley</a>

</span>
</div>
</div>
</div>
</div>


<!-- vpicture card
<div class="mdl-frontpagecard">
<div class="cardcontainer">
<div class="mdl-card__titleblack">
<a href="https://www.reddit.com/r/leagueoflegends">[Inven] Inven reacts to Deilor's interview with Travis, "I thought we had a really good chance against SKT"</a>
</div>
<div class="mdl-card__supportingblack">
<a href="https://www.reddit.com/r/leagueoflegends"> KoreanExplanation</a>
<span class="fpcomment">1853 comments</span>
<span class="mdl-card__supportingblack">/r/leagueoflegends<span>
<span class="postcardtime">5 hours ago<span>
</div>
<img src="http://static1.gamespot.com/uploads/screen_kubrick/1490/14900166/2955970-brussels_deilor_20151025.jpg" class="postimagetravis">
</div>
</div>
-->
</div>

<!-- Front page post number 11-->
<div class="mdl-cell--3-col-desktop">
<div class="derp" id="toolbox">
<div class="updateheader">Updates - Favorites</div>
<div id="scroll">
<div class="updatetopics">
<span>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" style="display:inline-block; position:relative" for="checkbox-1">
<!--<span class="settingsicon"></span>-->
<input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked>
<a href="/">Team Solo Mid</a>
</label>
</span>
</div>

<div class="updatetopics">
<span>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" style="display:inline-block; position:relative" for="checkbox-2">
<!--<span class="settingsicon"></span>-->
<input type="checkbox" id="checkbox-2" class="mdl-checkbox__input" checked>
<a href="/">Xer0</a>
</label>
</span>
</div>

<div class="updatetopics">
<span>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" style="display:inline-block; position:relative" for="checkbox-3">
<!--<span class="settingsicon"></span>-->
<input type="checkbox" id="checkbox-3" class="mdl-checkbox__input" checked>
<a href="/">Jamaica</a>
</label>
</span>
</div>

<div class="updatetopics">
<span>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" style="display:inline-block; position:relative" for="checkbox-4">
<!--<span class="settingsicon"></span>-->
<input type="checkbox" id="checkbox-4" class="mdl-checkbox__input" checked>
<a href="/">League of Legends</a>
</label>
</span>
</div>

<div class="updatetopics">
<span>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" style="display:inline-block; position:relative" for="checkbox-5">
<!--<span class="settingsicon"></span>-->
<input type="checkbox" id="checkbox-5" class="mdl-checkbox__input" checked>
<a href="/">Google</a>
</label>
</span>
</div>

<div class="updatetopics">
<span>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" style="display:inline-block; position:relative" for="checkbox-6">
<!--<span class="settingsicon"></span>-->
<input type="checkbox" id="checkbox-6" class="mdl-checkbox__input" checked>
<a href="/">Elon Musk</a>
</label>
</span>
</div>

<div class="updatetopics">
<span>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" style="display:inline-block; position:relative" for="checkbox-7">
<!--<span class="settingsicon"></span>-->
<input type="checkbox" id="checkbox-7" class="mdl-checkbox__input" checked>
<a href="/">Bernie Sanders</a>
</label>
</span>
</div>

<div class="updatetopics">
<span>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" style="display:inline-block; position:relative" for="checkbox-8">
<!--<span class="settingsicon"></span>-->
<input type="checkbox" id="checkbox-8" class="mdl-checkbox__input" checked>
<a href="/">Apple</a>
</label>
</span>
</div>

<div class="updatetopics">
<span>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" style="display:inline-block; position:relative" for="checkbox-9">
<!--<span class="settingsicon"></span>-->
<input type="checkbox" id="checkbox-9" class="mdl-checkbox__input" checked>
<a href="/">Space X</a>
</label>
</span>
</div>

<div class="updatetopics">
<span>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" style="display:inline-block; position:relative" for="checkbox-10">
<!--<span class="settingsicon"></span>-->
<input type="checkbox" id="checkbox-10" class="mdl-checkbox__input" checked>
<a href="/">Tesla Motors</a>
</label>
</span>
</div>

<div class="updatetopics">
<span>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" style="display:inline-block; position:relative" for="checkbox-11">
<!--<span class="settingsicon"></span>-->
<input type="checkbox" id="checkbox-11" class="mdl-checkbox__input" checked>
<a href="/">Late Night Show</a>
</label>
</span>
</div>

<div class="updatetopics">
<span>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" style="display:inline-block; position:relative" for="checkbox-12">
<!--<span class="settingsicon"></span>-->
<input type="checkbox" id="checkbox-12" class="mdl-checkbox__input" checked>
<a href="/">One Punch Man</a>
</label>
</span>
</div>

<div class="updatetopics">
<span>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" style="display:inline-block; position:relative" for="checkbox-13">
<!--<span class="settingsicon"></span>-->
<input type="checkbox" id="checkbox-13" class="mdl-checkbox__input" checked>
<a href="/">Limitless</a>
</label>
</span>
</div>

<div class="updatetopics">
<span>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" style="display:inline-block; position:relative" for="checkbox-14">
<!--<span class="settingsicon"></span>-->
<input type="checkbox" id="checkbox-14" class="mdl-checkbox__input" checked>
<a href="/">SKT Faker</a>
</label>
</span>
</div>

<div class="updatetopics">
<span>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" style="display:inline-block; position:relative" for="checkbox-15">
<!--<span class="settingsicon"></span>-->
<input type="checkbox" id="checkbox-15" class="mdl-checkbox__input" checked>
<a href="/">Silicon Valley</a>
</label>
</span>
</div>
</div>
</div>
</div>
<!--
<div class="mdel-cell mdl-cell--2-col fixed"><div class="derp"></div></div>
-->
</div>

</div>

</div>
</main>



<!--<div id="footer"></div>-->
</main>
</body>

<script>