Permalink
Browse files

example pages

  • Loading branch information...
thomaspark committed Feb 13, 2012
1 parent 276df9f commit 0e334449b05ce4249b8b822c7b78dcd5f7802fe9
Showing with 434 additions and 0 deletions.
  1. +94 −0 examples/abixom.10.html
  2. +27 −0 examples/acakas.7.html
  3. +151 −0 examples/imabew.8.html
  4. +23 −0 examples/ucaqin.html
  5. +62 −0 examples/umufok.6.html
  6. +77 −0 examples/uxodik.2.html
View
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset=utf-8 />
+ <title>My Title</title>
+ <style>
+/* from http://css3.bradshawenterprises.com/flip/ */
+
+#f1_container {
+ position: relative;
+ margin: 10px auto;
+ width: 450px;
+ height: 281px;
+ z-index: 1;
+ }
+ .face.back {
+ display: none;
+ }
+
+ #f1_container {
+ -webkit-perspective: 1000;
+ }
+ #f1_card {
+ width: 100%;
+ height: 100%;
+ -webkit-transform-style: preserve-3d;
+ -webkit-transition: all 1.0s linear;
+ -moz-transform-style: preserve-3d;
+ -moz-transition: all 1.0s linear;
+ -o-transform-style: preserve-3d;
+ -o-transition: all 1.0s linear;
+ -ms-transform-style: preserve-3d;
+ -ms-transition: all 1.0s linear;
+ transform-style: preserve-3d;
+ transition: all 1.0s linear;
+ }
+ #f1_container:hover #f1_card, #f1_container.hover_effect #f1_card {
+ -webkit-transform: rotateY(180deg);
+ -moz-transform: rotateY(180deg);
+ -o-transform: rotateY(180deg);
+ -ms-transform: rotateY(180deg);
+ transform: rotateY(180deg);
+
+ -webkit-box-shadow: -5px 5px 5px #aaa;
+ -moz-box-shadow: -5px 5px 5px #aaa;
+ box-shadow: -5px 5px 5px #aaa;
+ }
+ .face {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ -webkit-backface-visibility: hidden;
+ -moz-backface-visibility: hidden;
+ -o-backface-visibility: hidden;
+ -ms-backface-visibility: hidden;
+ backface-visibility: hidden;
+ }
+ .face.back {
+ display: block;
+ -webkit-transform: rotateY(180deg);
+ -webkit-box-sizing: border-box;
+ -moz-transform: rotateY(180deg);
+ -moz-box-sizing: border-box;
+ -o-transform: rotateY(180deg);
+ -o-box-sizing: border-box;
+ -ms-transform: rotateY(180deg);
+ -ms-box-sizing: border-box;
+ transform: rotateY(180deg);
+ box-sizing: border-box;
+ padding: 10px;
+ color: white;
+ text-align: center;
+ background-color: #aaa;
+ }
+</style>
+</head>
+ <body>
+
+
+ <div id="f1_container">
+ <div id="f1_card" class="shadow">
+ <div class="front face">
+ <img src="https://www.google.com/logos/2012/dickens-2012-HP.jpg"/>
+ </div>
+ <div class="back face center">
+ <p>This is nice for exposing more information about an image.</p>
+ <p>Any content can go here.</p>
+ </div>
+ </div>
+ </div>
+
+
+ </body>
+</html>
View
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset=utf-8 />
+ <title>My Title</title>
+ <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script type="text/javascript">
+ $(document).ready(function() {
+ $("h1").click(function() {
+ alert("Hello world!");
+ });
+ });
+ </script>
+ <style>
+h1 {
+ font-size: 60px;
+ font-weight: bold;
+ font-family: Helvetica, Arial, sans-serif;
+ text-align: center;
+ color: blue;
+}
+</style>
+</head>
+ <body>
+ <h1>Click Me!</h1>
+ </body>
+</html>
View
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset=utf-8 />
+ <title>My Title</title>
+ <style>
+/* courtesy of http://ajaxian.com/archives/star-wars-html-and-css-a-new-hope */
+
+@font-face {
+ font-family: FGB;
+ src: url("/experiments/frabk.ttf") format("truetype");
+}
+
+body {
+ background:black url("http://csstarwars.s3.amazonaws.com/background.png");
+}
+
+
+#stage {
+ height:600px;
+ width:1000px;
+ overflow:hidden;
+ margin: 0 auto;
+ -webkit-perspective:800;
+ -webkit-perspective-origin:center 300px;
+}
+
+#far-far-away {
+ color:rgb(75,213,238);
+ font-family:FGB, sans-serif;
+ font-size:48px;
+ line-height:1.5;
+ position:absolute;
+ top:200px;
+ left:190px;
+ opacity:0;
+ -webkit-animation:fade-in-out 6s linear;
+ -webkit-animation-iteration-count: 1;
+ -webkit-animation-delay:5s;
+}
+
+
+@-webkit-keyframes fade-in-out {
+ 0% { opacity:0; }
+ 16% { opacity:1; }
+ 84% { opacity:1; }
+ 100% { opacity:0; }
+}
+
+
+@-webkit-keyframes logo {
+ 0% { -webkit-transform: translateZ(0); opacity:1;}
+ 50% { -webkit-transform: translateZ(-50000px); opacity:1; }
+ 60% { -webkit-transform: translateZ(-60000px); opacity:0; }
+ 100% { -webkit-transform: translateZ(-100000px); opacity:0;}
+}
+
+/* few lines after, img is the only logo image */
+img {
+ opacity:0;
+ position:absolute;
+ top:100px;
+ width:1000px;
+ -webkit-transform-origin:center center;
+ /* above custom logo animation */
+ -webkit-animation:logo 25s linear;
+ -webkit-animation-iteration-count: 1;
+ /* suspance before the logo ... */
+ -webkit-animation-delay: 12s;
+ /* logo appears slower and fly away faster */
+ -webkit-animation-timing-function: ease-in;
+}
+
+/* custom crawl FX */
+@-webkit-keyframes crawl {
+ /* axis management until it disappears */
+ 0% { -webkit-transform:rotateX(80deg) translateZ(300px) translateY(1100px);opacity:1;}
+ 40% { -webkit-transform:rotateX(80deg) translateZ(300px) translateY(-340px);opacity:1;}
+ 80% { -webkit-transform:rotateX(80deg) translateZ(300px) translateY(-1780px);opacity:0;}
+ 100% { -webkit-transform:rotateX(80deg) translateZ(300px) translateY(-2500px);opacity:0;}
+}
+
+#crawl {
+ color:rgb(252,223,43);
+ font-family:FGD, sans-serif;
+ text-align:center;
+ font-size:36px;
+ opacity:0;
+ /* long animation */
+ -webkit-animation:crawl 120s linear;
+ /* again just once */
+ -webkit-animation-iteration-count: 1;
+ /* starting while the logo is still there */
+ -webkit-animation-delay:16s;
+ /* preserving 3D aspect for the entire animation */
+ -webkit-transform-style:preserve-3d;
+}
+
+#crawl p.title {
+ font-family:FGDC, sans-serif;
+ /* it's a title */
+ text-transform:uppercase;
+ /* it's massive */
+ font-size:96px;
+ /* but scaled to fit inside margins */
+ -webkit-transform:scaleX(0.6);
+}
+
+#crawl p {
+ /* preserve spaces */
+ white-space:pre;
+}
+</style>
+</head>
+ <body>
+<div id="stage">
+ <img src="http://csstarwars.s3.amazonaws.com/starwars-logo.png" alt="Star Wars" />
+
+
+ <p id="far-far-away">
+ A long time ago in a galaxy far,<br/>far away. . . .
+ </p>
+
+ <div id="crawl">
+ <p class="episode">Episode IV</p>
+ <p class="title">A New Hope</p>
+<p>It is a period of civil war.
+Rebel spaceships, striking
+from a hidden base, have won
+their first victory against
+the evil Galactic Empire.</p>
+
+<p>During the battle, Rebel
+spies managed to steal secret
+plans to the Empire&#8217;s
+ultimate weapon, the DEATH
+STAR, an armored space
+station with enough power
+to destroy an entire planet. </p>
+
+<p>Pursued by the Empire&#8217;s
+sinister agents, Princess
+Leia races home aboard her
+starship, custodian of the
+stolen plans that can save her
+people and restore
+freedom to the galaxy. . . .</p>
+ </div>
+ </div>
+ </body>
+</html>
View
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset=utf-8 />
+ <title>Photo</title>
+ <style>
+body {
+ background-color: black;
+ text-align: center;
+}
+
+img {
+ margin-top: 100px;
+ -webkit-border-radius: 40px;
+ -moz-border-radius: 40px;
+ border-radius: 40px;
+}
+</style>
+</head>
+ <body>
+ <a href="http://www.flickr.com/photos/speedygroundhog/6438661375/"><img src="http://farm8.staticflickr.com/7018/6438661375_904ca1c1ca.jpg"></a>
+ </body>
+</html>
View
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset=utf-8 />
+ <title>My Title</title>
+ <link href='http://fonts.googleapis.com/css?family=Aladin' rel='stylesheet' type='text/css'>
+ <link href='http://fonts.googleapis.com/css?family=Lemon' rel='stylesheet' type='text/css'>
+ <link href='http://fonts.googleapis.com/css?family=Ribeye' rel='stylesheet' type='text/css'>
+ <link href='http://fonts.googleapis.com/css?family=Ribeye+Marrow' rel='stylesheet' type='text/css'>
+ <link href='http://fonts.googleapis.com/css?family=Butcherman+Caps' rel='stylesheet' type='text/css'><style>
+body {
+ font-size: 30px;
+ font-weight: bold;
+ font-family: Helvetica, Arial, sans-serif;
+ text-align: center;
+}
+
+p:nth-child(2) {
+ font-family: 'Lemon', cursive;
+ color: red;
+}
+
+p:nth-child(3) {
+ background: black;
+ font: 30px/160% futura, serif;
+ box-shadow: 5px 5px 5px rgba(0,0,0,0.8);
+ color: #fff;
+ border: 1px solid red;
+ border-radius: 20px;
+ border: 3px double #ccc;
+ letter-spacing: -1px;
+ padding: 30px;
+ width: 200px;
+ text-align: right;
+}
+
+p:nth-child(4) {
+ font-family: 'Ribeye Marrow', cursive;
+ color: yellow;
+}
+
+p:nth-child(5) {
+ font-family: 'Aladin', cursive;
+ color: green;
+}
+
+p:nth-child(6) {
+ font-family: 'Butcherman Caps', cursive;
+ color: blue;
+}
+</style>
+</head>
+ <body>
+ <p>Grumpy wizards make toxic brew for the evil Queen and Jack.</p>
+ <p>Grumpy wizards make toxic brew for the evil Queen and Jack.</p>
+ <p>Grumpy wizards make toxic brew for the evil Queen and Jack.</p>
+ <p>Grumpy wizards make toxic brew for the evil Queen and Jack.</p>
+ <p>Grumpy wizards make toxic brew for the evil Queen and Jack.</p>
+ <p>Grumpy wizards make toxic brew for the evil Queen and Jack.</p>
+ <a href="http://www.google.com">test</a>
+ </body>
+</html>
Oops, something went wrong.

0 comments on commit 0e33444

Please sign in to comment.