Merge pull request #80 from DrissBoumlik/feature/activities-learning

Add flexbox froggy and EAK websites to learning section

Author: dangerworm

pages-activities/activities-learning.html

@@ -174,4 +174,40 @@ <h4>
             </div>
         </div>
     </div>
+    <div class="col-lg-4 col-md-6 d-flex align-items-stretch">
+        <div class="row">
+            <div class="card">
+                <h4>
+                    <span class="fas fa-frog"></span>
+                    <a href="https://flexboxfroggy.com/" target="_blank">FlexBox Froggy</a>
+                    <span class="badge badge-success">Easy</span>
+                </h4>
+                <p>
+                    Flexbox Froggy is a game for learning CSS flexbox.<br/>
+                    It takes inspiration from the classic arcade game 
+                    <a href="https://en.wikipedia.org/wiki/Frogger">Frogger</a>, 
+                    and web literacy games like the brilliant 
+                    <a href="https://flukeout.github.io/" style="white-space: nowrap;">CSS Diner</a> 
+                    and <a href="https://eraseallkittens.com/">Erase All Kittens</a>, 
+                    where you learn about CSS selectors and HTML markup respectively.
+                </p>
+            </div>
+        </div>
+    </div>
+    <div class="col-lg-4 col-md-6 d-flex align-items-stretch">
+        <div class="row">
+            <div class="card">
+                <h4>
+                    <span class="fas fa-cat"></span>
+                    <a href="https://eraseallkittens.com/" target="_blank">Erase All Kittens</a>
+                    <span class="badge badge-success">Easy</span>
+                </h4>
+                <p>
+                    E.A.K. is a revolutionary, online game that provides kids aged 8-14 with knowledge of both
+                    computational thinking and professional coding languages, 
+                    to effectively prepare them for 21st Century degrees and careers.
+                </p>
+            </div>
+        </div>
+    </div>
 </div>