-
Notifications
You must be signed in to change notification settings - Fork 0
/
detail.html
executable file
·231 lines (227 loc) · 14.8 KB
/
detail.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
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Web Application</title>
<!-- fonts -->
<link rel="stylesheet" href="./fonts/ep-icon-fonts/css/ep-font.css">
<link rel="stylesheet" href="./fonts/fontawesome-5/css/all.min.css">
<!-- Custom Stylesheet -->
<link rel="stylesheet" href="./css/settings.css">
<link rel="stylesheet" href="./css/detail.css">
<link rel="stylesheet" href="./css/carousel.css">
<link rel="stylesheet" href="./css/careerPath.css">
</head>
<body>
<!-- <div class="landing-wrapper" style="background-image: url('image/Background.jpg');"> -->
<div class="landing-wrapper">
<header class="site-header">
<div class="header-container">
<div class="brand">
<a href="./index.html"><img src="image/Logo.svg" id="logo" /></a>
</div>
<!-- Search area -->
<div id="search-area">
<div class="search-container focus-search">
<svg class="mag-glass focus-search" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Search</title>
<desc>Created with Sketch 59.1 (86144) - https://sketch.com</desc>
<defs>
<path d="M10,0 C15.5228475,0 20,4.4771525 20,10 C20,12.3995053 19.1548784,14.6016219 17.7460549,16.32493 L23.71,22.28 C23.8993127,22.4677666 24.0057983,22.7233625 24.0057983,22.99 C24.0057983,23.2566375 23.8993127,23.5122334 23.71,23.7 C23.5229286,23.8908556 23.2672459,23.9988906 23,24.0000167 C22.734197,24.0015368 22.4787188,23.8971865 22.29,23.71 L16.3259284,17.7452386 C14.6024725,19.1545519 12.3999687,20 10,20 C4.4771525,20 0,15.5228475 0,10 C0,4.4771525 4.4771525,0 10,0 Z M10,2 C5.581722,2 2,5.581722 2,10 C2,14.418278 5.581722,18 10,18 C14.418278,18 18,14.418278 18,10 C18,7.87826808 17.1571453,5.84343678 15.6568542,4.34314575 C14.1565632,2.84285472 12.1217319,2 10,2 Z" id="path-search"></path>
</defs>
<g id="Search-/-Alt-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<mask id="mask-2" fill="white">
<use xlink:href="#path-search"></use>
</mask>
<use id="Combined-Shape" fill="none" fill-rule="nonzero" xlink:href="#path-search"></use>
<rect id="svg-search" fill="none" mask="url(#mask-2)" x="0" y="0" width="24" height="24"></rect>
</g>
</svg>
<form class="search-box">
<input type="text" class="search focus-search" placeholder="Type your dream here"/>
</form>
<a class="clear-x-wrapper focus-search"><svg class="clear-search-x focus-search" width="10px" height="10px" viewBox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title></title>
<desc>Created with Sketch 59.1 (86144) - https://sketch.com</desc>
<defs>
<path d="M8.71,7.29 L11.9992017,10.5798855 L15.29,7.29 C15.6821222,6.89787783 16.3178778,6.89787783 16.71,7.29 C17.1021222,7.68212217 17.1021222,8.31787783 16.71,8.71 L13.4192017,11.9998855 L16.71,15.29 C16.8993127,15.4777666 17.0057983,15.7333625 17.0057983,16 C17.0057983,16.2666375 16.8993127,16.5222334 16.71,16.71 C16.5212812,16.8971865 16.265803,17.0015368 16,17.0000167 C15.734197,17.0015368 15.4787188,16.8971865 15.29,16.71 L11.9992017,13.4198855 L8.71,16.71 C8.52128117,16.8971865 8.26580298,17.0015368 8,17.0000167 C7.73419702,17.0015368 7.47871883,16.8971865 7.29,16.71 C7.10068735,16.5222334 6.99420168,16.2666375 6.99420168,16 C6.99420168,15.7333625 7.10068735,15.4777666 7.29,15.29 L10.5792017,11.9998855 L7.29,8.71 C7.03634143,8.45634143 6.93727648,8.08662601 7.03012196,7.74012196 C7.12296744,7.39361791 7.39361791,7.12296744 7.74012196,7.03012196 C8.08662601,6.93727648 8.45634143,7.03634143 8.71,7.29 Z" id="path-X"></path>
</defs>
<g id="Icons-by-mad-lab.studio" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Validation-/-Cross-x" transform="translate(-7.000000, -7.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-X"></use>
</mask>
<use id="svg-X" fill="none" fill-rule="nonzero" xlink:href="#path-X"></use>
</g>
</g>
</svg></a>
</div>
<div class="list-wrapper">
<!-- below for testing -->
<!-- <div class='list-container'>
<ul class="dropdownList">
<a class="dropdown-a">
<li class="dropdown-item hl whiteBkgrnd">Type testing Yo</li>
</a>
</ul>
</div> -->
</div>
</div>
<!-- Main navigation -->
<div class="main-navigation">
<div class="main-menu-wrapper">
<ul class="main-menu">
<li class="menu-item item-hl"><a href="./detail.html">Dreamwise</a></li>
<li class="menu-item item-hl"><a href="./detail.html#UX Product Designer">Ask Designers</a></li>
<li class="menu-item item-hl"><a href="./detail.html#UX Product Designer">Need Designers</a></li>
<li class="menu-item item-hl"><a href="#about">About</a></li>
</ul>
</div>
</div>
</div>
</header>
<!-- Carousel Section -->
<div class="carousel-section">
<div class="carousel-container">
<div class="team">
<button class="carousel-btn left-btn" >
<svg class="arrow left" width="13px" height="24px" viewBox="0 0 13 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Left</title>
<desc>Created with Sketch 59.1 (86144) - https://sketch.com</desc>
<defs>
<path d="M18.7067667,11.1220408 L7.7071593,0.288792598 C7.31618944,-0.0962641993 6.68419727,-0.0962641993 6.2932274,0.288792598 C5.90225753,0.673849395 5.90225753,1.29628325 6.2932274,1.68134005 L16.5858454,11.8182915 L6.2932274,21.9552429 C5.90225753,22.3402997 5.90225753,22.9627335 6.2932274,23.3477903 C6.48822016,23.539834 6.74419504,23.6363636 7.00021679,23.6363636 C7.25619166,23.6363636 7.51221341,23.539834 7.70720618,23.3477903 L18.7068136,12.5145421 C19.0977366,12.1295315 19.0977366,11.5070976 18.7067667,11.1220408 Z" id="path-left"></path>
</defs>
<g id="Icons-by-mad-lab.studio&PearPlus" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Arrow-/-Left2" transform="translate(-6.000000, 0.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-left"></use>
</mask>
<use id="svg-arrow" fill="#000000" fill-rule="nonzero" transform="translate(12.500000, 11.818182) scale(-1, 1) translate(-12.500000, -11.818182) " xlink:href="#path-left"></use>
</g>
</g>
</svg>
</button>
<ul class="teammember-list">
<!-- <li class="teammember" >
<a href="#Placeholder" class="list-inline-item" data-index=0>
Product Manager1
</a>
</li> -->
</ul>
<button class="carousel-btn right-btn" >
<svg class="arrow right" width="13px" height="24px" viewBox="0 0 13 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Right</title>
<desc>Created with Sketch 59.1 (86144) - https://sketch.com</desc>
<defs>
<path d="M18.7067667,11.1220408 L7.7071593,0.288792598 C7.31618944,-0.0962641993 6.68419727,-0.0962641993 6.2932274,0.288792598 C5.90225753,0.673849395 5.90225753,1.29628325 6.2932274,1.68134005 L16.5858454,11.8182915 L6.2932274,21.9552429 C5.90225753,22.3402997 5.90225753,22.9627335 6.2932274,23.3477903 C6.48822016,23.539834 6.74419504,23.6363636 7.00021679,23.6363636 C7.25619166,23.6363636 7.51221341,23.539834 7.70720618,23.3477903 L18.7068136,12.5145421 C19.0977366,12.1295315 19.0977366,11.5070976 18.7067667,11.1220408 Z" id="path-right"></path>
</defs>
<g id="Icons-by-mad-lab.studio&PearPlus" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Arrow-/-Right2" transform="translate(-6.000000, 0.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-right"></use>
</mask>
<use id="svg-arrow" fill="#000000" fill-rule="nonzero" xlink:href="#path-right"></use>
</g>
</g>
</svg>
</button>
</div>
</div>
</div>
<!-- career path map -->
<main class="career-path">
<!-- need to convert to dynamic list eventually instead of hardcoded -->
<div class="path-title">Career Path for... (choose one from above)</div>
<div class="career-path-outer-container">
<div class="career-path-container">
<!-- <div class="row-zero level-container">
<div class="line-dot left">
</div>
<div class="line-dot middle">
</div>
<div class="line-dot right">
<div class="line right" style="border-color: var(--white-bkgd)"></div>
<div class="dot right"><a href="#Placeholder" class="level-title right item-hl">Junior Designer</a></div>
</div>
</div>
<div class="row-one level-container">
<div class="line-dot left">
</div>
<div class="line-dot middle">
</div>
<div class="line-dot right">
<div class="line right"></div>
<div class="dot right"><a href="#Placeholder" class="level-title right item-hl">Senior Designer</a></div>
</div>
</div>
<div class="row-split level-container">
<div class="line-dot left">
<div class="line left" style="border-color: var(--white-bkgd"></div>
<div class="textbox left"><a href="#Placeholder" class="level-title left item-hl">Principal Designer</a></div>
</div>
<div class="curve-dot middle">
<svg class="svg-curve-line" width="80px" height="80px" viewBox="0 17 80 40">
<path class="curve-line-path" stroke="black" strok-width="1" fill="none"
d="m81 0 v10
q5 30 -30 30
h-20
q-35 0 -30 30
v10
" />
</svg>
<div class="dot middle"></div>
</div>
<div class="line-dot right">
<div class="line right"></div>
<div class="dot right"><a href="#Placeholder" class="level-title right item-hl">Design Manager</a></div>
</div>
</div>
<div class="row-multi-routes level-container">
<div class="line-dot left">
<div class="line left" style="border-color: var(--white-bkgd"></div>
<div class="textbox left"><a href="#Placeholder" class="level-title left item-hl">Senior Principal Designer</a></div>
</div>
<div class="line-dot middle">
<div class="line middle"></div>
<div class="dot middle"></div>
</div>
<div class="line-dot right">
<div class="line right"></div>
<div class="dot right"><a href="#Placeholder" class="level-title right item-hl">Senior Design Manager</a></div>
</div>
</div>
<div class="row-4 level-container">
<div class="line-dot left">
</div>
<div class="line-dot middle">
</div>
<div class="line-dot right">
<div class="line right"></div>
<div class="dot right"><a href="#Placeholder" class="level-title right item-hl">Director of Design</a></div>
</div>
</div>
<div class="row-5 level-container">
<div class="line-dot left">
</div>
<div class="line-dot middle">
</div>
<div class="line-dot right">
<div class="line right"></div>
<div class="dot right"><a href="#Placeholder" class="level-title right item-hl">VP of Design</a></div>
</div>
</div> -->
</div>
<!-- <div class="right-padding">hello
</div> -->
</div>
</main>
<!-- <footer>Plum & Pear</footer> -->
</div>
<script src="./js/search.js"></script>
<script src="./js/data.js"></script>
<script src="./js/carousel.js"></script>
<script src="./js/careerPath.js"></script>
</body>
</html>