diff --git a/index.html b/index.html
index 3ea5a0b5..d3883d45 100644
--- a/index.html
+++ b/index.html
@@ -107,6 +107,8 @@ <h1>Tyler's Game Hub</h1>
           <br><br>
           <a href="iceagebabyadventure">Ice Age Baby Adventure</a>
           <br><br>
+          <a href="jumpingfrogspuzzle">Jumping frogs puzzle</a>
+          <br><br>
           <a href="konnekt">Konnekt</a>
           <br><br>
           <a href="minecraft0.30">Minecraft 0.30</a>
diff --git a/jumpingfrogspuzzle/frogpuzzle.js b/jumpingfrogspuzzle/frogpuzzle.js
new file mode 100644
index 00000000..4fee026c
--- /dev/null
+++ b/jumpingfrogspuzzle/frogpuzzle.js
@@ -0,0 +1,5 @@
+(function(){function l(a,b){var c={};c.type=a;c.cell=b;return c}function m(a){a=11<a?[-.5,a+.5]:[a/2-6,a/2+6];return d3.scale.linear().domain(a).range([0,1E3])}function n(a){a=11<a?[.4-a/10,a/10+.6]:[-.7,1.7];return d3.scale.linear().domain(a).range([0,200])}function p(a){0<c+a&&(c+=a,k=2*c+1,d=m(k),e=n(k),d3.select("#numcounters").text(c+""),q(k),f.reset(c),g=0,h())}function q(a){d3.select("#grid rect").attr("x",d(0)).attr("y",e(0)).attr("width",d(a)-d(0)).attr("height",e(1)-e(0));a=r.selectAll("#grid .vert").data(d3.range(a+
+1));a.enter().append("line");a.attr("class","vert").attr("y1",e(0)).attr("y2",e(1)).attr("x1",function(a){return d(a)}).attr("x2",function(a){return d(a)});a.exit().remove()}function h(){d3.select("defs").selectAll("g").attr("transform","scale("+(d(1)-d(0))/100+")");var a=d3.select("#counterdropdown").node().value,b=d3.select("#counters").selectAll("#counters use").data(f.list);b.enter().append("use");b.attr("xlink:href",function(b){return a+b.type}).attr("y",e(0)).on("click",function(a){var b=f.findhop(a);
+-1!=b&&(a.cell=b,g++,h())}).transition().attr("x",function(a){return d(a.cell)});b.exit().remove();f.movesleft()?d3.select("#movesleft").text("YES"):d3.select("#movesleft").text("NO");d3.select("#count").text(g);d3.select("#message").html(t[g==c*(c+2)?2:f.movesleft()?0:1])}var c=3,k=2*c+1,g=0,t=["&nbsp;","Uh oh. Seems like you're stuck. Click reset to try again.","You did it! Well done!"],f={list:[],reset:function(a){this.list=[];for(var b=0;b<a;b++)this.list.push(l("A",b));for(b=a+1;b<2*a+1;b++)this.list.push(l("B",
+b))},isempty:function(a){return 0>a||a>this.list.length?!1:!this.list.some(function(b){return b.cell==a})},empty:function(){for(var a=0;a<=this.list.length;){if(isempty(a))return a;a++}},findhop:function(a){var b=0;"A"==a.type?b=1:"B"==a.type&&(b=-1);return this.isempty(a.cell+b)?a.cell+b:this.isempty(a.cell+2*b)?a.cell+2*b:-1},movesleft:function(){var a=this;return this.list.some(function(b){return-1!=a.findhop(b)})}};f.reset(c);var r=d3.select("#grid"),d=m(7),e=n(7);d3.select("#grid").append("rect");
+d3.select("#reset").on("click",function(){f.reset(c);g=0;h()});q(7);h();d3.select("#counterdropdown").on("change",function(){h()});d3.select("#up").on("click",function(){p(1)});d3.select("#down").on("click",function(){p(-1)})})();
diff --git a/jumpingfrogspuzzle/index.html b/jumpingfrogspuzzle/index.html
new file mode 100644
index 00000000..aa324b3a
--- /dev/null
+++ b/jumpingfrogspuzzle/index.html
@@ -0,0 +1,137 @@
+<!doctype html>
+<html>
+    <head>
+        <!-- Google tag (gtag.js) -->
+        <script async src="https://www.googletagmanager.com/gtag/js?id=G-KVNYG5VNX6"></script>
+        <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-KVNYG5VNX6');
+        </script>
+        <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
+        <title>Jumping Frogs Puzzle</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <style>
+            @import url(https://fonts.googleapis.com/css?family=Josefin+Sans:700|Open+Sans:700,600,300,300italic);
+            html {
+            background-color: #202124;
+            color: #ffffff;
+                 }
+            body {
+                font-family: 'Open Sans', sans-serif;
+                font-weight: 300;
+            }
+            strong {
+                font-weight:600;
+            }
+            h1, h2, h3 {
+                font-family: 'Josefin Sans', sans-serif;
+                font-weight: 400;
+            }
+            #container {
+                max-width:1000px;
+                margin: 0 auto;
+            }
+            p, ul {
+                font-size: 18px;
+            }
+            a:link {
+            color: #8ab4f8;
+             background-color: transparent;
+            text-decoration: none;
+                   }
+                   a:visited {
+            color: #c58af9;
+            background-color: transparent;
+            text-decoration: none;
+                             }
+            a:hover {
+            color: #c58af9;
+            background-color: transparent;
+            text-decoration: underline;
+                    }
+        </style>
+    </head>
+    <body>
+        <div id='container'>
+            <div id='puzzle'>
+                <h1>Jumping frogs puzzle</h1>
+                <svg id='svgpuzzle' viewBox='0 0 1000 200'>
+                    <defs>
+                        <g id='counterA'>
+                            <circle cx='50' cy='50'
+                                    r='45' fill='blue' />
+                        </g>
+                        <g id='counterB'>
+                            <circle cx='50' cy='50'
+                                    r='45' fill='red' />
+                        </g>
+                        <g id='frogA' fill='blue'>
+                            <ellipse cx='45' cy='50' rx='30' ry='45' />
+                            <circle cx='70' cy='25' r='15' />
+                            <circle cx='70' cy='25' r='12' fill='white' />
+                            <circle cx='70' cy='25' r='8' fill='black' />
+                            <circle cx='70' cy='75' r='15' />
+                            <circle cx='70' cy='75' r='12' fill='white' />
+                            <circle cx='70' cy='75' r='8' fill='black' />
+                        </g>
+                        <g id='frogB' fill='green'>
+                            <ellipse cx='55' cy='50' rx='30' ry='45' />
+                            <circle cx='30' cy='25' r='15' />
+                            <circle cx='30' cy='25' r='12' fill='white' />
+                            <circle cx='30' cy='25' r='8' fill='black' />
+                            <circle cx='30' cy='75' r='15' />
+                            <circle cx='30' cy='75' r='12' fill='white' />
+                            <circle cx='30' cy='75' r='8' fill='black' />
+                        </g>
+                        <g id='hiconB'>
+                            <circle cx='50' cy='50'
+                                    r='45' fill='yellow' stroke='black' />
+                        </g>
+                        <g id='hiconA'>
+                            <circle cx='50' cy='50'
+                                    r='45' fill='black' />
+                        </g>
+                    </defs>
+                    <g id='grid' stroke='black' fill='white' stroke-width='3'></g>
+                    <g id='counters'></g>
+                </svg>
+                <h2 id='message'>&nbsp;</h2>
+                <p>Moves: <span id='count'></span></p>           
+                <button id='reset'>Reset</button>
+                <p>
+                    <button id='down'>-</button>
+                    <span id='numcounters' style='display:inline-block; width:3em; text-align:center;'>3</span>
+                    <button id='up'>+</button>
+                </p>
+                <p>
+                    Counters: 
+                    <select id='counterdropdown'>
+                        <option value='#counter'>circles</option>
+                        <option value='#frog'>frogs</option>
+                        <option value='#hicon'>high contrast</option>
+                    </select>
+                </p>
+                <h2>Rules:</h2>
+                <ul>
+                    <li>The left set of counters can only move right, the right set of counters
+                        can only move left.</li>
+                    <li>Counters can move forward one space, or move two spaces by jumping over
+                        another counter.</li>
+                    <li>The puzzle is solved when the two sets of counters have switched positions.</li>
+                </ul>
+            </div>
+            <div>
+                
+                <p><a href="https://primefactorisation.com/blog/2016/04/14/interactive-jumping-puzzle/">Further information about this puzzle</a></p>
+                <p>
+                    Created by Shaun Carter &copy; 2016.<br/>
+                    <a href='https://primefactorisation.com/'> The Prime Factorisation of Me</a>
+                </p>
+            </div>
+        </div>
+        <script src='frogpuzzle.js'></script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/style.css b/style.css
index 76db68d1..837c1712 100644
--- a/style.css
+++ b/style.css
@@ -1,4 +1,3 @@
- @import url('https://rsms.me/inter/inter.css');
 html {
   background-color: #202124;
   color: #ffffff;
@@ -30,4 +29,4 @@ html {
     color: #c58af9;
     background-color: transparent;
     text-decoration: underline;
-  }
+  }
\ No newline at end of file
