Make the cat example more instructive

webpop · Mar 26, 2013 · 1fea628 · 1fea628
1 parent 065db80
commit 1fea628
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 4 deletions.
diff --git a/css/style.css b/css/style.css
@@ -137,8 +137,37 @@ p.lead {
 .left-col img { width: 100%; height: auto; }
 .text-right { text-align: right; }
 .text-center { text-align: center; }
-.gallery .container { margin: 72px 0; }
+.handwritten { font-family: "Cabin Sketch"; font-size: 18px; font-weight: 400; opacity: 0.9; }
+.gallery .container { margin: 72px 0; position: relative; background: rgba(0,0,0,0.1); border: 1px dashed rgba(0,0,0,0.2); }
+.gallery .cat { text-align: center; margin: 20px; }
+.gallery .cat .cat-indicator {
+  margin-top: 10px;
+}
 .gallery img { border-radius: 3px; drop-shadow: 0 0 7px rgba(0,0,0,0.5); }
+.gallery .pinned-indicator {
+  position: relative;
+  top: 60px;
+  margin-top: -50px;
+  text-align: center;
+}
+.gallery .container-indicator {
+  position: absolute;
+  bottom: 50%;
+  right: -100px;
+  -webkit-transform: rotate(90deg);
+     -moz-transform: rotate(90deg);
+      -ms-transform: rotate(90deg);
+          transform: rotate(90deg);
+}
+.panel {
+  background: rgba(255,255,255,0.2);
+  padding: 20px;
+  margin-top: 20px;
+  margin-right: 20px;
+}
+.panel h4 {
+  margin-top: 0;
+}
 .left-nav .left-col { width: 20%; }
 .left-nav .right-col { width: 80%; }
 .left-nav .nav {
@@ -181,6 +210,8 @@ p.lead {
 .social li { margin: 5px 0 5px; }
 .social span { display: none; }
 
+.relative { position: relative; }
+
 small { font-size: 13px; }
 
 @media all and (max-width: 1135px) {

diff --git a/index.html b/index.html
@@ -9,6 +9,7 @@
     <link href='http://fonts.googleapis.com/css?family=Alfa+Slab+One' rel='stylesheet'>
     <link href='http://fonts.googleapis.com/css?family=Neuton:400,700,400italic' rel='stylesheet'>
     <link href='http://fonts.googleapis.com/css?family=Anonymous+Pro' rel='stylesheet'>
+    <link href='http://fonts.googleapis.com/css?family=Cabin+Sketch' rel='stylesheet' type='text/css'>
     <link href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
     <link href="css/style.css" rel="stylesheet">
 
@@ -70,14 +71,21 @@ <h2>Great for Kittens</h2>
         <div class="container clearfix">
           <div class="row">
             <div class="left-col">
-              <img src="http://lorempixel.com/700/800/cats" width="700" height="800"/>
+              <figure class="cat">
+                <img src="http://lorempixel.com/700/800/cats" width="700" height="800"/>
+                <div class="handwritten cat-indicator"><i class="icon-hand-up"></i> This is a cat</div>
+              </figure>              
             </div>
             <div class="right-col">
               <div class="pinned">
-                <h4>Its a cat!</h4>
-                <p>This description hangs around</p>
+                <div class="panel">
+                  <h4>Its a cat!</h4>
+                  <p>This description hangs around</p>
+                </div>
+                <div class="handwritten pinned-indicator"><i class="icon-hand-up"></i> This is pinned</div>
               </div>
             </div>
+            <div class="handwritten container-indicator">This is a container <i class="icon-hand-down"></i></div>
           </div>
         </div>