From 36d33947dfefb8ee4089b9662df5702893c9d7ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fernando=20S=C3=A1nchez?= <balkian@users.noreply.github.com>
Date: Sun, 18 Aug 2013 12:44:55 -0700
Subject: [PATCH 1/5]

---
 gistfile1.txt | 118 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 118 insertions(+)
 create mode 100644 gistfile1.txt

diff --git a/gistfile1.txt b/gistfile1.txt
new file mode 100644
index 0000000..7840ecb
--- /dev/null
+++ b/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>
\ No newline at end of file

From 800271900fd982dedc0d655919f3053fb5f73d31 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fernando=20S=C3=A1nchez?= <balkian@users.noreply.github.com>
Date: Sun, 18 Aug 2013 12:45:20 -0700
Subject: [PATCH 2/5]

---
 gistfile1.txt => gistfile1.html | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename gistfile1.txt => gistfile1.html (100%)

diff --git a/gistfile1.txt b/gistfile1.html
similarity index 100%
rename from gistfile1.txt
rename to gistfile1.html

From edecc9d0d3404b57e1dc52d84e329982072a666d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fernando=20S=C3=A1nchez?= <balkian@users.noreply.github.com>
Date: Sun, 18 Aug 2013 17:25:45 -0700
Subject: [PATCH 3/5]

---
 gistfile1.html | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/gistfile1.html b/gistfile1.html
index 7840ecb..7b60255 100644
--- a/gistfile1.html
+++ b/gistfile1.html
@@ -1,13 +1,13 @@
-<div class="widget-content">
 <style media="all" type="text/css">
 #badge{
+  font-size: 12px;
   position: relative;
   width: 180px;
   height: 210px;
   margin: 0 auto;
   /*border-bottom: 10px solid black;*/
-  -webkit-transform:rotate(-4deg);
-  -moz-transform:rotate(-4deg);
+  -webkit-transform:rotate(4deg);
+  -moz-transform:rotate(4deg);
 }
 
 /* entire container, keeps perspective */
@@ -45,9 +45,9 @@
   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;
+  box-shadow: -10px 10px 5px #222;
+  -webkit-box-shadow: -10px 10px 15px #222;
+  -moz-box-shadow: -10px 10px 15px #222;
 }
 
 /* front pane, placed above back */
@@ -57,8 +57,8 @@
 
 /* back, initially hidden pane */
 .back {
-  width: 148px;
-  height: 188px;
+  width: 152px;
+  height: 190px;
   transform: rotateY(180deg);
   -webkit-transform: rotateY(180deg);
   z-index: 3;
@@ -66,9 +66,13 @@
   padding: 15px;
   padding-top: 5px;
   border: 1px gray solid;
+  color: white;
 }
 
 .back h1 {
+  font-size: 14px;
+  padding: 4px;
+  margin: 2px;
   border-bottom: 1px dashed gray;
 }
 
@@ -99,7 +103,7 @@
     <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">
+        <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 -->
@@ -114,5 +118,4 @@
             </dl>
       </div>
     </div>
-</div>
 </div>
\ No newline at end of file

From e3128685b79f9a7c371077728240a8a508afe1a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fernando=20S=C3=A1nchez?= <balkian@users.noreply.github.com>
Date: Sun, 18 Aug 2013 17:28:07 -0700
Subject: [PATCH 4/5]

---
 gistfile1.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/gistfile1.html b/gistfile1.html
index 7b60255..7c5594b 100644
--- a/gistfile1.html
+++ b/gistfile1.html
@@ -45,9 +45,9 @@
   padding: 2px;
   padding-bottom: 30px;
   background-color: black;
-  box-shadow: -10px 10px 5px #222;
-  -webkit-box-shadow: -10px 10px 15px #222;
-  -moz-box-shadow: -10px 10px 15px #222;
+  box-shadow: -10px 10px 5px #777;
+  -webkit-box-shadow: -10px 10px 15px #777;
+  -moz-box-shadow: -10px 10px 15px #777;
 }
 
 /* front pane, placed above back */

From 6c86d32c5737e362ec3cc73afbb96aeb3d6ba6e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fernando=20S=C3=A1nchez?= <balkian@users.noreply.github.com>
Date: Sun, 18 Aug 2013 17:42:30 -0700
Subject: [PATCH 5/5]

---
 gistfile1.html | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/gistfile1.html b/gistfile1.html
index 7c5594b..c7cf5dd 100644
--- a/gistfile1.html
+++ b/gistfile1.html
@@ -45,9 +45,9 @@
   padding: 2px;
   padding-bottom: 30px;
   background-color: black;
-  box-shadow: -10px 10px 5px #777;
-  -webkit-box-shadow: -10px 10px 15px #777;
-  -moz-box-shadow: -10px 10px 15px #777;
+  box-shadow: -10px 10px 5px #222;
+  -webkit-box-shadow: -10px 10px 15px #222;
+  -moz-box-shadow: -10px 10px 15px #222;
 }
 
 /* front pane, placed above back */
@@ -65,7 +65,12 @@
   text-align: center;
   padding: 15px;
   padding-top: 5px;
-  border: 1px gray solid;
+  border-style: solid;
+  border-width: 1px;
+  border-color: #333;
+  border-right-color: #555;
+  border-top-color: #555;
+
   color: white;
 }
 
@@ -103,7 +108,7 @@
     <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" />
+        <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 -->