Enigmatrix/index.html

## index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8">
    <title>MEMEMEMEMEMEMEMEMEM</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script>
    <script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
    <link href="main.css" rel="stylesheet">
<style id="jsbin-css">
body {
    width: 500px;
    margin: 0 auto;
}
.stuff{
  display:inline-block;
}
.stuffimg{
  width:100px;
  height:100px;
  vertical-align: middle;

}
.ratestuff{
  width:300px;
  margin:5px;
  }
button{
  box-shadow:5px 5px 2px black;
  background:radial-gradient(orange, red);
    color: white;
}
button:hover{
  background:linear-gradient(orange, red);
}
button:active{
  background:radial-gradient(aqua, blue);
}
</style>
</head>
<body ng-controller="MemeController as memeCtrl">
    <section>
        <h1>DANK MEMES</h1>
        <ul>
            <li ng-repeat="memedat in memes">
                <img class="stuffimg" ng-src="{{memedat.imagesrc}}" alt="{{memedat.imagesrc}}">
                <h3 class="stuff">{{memedat.text}}</h3>
            </li>
        </ul>
    </section>
    <section>
        <h2>SUBMIT YOUR OWN DANK MEMES!</h2>
        <input class="ratestuff" type="url" placeholder="PUT A DANK IMAGE SRC HERE" ng-model="imagesrc" /><br>
        <input class="ratestuff" type="text" placeholder="PUT YOUR DANK TEXT HERE" ng-model="text" /><br>
        <button ng-click="addMeme()">SUBMIT YOUR SWAG!</button>
    </section>
    <script>
        var app = angular.module("app", ["firebase"]);
        app.controller("MemeController", ["$scope", "$firebaseArray", function ($scope, $firebaseArray) {
            var ref = new Firebase("https://radiant-inferno-9173.firebaseio.com/");

            $scope.memes = $firebaseArray(ref);

            $scope.addMeme = function () {
                var meme = {
                    //name: $scope.name,
                    text: $scope.text,
                    imagesrc: $scope.imagesrc,
                    //currentrating: 0
                };
                $scope.memes.$add(meme);

            }

        }]);
    </script>


<script id="jsbin-source-css" type="text/css">body {
    width: 500px;
    margin: 0 auto;
}
.stuff{
  display:inline-block;
}
.stuffimg{
  width:100px;
  height:100px;
  vertical-align: middle;

}
.ratestuff{
  width:300px;
  margin:5px;
  }
button{
  box-shadow:5px 5px 2px black;
  background:radial-gradient(orange, red);
    color: white;
}
button:hover{
  background:linear-gradient(orange, red);
}
button:active{
  background:radial-gradient(aqua, blue);
}</script>
</body>
</html>

## jsbin.yusifo.css
body {
    width: 500px;
    margin: 0 auto;
}
.stuff{
  display:inline-block;
}
.stuffimg{
  width:100px;
  height:100px;
  vertical-align: middle;

}
.ratestuff{
  width:300px;
  margin:5px;
  }
button{
  box-shadow:5px 5px 2px black;
  background:radial-gradient(orange, red);
    color: white;
}
button:hover{
  background:linear-gradient(orange, red);
}
button:active{
  background:radial-gradient(aqua, blue);
}
	<!DOCTYPE html>
	<html ng-app="app">
	<head>
	<meta charset="utf-8">
	<title>MEMEMEMEMEMEMEMEMEM</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
	<script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script>
	<script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
	<link href="main.css" rel="stylesheet">
	<style id="jsbin-css">
	body {
	width: 500px;
	margin: 0 auto;
	}
	.stuff{
	display:inline-block;
	}
	.stuffimg{
	width:100px;
	height:100px;
	vertical-align: middle;

	}
	.ratestuff{
	width:300px;
	margin:5px;
	}
	button{
	box-shadow:5px 5px 2px black;
	background:radial-gradient(orange, red);
	color: white;
	}
	button:hover{
	background:linear-gradient(orange, red);
	}
	button:active{
	background:radial-gradient(aqua, blue);
	}
	</style>
	</head>
	<body ng-controller="MemeController as memeCtrl">
	<section>
	<h1>DANK MEMES</h1>
	<ul>
	<li ng-repeat="memedat in memes">
	<img class="stuffimg" ng-src="{{memedat.imagesrc}}" alt="{{memedat.imagesrc}}">
	<h3 class="stuff">{{memedat.text}}</h3>
	</li>
	</ul>
	</section>
	<section>
	<h2>SUBMIT YOUR OWN DANK MEMES!</h2>
	<input class="ratestuff" type="url" placeholder="PUT A DANK IMAGE SRC HERE" ng-model="imagesrc" /><br>
	<input class="ratestuff" type="text" placeholder="PUT YOUR DANK TEXT HERE" ng-model="text" /><br>
	<button ng-click="addMeme()">SUBMIT YOUR SWAG!</button>
	</section>
	<script>
	var app = angular.module("app", ["firebase"]);
	app.controller("MemeController", ["$scope", "$firebaseArray", function ($scope, $firebaseArray) {
	var ref = new Firebase("https://radiant-inferno-9173.firebaseio.com/");

	$scope.memes = $firebaseArray(ref);

	$scope.addMeme = function () {
	var meme = {
	//name: $scope.name,
	text: $scope.text,
	imagesrc: $scope.imagesrc,
	//currentrating: 0
	};
	$scope.memes.$add(meme);

	}

	}]);
	</script>


	<script id="jsbin-source-css" type="text/css">body {
	width: 500px;
	margin: 0 auto;
	}
	.stuff{
	display:inline-block;
	}
	.stuffimg{
	width:100px;
	height:100px;
	vertical-align: middle;

	}
	.ratestuff{
	width:300px;
	margin:5px;
	}
	button{
	box-shadow:5px 5px 2px black;
	background:radial-gradient(orange, red);
	color: white;
	}
	button:hover{
	background:linear-gradient(orange, red);
	}
	button:active{
	background:radial-gradient(aqua, blue);
	}</script>
	</body>
	</html>