diff --git a/index.htm b/index.htm index 01a21d9..9fcf692 100644 --- a/index.htm +++ b/index.htm @@ -25,19 +25,22 @@
-
+
+ Like it?
+ Consider donating :)
+ +
+ +

MINECRAFT ARMORSTAND

GitHub Twitter - + + Donate +

@@ -184,7 +187,7 @@
-
+
+ Obtain a command block diff --git a/js/main.js b/js/main.js index 606a6f7..d41eeae 100644 --- a/js/main.js +++ b/js/main.js @@ -124,6 +124,29 @@ $(document).ready(function(){ } }); + // Animate donation div + var donationheight = $("#donationanim").height() * 1.5; + $("#donationanim").css({ + "transform" : "translateY(-"+donationheight+"px)", + "visibility" : "visible" + }); + + // Slide in + setTimeout(function(){ + $("#donationanim").css({ + "transform" : "translateY(0px)", + "transition" : "400ms", + }); + + // Slide out + setTimeout(function(){ + $("#donationanim").css({ + "transform" : "translateY(-"+donationheight+"px)", + }); + }, 4000); + + }, 2000); + }); function setup(){ diff --git a/style.css b/style.css index f755f2a..8b62d65 100644 --- a/style.css +++ b/style.css @@ -30,20 +30,14 @@ a{ color: #000000; } -#donate{ - width: 64px; - height: 64px; - display: inline; - position: relative; -} -#donate .colorful{ - opacity: 0; +#donationanim{ position: absolute; - left: 0; - transition: 0.5s; -} -#donate:hover .colorful{ - opacity: 1; + width: 300px; + left: 50%; + margin-left: -150px; + padding: 5px; + text-align: center; + visibility: hidden; } #gl{ @@ -54,10 +48,14 @@ a{ position: fixed; } -#card{ +.card{ background-color: #ffffff; box-shadow: 0 2px 4px #555555; margin: 0.5em; + border-radius: 3px; +} + +.right{ margin-left: 60%; } @@ -70,6 +68,7 @@ a{ padding: 1em; font-family: monospace; background-color: #37474f; + border-radius: 3px; color: #ffffff; }