bfl-itp · Astrolingus · Oct 8, 2014 · Oct 9, 2014 · Oct 9, 2014 · Oct 30, 2014
diff --git a/Is_He_Gay.css b/Is_He_Gay.css
@@ -0,0 +1,81 @@
+/*remove the default margins and stuff*/
+body
+{
+	margin: 0;
+	padding: 0;
+	background: #ffffff;
+}
+
+#header
+{
+  width: 100%;
+  height: 44px;
+	margin-bottom: 100px;
+}
+
+#title {
+	text-align: center;
+	padding-top: 8px;
+}
+
+h1
+{
+  color:#000000;
+}
+
+h2
+{
+  color:#000000;
+}
+
+h3
+{
+	margin: 0 auto;
+	font-size: 30px;
+	text-align: center;
+}
+
+#container
+{
+	width: 1071px;
+	margin: 0 auto;
+}
+
+.imageHolder
+{
+	margin-right: 30px;
+	margin-top: 30px;
+	margin-bottom: 50px;
+	width: 305px;
+	height: 305px;
+	border-radius: 4px;
+	border: 1px solid #dcdcdc;
+	background-color: #ffffff;
+	float: left;
+}
+
+
+.imageHolder:hover{
+	border-color: rgb(0,0,0);
+	border-width: 1.5px;
+}
+
+
+.first {
+	margin-left: 30px;
+}
+
+.thumb {
+	padding: 7px;
+}
+
+.popUp {
+	display: none;
+	position: absolute;
+	margin-left: auto;
+	margin-right: auto;
+	left: 0;
+	right: 0;
+	background-color: rgba(255,255,255,0.8);
+	height: 100%;
+}
diff --git a/Is_He_Gay.html b/Is_He_Gay.html
@@ -0,0 +1,98 @@
+
+<!--by Sharang Biswas. HTML, JS and CSS adapted from code by Aidan Feldman and Sam Slover-->
+<!DOCTYPE html>
+<html>
+
+ <head>
+  <meta charset="UTF-8">
+  <title>Instagram Example</title>
+  <meta name="author" content="Sharang Biswas">
+  <meta name="description" content="Find out if he's gay!">
+  <meta name="keywords" content="Sharang Biswas, ITP, Building for Learning">
+  <link rel="stylesheet" href="Is_He_Gay.css" type="text/css">
+  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
+  <script src="Is_He_Gay.js"></script>
+ </head>
+
+ <body>
+   <!--The banner and title at the top of the page-->
+	<div id="header"> <!--box containing the whole banner-->
+		<div id="title"> <!--box containing the title-->
+
+				<h1>Is He Gay?</h1>
+
+		</div>
+	</div>
+
+ 	<div id="container"> <!--box all the images and subtitles-->
+     <!-- row 1 begins -->
+
+		<div class="imageHolder first" id="sound"> <!--the first image has the first class as well-->
+			<img class="thumb" width="300" height="300" src="sound.png">
+      <div class="caption"><h2>Does he sound gay?</h2></div>
+		</div>
+
+    <div class="imageHolder" id="look">
+      <img class="thumb" width="300" height="300" src="tshirt.png">
+      <div class="caption"><h2>Does he look gay?</h2></div>
+		</div>
+
+    <div class="imageHolder" id="interests">
+      <img class="thumb" width="300" height="300" src="theatre.png">
+      <div class="caption"><h2>Does he have gay hobbies?</h2></div>
+    </div>
+<!-- row 1 ends -->
+
+
+		<!-- row 2 begins -->
+
+
+<div class="imageHolder first" id="girl">
+  <img class="thumb" width="300" height="300" src="girl.png">
+  <div class="caption"><h2>Has he never shown interest in girls?</h2></div>
+</div>
+
+<div class="imageHolder" id="nice">
+  <img class="thumb" width="300" height="300" src="dog.png">
+  <div class="caption"><h2>Is he a really nice guy?</h2></div>
+</div>
+
+<div class="imageHolder" id="men">
+  <img class="thumb" width="300" height="300" src="gay.png">
+  <div class="caption"><h2>Has he hooked up with other guys?</h2></div>
+</div>
+
+
+<!-- row 2 ends -->
+
+</div> <!--closes the container-->
+
+<!--the popup text and images-->
+<div class="popUp" id="popUpSound">
+  <h3>Are you sure? Maybe you're detecting an accent, or some speech idiosyncracy... In fact, there's no real conclusive evidence of gay mean sounding very different...</h3>
+</div>
+
+<div class="popUp" id="popUpLook">
+  <h3>Are you sure? </h3>
+</div>
+
+<div class="popUp" id="popUpInterests">
+  <h3>Are you sure? </h3>
+</div>
+
+<div class="popUp" id="popUpGirl">
+  <h3>Are you sure? </h3>
+</div>
+
+<div class="popUp" id="popUpNice">
+  <h3>Are you sure? </h3>
+</div>
+
+<div class="popUp" id="popUpMen">
+  <h3>Are you sure? </h3>
+</div>
+
+
+
+</body>
+</html>
diff --git a/Is_He_Gay.js b/Is_He_Gay.js
@@ -0,0 +1,49 @@
+var soundButton, hiddenSound;
+
+
+function init()
+{
+
+  // show and hide the popup
+  $('#sound').click(function() { $('#popUpSound').show(); });
+  $('#popUpSound').click(function() { $('#popUpSound').hide(); });
+
+  $('#look').click(function() { $('#popUpLook').show(); });
+  $('#popUpLook').click(function() { $('#popUpLook').hide(); });
+
+  $('#interests').click(function() { $('#popUpInterests').show(); });
+  $('#popUpInterests').click(function() { $('#popUpInterests').hide(); });
+
+  $('#girl').click(function() { $('#popUpGirl').show(); });
+  $('#popUpGirl').click(function() { $('#popUpGirl').hide(); });
+
+  $('#nice').click(function() { $('#popUpNice').show(); });
+  $('#popUpNice').click(function() { $('#popUpNice').hide(); });
+
+  $('#men').click(function() { $('#popUpMen').show(); });
+  $('#popUpMen').click(function() { $('#popUpMen').hide(); });
+
+}
+
+
+
+//main method, sort of...
+//why does moving this from top to bottom help?
+$(document).on('ready',init);
+
+
+/*
+function showPopUp() {
+  var popup = document.getElementById('popUpSound');
+  popup.style.display = 'block';
+  popup.addEventListener('click', hidePopUp);
+};
+
+
+function hidePopUp(){
+  var popup = document.getElementById('popUpSound');
+  popup.style.display = 'none';
+}
+
+window.addEventListener('load', init);
+*/
diff --git a/dog.png b/dog.png
diff --git a/gay.png b/gay.png
diff --git a/girl.png b/girl.png
diff --git a/index.html b/index.html
diff --git a/man.png b/man.png
diff --git a/sound.png b/sound.png
diff --git a/theatre.png b/theatre.png
diff --git a/tshirt.png b/tshirt.png