FRC 1885: ILITE Robotics Website Launch

Technical Website Design/Showcase
1

ILITE Robotics has had a long history of web development and is very proud of the progress we have made thus far on our 2012 website. For the first time ever the team has moved to a custom developed content management system, implementing core components from Wordpress.

Our web team expanded on the capabilities of Wordpress to enhance the back end editors to make page development easier for non web programmers. Even more exciting yet, this years web team is made up entirely of freshmen, with the one returning senior member acting solely as a mentor.

The content is not yet complete, and we are continuously developing new modules and elements, but we encourage you to take a look at what we have so far, and provide any feedback that you may have.

www.iliterobotics.org

2

One word… WOW! I have finally found a website that I think is more nicer then ours! How long did you guys spend developing it? I spent 1 1/2 weeks of development on ours. You gave me some ideas to add to ours. The awesomest thing I love about your site is that it is beautiful and sleek, while having a wordpress backend.

Keep up the great work!

3

The site looks great! One issue though, the pull down menu buttons don’t work when I access the site with a tablet. I am using an iPad with iOS 6, and accessing through Safari.

Good luck, and we will see you in DC!

Steve

4

Just found the Harlem Shake button. Your web team are my heroes.

5

Glad you liked it. That feature was a surprise developed by our head website developer. He is a brilliant student, who loves pushing the boundary of what can be done with code. We came in to a meeting one day after finding that and asked, “Victor, what is this?” Needless to say, everyone laughed.

6

Love the Student / Parents / Community buttons, did you use a plugin for that or hard code it?

7

Hey everyone!

I am the genius behind ILITE’s website (and I finally joined Chief Delphi.) Please let me know what you think and ways I can improve the site.

http://iliterobotics.org/

Thanks! I’ve even made a Chrome extension that can harlem shake any website: https://chrome.google.com/webstore/detail/harlem-shake-the-web/ldejkceiibdbkgjfiagpjhjdadgkelib?hl=en

I hard coded it with pure CSS! Since the animations are CSS3-based, the animations itself won’t work in Internet Explorer but the panel will still flip.


.panel {
 float: left;
 width: 200px;
 height: 200px;
 margin: 20px;
 position: relative;
 font-size: .8em;
 -webkit-perspective: 600px;
 -moz-perspective: 600px;
}
.panel .front {
 float: none;
 position: absolute;
 top: 0;
 left: 0;
 z-index: 900;
 width: inherit;
 height: inherit;
 border: 1px solid #ccc;
 background: #6b7077;
 text-align: center;
 -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.9);
 -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.9);
 box-shadow: 0 1px 5px rgba(0,0,0,0.9);
 -webkit-transform: rotateX(0deg) rotateY(0deg);
 -webkit-transform-style: preserve-3d;
 -webkit-backface-visibility: hidden;
 -moz-transform: rotateX(0deg) rotateY(0deg);
 -moz-transform-style: preserve-3d;
 -moz-backface-visibility: hidden;
 -o-transition: all .4s ease-in-out;
 -ms-transition: all .4s ease-in-out;
 -moz-transition: all .4s ease-in-out;
 -webkit-transition: all .4s ease-in-out;
 transition: all .4s ease-in-out;
}
.panel.flip .front {
 z-index: 900;
 border-color: #eee;
 background: #333;
 -webkit-transform: rotateY(180deg);
 -moz-transform: rotateY(180deg);
 -moz-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
 -webkit-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
 box-shadow: 0 15px 50px rgba(0,0,0,0.2);
}
.panel .front h1 {
 line-height: 145px;
 font-size: 70px;
 color: white;
 text-shadow: 0 1px 1px rgba(0,0,0,0.7);
}
.panel .back {
 float: none;
 position: absolute;
 top: 0;
 left: 0;
 z-index: 800;
 width: inherit;
 height: inherit;
 border: 1px solid #ccc;
 /*background: #333;*/
 background: #2b2b2b url('/wp-content/themes/ilite/img/cubik.png');
 text-shadow: 1px  1px 1px rgba(0,0,0,0.6); 
 -webkit-transform: rotateY(-180deg);
 -webkit-transform-style: preserve-3d;
 -webkit-backface-visibility: hidden;
 -moz-transform: rotateY(-180deg);
 -moz-transform-style: preserve-3d;
 -moz-backface-visibility: hidden;
 -o-transition: all .4s ease-in-out;
 -ms-transition: all .4s ease-in-out;
 -moz-transition: all .4s ease-in-out;
 -webkit-transition: all .4s ease-in-out;
 transition: all .4s ease-in-out;
}
.panel.flip .back {
 z-index: 1000;
 background: #80868d;
 -webkit-transform: rotateX(0deg) rotateY(0deg);
 -moz-transform: rotateX(0deg) rotateY(0deg);
 box-shadow: 0 15px 50px rgba(0,0,0,0.2);
 -moz-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
 -webkit-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
}
.panel .pad {padding: 0 15px; }
.panel.flip .action {display: none; }


	<div class="hover panel" style="width:100%;margin:0;padding:0;">
		<div class="front" style="background-image:url(http://iliterobotics.org/wp-content/themes/ilite/img/home-span4-students.png);background-size:cover;background-position:center; "><h1>Students</h1></div>
		<div class="back">
			<div class="pad">
				<div style="text-align:center;">Students are responsible for building our robots and coming up with great ideas!<br><a href="/members/#business">Meet Our Student Members</a><a href="/get-involved/join/">Join Our Team!</a><a href="/testimonials/">Read Our Testimonials!</a></div>
			</div>
		</div>
	</div>

Hope that answers any questions that you may have.