-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
200 lines (183 loc) · 6.05 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>emPathy</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<nav id="navbar">
<a href="index.html">emPathy<span></a>
<a href="about.html">About</a>
<a href="questions.html">Quiz</a>
<form id="searchbox">
<input type="text" id="search-input" aria-label="Search" placeholder="search..." />
<svg id="search-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="feather feather-search">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
</form>
<a href="login.html">Login</a>
<a href="career.html">Career</a>
</nav>
<main>
<div class="bubble" id="x1"></div>
<div class="bubble" id="x2"></div>
<div class="bubble" id="x3"></div>
<div class="bubble" id="x4"></div>
<div class="bubble" id="x5"></div>
<div class="bubble" id="x6"></div>
<section class="emp-content-dark emp-banner">
<div class="block">
<div>
<h1 class="white-fg">em<span class="green-fg">Pathy</span></h1>
<h3 class="orange-fg">Helping you find your path with emPathy.</h3>
<p class="white-fg">
Careers? Hobbies? Skills? We gather the information so you can
get started right away.
</p>
<a href="signup.html"><button id="signup-button">Sign up</button></a>
<span class="white-fg">or</span>
<a href="login.html"><button id="login-button">Log in</button></a>
</div>
<img id="logo-picture" src="assets/logo1.jpg"></img>
</div>
</section>
<div class="wave"></div>
<section class="emp-content box">
<h2 class="heading">About emPathy</h2>
<div class="row">
<div>
<h3>Resources, resources!</h3>
<p>
With a curated list of resources, you never have to scour the
internet again. Better yet, we work continously with experts and
audiences to keep the content updated and accurate.
</p>
</div>
<div>
<h3>Path to success</h3>
<p>
Keep track of your goals with integrated progress checks. Compare
it with your past self or others around you level to ensure
steady progress.
</p>
</div>
<div>
<h3>Exploring paths</h3>
<p>
Not satisfied with your current career? Want to learn something
new? Explore new options! From jobs to careers to hobbies!
</p>
</div>
</div>
</section>
<section class="emp-content-alt">
<h2 class="heading">Why Choose emPathy?</h2>
<div class="grid3col">
<ul>
<h3>Learners</h3>
<li>progress tracker and recorder</li>
<li>centralized up-to-date resources</li>
<li>easy job, carrer, and hobby search</li>
<li>professional guidance (pay)</li>
</ul>
<ul>
<h3>Educators</h3>
<li>collaboration on resources</li>
<li>more exposure to learners</li>
<li>offers to create quality resources</li>
</ul>
<ul>
<h3>Job Recruiters</h3>
<li>access to pool of determined learners</li>
<li>collaborations for more exposure</li>
<li>ability to target niche job markets</li>
</ul>
<ul>
<h3>Community</h3>
<li>access to curated resources free of charge</li>
<li>engagement with community to ensure quality resources</li>
<li>create a market for well written resources</li>
</ul>
<ul>
<h3>You</h3>
<li>assist you in your career and education</li>
<li>learn new skills or hobbies for fun</li>
<li>provide an alternative means of education</li>
</ul>
</div>
</section>
<section class="diagonal-container emp-content-alt">
<div class="diagonal-content" id="gallery-container">
<h2 class="heading white-fg">Pictures</h2>
<button id="gallery-prev">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-chevron-left">
<polyline points="15 18 9 12 15 6"></polyline>
</svg>
</button>
<button id="gallery-next">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-chevron-right">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</button>
<div id="gallery">
<img class="gallery-images" src="assets/university.jpg"
alt="Image of a university classroom with students in it">
</img>
<img class="gallery-images" src="assets/hobby.jpg"
alt="Image of a university classroom with students in it">
</img>
</div>
</div>
</section>
<section class="emp-content-alt">
<h2 class="heading heading--pad">Reaching out</h2>
<div class="row row--tighten emp-links">
<ul>
<h3>Company</h3>
<li><a href="">Our goals</a></li>
<li><a href="">Homepage</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Donate</a></li>
</ul>
<ul>
<h3>Resources</h3>
<li><a href="">Learning</a></li>
<li><a href="">Spaced repitition</a></li>
<li><a href="">Pomodoro</a></li>
<li><a href="">Advice</a></li>
</ul>
<ul>
<h3>Support</h3>
<li><a href="">Product help</a></li>
<li><a href="">File a bug</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Localization</a></li>
</ul>
<ul>
<h3>Partnering</h3>
<li><a href="">Guidelines</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Benefits</a></li>
</ul>
</div>
<footer>
<hr>
©2023 by emPathy<br>
Made for AllStarCode demo day by Zhejie, Pius, and Ivan
</footer>
</section>
</main>
<script src="gallery.js"></script>
<script src="search.js"></script>
</body>
</html>