hemulin · October 12, 2015 18:27
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 	<!--
 		Ex2, simple html page.
 		I used a little jQuery and css for the dynamic elements.
 		This ex was rather not very compicated.	
 	
 	FYI
 		The <iframe> throws some errors (mostly facebook "like" issues on the embedded page)
 		I would probably won't rank very high on the page validation.
 	-->	
 	<head>
 		<meta charset="utf-8">
 		<title>Internet Technologies - ex2</title>
 		<meta name="description" content="A simple HTML page">
 		<meta name="author" content="">
 		<script type="application/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
 		<style>
 			html, body {
 				background-color: #eee;
 			}

 			body {
 				padding-top: 20px;
 			}

 			.container > footer p {
 				text-align: center;
 			}

 			.container {
 				width: 820px;
 			}

 			.container > .content {
 				background-color: #fff;
 				padding: 20px;
 				margin: 0 -20px;
 				-webkit-border-radius: 0 0 6px 6px;
 				-moz-border-radius: 0 0 6px 6px;
 				border-radius: 0 0 6px 6px;
 				-webkit-imgContainer-shadow: 0 1px 2px rgba(0,0,0,.15);
 				-moz-imgContainer-shadow: 0 1px 2px rgba(0,0,0,.15);
 				imgContainer-shadow: 0 1px 2px rgba(0,0,0,.15);
 			}

 			.page-header {
 				background-color: #f5f5f5;
 				padding: 20px 20px 10px;
 				margin: -20px -20px 20px;
 			}

 			.content .span10,
 			.content .span4 {
 				min-height: 500px;
 			}

 			.content .span4 {
 				margin-left: 0;
 				padding-left: 19px;
 				border-left: 1px solid #eee;
 			}

 			.topbar .btn {
 				border: 0;
 			}	

 			.logo {
 				-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
 				-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
 				box-shadow:inset 0px 1px 0px 0px #ffffff;
 				background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #cfcfcf), color-stop(1, #ede6ed) );
 				background:-moz-linear-gradient( center top, #cfcfcf 5%, #ede6ed 100% );
 				filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cfcfcf', endColorstr='#ede6ed');
 				background-color:#cfcfcf;
 				-moz-border-radius:5px;
 				-webkit-border-radius:5px;
 				border-radius:5px;
 				border:1px solid #dcdcdc;
 				display:inline-block;
 				color:#777777;
 				font-family:arial;
 				font-size:20px;
 				font-weight:bold;
 				padding:6px 24px;
 				text-decoration:none;
 				text-shadow:1px 1px 0px #ffffff;

 			}.logo:hover {
 				background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ede6ed), color-stop(1, #cfcfcf) );
 				background:-moz-linear-gradient( center top, #ede6ed 5%, #cfcfcf 100% );
 				filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ede6ed', endColorstr='#cfcfcf');
 				background-color:#eee;

 			}.logo:active {
 				position:relative;
 				top:1px;
 			}

 			#login {
 				width: 45%; 
 				float: right;
 			}

 			hr {
 				border: 0;
 				width: 100%;
 				color: #f00;
 				background-color: grey;
 				height: 5px;
 			}

 			#imgContainer {
 				float: right;
 				margin-left: 2%;
 				margin-right: 8%;
 				padding-bottom: 20px;
 				width: 604px;
 				height: 453px;
 				position: relative;
 				border-radius: 15px;
 				-webkit-transition: all 1000ms ease-in;
 			}

 			#phead {
 				font:26px;
 				margin-left: 1%;
 				font-weight: bold;
 				text-decoration: underline;
 			}

 			#myTable {
 				width: 40%;
 				float: left;
 				margin-top: 1%;
 				text-align: center;
 				border: 3px solid #B0B0B0;
 			}

 			#myTable thead {
 				text-align: center;
 				font-weight: bold;
 			}

 			#myTable thead {
 				border: 1px solid #B0B0B0;
 				color: #444;
 				font-size: 16px;
 				font-weight: bold;
 				padding: 3px 10px;
 			}

 			#myTable td:nth-child(odd) {
 				padding: 3px 10px;
 				background: #D8D8D8;
 			}

 			#myTable td:nth-child(even) {
 				background: #C0C0C0;
 			}
 		</style>
 	</head>
 	<body>
 		<a href="#" class="logo">My Simple HTML page</a>
 		<div id="login">
 			<form>
 				User name: <input type="text" name="username" id="uname" value="">
 				Password: <input type="password" name="password">
 				<input type="submit" id="submitButton" 
 						value="Submit" role="button" aria-disabled="false">
 			</form>
 		</div>
 		<hr></hr>
 		<h1 id="phead">Yotam Katznelson, 038196903</h1>
 		<div id="imgContainer"></div>
 		<div id="myTableDiv">
 			<table id="myTable">
 				<thead>
 					<tr>
 						<td>
 							The website
 						</td>
 						<td>
 							Why I like it
 						</td>
 					</tr>
 				</thead>
 				<tbody>
 					<tr>
 						<td>
 							<a href="http://www.stumbleupon.com" target="_blank">
 								<img src="http://socialnicole.com/wp-content/blogs.dir/1/files/2011/11/stumbleupon-button.png" 
 									alt="stumbleupon" width="50" height="50">
 							</a>
 						</td>
 						<td>
 							The best timewaster on the web
 						</td>
 					</tr>
 					<tr>
 						<td>
 							<a href="http://techcrunch.com/" target="_blank">
 								<img src="http://www.crunchbase.com/assets/images/resized/0001/0576/10576v3-max-250x250.jpg" 
 									alt="techCrunch" width="50" height="50">
 							</a>
 						</td>
 						<td>
 							Great resource for technology information
 						</td>
 					</tr>
 					<tr>
 						<td>
 							<a href="http://www.haayal.co.il/" target="_blank">
 								<img src="http://www.haayal.co.il/img/ayal_logo.png" 
 									alt="techCrunch" width="70" height="50">
 							</a>
 						</td>
 						<td>
 							Whenever I'm in a thinking mood, that's where I go to
 						</td>
 					</tr>
 <tr>
 <td>
 Click on the empty space to the right to see the pictures sample
 </td>
 <td>
 This platform have problems with some jQuery stuff. Try also to "open in new window"
 </>
 </tr>
 				</tbody>
 			</table>
 		</div>
 		<hr />
 		<script type="text/javascript">
 			$(function() {
 				var imgOriginal = true;
 				
 				$("#submitButton").click(function() {
 					var name = document.getElementById("uname").value;
 					alert("Hey "+name+", unfortunately you don't have the right permissions to login."+ 
 								"Please contact the system admin for further information.");
 				});
 				
 				$("#imgContainer").click(function(){
 					$("#imgContainer").css("-webkit-transform", "rotate(-360deg) scale(0.8)");
 					if(imgOriginal) {
 						$("#imgContainer").css("background-image", "url('http://images.nationalgeographic.com/wpf/media-                    live/photos/000/140/cache/white-cat-1152278_14029_600x450.jpg')").css("-webkit-transform", "rotate(-360deg) scale(0.9)");
 						imgOriginal = !imgOriginal;
 						return;
 					}
 					$("#imgContainer").css("background-image", "url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTSTRvK5wPVhPJ55n9A6tdVyo1-T6Sjwsowc8SvMqqyfuSJUvLt')").css("-webkit-transform", "rotate(360deg) scale(1)");
 					imgOriginal = !imgOriginal;
 				});		
 			});
 		</script>
 		<iframe height="300" width="100%" frameBorder="0" src="http://theoatmeal.com/comics/state_web_summer">your browser does not support IFRAMEs</iframe>
  </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<!--
	Ex2, simple html page.
	I used a little jQuery and css for the dynamic elements.
	This ex was rather not very compicated.

	FYI
	The <iframe> throws some errors (mostly facebook "like" issues on the embedded page)
	I would probably won't rank very high on the page validation.
	-->
	<head>
	<meta charset="utf-8">
	<title>Internet Technologies - ex2</title>
	<meta name="description" content="A simple HTML page">
	<meta name="author" content="">
	<script type="application/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
	<style>
	html, body {
	background-color: #eee;
	}

	body {
	padding-top: 20px;
	}

	.container > footer p {
	text-align: center;
	}

	.container {
	width: 820px;
	}

	.container > .content {
	background-color: #fff;
	padding: 20px;
	margin: 0 -20px;
	-webkit-border-radius: 0 0 6px 6px;
	-moz-border-radius: 0 0 6px 6px;
	border-radius: 0 0 6px 6px;
	-webkit-imgContainer-shadow: 0 1px 2px rgba(0,0,0,.15);
	-moz-imgContainer-shadow: 0 1px 2px rgba(0,0,0,.15);
	imgContainer-shadow: 0 1px 2px rgba(0,0,0,.15);
	}

	.page-header {
	background-color: #f5f5f5;
	padding: 20px 20px 10px;
	margin: -20px -20px 20px;
	}

	.content .span10,
	.content .span4 {
	min-height: 500px;
	}

	.content .span4 {
	margin-left: 0;
	padding-left: 19px;
	border-left: 1px solid #eee;
	}

	.topbar .btn {
	border: 0;
	}

	.logo {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #cfcfcf), color-stop(1, #ede6ed) );
	background:-moz-linear-gradient( center top, #cfcfcf 5%, #ede6ed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cfcfcf', endColorstr='#ede6ed');
	background-color:#cfcfcf;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#777777;
	font-family:arial;
	font-size:20px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:1px 1px 0px #ffffff;

	}.logo:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ede6ed), color-stop(1, #cfcfcf) );
	background:-moz-linear-gradient( center top, #ede6ed 5%, #cfcfcf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ede6ed', endColorstr='#cfcfcf');
	background-color:#eee;

	}.logo:active {
	position:relative;
	top:1px;
	}

	#login {
	width: 45%;
	float: right;
	}

	hr {
	border: 0;
	width: 100%;
	color: #f00;
	background-color: grey;
	height: 5px;
	}

	#imgContainer {
	float: right;
	margin-left: 2%;
	margin-right: 8%;
	padding-bottom: 20px;
	width: 604px;
	height: 453px;
	position: relative;
	border-radius: 15px;
	-webkit-transition: all 1000ms ease-in;
	}

	#phead {
	font:26px;
	margin-left: 1%;
	font-weight: bold;
	text-decoration: underline;
	}

	#myTable {
	width: 40%;
	float: left;
	margin-top: 1%;
	text-align: center;
	border: 3px solid #B0B0B0;
	}

	#myTable thead {
	text-align: center;
	font-weight: bold;
	}

	#myTable thead {
	border: 1px solid #B0B0B0;
	color: #444;
	font-size: 16px;
	font-weight: bold;
	padding: 3px 10px;
	}

	#myTable td:nth-child(odd) {
	padding: 3px 10px;
	background: #D8D8D8;
	}

	#myTable td:nth-child(even) {
	background: #C0C0C0;
	}
	</style>
	</head>
	<body>
	<a href="#" class="logo">My Simple HTML page</a>
	<div id="login">
	<form>
	User name: <input type="text" name="username" id="uname" value="">
	Password: <input type="password" name="password">
	<input type="submit" id="submitButton"
	value="Submit" role="button" aria-disabled="false">
	</form>
	</div>
	<hr></hr>
	<h1 id="phead">Yotam Katznelson, 038196903</h1>
	<div id="imgContainer"></div>
	<div id="myTableDiv">
	<table id="myTable">
	<thead>
	<tr>
	<td>
	The website
	</td>
	<td>
	Why I like it
	</td>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td>
	<a href="http://www.stumbleupon.com" target="_blank">
	<img src="http://socialnicole.com/wp-content/blogs.dir/1/files/2011/11/stumbleupon-button.png"
	alt="stumbleupon" width="50" height="50">
	</a>
	</td>
	<td>
	The best timewaster on the web
	</td>
	</tr>
	<tr>
	<td>
	<a href="http://techcrunch.com/" target="_blank">
	<img src="http://www.crunchbase.com/assets/images/resized/0001/0576/10576v3-max-250x250.jpg"
	alt="techCrunch" width="50" height="50">
	</a>
	</td>
	<td>
	Great resource for technology information
	</td>
	</tr>
	<tr>
	<td>
	<a href="http://www.haayal.co.il/" target="_blank">
	<img src="http://www.haayal.co.il/img/ayal_logo.png"
	alt="techCrunch" width="70" height="50">
	</a>
	</td>
	<td>
	Whenever I'm in a thinking mood, that's where I go to
	</td>
	</tr>
	<tr>
	<td>
	Click on the empty space to the right to see the pictures sample
	</td>
	<td>
	This platform have problems with some jQuery stuff. Try also to "open in new window"
	</>
	</tr>
	</tbody>
	</table>
	</div>
	<hr />
	<script type="text/javascript">
	$(function() {
	var imgOriginal = true;

	$("#submitButton").click(function() {
	var name = document.getElementById("uname").value;
	alert("Hey "+name+", unfortunately you don't have the right permissions to login."+
	"Please contact the system admin for further information.");
	});

	$("#imgContainer").click(function(){
	$("#imgContainer").css("-webkit-transform", "rotate(-360deg) scale(0.8)");
	if(imgOriginal) {
	$("#imgContainer").css("background-image", "url('http://images.nationalgeographic.com/wpf/media- live/photos/000/140/cache/white-cat-1152278_14029_600x450.jpg')").css("-webkit-transform", "rotate(-360deg) scale(0.9)");
	imgOriginal = !imgOriginal;
	return;
	}
	$("#imgContainer").css("background-image", "url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTSTRvK5wPVhPJ55n9A6tdVyo1-T6Sjwsowc8SvMqqyfuSJUvLt')").css("-webkit-transform", "rotate(360deg) scale(1)");
	imgOriginal = !imgOriginal;
	});
	});
	</script>
	<iframe height="300" width="100%" frameBorder="0" src="http://theoatmeal.com/comics/state_web_summer">your browser does not support IFRAMEs</iframe>
	</body>
	</html>