credits.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="description" content="Labyrinth | Game ">
  <title>Credits | Labyrinth</title>
  <link rel="icon" type="image/png" href="images/logos/favicon.png" />
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" type="text/css" href="css/materialize.css">
  <link rel="stylesheet" type="text/css" href="css/fonts.css">
  <link rel="stylesheet" type="text/css" href="css/materialize.min.css">
  <link rel="stylesheet" type="text/css" href="css/custom.css">
  <link rel="stylesheet" type="text/css" href="css/footer.css">
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/sweetalert2.min.js"></script>
  <script type="text/javascript" src="js/translate.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="css/footer.css">
  <script type="text/javascript" src="js/materialize.min.js"></script>
  <script type="text/javascript" src="js/credits.js"></script>
  <!-- Files for responsive nav bar -->
  <script src="./js/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-hover-dropdown/2.2.1/bootstrap-hover-dropdown.js"></script>

<style type="text/css">
  html {
    box-sizing: border-box;
  }

  *,
  *:before,
    *:after {
      box-sizing: inherit;
    }

  .column {
    float: left;
    width: 33.3%;
    margin-bottom: 16px;
    padding: 0 8px;
  }

  @media (max-width: 650px) {
    .column {
      width: 100%;
      display: block;
      text-align: center;
      }
  }

  .card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  }

  .lol {
    padding: 0 16px;
  }

  .lol::after,
  .row::after {
    content: "";
    clear: both;
    display: table;
  }

  p {

    color: black;
    text-align: center;

  }

  .button {
    border: none;
    outline: 0;
    display: inline-block;
    padding: 8px;
    color: white;
    background-color: #000;
    text-align: center;
    cursor: pointer;
    width: 100%;
  }

  .button:hover {
    background-color: #555;
  }

  h2 {
    text-align: center;
  }

  h1.heading{
    color:rgba(0,0,0,0.5);
  }

  /* CSS for menu bar*/
  .container-fluid {
     padding-right: 0px;
     padding-left: 0px;
   }
  ul#menubar {
    padding-right: 0px;
   }
  .navbar-header h1{
    font-family: 'Abril Fatface';
    font-size:2.5em;
    letter-spacing: 0.1em;
    width:auto;
    margin-top:6px;
    margin-left:10px;    
  }
  #dropdownMenu{
    width:100%;
  }
  .dropdown-menu {
    width:100%;
    background-color: #60A550;
    margin:0;
    padding-top:0;
    padding-bottom:0;
  }
    .navbar.navbar-default {
      font-size:1.2em;   
      background-color: #60A550;
      color:white;
    }
    .nav.navbar-nav.navbar-right li a span{
      color:white;
    }
    .nav.navbar-nav.navbar-right li{
      padding: 6px;
    }
    .nav.navbar-nav.navbar-right>li:hover{
      background-color: #80BE62;
      cursor: pointer;
    }
    
    #select-lang ul li>a{
      color:white;
      padding-top:20px;
    } 
    #select-lang ul li>a:hover{
      background-color: rgba(0, 0, 0,0.0);
      cursor: pointer;
    }
    #select-lang ul li:hover{
      background-color: rgba(0, 0, 0, 0.2);
    }
    @media (max-width: 992px) {
      .navbar-header {
    float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
    }
</style>  
</head>
<body>
  <div class="navbar navbar-default">
  <div class="container-fluid">
 
        <button class="navbar-toggle" data-toggle="collapse" data-target="#menubar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span> 
          </button> 
        <div class="navbar-header" >
            <h1>Labyrinth</h1>
        </div>
        <ul class="nav navbar-nav navbar-right collapse navbar-collapse " id="menubar">
          <li>
            <a href="howtoplay.html" class="lang " data-href="how"><span>How to Play</span></a>
          </li>
          <li>
            <a href="index.html" class="lang " data-href="game"><span>Game</span></a>
          </li>
          <li>
              <a href="https://github.com/fossasia/labyrinth" class="lang " ><span>Contribute</span></a>
          </li>
          <li class="select-your-lang" id="select-lang">
            <a class="lang dropdown-toggle" data-href="language" id="dropdownMenu" data-toggle="dropdown" data-hover="dropdown">Select your language <span class="fa fa-caret-down"></span></a>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu">
            <li><a class="translate translate-language-choice" id="en">
              <img src="images/icons/UnitedKingdom.png" alt="" class="translation-flag" /> English
            </a></li>
            <li><a class="translate translate-language-choice" id="si">
                <img src="images/icons/SriLanka.png" alt="" class="translation-flag" /> Sinhala
              </a></li>
            <li><a class="translate translate-language-choice" id="hi">
              <img src="images/icons/India.png" alt="" class="translation-flag" /> Hindi
            </a></li>
            <li><a class="translate translate-language-choice" id="pl">
              <img src="images/icons/Poland.png" alt="" class="translation-flag" /> Polish
            </a></li>
            <li><a class="translate translate-language-choice" id="tl">
              <img src="images/icons/India.png" alt="" class="translation-flag" /> Tamil
            </a></li>
           
          </ul>
          </li>
        </ul>
  </div>
  </div>
	<div class="jumbotron space container">
	<h1 class="heading">License</h1>
	<p><b>How to add a character</b> - If you have added an Image of a reknowned personality then you have to provide a proof along with it that you have the legal right to use that particular image or you have to insert the image in such a way that it can't be traced back.
    <br>
	<b>Music</b> - If you are adding music to the background or some other music then you have to provide a proof that you have the legal right to use those tunes (Provide the link to the license on the site)

    <br>
    </p>
    <p>
    Note - The licences and the proofs have to be added to this page so that we can credit the sources for their help</p>
  </div>
<script>
  $(document).ready(function(){
    var $id=$('#select-lang');
    var $a=$('#dropdownMenu');
    $a.css('color','white');
    $id.hover(function(){
      $a.html('Select your language <span class="fa fa-caret-up"></span>');
      $a.css('background-color','#80BE62');
    },function(){
      $a.css('background-color','#60A550');
      $a.html('Select your language <span class="fa fa-caret-down"></span>');
    });
  });
</script>
</body>
</html>