index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Just for Fun</title>

    <link href="style/main.css" rel="stylesheet" type="text/css">
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="apple-touch-icon" href="meta/apple-touch-icon.png">
    <link rel="apple-touch-startup-image" href="meta/apple-touch-startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"> <!-- iPhone 5+ -->
    <link rel="apple-touch-startup-image" href="meta/apple-touch-startup-image-640x920.png"  media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)"> <!-- iPhone, retina -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta property="og:image" content="http://rajanand02.github.io/just-for-fun/images/modi.jpg" />
    <meta property="og:description"content="2048-game in a different perspective, play and have fun"/>
    <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0, maximum-scale=1, user-scalable=no, minimal-ui">
  </head>
  <body>
    <div class="container">
      <div class="heading">
        <h1 class="title">MODI</h1>
        <div class="scores-container">
          <div class="score-container">0</div>
          <div class="best-container">0</div>
        </div>
      </div>

      <div class="above-game">
        <p class="game-intro">Join the images and get to the <strong>MODI!</strong></p>
        <a class="restart-button">New Game</a>
      </div>

      <div class="share">
        <div class="fb-share-button" data-href="http://rajanand02.github.io/just-for-fun/" data-type="button_count"  style="float:left; margin-right: 10px;"></div>
        <div>
          <a href="http://rajanand02.github.io/just-for-fun/" class="twitter-share-button" data-lang="en">Tweet</a>
        </div>
      </div>
      <div class="game-container">
        <div class="game-message">
          <p></p>
          <div class="lower">
            <a class="keep-playing-button">Keep going</a>
            <a class="retry-button">Try again</a>
          </div>
        </div>

        <div class="grid-container">
          <div class="grid-row">
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
          </div>
          <div class="grid-row">
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
          </div>
          <div class="grid-row">
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
          </div>
          <div class="grid-row">
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
          </div>
        </div>

        <div class="tile-container">

        </div>
      </div>

      <p class="game-explanation">
        <strong class="important">How to play:</strong> Use your <strong>arrow keys</strong> to move the images. When two tiles with the same images touch, they <strong>merge into one!</strong>
      </p>
      <hr>
      <p class= "how-to">
        <img src="images/A-Raja1.jpg" alt="" /> <span class= 'math-symbol'>+</span> <img src="images/A-Raja1.jpg" alt="" /> <span class="math-symbol">=</span> <img src="images/raja2.jpg" alt="" />
      </p>
      <p class="how-to">
        <img src="images/raja2.jpg" alt="" /> <span class= 'math-symbol'>+</span> <img src="images/raja2.jpg" alt="" /> <span class="math-symbol">=</span> <img src="images/Kalmadi1.jpg" alt="" />
      </p>
      <p class="how-to">
        <img src="images/Kalmadi1.jpg" alt="" /> <span class= 'math-symbol'>+</span> <img src="images/Kalmadi1.jpg" alt="" /> <span class="math-symbol">=</span> <img src="images/kalmadi2.jpg" alt="" />
      </p>
      <p class="how-to">
        <img src="images/kalmadi2.jpg" alt="" /> <span class= 'math-symbol'>+</span> <img src="images/kalmadi2.jpg" alt="" /> <span class="math-symbol">=</span> <img src="images/Jaya1.jpg" alt="" />
      </p>
      <p class="how-to">
        <img src="images/Jaya1.jpg" alt="" /> <span class= 'math-symbol'>+</span> <img src="images/Jaya1.jpg" alt="" /> <span class="math-symbol">=</span> <img src="images/jaya2.jpg" alt="" />
      </p>
      <p class="how-to">
        <img src="images/jaya2.jpg" alt="" /> <span class= 'math-symbol'>+</span> <img src="images/jaya2.jpg" alt="" /> <span class="math-symbol">=</span> <img src="images/Karunanidhi1.jpg" alt="" />
      </p>
      <p class="how-to">
        <img src="images/Karunanidhi1.jpg" alt="" /> <span class= 'math-symbol'>+</span> <img src="images/Karunanidhi1.jpg" alt="" /> <span class="math-symbol">=</span> <img src="images/karunanidhi2.jpg" alt="" />
      </p>
      <p class="how-to">
        <img src="images/karunanidhi2.jpg" alt="" /> <span class= 'math-symbol'>+</span> <img src="images/karunanidhi2.jpg" alt="" /> <span class="math-symbol">=</span> <img src="images/modi1.jpg" alt="" />
      </p>
      <p class="how-to">
        <img src="images/modi1.jpg" alt="" /> <span class= 'math-symbol'>+</span> <img src="images/modi1.jpg" alt="" /> <span class="math-symbol">=</span> <img src="images/modi2.jpg" alt="" />
      </p>
      <p class="how-to">
        <img src="images/modi2.jpg" alt="" /> <span class= 'math-symbol'>+</span> <img src="images/modi2.jpg" alt="" /> <span class="math-symbol">=</span> <img src="images/modi3.jpg" alt="" />
      </p>
      <hr>
      <p class="footer">
        Created by <a href="http://github.com/rajanand02" target="_blank">Raj Anand.</a> Based on <a href="http://gabrielecirulli.github.io/2048/" target="_blank">2048</a>.</a>
    </p>
  </div>

  <script src="js/bind_polyfill.js"></script>
  <script src="js/classlist_polyfill.js"></script>
  <script src="js/animframe_polyfill.js"></script>
  <script src="js/keyboard_input_manager.js"></script>
  <script src="js/html_actuator.js"></script>
  <script src="js/grid.js"></script>
  <script src="js/tile.js"></script>
  <script src="js/local_storage_manager.js"></script>
  <script src="js/game_manager.js"></script>
  <script src="js/application.js"></script>
  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-49907026-1', 'rajanand02.github.io');
    ga('send', 'pageview');

  </script>
  <div id="fb-root"></div>
  <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=736143866406789";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</body>
</html>