Skip to content

Instantly share code, notes, and snippets.

@benthebear

benthebear/one-with-art.html

Last active August 29, 2015 14:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save benthebear/7c4a38f1330661c12c41 to your computer and use it in GitHub Desktop.
Save benthebear/7c4a38f1330661c12c41 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
one-with-art.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="cards.css">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Vollkorn" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<nav id="navigation">
<div class="container">
<ul class="navlinks">
<li><a href="index.html">Homepage</a></li>
<li><a href="index.html">About this project</a></li>
<li><a href="index.html">The Team</a></li>
<li><a href="index.html">Friends &amp; Family</a></li>
<li><a href="index.html">Contacts</a></li>
</ul>
</div>
</nav>
<header id="heading">
<div class="container text-center">
<h1>Your personal Museum</h1>
<h4>Become one with art!</h4>
<p><a href="index.html" class="btn btn-large btn-inverse">Open 24 hours</a></p>
</div>
</header>
<div class="container">
<div class="row">
<div class="col col-sm-12">
<div class="panel">
<div class="panel-body">
News: We are open for the public now! <span class="glyphicon glyphicon-heart-empty"></span>
</div>
</div>
<div id="wunderbar"></div>
<script id="render-newCard" type="x-tmpl-mustache">
<div class="card" style="background-image: url({{image}})">
<div class="pictureName">{{pictureName}}</div>
<div class="artist">{{artist}}</div>
<div class="year">{{year}}</div>
<img class="more" src="more.png">
<img class="share" src="share.png">
<img class="favorite" src="favorite.png">
</div>
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.1.2/mustache.min.js"></script>
<script src="cards.js"></script>
<script>
// Holding API-data.
var gallery = [];
var randomElement = '';
function getRandomElement(gallery) {
// Randomize.
var randomIndex = Math.floor((Math.random() * 161));
return gallery[randomIndex];
}
$.get('https://raw.githubusercontent.com/manuelmazzuola/muzei-google-art-project/master/app/src/main/assets/imax.json', function(data) {
gallery = JSON.parse(data);
// Call the function from the cards.js for rendering
getRandom (gallery);
});
</script>
<div id="randomness"></div>
<script id="render-newAPI" type="x-tmpl-mustache">
<div class="card" style="background-image: url({{image}})">
<div class="title">{{title}}</div>
<div class="creator">{{creator}}</div>
<div class="attribution">{{attribution}}</div>
<img class="more" src="more.png">
<img class="share" src="share.png">
<img class="favorite" src="favorite.png">
</div>
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment