test commit

index.html

@@ -0,0 +1,35 @@
+  <div id="content">
+    <div id="about">
+      <h1>
+        <div style='float:left; margin-bottom:20px;'>
+          Funky S
+        </div>
+        <div class="stage">
+          <div class="pyramid3d">
+            <div class="triangle side1"></div>
+            <div class="triangle side2"></div>
+            <div class="triangle side3"></div>
+            <div class="triangle side4"></div>
+          </div>
+        </div> 
+      </h1>
+      <h3 style='clear:both' class="subhead">
+        <a href="https://plus.google.com/108495471566196018473/posts">Zach</a> is an enthusiastic, young, self-taught web applications developer currently studying at the University of Georgia.
+      </h3>
+      <p id='pleft'>
+        She does freelance work, writes for <a href="https://css-tricks.com/css-animation-tricks/">CSS</a> <a href="https://css-tricks.com/controlling-css-animations-transitions-javascript/">Tricks</a>, worked at <a href="http://deltadatasoft.com/">Delta Data Software</a> as a front-end developer, and is continuously working on personal projects to up his game.
+      </p>
+      <p id='pright'>
+        Look for some of his work &amp; experiments on <a href="https://codepen.io/Zeaklous">CodePen</a>, <a href="http://stackoverflow.com/users/2065702/zeaklous">StackOverflow</a>, <a href="https://cssdeck.com/user/Zeaklous">CSS Deck</a>, or a bit of his recent work below.
+      </p>
+      <ul>
+        <li><a href="https://cssdeck.com/labs/css-only-full-page-slider">CSS Only Full Page Slider</a></li>
+        <li><a href="https://codepen.io/Zeaklous/pen/alpEm">CSS3 Circular Questionnaire (Plugin in development)</a></li>
+        <li><a href="https://zachsaucier.com/TumblrBook.html">TumblrBook</a></li>
+      </ul>
+      <p>
+        Feel free to contact him at xxxx[at]gmail.com if you'd like for him to work for you!
+      </p>
+    </div>
+  </div>
+</div>

style.css

@@ -0,0 +1,136 @@
+/* @import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900); */
+body {
+  background-color: #141414;
+  background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEyMCc+Cgk8ZGVmcz4KCQk8cGF0dGVybiBwYXR0ZXJuVW5pdHM9J3VzZXJTcGFjZU9uVXNlJyBpZD0nYycgd2lkdGg9JzYwJyBoZWlnaHQ9JzEyMCcgeD0nMCcgeT0nMCcgdmlld0JveD0nMCAwIDUgMTAnPgoJCQk8cGF0aCBmaWxsLW9wYWNpdHk9JzAnIHN0cm9rZT0nIzI5MjkyOScgc3Ryb2tlLXdpZHRoPScwLjA5JyBkPSdNLTIsMUw3LDEwTS0yLDZMNywxNU0tMiwtNEw3LDUnLz4KCQk8L3BhdHRlcm4+CgkJPHBhdHRlcm4gcGF0dGVyblVuaXRzPSd1c2VyU3BhY2VPblVzZScgaWQ9J2MyJyB3aWR0aD0nNjAnIGhlaWdodD0nMTIwJyB4PScxMDAlJyB5PScwJyB2aWV3Qm94PScwIDAgNSAxMCc+CgkJCTxwYXRoIGZpbGwtb3BhY2l0eT0nMCcgc3Ryb2tlPScjMjkyOTI5JyBzdHJva2Utd2lkdGg9JzAuMDknIGQ9J003LDFMLTIsMTBNNyw2TC0yLDE1TTcsLTRMLTIsNScvPgoJCTwvcGF0dGVybj4KCTwvZGVmcz4KCTxyZWN0IHdpZHRoPSc1MCUnIGhlaWdodD0nMTAwJScgZmlsbD0ndXJsKCNjKScvPgoJPHJlY3QgeD0nNTAlJyB3aWR0aD0nNTAlJyBoZWlnaHQ9JzEwMCUnIGZpbGw9J3VybCgjYzIpJy8+Cjwvc3ZnPg==');
+
+    margin:0; padding:0;
+    overflow-x:hidden;
+    height:100%;
+    font-family: 'Lato', Helvetica, arial, sans-serif;
+    font-weight: 300;
+    font-size: 20px;
+    line-height: 1.45;
+    color: #eee;
+    color: rgba(255,255,255,.85);
+}
+#container { 
+    padding-top: 50px;
+}
+#content {
+    max-width: 43em;
+    padding:10px;
+    margin: 0 auto;
+}
+h1 {
+    font-size: 4.8em;
+    font-weight: 100;
+    text-transform: uppercase;
+    margin: 0;
+}
+h3 {
+    font-size: 2.4em;
+    font-weight: 300;
+    line-height: 1.5;
+}
+p, li {
+    font-size: 1.7em;
+}
+a {
+    font-weight: 700;
+    text-decoration: none;
+    color: #fff;
+}
+a:hover {
+    text-decoration: underline;
+}
+p#pleft {
+    max-width:20em;
+    float:left;
+}
+p#pright {
+    max-width:20em;
+    float:left;
+}
+ul {
+    clear:both;
+}
+
+
+html { font-size: 62.5%; }
+body { font-size: 1em;}
+
+/* PYRAMID CODE */
+.stage {
+  -webkit-transform:scale(1.85);
+  transform:scale(0.85);
+  float:right;
+  margin-right:120px;
+  margin-top:30px;
+  width:0px; height:0px;
+
+  position:relative;  
+  -webkit-perspective:1200px;
+  -webkit-perspective-origin:50% 50%;
+  perspective:1200px;
+  perspective-origin:50% 50%;
+}
+.pyramid3d {
+  position:relative;
+  width:150px;
+  height:150px;
+
+  -webkit-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+  -webkit-transform: rotateX(75deg) rotate(65deg);
+  transform: rotateX(75deg) rotate(65deg);
+  -webkit-animation: turnPyramid 10s linear infinite;
+  animation: turnPyramid 10s linear infinite;
+}
+.triangle {
+  -webkit-transform-style:preserve-3d;
+  transform-style:preserve-3d;
+  width:0; height:0;
+  background:none;
+}
+.triangle:before{
+  content:"";
+  position: absolute;
+  height: 0; width: 0;
+  border-style: solid;
+  border-width: 176px 75px 0 75px;
+}
+.side1 { -webkit-transform: translatex(0) rotatey(115.2deg) rotatez(90deg); transform: translatex(0) rotatey(115.2deg) rotatez(90deg); }
+.side2 { -webkit-transform: translatex(150px) rotatez(90deg) rotatex(64.8deg); transform: translatex(150px) rotatez(90deg) rotatex(64.8deg); }
+.side3 {  -webkit-transform: translatez(0) rotatex(64.8deg); transform: translatez(0) rotatex(64.8deg); }
+.side4 { -webkit-transform: translatey(150px) rotatex(115.2deg); transform: translatey(150px) rotatex(115.2deg); }
+.side1:before{ border-color: rgba(115, 115, 0, 0.3) transparent transparent transparent; }
+.side2:before{ border-color: rgba(20, 90, 225, 0.3) transparent transparent transparent; }
+.side3:before{ border-color: rgba(255,   0, 0, 0.3) transparent transparent transparent; } 
+.side4:before{ border-color: rgba(0, 255, 255, 0.3) transparent transparent transparent; }
+
+
+@-webkit-keyframes turnPyramid { 100% { -webkit-transform: rotateX(75deg) rotate(425deg); } }
+@keyframes turnPyramid { 100% { transform: rotateX(75deg) rotate(425deg); } }
+
+@media (max-width: 300px) {
+    html { font-size: 70%; }
+    .stage { -webkit-transform:scale(0.05); transform:scale(0.05); }
+}
+@media (max-width: 440px) {
+    h1 { line-height:55px; }    
+}
+@media (max-width: 460px) { 
+  .stage { position:absolute; top:25px; left:50%; margin-left:-45px; } 
+  h1 { margin-top:50px; text-align:center; }
+}
+@media (max-width:600px) { .stage { -webkit-transform:scale(0.55); transform:scale(0.55); margin-right:60px; } }
+@media (min-width: 600px) {
+    html { font-size: 80%; }
+    .stage { -webkit-transform:scale(0.68); transform:scale(0.68); margin-right:80px; }
+}
+@media (min-width: 880px) {
+    html { font-size: 120%; }
+    p, li { font-size: 1em; }
+    p#pright { margin-left:3em; }
+    .stage { -webkit-transform:scale(0.85); transform:scale(0.85); margin-right:120px; }
+}