index.html

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Basil</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu:bold">
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" href="AJZ_icon.png">
    <script src="Build/UnityLoader.js"></script>
    <script>
      UnityLoader.instantiate("unityContainer", "Build/build_webgl1.json");
    </script>
  </head>
  <body style="background-color:#000000">
    <div id="basil" align="center">
    	<div style="padding-top: 50px; padding-bottom: 100px;">
	    	<div id="basil_title" align="left">
				Basil
	    	</div>
	    </div>
    	<div id ="basil_game">
    		<div id="unityContainer" style="width: 800px; height: 600px; margin: auto"></div>
    	</div>
    	<div id="basil_text">
    		By Abdul Zakkar & Adnan Patel
    	</div>
    	<div id="basil_line">
    		<hr style="border: 1px solid#AAAAAA;" />
    	</div>
    	<div id="basil_buttons" align="center">
    		<button id="ldjam_button" type="button"
    			onclick="window.location.href = 'https://ldjam.com/events/ludum-dare/45/basil'">LDJam page</button>
    		<button id="itchio_button" type="button"
    			onclick="window.location.href = 'https://abdulzakkar.itch.io/basil'">itch.io page</button>
    		<button id="homepage_button" type="button"
    			onclick="window.location.href = 'https://a-j-z.github.io/'">Homepage</button>
    	</div>
    </div>


    <div align="center">
	    <div align="left" id="basil_instructions">
		    A game of survival - manage hunger, thirst, and temperature - how long can you survive?
			<br><br>
			<u>A Ludum Dare 45 Entry!</u>
			<br>
			Theme: start with nothing.
			<br><br>
			You play as Basil, the only survivor of a plane crash at sea. He is left with nothing but his wits.
			<br>
			Help him survive as long as possible by managing his hunger, thirst, and temperature. Be strategic about your decisions!
			<br><br>
			<u>Controls:</u>
			<br><br>
			W A S D or Arrow Keys
			<br>
			SPACE to interact
			<br>
			MOUSE to select items
			<br>
			P or ESCAPE to pause
		</div>

		<div id="divider_line">
    		<hr style="border: 1px solid#AAAAAA;" />
    	</div>

    	<div align="left" id="basil_description">
    		You’ve survived a plane crash...
    	</div>

    	<div align="center" id="basil_img_wrapper">
    		<img src="basil1.png" alt="[basil1]" id="basil_img">
    	</div>

    	<div align="left" id="basil_description">
    		...But how long will that last?
    	</div>

    	<div align="center" id="basil_img_wrapper">
    		<img src="basil2.png" alt="[basil2]" id="basil_img">
    	</div>

    	<div align="center" id="basil_img_wrapper">
    		<img src="basil3.png" alt="[basil3]" id="basil_img">
    	</div>

    	<div align="center" id="basil_img_wrapper">
    		<img src="basil4.png" alt="[basil4]" id="basil_img">
    	</div>
	</div>


    <div id="footer" align="center">
    	<div id="footer_line">
    		<hr style="border: 1px solid#AAAAAA;" />
    	</div>
    	<div id="footer_text">
    		Contact me at: mr.abdul51@gmail.com
    	</div>
    </div>
  </body>
</html>