-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexploreindex.php
217 lines (198 loc) · 8.38 KB
/
exploreindex.php
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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
<?php
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Explore </title>
<link rel="stylesheet" href="./src/explorei.css">
</head>
<body>
<div class="header">
<h1 >DISCOVER PERSONALITIES</h1>
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
</div>
<p class="info">
<i><strong>The 8 traits based on the four psychological functions are: </strong>
<br><strong>1 Where do you focus your attention? </strong>
<strong>Extraversion(E)</strong>Extraverts (also often spelled extroverts) are "outward-turning" and tend to be action-oriented, enjoy more frequent social interaction, and feel energized after spending time with other people.<br>
<strong>Introversion(I)</strong>Introverts are "inward-turning" and tend to be thought-oriented, enjoy deep and meaningful social interactions, and feel recharged after spending time alone.<br>
<br><strong> 2.How do you discern information?: </strong>
<strong>Sensing(S)</strong> People who prefer sensing tend to pay a great deal of attention to reality, particularly to what they can learn from their own senses. They tend to focus on facts and details and enjoy getting hands-on experience.<br>
<strong>Intuition(N)</strong>Those who prefer intuition pay more attention to things like patterns and impressions. They enjoy thinking about possibilities, imagining the future, and abstract theories <br>
<br><strong>3. How do you make decisions?</strong>
<strong> Thinking (T)</strong>People who prefer thinking place a greater emphasis on facts and objective data.They tend to be consistent, logical, and impersonal when weighing a decision. <br>
<strong>Feeling(F)</strong> Those who prefer feeling are more likely to consider people and emotions when arriving at a conclusion. <br>
<br><strong> 4. How do you deal with the world? </strong>
<strong>Judging (J)</strong>Those who lean toward judging prefer structure and firm decisions. <br>
<strong>Perceiving (P)</strong>People who lean toward perceiving are more open, flexible, and adaptable, <br>
<br></i>
</p>
<!-- ANALYSTST -->
<h2>ANALYSTS </h2>
<div class="image-INTJ">
<img class="image__img-INTJ" src="images/intj.jpeg" alt="INTJ">
<a href="explore/intj.php">
<div class="image__overlay-INTJ">
<div class="image__title-A">INTJ</div>
<p class="image__description-A">The Architect</p>
</div>
</a>
</div>
<div class="image-INTP">
<img class="image__img-INTP" src="images/INTP.jpeg" alt="INTP">
<a href="explore/intp.php">
<div class="image__overlay-INTP">
<div class="image__title-A">INTP</div>
<p class="image__description-A">The Logician</p>
</div>
</a>
</div>
<div class="image-ENTJ">
<img class="image__img-ENTJ" src="images/ENTJ.jpeg" alt="ENTJ">
<a href="explore/entj.php">
<div class="image__overlay-ENTJ">
<div class="image__title-A">ENTJ</div>
<p class="image__description-A">The Commander</p>
</div>
</a>
</div>
<div class="image-ENTP">
<img class="image__img-ENTP" src="images/ENTP.jpeg" alt="ENTP">
<a href="explore/entp.php">
<div class="image__overlay-ENTP">
<div class="image__title-A">ENTP</div>
<p class="image__description-A">The Debator</p>
</div>
</a>
</div>
<!-- DIPLOMATS -->
<h3> DIPLOMATS </h3>
<div class="image-INFJ">
<img class="image__INFJ" src="images/INFJ.jpeg" alt="INFJ">
<a href="explore/infj.php">
<div class="image__overlay-INFJ">
<div class="image__title-D">INFJ</div>
<p class="image__description-D">The Advocate</p>
</div>
</a>
</div>
<div class="image-INFP">
<img class="image__img-INFP" src="images/INFP.jpeg" alt="INFP">
<a href="explore/infp.php">
<div class="image__overlay-INFP">
<div class="image__title-D">INFP</div>
<p class="image__description-D">The Mediator</p>
</div>
</a>
</div>
<div class="image-ENFJ">
<img class="image__img-ENFJ" src="images/ENFJ.jpeg" alt="ENFJ">
<a href="explore/enfj.php">
<div class="image__overlay-ENFJ">
<div class="image__title-D">ENFJ</div>
<p class="image__description-D">The Protagonist</p>
</div>
</a>
</div>
<div class="image-ENFP">
<img class="image__img-ENFP" src="images/ENFP.jpeg" alt="ENFP">
<a href="explore/enfp.php">
<div class="image__overlay-ENFP">
<div class="image__title-D">ENFP</div>
<p class="image__description-D">The Campaigner</p>
</div>
</a>
</div>
<!-- SENTINALS -->
<h4>SENTINALS</h4>
<div class="image-ISTJ">
<img class="image__img-ISTJ" src="images/ISTJ.jpeg" alt="ISTJ">
<a href="explore/istj.php">
<div class="image__overlay-ISTJ">
<div class="image__title-S">ISTJ</div>
<p class="image__description-S">The Logistician</p>
</div>
</a>
</div>
<div class="image-ISFJ">
<img class="image__img-ISFJ" src="images/ISFJ.jpeg" alt="ISFJ">
<a href="explore/isfj.php">
<div class="image__overlay-ISFJ">
<div class="image__title-S">ISFJ</div>
<p class="image__description-S">The Defender</p>
</div>
</a>
</div>
<div class="image-ESTJ">
<img class="image__img-ESTJ" src="images/ESTJ.jpeg" alt="ESTJ">
<a href="explore/estj.php">
<div class="image__overlay-ESTJ">
<div class="image__title-S">ESTJ</div>
<p class="image__description-S">The Executive</p>
</div>
</a>
</div>
<div class="image-ESFJ">
<img class="image__img-ESFJ" src="images/ESFJ.jpeg" alt="ESFJ">
<a href="explore/esfj.php">
<div class="image__overlay-ESFJ">
<div class="image__title-S">ESFJ</div>
<p class="image__description-S">The Consul</p>
</div>
</a>
</div>
<!-- EXPLORER -->
<h5>EXPLORERS</h5>
<div class="image-ISTP">
<img class="image__img-ISTP" src="images/ISTP.jpeg" alt="ISTP">
<a href="explore/istp.php">
<div class="image__overlay-ISTP">
<div class="image__title-E">ISTP</div>
<p class="image__description-E">The Virtuoso</p>
</div>
</a>
</div>
<div class="image-ISFP">
<img class="image__img-ISFP" src="images/ISFP.jpeg" alt="ISFP">
<a href="explore/isfp.php">
<div class="image__overlay-ISFP">
<div class="image__title-E">ISFP</div>
<p class="image__description-E">The Adventurer</p>
</div>
</a>
</div>
<div class="image-ESTP">
<img class="image__img-ESTP" src="images/ESTP.jpeg" alt="ESTP">
<a href="explore/estp.php">
<div class="image__overlay-ESTP">
<div class="image__title-E">ESTP</div>
<p class="image__description-E">The Entrepreneur</p>
</div>
</a>
</div>
<div class="image-ESFP">
<img class="image__img-ESFP" src="images/ESFP.jpeg" alt="ESFP">
<a href="explore/esfp.php">
<div class="image__overlay-ESFP">
<div class="image__title-E">ESFP</div>
<p class="image__description-E">The Entertainer</p>
</div>
</a>
</div>
<script>
window.onscroll = function() {myFunction()};
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
</script>
</body>
</html>