participant games card fixes #342 (#347)

* Add hover effect to footer icon fixes #344

* Make cards for participant games fixes #342

Author: anupm12

css/main.css

@@ -634,4 +634,13 @@ input:checked + .slider:before {
 
 .card-link-c {
   align-items: left;
-}
+}
+
+.game-card {
+  /* max-height: 470px;
+  min-height: 470px; */
+  height: 100%;
+  min-width: 100%;
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.12);
+
+}

data/games.json

@@ -1,10 +1,16 @@
 {
 	  "games": [
       {
-		    "developer": "sample",
-		    "imageurl": "sample",
-		    "gamename": "sample",
-		    "github_link": "sample"
+		    "developer": "Anupam shukla",
+		    "imageurl": "assets/img/participants/vikash.jpg",
+		    "gamename": "sample game name",
+		    "github_link": "https://github.com/pal-0123"
+		},
+		{
+		    "developer": "Vishnu",
+		    "imageurl": "assets/img/participants/vikash.jpg",
+		    "gamename": "sample game name",
+		    "github_link": "https://github.com/pal-0123"
 	    }
     ]
 }

index.html

@@ -215,9 +215,21 @@ <h2 class="my-4">Projects</h2>
         </nav>
       </div>
 
-    </div>
     <!-- /.container -->
 
+      <!-- participant's games -->
+      <div class="row">
+        <div class="col-lg-12">
+          <h2 class="my-4">Participant games</h2>
+        </div>
+      </div>
+      <div class="row" id="games">
+        <!-- Feeding data from json -->
+      </div>
+    </div>
+
+
+
 
      <!---------------------------- list all issues ---------------------------->
 

js/main.js

@@ -60,10 +60,12 @@ $(document).ready(function() {
     var mentors;
     var participants;
     var projects;
+    var games;
 
     var mentorsJson = "data/mentors.json";
     var participantsJson = "data/participants.json";
     var projectsJson = "data/projects.json";
+    var gamesJson = "data/games.json";
 
     $.ajaxSetup({
         beforeSend: function(xhr) {
@@ -494,6 +496,39 @@ $(document).ready(function() {
     });
 
 
+    // games
+    $.getJSON(gamesJson, function(data) {
+        games = data.games;
+
+        $.each(games, function(i, game) {
+            
+            var gameDiv =
+                "<div class='col-lg-3 col-sm-6 text-center mb-4'>" +
+                "<div class='card game-card'>" +
+                "<img class='card-img-top participant-img' src=" +
+                game.imageurl +
+                " alt=''>" +
+                "<div class='card-body'>" +
+                "<h4 class='card-title'>" +
+                game.gamename +
+                "</h4>" +
+                "<p class='card-text'>by " +
+                game.developer +
+                "</p>" +
+                "</div>" +
+                "<div class='social-media-links'>" +
+                "<a href=" +
+                game.github_link +
+                "><i class='fab fa-github'></i></a>" +
+                "</div>" +
+                "</div>" +
+                "</div>";
+
+            $("#games").append(gameDiv);
+        });
+    });
+
+
     //smooth scrolling
         $('a[href^="#"]').on('click', function (e) {
                     e.preventDefault();