gistfile1.txt

@@ -0,0 +1,118 @@
+<div class="widget-content">
+<style media="all" type="text/css">
+#badge{
+  position: relative;
+  width: 180px;
+  height: 210px;
+  margin: 0 auto;
+  /*border-bottom: 10px solid black;*/
+  -webkit-transform:rotate(-4deg);
+  -moz-transform:rotate(-4deg);
+}
+
+/* entire container, keeps perspective */
+.flip-container {
+  perspective: 1000;
+  -webkit-perspective: 1000;
+}
+/* flip the pane when hovered */
+.flip-container:hover .flipper, .flip-container.hover .flipper {
+  transform: rotateY(180deg);
+  -webkit-transform: rotateY(180deg);
+}
+
+.flip-container, .front, .back {
+  width: 180px;
+  height: 180px;
+}
+
+/* flip speed goes here */
+.flipper {
+  transition: 0.8s;
+  transform-style: preserve-3d;
+  -webkit-transform-style: preserve-3d;
+
+  position: relative;
+}
+
+/* hide back of pane during swap */
+.front, .back {
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 2px;
+  padding-bottom: 30px;
+  background-color: black;
+  box-shadow: -5px 5px 5px #555;
+  -webkit-box-shadow: -5px 5px 15px #555;
+  -moz-box-shadow: -5px 5px 15px #555;
+}
+
+/* front pane, placed above back */
+.front {
+  z-index: 4;
+}
+
+/* back, initially hidden pane */
+.back {
+  width: 148px;
+  height: 188px;
+  transform: rotateY(180deg);
+  -webkit-transform: rotateY(180deg);
+  z-index: 3;
+  text-align: center;
+  padding: 15px;
+  padding-top: 5px;
+  border: 1px gray solid;
+}
+
+.back h1 {
+  border-bottom: 1px dashed gray;
+}
+
+.back dl {
+  text-align: left;
+}
+
+.sticky:before {
+  content: "";
+  height: 20px;
+  width: 80px;
+  background: rgba(255,255,255,0.5);
+  position: absolute;
+  
+  -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
+     -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
+          box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
+  top: 0;
+  left: 50%;
+  margin: -8px 0 0 -40px;
+  z-index: 5;
+}
+
+
+</style>
+
+<div ontouchstart="this.classList.toggle('hover');" class="flip-container" id="badge">
+    <div class="flipper">
+      <div class="front">
+        <!-- front content -->
+        <img width="180" height="180" src="http://1.bp.blogspot.com/-u19-E3_AuGI/UIH9pgHT0VI/AAAAAAAAAFg/NFwtLZUOF24/s1600/Homer-Mr+X1.jpg" class="sticky" id="avatar">
+      </div>
+      <div class="back">
+        <!-- back content -->
+          <h1>Experto en LTE</h1>
+            <dl>
+                <dt>Nombre:</dt>
+                <dd> Mr X</dd>
+                <dt>Ocupación:</dt>
+                <dd>Experto en LTE</dd>
+                <dt>Sexo:</dt>
+                <dd>Sí, por favor</dd>
+            </dl>
+      </div>
+    </div>
+</div>
+</div>