-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
217 lines (213 loc) · 7.77 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
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
<!DOCTYPE html>
<html lang="en" ng-app="toptal">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Toptal test</title>
<!-- Bootstrap -->
<link href="/dist/css/toptal.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="page-wrap" ng-controller="ToptalController">
<header class="site-header">
<div class="container">
<section class="top row">
<div class="logo">
<a href="/"><img src="/images/logo.png" alt="logo" width="107" height="48"></a>
<span class="headline hide-tablet-down"><strong><em>Exclusive access to top developers</em></strong></span>
</div>
<div class="cta">
<a class="secondary-button" href="#">DEVELOPER</a>
<a class="secondary-button" href="#">COMPANY</a>
<a class="gray-button login-button" href="#">LOGIN</a>
</div>
</section>
<section class="bottom row">
<nav class="navigation">
<div class="mobile-menu-button">
<a href="#" ng-click="toggleMenu(true)"><i class="fa fa-bars"></i></a>
</div>
<ul ng-show="showMenu">
<li class="mobile-up-hidden close"><a ng-click="toggleMenu(false)" href="#"><i class="fa fa-times-circle"></i></a></li>
<li class="mobile-up-hidden"><a href="#">login</a></li>
<li class="mobile-up-hidden"><a href="#">developer sing up</a></li>
<li class="mobile-up-hidden"><a href="#">company sing up</a></li>
<li class="mobile-up-hidden divider"></li>
<li><a href="#">what</a></li>
<li><a href="#">why</a></li>
<li><a href="#">how</a></li>
<li><a href="#">clients</a></li>
<li><a href="#">team</a></li>
<li><a href="#">labs</a></li>
<li><a href="#">faq</a></li>
<li><a href="#">contact</a></li>
</ul>
</nav>
<div class="phone">
<span>Call us: </span><a href="tel:8883234422">888.323.4422</a>
</div>
</section>
</div>
</header>
<section class="content">
<div class="container">
<header class="content-header">
<div class="profile-image">
<label class="edit-link" ng-class="{hasImage : imageSrc}">
<span ng-show="!imageSrc">Add profile Image...</span>
<input type="file" onchange="angular.element(this).scope().uploadFile(this, 'imageSrc')" />
<img ng-show="imageSrc" ng-src="{{imageSrc}}">
</label>
</div>
<div class="profile-info">
<div class="row">
<div class="basic-info">
<myname></myname>
<myLocation></myLocation>
<mylanguages></mylanguages>
<myskill></myskill>
</div>
<div class="profile-actions">
<div class="actions">
<a class="primary-button" href="#">SAVE PROFILE</a>
<a class="primary-button disabled" href="#">PUBLISH PROFILE</a>
</div>
<span>(You can only publish a completed profile)</span>
</div>
</div>
<label class="resume">
<span class="primary-button"><i class="fa fa-upload"></i> UPLOAD RESUME</span>
<input type="file" />
</label>
</div>
</header>
<section class="about">
<ul>
<li class="block">
<myportfolio></myportfolio>
</li>
<li class="block">
<mycontent title="Experience" class="mycontent"></mycontent>
</li>
<li class="block">
<mycontent title="Sample code and algorithms" class="mycontent"></mycontent>
</li>
<li class="block">
<a href="#" class="half-block">
<div class="title">Availability</div>
<div class="availability">
Full-Time
</div>
</a>
<mycontent title="Preferred environment" class="mycontent half-block"></mycontent>
</li>
</ul>
<ul>
<li class="block quote">
<mycontent title="The most amazing..." class="mycontent"></mycontent>
</li>
<li class="block quote">
<mycontent title="In clients I look for..." class="mycontent"></mycontent>
</li>
<li class="block">
<a href="#">
<span ng-hide="location" >
<div class="title">Location</div>
<div class="content">Add content...</div>
</span>
<span ng-show="location" >
<div id="map"></div>
<div class="location">{{location}}</div>
</span>
</a>
</li>
<li class="block quote">
<mycontent title="Note" class="mycontent"></mycontent>
</li>
</ul>
<div class="block-divider">Let me introduce myself...</div>
<ul>
<li class="block">
<mycontent title="" class="mycontent"></mycontent>
</li>
<li class="block">
<mycontent title="" class="mycontent"></mycontent>
</li>
<li class="block">
<mycontent title="" class="mycontent"></mycontent>
</li>
<li class="block">
<mycontent title="" class="mycontent"></mycontent>
</li>
</ul>
<section class="qa-form">
<p class="qa-btn-container"><span>Important please also fill out the QA form </span> <a class="secondary-button rounded-corners" href="#"><strong>Q&A FORM</strong></a></p>
<p>5 of 25 questions answered</p>
</section>
</section>
<section class="skills row">
<h3><strong>Top skills on toptal</strong></h3>
<ul class="skills-column" ng-repeat="skills in topSkills">
<li ng-repeat="skill in skills" ng-class="{letter : skill.length < 2}"><a href="#">{{skill}}</a></li>
</ul>
</section>
</div>
</section>
</div>
<footer class="join-us">
<div class="container">
<h3>Join toptal community. <span> Apply to work with us as a </span> <a class="secondary-button rounded-corners" href="#">Developer</a> or <a class="secondary-button rounded-corners" href="#">Client</a></h3>
</div>
</footer>
<footer class="main-footer">
<div class="container">
<div class="about">
<h4>About toptal</h4>
<p>Toptal connects start-ups, businesses, and organizations to a growing network of the best developers in the world. Our engineers are available full- or part-time and are able to seemlessly integrate to your team.</p>
</div>
<div class="faq">
<h4>Faq</h4>
<ul>
<li><a href="#">How can I join toptal?</a></li>
<li><a href="#">What requirement I have to meet?</a></li>
<li><a href="#">How do you pay me?</a></li>
<li><a href="#">Lorem ipsum dolor it?</a></li>
<li><a href="#">Rokok ini nula fcilis?</a></li>
</ul>
</div>
<div class="footer-navigation">
<nav>
<ul>
<li><a href="#">What</a></li>
<li><a href="#">Why</a></li>
<li><a href="#">How</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Lab</a></li>
</ul>
</nav>
</div>
<div class="footer-links">
<ul>
<li><a href="#"><b>Contact</b></a></li>
<li><a href="#">Join us</a></li>
<li><a href="mailto:[email protected]">Send us email</a></li>
<li><a href="#">Follow us on twitter</a></li>
<li><a href="tel:8883234422">Call us 888.323.4422</a></li>
</ul>
</div>
</div>
</footer>
<script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="/dist/js/toptal.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDGY1xAY1rbmnefcMw0-7MRH3B8rHycY3s"></script>
</body>
</html>