[astronomical]

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/

Originally Posted by RyanCahoon

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

Thanks! I've even made a Chrome extension that can harlem shake any website: https://chrome.google.com/webstore/d...adgkelib?hl=en

Originally Posted by ace94x

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

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.