react/Is_He_Gay.html at gh-pages · Astrolingus/react · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
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>