-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtabs.html
More file actions
228 lines (201 loc) · 11.4 KB
/
tabs.html
File metadata and controls
228 lines (201 loc) · 11.4 KB
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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>tabs</title>
<link rel="stylesheet" type="text/css" href="css/tabs.css">
<script src="js/tabs.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="tab_container" style="padding-top: 0;">
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1"><i style="font-size:24px" class="fa"></i><span>JG'17</span></label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2"><i style="font-size:24px" class="fa"></i><span>Content</span></label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3"><i style="font-size:24px" class="fa"></i><span>Facts</span></label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4"><i style="font-size:24px" class="fa"></i><span>Schedule</span></label>
<input id="tab5" type="radio" name="tabs">
<label for="tab5"><i style="font-size:24px" class="fa"></i><span>Speakers</span></label>
<section id="content1" class="tab-content">
<!--JUST GRADUATED'17 PICTURES TAB************************************************************** -->
<div class="container">
<div class="page-header text-center"></div>
<ul class="timeline">
<!--left col /row 1 -->
<li>
<div class="timeline-badge primary">
<a><i class="glyphicon glyphicon-record" rel="tooltip" id=""></i>
</a>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<img class="img-responsive" src="img/jg17.png"/></div>
<div class="timeline-footer"></div>
</div>
</li>
<!--right col /row 1-->
<li class="timeline-inverted">
<div class="timeline-badge primary">
<a>
<i class="glyphicon glyphicon-record invert" rel="tooltip" id=""></i>
</a>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<img class="img-responsive" src="img/c2.jpg"/></div>
<div class="timeline-body">
<p style=" color:#2B3856; font-weight:bold;">Research track represents the segment that can
push our lives to the better. Through research, you can work on the demonstration of new
systems that can open the doors to great technological breakthroughs. For me, it 's more
pleasant and joyful to work on research projects more than being obligated to do a
certain job and be constrained by certain limits.</p>
</div>
<div class="timeline-footer"></div>
</div>
</li>
<!--right col / row2 -->
<li class="timeline-inverted">
<div class="timeline-badge primary">
<a>
<i class="glyphicon glyphicon-record invert" rel="tooltip" id=""></i>
</a>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<img class="img-responsive" src="img/c3.jpg"/>
</div>
<div class="timeline-body">
<p style=" color:#2B3856; font-weight:bold;">Starting after graduation is a delusion,
imagine that you are competing with 7000 engineer with the same skills and
technicalities. You'll never have a chance to be selected for a good job. You should
start while you are in the University, where you have plenty of time to work in
projects, do civil activities and voluntary work. That's in addition to learning the
needed technical skills that are not delivered in college.
</p>
</div>
<div class="timeline-footer"></div>
</div>
</li>
<!--left col /row 2-->
<li>
<div class="timeline-badge primary">
<a>
<i class="glyphicon glyphicon-record" rel="tooltip" title="11 hours ago via Twitter"
id=""></i>
</a>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<img class="img-responsive" src="img/c1.jpg" />
</div>
<div class="timeline-body">
<p style=" color:#2B3856; font-weight:bold;">Two crucial skills freelancers must have are:
self-learning and self-discipline. Nobody forces you to work or learn or gain
experience. You set goals and stick to them no matter what. If you can't do that, you're
doomed to fail before you even start."</p>
</div>
<div class="timeline-footer"></div>
</div>
</li>
<li class="clearfix" style="float: none;"></li>
</ul>
</div>
</section>
<!--EVENT CONTENT TAB********************************************************************* -->
<section id="content2" class="tab-content">
<div class="container">
<div class="col-md-4">
<a class="btn btn-block btn-lg btn-amber" data-target="#mymodal">
<i class="fa fa-cog fa-spin" id="icone_grande"></i> <br><br>
<span class="texto_grande">
<i class="fa fa-television"></i>
Sessions
</span>
</a>
<p></p>
<p></p>
<p style=" color:#2B3856; font-weight:bold;">Throughout extensive informative sessions given by HR professionals and prominent speakers, you will get an all-inclusive view of the process that follows graduation.
Starting from preparing a CV, creating a catchy LinkedIn profile, to finding the right job and acing the HR interview.</p>
</div>
<div class="col-md-4">
<a class="btn btn-block btn-lg btn-red" data-toggle="modal" data-target="#mymodal">
<i class="glyphicon glyphicon-briefcase" id="icone_grande"></i> <br><br>
<span class="texto_grande"><i class="fa fa-pencil-square-o"></i> Workshops</span></a>
<p></p>
<p></p>
<p style=" color:#2B3856; font-weight:bold;">Interactive workshops will help you take a good grip on essential soft skills that will help you pave the way of your professional development.
Communication skills, leadership skills, team management and workplace ethics are important skills to earn if you’re willing to pursue an exceptional career.</p>
</div>
<div class="col-md-4">
<a class="btn btn-block btn-lg btn-navyblue" data-toggle="modal" data-target="#mymodal">
<i class="fa fa-users" id="icone_grande"></i> <br><br>
<span class="texto_grande"><i style="font-size:24px" class="fa"></i> Mock Interviews</span></a>
<p></p>
<p></p>
<p style=" color:#2B3856; font-weight:bold;">“The Great Aim of Education is Not Knowledge, But Action.” <br>
Getting a real life experience is the most efficient learning tool. In our Mock-Interviews, you will be interviewed by professional
HR specialists who will provide you with a detailed assessment of your performance.</p>
</div>
</div>
</section>
<!--FACTS TAB **************************************************************************** -->
<section class="container" id="content3" class="tab-content">
<div id="myDiv">
<img src="img/c4.jpg" border="0" alt="Facts image">
</div>
</section>
<!--SCHEDULE TAB *********************************************************************** -->
<section id="content4" class="tab-content">
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="board">
<div class="board-inner">
<ul class="nav nav-tabs" id="myTab">
<div class="liner"></div>
<li><a href="#day-one" data-toggle="tab" title="profile">
<span class="round-tabs one">
<i>6<sup>th</sup> July</i>
</span> </a>
</li>
<li><a href="#day-two" data-toggle="tab" title="bootsnipp goodies">
<span class="round-tabs two">
<i>7<sup>th</sup> July</i>
</span> </a>
</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane fade in active" id="day-one">
<div id="myDiv">
<img src="img/d1.jpg" alt="d1" width="" height=""/>
</div>
</div>
<div class="tab-pane fade" id="day-two">
<div id="myDiv">
<img src="img/d2.jpg" alt="d2" width="" height=""/>
</div>
</div>
<!--<div class="clearfix"></div>-->
</div>
</div>
</div>
</div>
</section>
<!--SPEAKERS TAB**************************************************************************** -->
<section id="content5" class="tab-content">
<iframe width="100%" height="505" src="speakers/index.html" frameborder="0"
allowfullscreen></iframe>
</section>
</div>
</body>
</html>