ZEPL · Leemoonsoo · Nov 8, 2013 · Nov 8, 2013
diff --git a/index.html b/index.html
@@ -9,6 +9,8 @@
     <link rel="stylesheet" type="text/css" href="stylesheets/bootstrap-theme.css" media="screen" />
     <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen" />
 
+
+
     <!--[if lt IE 9]>
     <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
     <![endif]-->
@@ -53,6 +55,7 @@
                 <ul class="dropdown-menu">
                   <li>{{#link-to 'howtocontribute'}}How to contribute{{/link-to}}</li>
                   <li>{{#link-to 'mailinglist'}}Mailing Lists{{/link-to}}</li>
+		  <li>{{#link-to 'team'}}Team{{/link-to}}</li>
                   <li><a href="https://github.com/NFLabs/zeppelin" target="_blank">Source Code</a></li>
                   <li><a href="https://zeppelin-project.atlassian.net/browse/ZEPPELIN">Issue Tracking</a></li>
                 </ul>
@@ -704,6 +707,37 @@ <h4>Zeppelin-developers</h4>
       </div>
     </script>
 
+
+
+    <script type="text/x-handlebars" data-template-name="team">
+      <link rel="stylesheet" type="text/css" href="stylesheets/starwars.css" media="screen" />
+
+      <p id="start">A short time ago in a galaxy very, very close&hellip;</p>
+
+      <h1>PROJECT ZEPPELIN<sub>Contributors</sub></h1>
+
+      <div id="titles">
+	<div id="titlecontent">
+
+	  <p class="center">EPISODE IV<br />
+	    A NEW HOPE FOR DATA ANALYTICS</p>
+
+	  <p>It is a period of vendor war.</p>
+
+	  <p>A successful project requires many people to play many roles. Some members write code or documentation, while others are valuable as testers, submitting patches and suggestions.</p>
+
+	  <p>The following is a list of developers with commit privileges that have directly contributed to the project in one way or another.</p>
+
+	  <p>- Lee Moon Soo <span style="margin-left: 5em;">NFLabs</span</p>
+	  <p>- Alexander Bezzubov <span style="margin-left: 2em;">NFLabs</span</p>
+	  <p>- Anthony Corbacho<span style="margin-left: 3em;">NFLabs</span</p>
+
+	  <p>Finally, Han shot first and the original, unadulterated movies remain the best. Stop fiddling with them, George!</p>
+	</div>
+      </div>
+
+    </script>
+
     <script type="text/x-handlebars" data-template-name="howtocontribute">
       <div class="row content-style3">
 	<div class="col-md-8">

diff --git a/javascripts/main.js b/javascripts/main.js
@@ -15,6 +15,7 @@ App.Router.map(function(){
     this.route("docZeppelinTutorial2", { path:"/doc/zeppelin/tutorial2"});
     this.route("docZeppelinTutorial3", { path:"/doc/zeppelin/tutorial3"});
     this.route("mailinglist", { path:"/mailinglist"});
+    this.route("team", { path:"/team"});
     this.route("howtocontribute", { path:"/development/howtocontribute"});
 });
 

diff --git a/stylesheets/starwars.css b/stylesheets/starwars.css
@@ -0,0 +1,222 @@
+/* 
+** ALL CREDIT GOES TO 
+** Craig Buckler
+** http://www.sitepoint.com/css3-starwars-scrolling-text/
+**
+*/
+
+@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700);
+
+* { padding: 0; margin: 0; }
+
+body, html
+{
+  width: 100%;
+  height: 100%;
+  font-family: "Droid Sans", arial, verdana, sans-serif;
+  font-weight: 700;
+  color: #ff6;
+  background-color: #000;
+  overflow: hidden;
+}
+
+p#start
+{
+	position: relative;
+	width: 16em;
+	font-size: 200%;
+	font-weight: 400;
+	margin: 20% auto;
+	color: #4ee;
+	opacity: 0;
+	z-index: 1;
+	-webkit-animation: intro 2s ease-out;
+	-moz-animation: intro 2s ease-out;
+	-ms-animation: intro 2s ease-out;
+	-o-animation: intro 2s ease-out;
+	animation: intro 2s ease-out;
+}
+
+@-webkit-keyframes intro {
+		   0% { opacity: 1; }
+		   90% { opacity: 1; }
+		   100% { opacity: 0; }
+}
+
+@-moz-keyframes intro {
+		0% { opacity: 1; }
+		90% { opacity: 1; }
+		100% { opacity: 0; }
+}
+
+@-ms-keyframes intro {
+	       0% { opacity: 1; }
+	       90% { opacity: 1; }
+	       100% { opacity: 0; }
+}
+
+@-o-keyframes intro {
+	      0% { opacity: 1; }
+	      90% { opacity: 1; }
+	      100% { opacity: 0; }
+}
+
+@keyframes intro {
+	   0% { opacity: 1; }
+	   90% { opacity: 1; }
+	   100% { opacity: 0; }
+}
+
+h1
+{
+	position: absolute;
+	width: 2.6em;
+	left: 50%;
+	top: 25%;
+	font-size: 10em;
+	text-align: center;
+	margin-left: -1.3em;
+	line-height: 0.8em;
+	letter-spacing: -0.05em;
+	color: #000;
+	text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
+	opacity: 0;
+	z-index: 1;
+	-webkit-animation: logo 5s ease-out 2.5s;
+	-moz-animation: logo 5s ease-out 2.5s;
+	-ms-animation: logo 5s ease-out 2.5s;
+	-o-animation: logo 5s ease-out 2.5s;
+	animation: logo 5s ease-out 2.5s;
+}
+
+h1 sub
+{
+	display: block;
+	font-size: 0.3em;
+	letter-spacing: 0;
+	line-height: 0.8em;
+}
+
+@-webkit-keyframes logo {
+		   0% { -webkit-transform: scale(1); opacity: 1; }
+		   50% { opacity: 1; }
+		   100% { -webkit-transform: scale(0.1); opacity: 0; }
+}
+
+@-moz-keyframes logo {
+		0% { -moz-transform: scale(1); opacity: 1; }
+		50% { opacity: 1; }
+		100% { -moz-transform: scale(0.1); opacity: 0; }
+}
+
+@-ms-keyframes logo {
+	       0% { -ms-transform: scale(1); opacity: 1; }
+	       50% { opacity: 1; }
+	       100% { -ms-transform: scale(0.1); opacity: 0; }
+}
+
+@-o-keyframes logo {
+	      0% { -o-transform: scale(1); opacity: 1; }
+	      50% { opacity: 1; }
+	      100% { -o-transform: scale(0.1); opacity: 0; }
+}
+
+@keyframes logo {
+	   0% { transform: scale(1); opacity: 1; }
+	   50% { opacity: 1; }
+	   100% { transform: scale(0.1); opacity: 0; }
+}
+
+/* the interesting 3D scrolling stuff */
+#titles
+{
+	position: absolute;
+	width: 18em;
+	height: 50em;
+	bottom: 0;
+	left: 50%;
+	margin-left: -9em;
+	font-size: 350%;
+	text-align: justify;
+	overflow: hidden;
+	-webkit-transform-origin: 50% 100%;
+	-moz-transform-origin: 50% 100%;
+	-ms-transform-origin: 50% 100%;
+	-o-transform-origin: 50% 100%;
+	transform-origin: 50% 100%;
+	-webkit-transform: perspective(300px) rotateX(25deg);
+	-moz-transform: perspective(300px) rotateX(25deg);
+	-ms-transform: perspective(300px) rotateX(25deg);
+	-o-transform: perspective(300px) rotateX(25deg);
+	transform: perspective(300px) rotateX(25deg);
+}
+
+#titles:after
+{
+	position: absolute;
+	content: ' ';
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 60%;
+	background-image: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
+	background-image: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
+	background-image: -ms-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
+	background-image: -o-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
+	background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
+	pointer-events: none;
+}
+
+#titles p
+{
+	text-align: justify;
+	margin: 0.8em 0;
+}
+
+#titles p.center
+{
+	text-align: center;
+}
+
+#titles a
+{
+	color: #ff6;
+	text-decoration: underline;
+}
+
+#titlecontent
+{
+	position: absolute;
+	top: 100%;
+	-webkit-animation: scroll 100s linear 4s infinite;
+	-moz-animation: scroll 100s linear 4s infinite;
+	-ms-animation: scroll 100s linear 4s infinite;
+	-o-animation: scroll 100s linear 4s infinite;
+	animation: scroll 100s linear 4s infinite;
+}
+
+/* animation */
+@-webkit-keyframes scroll {
+		   0% { top: 100%; }
+		   100% { top: -170%; }
+}
+
+@-moz-keyframes scroll {
+		0% { top: 100%; }
+		100% { top: -170%; }
+}
+
+@-ms-keyframes scroll {
+	       0% { top: 100%; }
+	       100% { top: -170%; }
+}
+
+@-o-keyframes scroll {
+	      0% { top: 100%; }
+	      100% { top: -170%; }
+}
+
+@keyframes scroll {
+	   0% { top: 100%; }
+	   100% { top: -170%; }
+}