-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhistory.html
199 lines (186 loc) · 8.41 KB
/
history.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>History of Protons</title>
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#2196f3">
<!-- TODO: add description and keywords -->
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="IEEE AlexSB Software Development Committee">
<link rel="apple-touch-icon" sizes="76x76" href="icons/apple-touch-icon.png">
<link rel="icon" type="image/png" href="icons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="icons/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="icons/manifest.json">
<link rel="mask-icon" href="icons/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-config" content="icons/browserconfig.xml">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/history.css">
</head>
<body>
<nav>
<div class="nav-wrapper white ">
<a href="index.html" id="brand-logo"><img src="media/protons-blue.png" alt="protons logo"></a>
<a href="#" data-activates="mobile-demo" id="button-collapse" class="button-collapse">
<div id="hamb">
<span class="blue"></span>
<span class="blue"></span>
<span class="blue"></span>
</div>
</a>
<ul class="right hide-on-med-and-down">
<li><a href="tracks.html" class="blue-text">Tracks</a></li>
<li><a href="history.html" class="blue-text">History</a></li>
<li><a href="faqs.html" class="blue-text">FAQs</a></li>
<li><a href="graduates.html" class="blue-text">Graduates</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li><a href="tracks.html">Tracks</a></li>
<li><a href="history.html">History</a></li>
<li><a href="faqs.html">FAQs</a></li>
<li><a href="graduates.html">Graduates</a></li>
</ul>
</div>
</nav>
<section id="intro">
<div class="row">
<div id="intro-structure">
<div id="intro-bubble"></div>
<div id="intro-grandma"></div>
<div id="intro-grandpa"></div>
<div id="intro-base"></div>
</div>
</div>
</section>
<section id="intro-text-sec">
<div class="row">
<div class="col l6 m6 s12 right-align">
<div class="col l8 offset-l3 m12 s12">
<img class="col l8 m8 hide-on-small-and-down bubble-pop-in" src="media/history/bubble-left-intro.png" alt="bubble">
<img class="col l4 m4 s4 offset-s4 offset-m0 char-pop-in-left" src="media/history/grandpa-small1.png" alt="grandpa">
</div>
</div>
<div class="col l6 m6 s12">
<div class="col l8 offset-l1 m11 offset-m1 left-align intro-text white-text text-fade-in">
<h3>Introduction</h3>
<p>protons founded by IEEE Alexandria Student Branch to help preparatory and senior students develop there
engineering skills.</p>
</div>
</div>
</div>
</section>
<section id="timeline-sec">
<div class="row">
<div class="col l6 m6 s12">
<div class="col l8 offset-l3 m12 s12 color-block">
<div class="left-align float-right text-fade-in">
<h2>2013</h2>
<p>We started our first episode of protons.</p>
</div>
</div>
</div>
<div class="col l6 m6 s12">
<div class="col l8 offset-l1 m11 offset-m1 hide-on-small-and-down">
<img class="col l4 m4 s4 char-pop-in-right" src="media/history/grandma-small1.png" alt="grandma">
<img class="col l8 m8 s8 bubble-pop-in" src="media/history/timeline-bubble-right-2013.png" alt="bubble">
</div>
</div>
</div>
<div class="row">
<div class="col l6 m6 s12">
<div class="col l8 offset-l3 m12 hide-on-small-and-down">
<div>
<img class="col l8 m8 bubble-pop-in" src="media/history/timeline-bubble-left-2014.png" alt="bubble">
<img class="col l4 m4 char-pop-in-left" src="media/history/grandpa-small2.png" alt="grandpa">
</div>
</div>
</div>
<div class="col l6 m6 s12 color-block">
<div class="col l8 offset-l1 m11 offset-m1 s12 text-fade-in">
<h2>2014</h2>
<p>We decided to continue the journey and enlarge the number of protons.</p>
</div>
</div>
</div>
<div class="row">
<div class="col l6 m6 s12">
<div class="col l8 offset-l3 m12 s12 color-block">
<div class="left-align float-right text-fade-in">
<h2>2015</h2>
<p>The ex-protons became mentors for the new protons.</p>
</div>
</div>
</div>
<div class="col l6 m6 s12">
<div class="col l8 offset-l1 m11 offset-m1 hide-on-small-and-down">
<img class="col l12 m12 char-pop-in-right" src="media/history/board.png" alt="black board">
</div>
</div>
</div>
<div class="row">
<div class="col l6 m6 s12">
<div class="col l8 offset-l3 m12 hide-on-small-and-down">
<div>
<img class="col l4 offset-l8 m4 offset-m8 char-pop-in-left" src="media/history/grandpa-small3.png" alt="grandpa">
</div>
</div>
</div>
<div class="col l6 m6 s12 color-block">
<div class="col l8 offset-l1 m11 offset-m1 s12 text-fade-in">
<h2>2016</h2>
<p>The project managers were a team of ex-protons and it was awesome to see the protons as IEEE AlexSB volunteers.</p>
</div>
</div>
</div>
<div class="row">
<div class="col l6 m6 s12">
<div class="col l8 offset-l3 m12 s12 color-block">
<div class="left-align float-right char-pop-in-left">
<h2>2017</h2>
<h3>HERE WE ARE <i id="smile-2017"></i></h3>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="row">
<img class="center-block" src="media/protons-black.png" alt="protons logo black">
</div>
<div class="row">
<h6 class="center-align">© IEEE AlexSB | Software Development Committee</h6>
</div>
</footer>
<div id="col-bubbles" class="hide-on-small-and-down col-bubbles-cont">
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
</div>
<div id="col-center" class="hide-on-small-and-down col-center-cont">
<div class="bubble color-bubble orange"></div>
<div class="bubble color-bubble cyan"></div>
<div class="bubble color-bubble yellow"></div>
<div class="bubble color-bubble brown"></div>
<div class="bubble color-bubble orange"></div>
<div class="arrow-down">
<div class="right"></div>
<div class="left"></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>
<script>
$(document).ready(function () {
$('#button-collapse').sideNav();
});
</script>
<script src="js/history.js"></script>
</body>
</html>