Chief Delphi - FRC 1885: ILITE Robotics Website Launch

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/

Quote:

Originally Posted by RyanCahoon (Post 1258450)

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

Quote:

Originally Posted by ace94x (Post 1259147)

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.

Code:

.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; }

Code:

        <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.