Skip to content

Instantly share code, notes, and snippets.

@Tobitron
Created March 9, 2016 14:23
Show Gist options
  • Select an option

  • Save Tobitron/2b535d84cf018270750c to your computer and use it in GitHub Desktop.

Select an option

Save Tobitron/2b535d84cf018270750c to your computer and use it in GitHub Desktop.
toucantest
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>
<link href="http://www.tobiaskahn.com/seeds/toucan.css" rel="stylesheet" type='text/css'>
</head>
<body>
<div>
<div class="parent">
<div class="container">
<a href="about:close"><div class="x">x</div></a>
<div id="content-container" class="boosterScreen">
<div id="boosterScreen" >
<div class="boosterText">Booster Bundle</div>
<div class="boosterImage"> <img src="http://www.tobiaskahn.com/seeds/booster_x10.png"></div>
<p class="explanatoryText">When you buy this bundle, Seeds will lend a portion of your €1.99 purchase to an entrepreneur in the developing world.</p>
</div>
<div id="learn-more-container">
<div class="pablina">
<img src="http://www.tobiaskahn.com/seeds/pablina_image.png">
</div>
Pablina split a $60 microloan with 14 other women and used her $4 portion to create a flourishing sugarcane cake business. She was able to pay her youngest son's emergency medical bill. A portion of your purchase will help fund someone like Pablina.
</div>
</div>
<div class="button-container">
<div id="learn-more-button" class="learn-more-button"></div>
<a href="in-app-messaging-demo://seeds/testitem"><div id="buy-button"></div></a>
</div>
</div>
</div>
</body>
</html>
<script>
var boosterScreen = document.getElementById("boosterScreen")
var learnMoreButton = document.getElementById("learn-more-button")
var contentContainer = document.getElementById("content-container")
var learnMoreContainer = document.getElementById("learn-more-container")
learnMoreButton.onclick = function () {
if (contentContainer.className == 'boosterScreen') {
contentContainer.className = "learnMoreScreen"
boosterScreen.style.display = "none";
learnMoreContainer.style.display = "block";
learnMoreButton.style.backgroundImage = "url('http://www.tobiaskahn.com/seeds/back_button.png')"
} else {
contentContainer.className = "boosterScreen"
boosterScreen.style.display = "block";
learnMoreContainer.style.display = "none";
learnMoreButton.style.backgroundImage = "url('http://www.tobiaskahn.com/seeds/learn_more.png')"
};
};
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment