index.html

<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <link rel="stylesheet" href="css/normalize.min.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/vendor/jWindowCrop.css">

        <script src="js/vendor/modernizr-2.6.2.min.js"></script>
    </head>
    <body>

        <p id="change_avatar">Change avatar</p>
		<div id="change_avatar_form" style="display:none">
			<form action="php/image_upload.php" method="post" enctype="multipart/form-data">
			<div class="hiddenfile">
				<input type="file" id="uploadInput" name="upload"/>
			</div>
			</form>			
			<p class="suggestion1">Click the avatar to change it</p>
			<p class="suggestion2">Drag image and zoom to make it fit</p>
			<div class="avatar">
				<img src="img/avatar.png" alt="avatar" />
			</div>
			<div class="options">
				<input type="button" class="save" value="save" />
				<input type="button" class="close" value="close" />
			</div>
			<img class="close" src="img/close.png" alt="close" />
		</div>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>

        <script src="js/vendor/spin.mixed.js"></script>
        <script src="js/vendor/jquery.form.js"></script>
        <script src="js/vendor/jquery.jWindowCrop.js"></script>
		
        <script src="js/main.js"></script>
    </body>
</html>